Предел для содержания - безопасная область

Я пытаюсь создать веб-сайт. Seted на 1024px предел с помощью:Предел для содержания - безопасная область

body { 
    width:1024px; 
    margin:0 auto; 
}

И моя страница выглядит следующим образом:

Но, на самом деле, моя страница должна выглядеть следующим образом:

Ты видишь? Навигационная панель?

Что мне нужно сделать, чтобы получить мой полный навигатор даже с ограничениями ширины содержания?

О, я использую материализовать рамки, чтобы сделать веб-сайт и, очевидно, нав-бар: http://materializecss.com/navbar.html

источник

2015-09-10 Igor

Пожалуйста, подумайте над добавлением фрагмента рабочего кода, где люди могут воспроизвести проблему. Эти фотографии не являются информативными, нам нужен код. – halfzebra

Я понял! Thx для всех =) – Igor

Не дать телу установленной ширину !!!

Поскольку тело установлено на 1024px, каждый элемент в теле будет начинаться с его края ... Вы должны установить ширину элементов в теле, что позволит вам полностью управлять макетом.

Ваш заголовок и навигация должны быть полноэкранными, поэтому они должны иметь ширину 100%.

Элементы под заголовком затем могут быть установлены и применяются поля, соответствующие вашим идеям.

<!doctype html> 
<html> 
<head> 
<meta charset="utf-8"> 
<title>my site</title> 
</head> 

<body> 

<div class="set-width"></div> 

</body> 
</html>

источник

2015-09-10 09:41:27 Aaron

Так я должен установить в стилях что-то вроде:

 set-width { width:1024px; 
margin:0 auto;}

, а затем сделать код NavBar, как это?

<div class="navbar-fixed"> 
    <nav> 
    <div class="nav-wrapper white"><div class="set-width"> 
     <a href="#" class="brand-logo center"><h5 class="center-align"><img src="Logo.png"></h5></a> 
     <ul id="nav-mobile" class="left hide-on-med-and-down"> 
     <li><a href="conta.html"><h5 class="center-align"><img class="responsive-img" src="http://feely.com.br/teste/Avatar.png"></h5></a></li> 
     <li><a href="conta.html"></h5><span class="grey-text text-darken-4">OLÁ, USUÁRIO!</span></a></li> 
     </ul> 
     <ul id="nav-mobile" class="right hide-on-med-and-down"> 
     <li><a href="carrinho.html"><span class="grey-text text-darken-4"><i class="material-icons">shopping_cart</i></span></a></li> 
     <li><a href="buscar.html"><span class="grey-text text-darken-4"><i class="material-icons">search</i></span></a></li></div> 
     </ul> 
    </div> 
    </nav> 
</div>

источник

2015-09-10 09:53:51 Igor

Предел для содержания - безопасная область

ответ

Смежные вопросы