Nav Bar Выровнять минимальную ширину CSS

Hello Id like Some help with the my navbar для правильного масштабирования (EX. Min-width 800px ???). Кроме того, я не уверен, что я правильно настроил номер телефона, но id хотел бы иметь некоторое пространство между номером телефона и ссылками на навигационной панели. это моя первая попытка в чем-то подобном, поэтому любая помощь будет оценена, спасибо.Nav Bar Выровнять минимальную ширину CSS

CSS

<style type="text/css"> 
html, body { 
padding: 0; 
margin: 0; 
} 
#navbar { 
background:#212221 repeat-x; 
height:25px; 
color:#FFF; 
padding:px 0px 0px 20px; 
} 
#nav { 
background:#212221 repeat-x; 
width: auto; 
float: left; 
font-size:14px; 
font-family:GeosansLight; 
margin: 0 0 3em 0px; 
margin-left:500px; 
padding: 0; 
list-style: none; 
min-width:700px; 
} 
#nav li { 
float: left; 
    } 
#nav li a { 
    display: block; 
    padding: 3px 10px; 
    text-decoration: none; 
    color: #fff; 
} 
#nav li a:hover { 
text-decoration: underline; 
color:#FFF;} 
#number { 
background:#212221 repeat-x; 
width: auto; 
float:left; 
font-size:16px; 
font-family:GeosansLight; 
margin: 0 0 3em 0px; 
margin-top:3px; 
margin-left:200px; 
padding:0; 
list-style: none; 
} 

#number li { 
float: left; 
    } 
#number a { 
    display: block; 
    padding: 0px 10px; 
    text-decoration: none; 
    color: #fff; 
} 
#header { 
background:#FFF repeat-x; 
height:80px; 
color:#FFF; 
padding:0px 0px 0px 0px; 
} 

</style> 

HTML 

<body> 
<div id="navbar"> 
<ul id="nav"> 
<li><a href="/index.html">HOME</a></li> 
<li><a href="/about.html">ABOUT US</a></li> 
<li><a href="/gallery.html">GALLERY</a></li> 
<li><a href="/faq.html">FAQs</a></li> 
<li><a href="/contact.html">CONTACT</a></li> 
</ul> 
<div id="number"> 
<a>951-226-5620</a> 
</div> 
<div class="header"> 
<img src="images/kingstudlogo.png"/> 
</div> 
</body>

источник

2013-12-09 Nate8384

Можете ли вы быть конкретными, Как Nav выглядит? Есть ли ссылки, расположенные в центре или слева? Сколько интервалов необходимо? Предоставление изображения на навигаторе с блоками очень доступно. – Akhil

вот ссылка на картинку, на которую похож навигатор. я добрался так далеко. http://www.theatermonster.com/exchange/navbar.png – Nate8384

есть также изображение заголовка? где это нужно разместить? – Akhil

Исправленный код Пожалуйста, проверьте его удовлетворить вас потребности.

CSS

html, body { 
    margin: 0; 
    padding: 0; 
} 
#navbar { 
    background: none repeat-x scroll 0 0 #212221; 
    color: #FFFFFF; 
    height: 25px; 
} 
#nav { 
    background: none repeat-x scroll 0 0 #212221; 
    float: left; 
    font-family: GeosansLight; 
    font-size: 14px; 
    list-style: none outside none; 
    margin: 0 0 0 319px; 
    min-width: 481px; 
    padding: 0; 
    width: auto; 
} 
#nav li { 
    float: left; 
} 
#nav li a { 
    color: #FFFFFF; 
    display: block; 
    padding: 3px 10px; 
    text-decoration: none; 
} 
#nav li a:hover { 
    color: #FFFFFF; 
    text-decoration: underline; 
} 
#number { 
    background: none repeat-x scroll 0 0 #212221; 
    float: left; 
    font-family: GeosansLight; 
    font-size: 16px; 
    list-style: none outside none; 
    margin: 3px 0 0 200px; 
    padding: 0; 
    width: auto; 
} 
#number li { 
    float: left; 
} 
#number a { 
    color: #FFFFFF; 
    display: block; 
    padding: 0 10px; 
    text-decoration: none; 
} 
.header { 
    background: none repeat-x scroll 0 0 #FFFFFF; 
    color: #FFFFFF; 
    height: 80px; 
    padding: 0 0 0 330px; 
}

HTML

<div id="navbar"> 
    <ul id="nav"> 
     <li><a href="/index.html">HOME</a></li> 
     <li><a href="/about.html">ABOUT US</a></li> 
     <li><a href="/gallery.html">GALLERY</a></li> 
     <li><a href="/faq.html">FAQs</a></li> 
     <li><a href="/contact.html">CONTACT</a></li> 
    </ul> 
    <div id="number"> 
     <a>951-226-5620</a> 
    </div> 
</div> 
<div class="header"> 
    <img src="images/kingstudlogo.png"/> 
</div>

источник

2013-12-13 09:17:05 Akhil

Nav Bar Выровнять минимальную ширину CSS

ответ

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