Задать вопрос
@icharts
html

Как решить проблемы при верстке элементов с шириной 100%?

Собственно, при верстке элементов с шириной 100% возникают проблемы, на скрине все видно, как решить проблему?

Вот скрин проблемы
oi57.tinypic.com/2s61nxv.jpg

<body>
    <header class="header">
        <div class="top_navigation">
            <div class="topnav_inner">
                <nav class="navigation">
                    <li><a class="active" href="/">Home</a></li>
                    <li><a href="/">Blog</a></li>
                    <li><a href="/">About us</a></li>
                    <li><a href="/">Chat</a></li>
                    <li><a href="/">Forum</a></li>
                </nav>
            </div> 
        </div>
        
        <div class="logobg">
            <div class="logo_inner">
                <div class="logo"><a href="/"></a></div>
            </div>
        </div>
    </header>
</body>


.top_navigation {

    height: 35px;
    background: #34160c;
   z-index: 9999;
    display: block;
   
    
}

.topnav_inner {

    margin: 0 auto;
    width: 778px;
    height: 35px;
    
}

.navigation {

    margin-left: 130px;
}

.navigation > li {

    font: 13px Trebuchet MS;
    float: left;
    margin: 0 5px;
    line-height: 35px;
    list-style: none;
    font-weight: bold;
    text-transform: uppercase;
    
}

.navigation > li > a {

    color: #fff;
    padding: 5px 10px;
    border-radius: 4px; 
    text-decoration: none;
}

.navigation > li > a:hover, .navigation > li > a.active  {

    background: #ff6600;
}

.logobg {
    height: 150px;
    background:  #fff8f0;
    width: 100%;
}

.logo_inner {

    margin: 0 auto;
    height: 150px;
    width: 778px;
    background: url(../img/logobg.jpg) no-repeat;
    
}

.logo {

    width: 378px;
    height: 128px;
    background-image:  url(../img/logo.png);
    background-repeat: no-repeat;
    
    bottom: 0px;
    
}
  • Вопрос задан
  • 4214 просмотров
Комментировать
Подписаться 4 Оценить Комментировать
Решения вопроса 1
@IoannGrozny
Front-end разработчик
для body необходимо задавать минимальную ширину({min-width: ...}), равную ширине/минимальной ширине вашего лейаута. Данная вами ситуация возникла из-за того, что ширина body меньше ширины вашего хедэра. Оттуда и белая полоса слева(горизонтальный скролл неизбежен).
Ответ написан
Комментировать
Комментировать
Пригласить эксперта
Ответы на вопрос 4
shiza36
@shiza36
body { overflow-x: hidden; } :)
заливайте лучше на jsfiddle.net
Ответ написан
Комментировать
Комментировать
Nedbow
@Nedbow
Мне кажется, так будет правильней:

Код HTML/CSS
<body>
    <header class="header">
        <div class="top_navigation"> <!-- Зачем див с классом top_navigation, если дальше есть класс navigation ? -->
                <nav class="navigation">
                    <li><a class="active" href="/">Home</a></li>
                    <li><a href="/">Blog</a></li>
                    <li><a href="/">About us</a></li>
                    <li><a href="/">Chat</a></li>
                    <li><a href="/">Forum</a></li>
                </nav>
        </div>
        
        <div class="logobg">
            <div class="logo_inner">
                <div class="logo"><a href="/"></a></div>
            </div>
        </div>
    </header>
</body>


html, body, div {
	margin: 0;
	padding: 0;
}

body {
	min-width: 100%;
	min-height: 100%;
}

.top_navigation {
    height: 35px;
    background: #34160c;
    display: block;
}

nav {
    margin: 0 auto;
    width: 600px;
}

nav > li {
    font: 13px Trebuchet MS;
    float: left;
    margin: 0 5px;
    line-height: 35px;
    list-style: none;
    font-weight: bold;
    text-transform: uppercase;
}

nav > li > a {
    color: #fff;
    padding: 5px 10px;
    border-radius: 4px; 
    text-decoration: none;
}

.navigation > li > a:hover, .navigation > li > a.active  {
    background: #ff6600;
}

.logobg {
    width: 600px;
    height: 150px;
    background:  #fff8f0;
    background: url(../img/logobg.jpg) no-repeat;
    margin: 0 auto;
}

.logo {

    width: 378px;
    height: 128px;
    background-image:  url(../img/logo.png);
    background-repeat: no-repeat;
}



Я показал основные принципы, дальше уже думайте сами, полностью вылизывать код не стал. Ваша ошибка: вы делаете много лишних(topnav_inner, logo_inner) оберток для дивов, и сами в них путаетесь. Естественно, "родители" резиновые, а вложенные блоки фиксированной ширины, отсюда и будет проблема как на скриншоте, после того, как окно браузера уменьшить до 778px по ширине.

z-index:9999 у вас там вообще лишний в css, он используется только для position: fixed, relative, absolute
Ответ написан
Комментировать
Комментировать
iiil
@iiil
Инженер и вэб-дизайнер, рисую.
jsfiddle.net/iiil/8L9GY/3
Объясните, что не так? Все ведет себя ровно так, как задумано. Откуда у Вас там полоса белая - не понимаю. Попробуйте поменять ширину окна, все ок.
Ответ написан
5 комментариев
5 комментариев
@someden
body {min-width:778px}
Или
.header {min-width:778px}
Ответ написан
Комментировать
Комментировать
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Похожие вопросы
Вакансии с Хабр Карьеры
Fullstack Developer под Wordpress
Future Search
от 90 000 до 150 000 ₽
JavaScript FullStack разработчик
Rocket • Смоленск
от 80 000 до 130 000 ₽
CRM Bitrix24 разработчик
World Vision Clinic • Москва
от 170 000 ₽
Ещё вакансии
Заказы с Хабр Фриланса
Сделать js-модуль для Тильды
23 дек. 2024, в 14:47
4500 руб./за проект
Телеграм бот для автоматизации генерации текста с ChatGPT-o1
23 дек. 2024, в 14:26
5000 руб./за проект
Elevenlabs генерация голоса
23 дек. 2024, в 14:10
10000 руб./за проект
Ещё заказы