Jump to content
Uncle Stef's Forums are now in the Clubs - July 2025.

NavBar kicking out to the side

rande

By rande
in Beginners Web Design

 Share

Recommended Posts

rande Newbie

rande

Posted
Posted

Can anyone tell me why things keep getting kicked out?

This keeps happening. It seems in order in the HTML.

I thought these aren't positioned to an area of the page?

Attached is where I started. I had an image in the head but changed that to

put another div in.

 

thanks

 

 

 

<head>

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

<title>index_dropdownNavBar</title>

<link href="styles/globalstyles.css" rel="stylesheet" type="text/css" />

</head>

 

<body>

<div id="outer">

<div id="headerLeft">Header

</div>

<div id="headerRight">Header

</div>

 

<div id="nav">

<ul>

<li class="first"><a href="#">Home</a></li>

<li><a href="#">About Me</a></li>

<li><a href="#">Portfolio</a>

<ul>

<li><a href="#">Web</a></li>

<li><a href="#">Print</a></li>

<li><a href="#">Photos</a></li>

</ul>

</li>

<li><a href="#">Contact Me</a></li>

</ul>

</div>

<!--<div id="spaceInsert"></div>-->

 

<div>

<img src="images/leftSide.jpg" width="500" height="600" alt="leftSide" /><img src="images/rightSide.jpg" width="500" height="600" alt="leftSide" />

</div>

<div id="footer"><img src="images/footer.jpg" width="1000" height="100" alt="footer" /></div>

</div>

</body>

</html>

 

 

 

 

 

@charset "UTF-8";

body {

font-family:Arial, Helvetica, sans-serif;

font-size: 24px;

}

#outer {

width: 1000px;

margin-top: 0px;

margin-right: auto;

margin-bottom: 0px;

margin-left: auto;

background-color: #FF0;

}

#headerLeft {

float: left;

width: 600px;

border: 3px solid #009;

height: 100px;

background-color: #000;

margin: 0px;

padding: 0px;

color: #0F0;

}

#headerRight {

float: left;

width: 380px;

border: 3px solid #009;

height: 100px;

background-color: #000;

margin: 0px;

padding: 0px;

color: #0F0;

}

*{ margin:0px; padding: 0px; }

 

#nav {

font-family: arial, sans-serif;

position: absolute;

width: 1000px;

height: 50px;

font-size:100%;

color:#999;

 

 

}

 

#nav ul {

list-style-type: none;

 

}

 

#nav ul li {

position: relative;

float: left;

vertical-align: middle;

text-align: center;

margin-left: 22px;

padding-top: 0px;

padding-right: 20px;

padding-bottom: 0px;

padding-left: 21px;

border: 2px solid #000;

width: 180px;

}

 

#nav ul li a {

text-align: center;

padding:10px;

display:block;

text-decoration:none;

color:#999;

border: 1px solid #F00;

}

 

#nav ul li ul {

display: none

}

 

#nav ul li:hover ul {

display: block;

position: absolute;

}

 

#nav ul li:hover ul li a {

display:block;

background:#12aeef;

color:#ffffff;

width: 110px;

text-align: center;

border-bottom: 1px solid #f2f2f2;

border-right: none;

}

 

#nav ul li:hover ul li a:hover {

background:#6dc7ec;

color:#fff;

}

 

 

#spaceInsert {

background-color: #900;

float: left;

height: 100px;

width: 1000px;

margin-top: 22px;

margin-right: 22px;

margin-bottom: 22px;

margin-left: 22px;

padding-top: 100px;

padding-right: 20px;

padding-bottom: 100px;

padding-left: 21px;

border: 2px solid #000;

 

}

#spaceInsert2 {

background-color: #900;

float: left;

height: 100px;

width: 1000px;

margin-top: 22px;

margin-right: 22px;

margin-bottom: 22px;

margin-left: 22px;

padding-top: 100px;

padding-right: 20px;

padding-bottom: 100px;

padding-left: 21px;

border: 2px solid #000;

 

}

post-20002-039956300 1312393883_thumb.png

post-20002-087439900 1312393894_thumb.png

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share
Go to topic listing
×
×
  • Create New...