SitePoint Sponsor

User Tag List

Results 1 to 4 of 4
  1. #1
    SitePoint Zealot
    Join Date
    Oct 2006
    Posts
    153
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    My div tag collapses without absolute positioning?

    Hi
    I was working on a page where I was developing a horizontal navigation strip and I thought I might like this strip, in a more generalized form, as a CSS snippet. So I went about changing the code I was using to what I thought was appropriate for a CSS snippet. When I change the code to what I thought was appropriate it failed to work the way I wished it to. I did not think absolute positioning was appropriate for a general CSS horizontal navigation strip snippet. But when I leave the absolute positioning off my div tag fails to use the top and bottom padding I am giving it to create vertical background colored space around my navigation links the way I want it to. The line that is in question is in orange in the code I am posting below. Can you please tell me why this happens and give me any suggestions you might have on how I might develop my horizontal navigation snippet.

    Sincerely
    Marc

    Code:
    <!DOCTYPE html PUBLIC 
    "-//W3C//DTD XHTML 1.0 Strict//EN" "
    http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html>
    <head>
    	<meta http-equiv="Content-Type"
    	 content="text/html; charset=iso-8859-1" />
    	<title>test</title>
    <style type="text/css" media="screen">
    body {
      background-color:#E9D6CE;
      }		
    * {
    	padding:0;
    	margin:0; 
    }	
    
    div#hNavStrip {
    position:absolute;  
    	width:100%;
    	font-family:Arial, Helvetica, sans-serif;
      background-color:#CA9C88;
    	padding:.2em 0 .2em .4em;
     /*left for first link space on left*/
    }
    #hNavStrip ul{
    	float:left;
    	 }
    #hNavStrip li{
    	float:left;
      line-height:1em;
    	margin-right:.3em;
    	list-style: none;
    	text-align:center;
    	font-size:.75em;
    	background-color:#D7BDA6;
    	border: black  solid 1px;
    		}
    #hNavStrip li a{
    	display:block;	
    	color:black;
    	text-decoration:none;
      padding:0 .3em;
    	line-height:1.35em;
    	}
    #hNavStrip li a:hover {
    	background-color:#FFE0C5;
    }	
    #hNavStrip a.active {
    	background-color:#FFE0C5;	
    }
    </style>
    </head>
    
    <body>
    </body>
    <div ID="hNavStrip">
    	<ul>
    	  <li>
    	    <a href="#" class="active">
    	    	test link 1</a>
    	  </li>
    	  
    	  <li>
    	    <a href="#">test link 2</a>
    	  </li> 
    	  
    	  <li>
    	    <a href="#">test link 3</a>
    	  </li>  
    	 </ul>
    </div>
    </html>

  2. #2
    CSS & JS/DOM Adept bronze trophy
    Join Date
    Mar 2005
    Location
    USA
    Posts
    5,482
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Looks like you need to read up on clearing and containing floats. Other than floating the parent of the floated element(s) too, which often isn't a good option, the PIE/Aslett approach it best.

    P.S. In XHTML documents the xmlns attribute must be specified on the <html> element.
    Code:
    <html xmlns="http://www.w3.org/1999/xhtml">
    We miss you, Dan Schulz.
    Learn CSS. | X/HTML Validator | CSS validator
    Dynamic Site Solutions
    Code for Firefox, Chrome, Safari, & Opera, then add fixes for IE, not vice versa.

  3. #3
    SitePoint Zealot
    Join Date
    Oct 2006
    Posts
    153
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks for those replies.

    clear the floats see FAQ CSS Forum, and give IE Haslayout also see FAQ CSS Forum
    I am not finding the forum you are mentioning.

    I know that the declaration "height:1%;" is giving the "IE Haslayout" you are talking about. But I do not understand the selector. You are using a universal "*" tag selector with a descendent HTML tag and my descendent "#hNavStrip" ID. It seems to me nothing can be the descendent of the top-level HTML tag and all that frontage on your selector should logically not do anything differently than just my ID tag so where is your logic. I'm sure you're right however I am not getting it.

    The link in the first reply to this thread was very good and it led me to a another the link from that link. Namely this "Containing Floats" link. At that "containing floats" link they explain the theory on why my content collapsed vertically and the padding did not extend the colored background around my links as I had hoped. However in the code examples given in my second reply above you are not keeping the vertical collapsing from happening via the clear property mentioned in the second reply and the link where I got the float theory. Experimentation proves it is being done via the "overflow hidden" property pair. Can some one link me or tell me the theory behind this.

    In regard to using an unnecessary div tag. I thought it might be unnecessary. However here is my reasoning. I thought I might often like to have the first thing in my horizontal navigation strip be a label of what my navigation strip was for. The code on a page I have started which I am showing in code tags below is an example of what I am talking about. It seemed to me that this navigation label semantically would not be part of the unordered list that will contain my navigation. Perhaps I am semantically incorrect, but I was wrapping the whole thing in a div tag so that I might extend my colored navigation strip behind my navigation label. I am very open to suggestions on how I might do this better.
    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "
    http://www.w3.org/TR/html4/strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    	<meta http-equiv="Content-Type"
    	 content="text/html; charset=iso-8859-1">
    	<title>Classic Cars</title>
    <style type="text/css" media="screen">
    body {
      background-color:#E9D6CE;
      }	
    * {
    	padding:0;
    	margin:0; 
    }		
    div#head{
    	position:relative;
    	height:200px;
    	}
    div#head h1{
    	position:absolute;
    	top:0;
    	width:100%;
    	height:100%;
    	text-align:center;
    	}	
    div#head h1 img{
    	position:relative;
    	top:70px;
    	}	
    div#head h2{
    	font-size:1.6em;
    	font-weight:bold;
    	background-color:#CA9C88;	
    	line-height:1.25em;
    	font-family:Arial, Helvetica, sans-serif;
    	text-align:center;	
    	}	
    div#hNavStrip {
    	position:  absolute;
    	bottom:0;
    	width:100%;
    	font-family:Arial, Helvetica, sans-serif;
      background-color:#CA9C88;
    	padding:.2em 0 .2em .4em;
     /*left for first link space on left*/
    }
    #hNavStrip ul{
    	float:left;
    	 }
    #hNavStrip li{
    	float:left;
      line-height:1em;
    	margin-right:.3em;
    	list-style: none;
    	text-align:center;
    	font-size:.75em;
    	background-color:#D7BDA6;
    	border: black  solid 1px;
    		}
    #hNavStrip li a{
    	display:block;	
    	color:black;
    	text-decoration:none;
      padding:0 .3em;
    	line-height:1.35em;
    	}
    #hNavStrip li a:hover {
    	background-color:#FFE0C5;
    }	
    #hNavStrip a.active {
    	background-color:#FFE0C5;	
    }	
    #hNavStrip p{
    	float:left;
    	font-weight:bold;	
      font-weight:bold;
      line-height:1.35em;
      font-size:.8em;
    	margin-right:.2em;
    	}
    </style>	
    </head>
    
    <body>
    <div id="head">
    <h2>Your visual browser to
     classic car stories</h2>
      <h1><img src="images/ClassicCars.gif"
    	 alt="ClassicCars"></h1>
    	<div ID="hNavStrip">
    		<p>Eras</p>	
    		<ul>		
    		   <li>
    	                   <a class="active" href="#">
    			  Veteran 1890s</a>
    		  </li>  
    		   <li>
    		        <a href="#">Edwardian 1900s</a>
    		  </li>   
    		  <li>
    		    <a href="#">Vintage 1920s</a>
    		  </li>
    			<li>
    		    <a href="#">Pre-War 1930-40s</a>
    		  </li> 
    			<li>
    		    <a href="#">Post-War 1950-70s</a>
    		  </li>     
    		 </ul>
    	</div>
    </div>	
    </body>
    
    </html>
    In regard to using a HTML opening tag which includes a reference to the W3C. I tried what was recommended in a PS above but my code still generates this error "line 2 column 12 - Error: there is no attribute 'XMLNS' " so if you would care to comment on how to get this.document type HTML tag thing correct that would be appreciated too.

  4. #4
    CSS & JS/DOM Adept bronze trophy
    Join Date
    Mar 2005
    Location
    USA
    Posts
    5,482
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    1) He's referring to this CSS forum's FAQ list.

    2) Wow. You know about hasLayout but not IE's "* html" bug. IE both Windows and MacOS versions (not including IE7+ in standards mode) think that an <html> element has a parent, thus you can you can target rules for only those browsers by using it at the beginning of a complex selector. For example "* html p" will select all <p> elements but only in IE. Other browsers will safely ignore it because they know that <html> has no parent.

    3) As to why overflow:hidden works to contain floats: (http://www.w3.org/TR/CSS21/visuren.html#floats)
    Quote Originally Posted by CSS2.1 Specs
    The margin box of a table, a block-level replaced element, or an element in the normal flow that establishes a new block formatting context (such as an element with 'overflow' other than 'visible') must not overlap any floats in the same block formatting context as the element itself. If necessary, implementations should clear the said element by placing it below any preceding floats, but may place it adjacent to such floats if there is sufficient space.
    4) You're perfectly correct that the label for the list should not be inside the list. We just weren't aware that you had a reason for what looked like an unnecessary <div>.

    5) The xmlns attribute is for XHTML documents, not HTML ones. That's why you're getting the error now. When I said "XHTML", I meant just XHTML. If I meant XHTML and HTML, I would have said "X/HTML" or "(X)HTML".
    We miss you, Dan Schulz.
    Learn CSS. | X/HTML Validator | CSS validator
    Dynamic Site Solutions
    Code for Firefox, Chrome, Safari, & Opera, then add fixes for IE, not vice versa.


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
  •