JOIN DEVPPL

It looks like you are new here. If you want to get involved, click on Join below!



Make <nav> bar page width


M

keyboard_arrow_up
0
keyboard_arrow_down


First Post Mark as Spam maltepeter
Posts: 2 - Registered: 2011-08-10 09:59:02

Hello, I am working on a webpage for my grandfather's charity. Everything has been going fine. Except one thing: I can't get the width of the <nav> bar to automatically become the width of the page. I use a dual monitor setup(15" MacBook Pro 1440x900 and a 23" Acer 1920x1080).

Here is the screen shot on acer monitor:
http://flic.kr/p/abNdyG

Here is the screen shot on MBP monitor:
http://flic.kr/p/abKoiP

I would like it to look like the MBP screenshot on every monitor, if possible.

Here is my code:

<html>
<head><title>Foundation for Haitians</title></head>

<style type="text/css">

body{
background-color: black;
}
header
{
padding-left: 10px;
padding-top: 10px;
/*background-image:url(heading1.jpg); */
background-color: black;
font-family: fantasy, sans-serif;
color:beige;
font-size:36;
height:120px;

}

nav
{

margin-top: 10px;
font-size: 16;
width: 1400;
float:right;
background-color: black;
padding: 10px 10px 10px 10px;
display: -webkit-box;
border: 2px solid beige;
-webkit-box-direction: horizontal;
-webkit-border-radius: 6px;
color: white;
margin-bottom: 0px;
}

nav a
{

font-family: fantasy;
display: block;
-webkit-box-flex: 1;
text-align: center;
-webkit-transition: all .5s linear;
}

nav a:hover
{
color:red;
}


a:link{ color:white;}



p{
color:beige;
font-size: 26;
font-family: fantasy;
margin-top: 200px;
}

</style>

<header>Foundations for Haitians

<br>

<nav>
<a href="home.html" target="content">Home</a>
<a>|</a>
<a href="mission.html">Our Mission</a>
<a>|</a>
<a href="slideshow.html">Slideshow</a></a>
<a>|</a>
<a href="contact.html">Contact Us</a>
<a>|</a>
<a href="donate.html">Donate</a>
<a>|</a>
<a href="other.html">Other</a>
<a>|</a>
<a href="other1.html">Other 1</a>
</nav>
</header>

</html>

Thanks for all of the help




R

keyboard_arrow_up
0
keyboard_arrow_down


Reply #1 Mark as Spam rajmv
Posts: 103 - Registered: 2011-07-14 02:22:09

<html>
<head><title>Foundation for Haitians</title></head>

<style type="text/css">

body{
background-color: black;
}
header
{
width:100%;
padding-left: 10px;
padding-top: 10px;
/*background-image:url(heading1.jpg); */
background-color: black;
font-family: fantasy, sans-serif;
color:beige;
font-size:36;
height:120px;

}

nav
{
float:right;
font-size: 16px;
margin-top: 10px;
margin-bottom: 0px;
padding: 10px 10px 10px 10px;
margin-right:20px;
border: 2px solid beige;
border-radius:6px;
color: white;
text-align:right;
}

nav a
{

font-family: fantasy;
-webkit-box-flex: 1;
-webkit-transition: all .5s linear;
}

nav a:hover
{
color:red;
}


a:link{ color:white;}



p{
color:beige;
font-size: 26;
font-family: fantasy;
margin-top: 200px;
}

</style>

<header>Foundations for Haitians

<br>

<nav>
<a href="home.html" target="content">Home</a>
&nbsp;&nbsp;&nbsp;|&nbsp;&nbsp;&nbsp;
<a href="mission.html">Our Mission</a>
&nbsp;&nbsp;&nbsp;|&nbsp;&nbsp;&nbsp;
<a href="slideshow.html">Slideshow</a>
&nbsp;&nbsp;&nbsp;|&nbsp;&nbsp;&nbsp;
<a href="contact.html">Contact Us</a>
&nbsp;&nbsp;&nbsp;|&nbsp;&nbsp;&nbsp;
<a href="donate.html">Donate</a>
&nbsp;&nbsp;&nbsp;|&nbsp;&nbsp;&nbsp;
<a href="other.html">Other</a>
&nbsp;&nbsp;&nbsp;|&nbsp;&nbsp;&nbsp;
<a href="other1.html">Other 1</a>
</nav>
</header>

</html>






JOIN DEVPPL

It looks like you are new here. If you want to get involved, click on Join below!




MENU
Advertising