Просмотр полной версии : Логотип
Здравствуйте. Поискал тему, но так и не нашел, если что заранее прошу прощения.
Совсем недавно столкнулся с такой проблемой:
Есть фон, в браузере располагается по центру документа, при наложении на фон логотипа он встает нормально, но при масштабировании окна браузера(увеличение/уменьшение) логотип начинает "ездить" по фону влево/вправо, а мне надо его зафиксировать чисто по центру фона, чтобы не съезжал даже при изменении масштаба, уже 2 дня пытаюсь найти что-нибудь из этой оперы
Думаю, сможем помочь тебе в этом вопросе, но нужен код, а еще лучше сам документ.
Думаю, сможем помочь тебе в этом вопросе, но нужен код, а еще лучше сам документ.
Код HTML
<div id="logo"><noindex><a rel="nofollow" href="http://site.ru/" title="На главную" class="main-logo" style="text-decoration: line-through !important;">
</a>
<div id="slogan"><img src="site.ru/logo.png" alt="123456789"></div>
</noindex>
</div>
Код CSS
.header {
min-height:140px;
position:relative;
padding-left:28px;
margin-top: 6px;
background: #fff 100% 0 repeat-y;
}
.main-logo {
width: 575px;
height: 85px;
display: block;
padding: 25px 0 0 105px;
background: url(logo.png) 0 -22% no-repeat;
}
#logo {
position: absolute;
text-align: center;
top: 36px;
left: 200px;
}
#slogan {
position: absolute;
top: 22px;
left: 365px;
}
У тебя выравнивание сделано с помощью абсолютного позиционирования и отступов (top, left). Все можно сделать гораздо проще (http://www.umade.ru/log/2009/06/css-image-align-center/), с помощью margin: 0 auto и display: block. Вот изменил немного твой код:
.header {
min-height:140px;
padding-left:28px;
margin-top: 6px;
background: #fff 100% 0 repeat-y;
}
.main-logo {
width: 575px;
height: 85px;
display: block;
padding: 25px 0 0 105px;
background: url(logo.png) 0 -22% no-repeat;
}
.center-logo {
display: block;
margin: 0 auto;
}
<div id="logo"><noindex><a rel="nofollow" href="http://site.ru/" title="На главную" class="main-logo" style="text-decoration: line-through !important;">
</a>
<img class="center-logo" src="http://flyosity.com/images/_blogentries/networkicon/step2.png" alt="123456789">
</noindex>
</div>
Powered by vBulletin® Version 4.2.5 Copyright © 2024 vBulletin Solutions Inc. All rights reserved. Перевод: zCarot