why is the navbar not being contained in the header div
http://sandiegosbroker.com/new.shtml
(the background of the header seems to be cut off)
Thanks…
why are you using so much inline styling. its hard to read the code.
is it generated by some cms or what.
vineet
Hmm… it’s not that bad, Vineet. It mostly even looks ok, HTML-wise.
Anyway, I can see an answer for the question:
why is the navbar not being contained in the header div
Because your header div has a child box called “tabs” and inside “tabs” is a ul and inside the ul… are floated anchors.
So, there are floated descendants of #header, and #header is acting normally by not enclosing those floats, because static boxes don’t do that normally.
So long as there is no stated height on #header or #tabs, you should be able to safely add
overflow: hidden;
to #header.
But, this is not the only way to enclose floats, so I think you’ll really want to read these two articles:
Gary Turner’s Enclosing Floats
Paul’s Everything you wanted to know about Floats but were afraid to ask
The latter is part of a sticky at the top of the CSS forums if you want to read more.
Hi stomme
at the time of answering this thread, this was what i saw on the source. check it and tell was it easy or hard
<body class="Home">
<div style="padding-top: 0pt; padding-bottom: 0pt;" id="container"><b
class="niftycorners" style="margin-left: -5px; margin-right: -5px;
background: none repeat scroll 0% 0% rgb(14, 80, 141); margin-bottom:
0px;"><b style="background-color: rgb(255, 255, 255); border-color:
rgb(134, 167, 198);" class="r1"></b><b style="background-color: rgb(255,
255, 255); border-color: rgb(134, 167, 198);" class="r2"></b><b
style="background-color: rgb(255, 255, 255); border-color: rgb(134, 167,
198);" class="r3"></b><b style="background-color: rgb(255, 255, 255);
border-color: rgb(134, 167, 198);" class="r4"></b></b>
<div style="padding-top: 0pt; padding-bottom: 0pt;" id="header"><b
class="niftycorners" style="margin-left: -10px; margin-right: -10px;
background: none repeat scroll 0% 0% rgb(255, 255, 255); margin-bottom:
8px;"><b style="background-color: rgb(191, 221, 237); border-color:
rgb(223, 238, 246);" class="rs1"></b><b style="background-color:
rgb(191, 221, 237); border-color: rgb(223, 238, 246);" class="rs2"></b></b>
<a href="http://sandiegosbroker.com/"><img src="new_files/logo.png"
alt="Click to return to the home page" id="logo" border="0" width="250"
height="28"></a>
<div id="tabs">
<ul>
<li id="Home"><a href="http://sandiegosbroker.com/"><span>Home</span></a></li>
<li class="services"><a href="" class="services"><span>Services</span></a></li>
<li class="portfolio"><a href="" class="portfolio"><span>Portfolio</span></a></li>
<li class="contact"><a href="" class="contact"><span>Contact</span></a></li>
</ul>
</div><b class="niftycorners" style="margin-left: -10px; margin-right:
-10px; background: none repeat scroll 0% 0% rgb(255, 255, 255);
margin-top: 8px;"><b style="background-color: rgb(191, 221, 237);
border-color: rgb(223, 238, 246);" class="rs2"></b><b
style="background-color: rgb(191, 221, 237); border-color: rgb(223, 238,
246);" class="rs1"></b></b></div>
<div style="padding-top: 0pt; padding-bottom: 0pt; height: auto;"
id="content"><b class="niftycorners" style="margin-left: -5px;
margin-right: -5px; background: none repeat scroll 0% 0% rgb(255, 255,
255); margin-bottom: 8px;"><b style="background-color: rgb(119, 140,
202); border-color: rgb(187, 197, 228);" class="rs1"></b><b
style="background-color: rgb(119, 140, 202); border-color: rgb(187, 197,
228);" class="rs2"></b></b>
<ul style="width: 851px; height: 200px;" class="kwicks horizontal">
<li class="" style="left: 0px; margin: 0pt; position: absolute; width:
70.8571px; display: block; overflow: hidden;" id="kwick_1"></li>
<li class="" style="left: 75.8571px; margin: 0pt; position: absolute;
width: 70.8571px;" id="kwick_2"></li>
<li class="" style="left: 151.714px; margin: 0pt; position: absolute;
width: 70.8571px; display: block;" id="kwick_3"></li>
<li class="active" style="left: 227.571px; margin: 0pt; position:
absolute; width: 320px; display: block;" id="kwick_4"></li>
<li class="" style="left: 552.571px; margin: 0pt; position: absolute;
width: 70.8571px; display: block; overflow: hidden;" id="kwick_5"></li>
<li class="" style="left: 628.429px; margin: 0pt; position: absolute;
width: 70.8571px; overflow: hidden; display: block;" id="kwick_6"></li>
<li class="" style="left: 704.286px; margin: 0pt; position: absolute;
width: 70.8571px; overflow: hidden; display: block;" id="kwick_7"></li>
<li class="" style="right: 0px; margin: 0pt; position: absolute;
overflow: hidden; width: 70.8571px; display: block;" id="kwick_8"></li>
</ul>
<p style="margin: 220px 20px;">This is an option for you. I
like the navbar here and might be od for older client with bad
eyesight. <br>
Let me know what you think of the color scheme as I can spice it up.</p>
<b class="niftycorners" style="margin-left: -5px; margin-right: -5px;
background: none repeat scroll 0% 0% rgb(255, 255, 255); margin-top:
8px;"><b style="background-color: rgb(119, 140, 202); border-color:
rgb(187, 197, 228);" class="rs2"></b><b style="background-color:
rgb(119, 140, 202); border-color: rgb(187, 197, 228);" class="rs1"></b></b></div>
vineet
Whoa!
Did it get changed that fast in the meantime?!?
Yeah, I wouldn’t have bothered even trying to read that!
Glad the OP switched out to something readable.
I too saw that but Stomme had already answered the thread. I sometimes use inline styling just do beginning testing…but that’s quite extreme. Now the OP would have spent much more time converting that to classes then if he had done classes in the beginning.
Sorry about that, its just for testing, once I get things figured Ill put it all in main.css