Показано с 1 по 5 из 5

Тема: Логотип

  1. #1
    Платный участник
    Регистрация
    25.02.2014
    Сообщений
    5

    Логотип

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

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

  2. #2
    Администратор Аватар для 9seo
    Регистрация
    17.02.2014
    Сообщений
    148
    Думаю, сможем помочь тебе в этом вопросе, но нужен код, а еще лучше сам документ.

  3. #3
    Платный участник
    Регистрация
    25.02.2014
    Сообщений
    5
    Цитата Сообщение от 9seo Посмотреть сообщение
    Думаю, сможем помочь тебе в этом вопросе, но нужен код, а еще лучше сам документ.
    Код 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;
    }

  4. #4
    Участник
    Регистрация
    25.02.2014
    Сообщений
    11
    У тебя выравнивание сделано с помощью абсолютного позиционирования и отступов (top, left). Все можно сделать гораздо проще, с помощью 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>

  5. #5
    Платный участник
    Регистрация
    25.02.2014
    Сообщений
    5
    Спасибо. Получилось

Ваши права

  • Вы не можете создавать новые темы
  • Вы не можете отвечать в темах
  • Вы не можете прикреплять вложения
  • Вы не можете редактировать свои сообщения
  •