CODEWITHSUNDEEP
csshtmloverlap
Robin ANDREWS
Robin ANDREWS

Reputation: 61

Confusion about divs

I'm wondering if anyone can help me to sort out why my navigation menu appears to be in my main div, when it's not coded that way. I'm guessing the CSS is the problem. Lots of code I'm afraid, but I don't know where the problem is, so I can't isolate it....

<!DOCTYPE html>
<html>
<head>
<link href="style.css" rel="stylesheet" type="text/css" />
</head>
<body>

<div id="container">
    <div id="header"><p><img src="images/logo.png" alt="logo" /></p></div><!--header-->
    <div id="navbar">
        <div id="holder">
        <ul> 

   <li><a href="#" id="onlink">Home</a></li>
   <li><a href="#">My Approach</a></li>
   <li><a href="#">Testimonials</a></li>
   <li><a href="#">Fees</a></li>
   <li><a href="#">Contact</a></li>

        </ul>

        </div><!--holder(navbar)-->
    </div><!--navbar-->
    <div id="main">main</div><!--main-->

</div><!--container-->
<body>
</html>

CSS:

body {
    background-image: url(images/colorful7.jpg);
}
#container {
    width: 960px;
    float: none;
    margin: auto;
    height: auto;
}
#header {
    height: 350px;
    width: 940px;
    padding: 10px;
    }
#navbar {
    background: none;
    height:40px;/*40*/
    width:960px;
    float:right;
 } 

 #navbar #holder {
    height:40px;
    width:725px;/*725*/
    float: right;
 } 

 #navbar #holder ul {
  list-style:none;
  margin:0;
  padding:0; 
 } 

 #navbar #holder ul li a {
    text-decoration:none;
    float:left;
    line-height:20px;
    font-family:Arial, Helvetica, sans-serif;
    font-size:16px;
    font-weight:600;
    color:#660033;
    border-bottom:none;
    padding:10px;
    width:120px;
    text-align:center;
    display:block;
    background:#FFC;
    -moz-border-radius-topleft:10px;
    -moz-border-radius-topright:10px;
    -webkit-border-top-left-radius:10px;
    -webkit-border-top-right-radius:10px;
    margin-left: 5px;
 } 

 #navbar #holder ul li a:hover {
    background:#660033;
    color:#FFC;

 } 
#holder ul li a#onlink {
    background:#660033;
    color:#FFC;
 } 

 #holder ul li a#onlink:hover {
  background:#660033;
  color:#white;
  text-shadow:1px 1px 1px #000; 
 }
 #main{
    background-color: #FFC;
    height: 400px;
    width: 960px;
    padding: 10;
}

Here's a live jsFiddle

Upvotes: 0

Views: 246

Answers (4)

SVS
SVS

Reputation: 4275

I have made changes to CSS & its working

Working fiddle: http://jsfiddle.net/G26TD/11/

Don't use ID inside a id to style its will slow down CSS

Here is a post how to write css efficiently: https://developer.mozilla.org/en/CSS/Writing_Efficient_CSS

Upvotes: 0

khaled_webdev
khaled_webdev

Reputation: 1430

delete float:right; from #navbar

#navbar {
    background: none;
    height:40px;/*40*/
    width:960px;

}

http://jsfiddle.net/G26TD/10/

Upvotes: 0

iappwebdev
iappwebdev

Reputation: 5910

Add

clear: both;

to the #main-Rule to clear the floating after the nav bar. Fiddle: http://jsfiddle.net/GGSk2/2/

Upvotes: 1

Barth
Barth

Reputation: 15725

If you think that the problem lies in the CSS, try to deactivate the css and see what happens. You can track down the faulty bit by adding back the css piece after piece.

I usually use Firefox with Firebug to help me find out such problems. It allows you to deactivate or modify CSS and HTML on the fly. IE and safari allows it as well I reckon.

Upvotes: 0

Related Questions