PDA

Просмотр полной версии : Логотип



Dread
03.03.2014, 20:52
Здравствуйте. Поискал тему, но так и не нашел, если что заранее прошу прощения.
Совсем недавно столкнулся с такой проблемой:

Есть фон, в браузере располагается по центру документа, при наложении на фон логотипа он встает нормально, но при масштабировании окна браузера(увеличение/уменьшение) логотип начинает "ездить" по фону влево/вправо, а мне надо его зафиксировать чисто по центру фона, чтобы не съезжал даже при изменении масштаба, уже 2 дня пытаюсь найти что-нибудь из этой оперы

9seo
04.03.2014, 03:13
Думаю, сможем помочь тебе в этом вопросе, но нужен код, а еще лучше сам документ.

Dread
04.03.2014, 09:37
Думаю, сможем помочь тебе в этом вопросе, но нужен код, а еще лучше сам документ.

Код 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;
}

Fox
04.03.2014, 11:41
У тебя выравнивание сделано с помощью абсолютного позиционирования и отступов (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>

Dread
04.03.2014, 13:07
Спасибо. Получилось :)