Nav Bar Align Min-Width CSS

Question

Hello Id like Some help with getting my navbar to properly scale (EX. Min-width 800px???). Also I'm not sure if i have the phone number div set up properly but id like to have some space in between the phone number and the links in the navbar. this is my first attempt at something like this so any help would be appreciated, thank you.

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>

Answer 1

Corrected the code Please check it satisfy you needs.

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>

Nav Bar Align Min-Width CSS

Question

1 answers

solution1
0 2013-12-13 09:17:05

Nav Bar Align Min-Width CSS

Question

1 answers

solution1 0 2013-12-13 09:17:05

solution1
0 2013-12-13 09:17:05