SitePoint Sponsor

User Tag List

Results 1 to 7 of 7
  1. #1
    SitePoint Wizard lukeurtnowski's Avatar
    Join Date
    Mar 2003
    Location
    Coronado
    Posts
    1,582
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)

    div does not seem to contain other div

    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...
    "Oh, and Jenkins--apparently your mother died this morning."

  2. #2
    SitePoint Guru
    Join Date
    Nov 2008
    Posts
    619
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    why are you using so much inline styling. its hard to read the code.

    is it generated by some cms or what.

    vineet

  3. #3
    om nom nom nom Stomme poes's Avatar
    Join Date
    Aug 2007
    Location
    Netherlands
    Posts
    10,233
    Mentioned
    47 Post(s)
    Tagged
    1 Thread(s)
    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.

  4. #4
    SitePoint Guru
    Join Date
    Nov 2008
    Posts
    619
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Stomme poes View Post
    Hmm... it's not that bad, Vineet. It mostly even looks ok, HTML-wise.
    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

    Code:
    <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

  5. #5
    om nom nom nom Stomme poes's Avatar
    Join Date
    Aug 2007
    Location
    Netherlands
    Posts
    10,233
    Mentioned
    47 Post(s)
    Tagged
    1 Thread(s)
    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.

  6. #6
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,564
    Mentioned
    6 Post(s)
    Tagged
    0 Thread(s)
    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.
    Twitter-@Ryan_Reese09
    http://www.ryanreese.us -Always looking for web design/development work

  7. #7
    SitePoint Wizard lukeurtnowski's Avatar
    Join Date
    Mar 2003
    Location
    Coronado
    Posts
    1,582
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    Sorry about that, its just for testing, once I get things figured Ill put it all in main.css
    "Oh, and Jenkins--apparently your mother died this morning."


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •