SitePoint Sponsor

User Tag List

Results 1 to 8 of 8
  1. #1
    SitePoint Enthusiast wonderin''s Avatar
    Join Date
    Mar 2004
    Location
    Durham, NC
    Posts
    62
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Help with this Float

    I need another eye on this. I have a two column layout with a header (contains a flash animation positioned absolutely) and nav bar on top. The css for my container and header is as follows...

    #wrapit {
    width: 600px;
    margin: 0px auto;
    padding: 0;
    }
    #header {
    margin: 0;
    padding: 0;
    height: 300px;
    }
    #header div {
    position: relative;
    height: 253px;
    }
    #header div p {
    position: absolute;
    top: 60px;
    left: 25px;
    }
    My horizontal drop down menu bar uses javascript and the css it for is stripped down a bit for space purposes...

    #menubar {
    text-align: left;
    display: block;
    margin-top: 5px;
    margin-bottom: 20px;
    margin-left: 3px;
    position: relative;
    z-index: 10;
    width: 590px;
    height: 21px;
    }
    .menuendspacer {
    position: relative;
    display: block;
    width: 30px;
    height: 20px;
    float: left;
    }

    #menubaritem1, #menubaritem2, #menubaritem3, #menubaritem4, #menubaritem5 {
    float: left;
    height: 20px;
    position: relative;
    display: block;
    }

    #menubaritem1 a, #menubaritem2 a, #menubaritem3 a, #menubaritem4 a, #menubaritem5 a {
    padding: 4px 10px 5px 10px;
    color: #767e7a;
    background-color: transparent;
    display: block;
    }
    #menu1, #menu2, #menu3, #menu4, #menu5 {
    text-align: left;
    visibility: hidden;
    height: 21px;
    top: 22px;
    left: 0;
    position: absolute;
    width: 100%;
    clear: left
    }
    .menuitem1, .menuitem2, .menuitem3, .menuitem4, .menuitem5 {
    margin-top: 4px;
    display: block;
    position: relative;
    float: left;
    }
    Now after this I want to float two columns...

    #contentwrap {
    width: 550px;
    margin: 0 auto;
    text-align: left;
    padding: 0 0 30px 0;
    background: transparent;
    }
    #left {
    width: 350px;
    padding: 10px 0 0 0;
    margin: 0;
    float: left;
    }
    #right {
    width: 150px;
    padding: 0;
    margin: 0;
    float: right;
    }
    Does anyone see what I am doing wrong. Your help is appreciated greatly!!!
    Corey
    Last edited by wonderin'; Nov 2, 2004 at 08:33.
    why must i lay low in a room full of strangers?

  2. #2
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,556
    Mentioned
    183 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    Quote Originally Posted by corey
    Does anyone see what I am doing wrong
    You haven't told us what exactly is the problem yet

    Besides you haven't supplied any html so no-one can try it out and see what's happening. The css could of course be arranged in thousands of different ways - none of which may refer to your layout or problem.

    So please, provide html that exhibits the problem (or a link) or at least a full explanation of what the problems you are encountering are.

    You will surely then get a much more prompt reply and hopefully a solution

    Paul

  3. #3
    SitePoint Enthusiast wonderin''s Avatar
    Join Date
    Mar 2004
    Location
    Durham, NC
    Posts
    62
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Sorry guys, I guess I was a little hurried in my post. I guess the easiest would be to check it out at http://fluideye.com/vilages/index.htm.

    Not only is the background not displaying properly in FF but the right float is broken in both IE6 and FF. Thanks for your help!!!
    why must i lay low in a room full of strangers?

  4. #4
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,556
    Mentioned
    183 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    The floats are out because of 3 reasons. The first is that your h1 is too wide as you have specifed padding as well as 100% width which pushes the elements wider than they should be. Take out the 100% from your h1 style.

    The second problem is that you haven't nested the right column inside your content wrapper properly.

    The third problem is that you need to clear the floats in mozilla otherwise the parent won't encompass the floats.

    heres how the bottom of the html should look.
    Code:
     
    ...
    ...
     <div id="contentwrap"> 
    	<div id="left"> 
    	  <h1>4 Durham Locations</h1>
    	  <ul>
    		<li>1. <a href="#">Renaissance Center</a></li>
    		<li>2. <a href="#">Universtiy Drive</a></li>
    		<li>3. <a href="#">North Gate Mall</a></li>
    		<li>4. <a href="#">Hillsborough Road</a></li>
    	  </ul>
    	  <h1>Hours of Operation</h1>
    	  <p>All lots open the day after Thanksgiving thru December 24th&nbsp;&ndash;&nbsp;7 
    		days a week 8 am &ndash; 10 pm.</p>
    	  <h1>Clip &amp; Save $4.00</h1>
    	  <p><a href="#">Click here</a> to save $4.00 on the purchase of any tree 
    		(4ft. &ndash; 12ft.)</p>
     </div>
    	<div id="right"> 
    	  <h1>Test</h1>
    	</div>
    	<div class="clearer"></div>
      </div>
      <div class="clearer"></div>
    </div>
    </body>
    </html>
    Notice the cleare classes and the correct nesting.

    Here is the clearer class:
    Code:
    .clearer{
     height:1px;
     overflow:hidden;
     clear:both;
     margin-top:-1px;
    }
    That should go some way to straightening the page out .

    Paul

  5. #5
    SitePoint Enthusiast wonderin''s Avatar
    Join Date
    Mar 2004
    Location
    Durham, NC
    Posts
    62
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks Paul for your time and help!

    I am not following the html, it appears to be too many </div> so where should the two classes go? I have applied your suggestions and can see some changes in FF but not in IE6, the right float is still dropped down below the left div.
    corey
    why must i lay low in a room full of strangers?

  6. #6
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,556
    Mentioned
    183 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    Copy that whole section above to replace the corresponding section in your layout and it will work. The 2 classes are in the right place.

    Just change your h1 also as mentioned above. If you can't get it to work I'll post the whole page

    Paul

  7. #7
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,556
    Mentioned
    183 Post(s)
    Tagged
    6 Thread(s)
    Heres the whole page:
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    	"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html lang="en" xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    <title>TROSA Christmas Tree Villages</title>
    <style type="text/css">
    body {
     font: 80%/1.5 Verdana, Arial, Helvetica, sans-serif;
     color: #666666;
     text-align: center;
     background: #b52424;
     margin: 0;
     padding: 0px;
    }
    a:link, a:visited, a:hover, a:active  {
     color: #b52424;
     text-decoration: underline;
    }
    h1 {
     /*border-left: 18px solid #95927F;*/
     padding:0 0 0 1em;
     font-size: 1em;
     margin: 20px 0 20px 0;
     background-color: #E8E7E6;
    }
    h2 {
     /*border-left: 15px solid #95927F;*/
     padding-left: 1em;
     font-size: 1em;
     /*width: 40px;*/
     margin: 20px 0 20px 0;
    }
    h3 {
     /*border-left: 10px solid #95927F;*/
     padding-left: 1em;
     font-size: 1em;
     /*width: 40px;*/
     margin: 20px 0 20px 0;
    }
    h4 {
     /*border-left: 6px solid #95927F;*/
     padding-left: 1em;
     font-size: 1em;
     /*width: 40px;*/
     margin: 20px 0 20px 0;
    }
    ul {
     margin:10px;
     padding: 0;
     list-style: none;
    }
    ul li {
     padding: 0 0 0 17px;
     margin: 0;
     background: url(http://fluideye.com/vilages/i/gm_ulbul.gif) no-repeat;
     line-height: 1.5em;
     text-align: justify;
    }
    #wrapit {
     width: 600px;
     margin: 0px auto;
     padding: 0;
     background: url(http://fluideye.com/vilages/images/wrapbg.jpg) no-repeat bottom;
    }
    #header {
     margin: 0;
     padding: 0;
     height: 300px;
     background: url(http://fluideye.com/vilages/images/header.jpg) no-repeat;
    }
    #header div  {
     position: relative;
     height: 253px;
    }
    #header div p  {
     position: absolute;
     top: 60px;
     left: 25px;
    }
    #menubar  {
     color: #000;
     font-size: 10px;
     background-color: #dadedc;
     text-align: left;
     display: block;
     margin-top: 5px;
     margin-bottom: 20px;
     margin-left: 3px;
     position: relative;
     z-index: 10;
     width: 590px;
     height: 21px;
     border-style: solid;
     border-width: 1px 0;
     z-index: 10;
     border-color: #e6e6ff #8a9790 #8a9790 #e6e6ff 
    }
    .menuendspacer  {
     position: relative;
     display: block;
     width: 30px;
     height: 20px;
     float: left;
    }
     
    #menubaritem1, #menubaritem2, #menubaritem3, #menubaritem4, #menubaritem5  {
     font-weight: bold;
     color: #767e7a;
     float: left;
     height: 20px;
     background-color: transparent;
     position: relative;
     display: block;
    }
     
    #menubaritem1 a, #menubaritem2 a, #menubaritem3 a, #menubaritem4 a, #menubaritem5 a  {
     padding: 4px 10px 5px 10px;
     color: #767e7a;
     background-color: transparent;
     display: block;
     text-decoration: none
    }
    #menubaritem1 a:hover, #menubaritem2 a:hover, #menubaritem3 a:hover, #menubaritem4 a:hover, #menubaritem5 a:hover  {
     background-color: #cccfcc;
     display: block;
    }
    .menubaritem a:hover  {
     background-color: #cccfcc;
     display: block 
    }
    #menu1, #menu2, #menu3, #menu4, #menu5  {
     text-align: left;
     background-color: #f0f3f2;
     visibility: hidden;
     height: 21px;
     top: 22px;
     left: 0;
     position: absolute;
     width: 100%;
     clear: left
    }
    .menuitem1, .menuitem2, .menuitem3, .menuitem4, .menuitem5  {
     color: #b52424;
     margin-top: 4px;
     font-weight: normal;
     background-color: #fff;
     display: block;
     position: relative;
     float: left;
    }
    .menuitem1 a, .menuitem2 a, .menuitem3 a, .menuitem4 a, .menuitem5 a  {
     color: #b52424;
     font-weight: normal;
     padding: 4px 20px 5px 10px;
     background-color: #f0f3f2;
    }
    .menuitem1 a:hover, .menuitem2 a:hover, .menuitem3 a:hover, .menuitem4 a:hover, .menuitem5 a:hover  {
     color: #b52424;
     background-color: #dadedc;
     text-decoration: none; 
    }
    #contentwrap {
     width: 550px;
     margin: 0 auto;
     text-align: left;
     padding: 0 0 30px 0;
    }
    #left {
     width: 350px;
     padding: 10px 0 0 0;
     margin: 0;
     float: left;  
    }
    #left p {
     text-align: justify;
    }
    #right  {
     width: 150px;
     padding: 0;
     margin: 0;
     float: right;
    }
    #footer {
     clear: both;
     padding: 10px 0 40px 0;
     margin: 0 20px 0 20px;
     text-align: left;
     border-top: 1px solid #989584;
     font-size: 80%;
    }
    
    .clearer{
     height:1px;
     overflow:hidden;
     clear:both;
     margin-top:-1px;
    }
    /*link for nav bar reference*/ 
    /*http://www.wpdfd.com/editorial/horizontalmenus.htm  */
    </style>
    <script type="text/javascript">
    // <!--
    var menus = 4;
    var currentMenu = 0;
    var selectedMenu = 0;
    var clicked = false;
    function nothing()
     {
     // dummy function providing a dead link
     // replace with real links
     }
    function selectMenu(m) // click on a menu header
     {
     if(clicked) // the menu is already active
      {
      clicked=false;
      selectedMenu=0;
      currentMenu=m;
      hideAll(-1)
      }
     else
      {
      clicked=true;
      selectedMenu=m;
      currentMenu=m;
      
      hideAll(m); // except m
      if(document.getElementById)
       {
       var themenu=document.getElementById("menu"+m);
       themenu.style.visibility="visible";
       }
      }
     }
    
    function showMenu(m) // display a full menu on rollover
     {
     if(clicked)
      {
      hideAll(m);
      if(document.getElementById)
       {
       var thermenu=document.getElementById("menu"+m);
       thermenu.style.visibility="visible";
       }
      }
      selectedMenu=0;
      currentMenu=m;
     }
     
     
    function doMenuChoice(m,n) // click a menu item
     {
     selectedMenu=0;
     currentMenu=-1;
     hideAll(currentMenu);
     clicked=false;
     alert("You chose menu "+m+" item "+n);
     return false;
     }
     
     
    function hideAll(e) // hide all menus except e
     {
     
      for(i=1;i<=menus;i++)
       {
       if(e!=i)
    	{
    	if(document.getElementById)
    	 {
    	 var themenubaritem=document.getElementById("menubaritem"+i);
    	 themenubaritem.style.background="transparent";
    	 var themenu=document.getElementById("menu"+i);
    	 themenu.style.visibility="hidden";
    	 }
    	}
       
       // THIS IS THE NEW CODE, WHICH LATCHES THE HIGHLIGHT IF THE MENU IS VISIBLE
    	   else {
    	  themenu=document.getElementById("menu"+i);
    	  if(themenu.style.visibility == "visible")
    	   {
    		 var themenubaritem=document.getElementById("menubaritem"+m);
    	  themenubaritem.style.background="#cccfcc";
    	   } 
    		} 
    	}
     }
    </script>
    </head>
    <body onclick="JavaScript: hideAll(0)">
    <div id="wrapit"> 
      <div id="header"> 
    	<div> 
    	  <p> 
    		<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/s...rsion=6,0,29,0" width="448" height="234">
    		  <param name="movie" value="http://fluideye.com/vilages/movies/woody.swf">
    		  <param name="quality" value="high">
    		  <embed src="http://fluideye.com/vilages/movies/woody.swf" quality="high" pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash" width="448" height="234"></embed> 
    		</object>
    	  </p>
    	</div>
      </div>
      <div id="menubar"> 
    	<div id="menu1"> 
    	  <div class="menuendspacer"></div>
    	  <div class="menuitem1"> <a onclick="doMenuChoice(1,1)" href="javascript:nothing()">Renaissance 
    		Center</a> </div>
    	  <div class="menuitem2"> <a onclick="doMenuChoice(1,2)" href="javascript:nothing()">University 
    		Dr.</a> </div>
    	  <div class="menuitem3"> <a onclick="doMenuChoice(1,3)" href="javascript:nothing()">North 
    		Gate Mall</a> </div>
    	  <div class="menuitem4"> <a onclick="doMenuChoice(1,4)" href="javascript:nothing()">Hillsborough 
    		Rd.</a> </div>
    	</div>
    	<div id="menu2"> 
    	  <div class="menuendspacer"></div>
    	  <div class="menuitem1"> <a onclick="doMenuChoice(2,1)" href="javascript:nothing()">Christmas 
    		Trees</a> </div>
    	  <div class="menuitem2"> <a href="<A href="http://holidaysbytrosa.com">Holidays">http://holidaysbytrosa.com">Holidays By 
    		TROSA</a> </div>
    	  <div class="menuitem3"> <a onclick="doMenuChoice(2,3)" href="javascript:nothing()">Wreaths 
    		&amp; Garland</a> </div>
    	  <div class="menuitem4"> <a onclick="doMenuChoice(2,4)" href="javascript:nothing()">Stands 
    		&amp; Accessories</a> </div>
    	</div>
    	<div id="menu3"> 
    	  <div class="menuendspacer"></div>
    	  <div class="menuitem1"> <a onclick="doMenuChoice(3,1)" href="javascript:nothing()">Click 
    		here and print your $4.00 coupon off today</a> </div>
    	  <div class="menuitem2"> <a onclick="doMenuChoice(3,2)" href="javascript:nothing()"></a> 
    	  </div>
    	  <div class="menuitem3"> <a onclick="doMenuChoice(3,3)" href="javascript:nothing()"></a> 
    	  </div>
    	</div>
    	<div id="menu4"> 
    	  <div class="menuendspacer"></div>
    	  <div class="menuitem1"> <a onclick="doMenuChoice(4,1)" href="javascript:nothing()">Selection 
    		&amp; Care</a> </div>
    	  <div class="menuitem2"> <a onclick="doMenuChoice(4,2)" href="javascript:nothing()">Watering 
    		Your Tree</a> </div>
    	  <div class="menuitem3"> <a onclick="doMenuChoice(4,3)" href="javascript:nothing()">Safety</a> 
    	  </div>
    	  <div class="menuitem4"> <a onclick="doMenuChoice(4,4)" href="javascript:nothing()">Fun 
    		Facts</a> </div>
    	</div>
    	<div class="menuendspacer"></div>
    	<div id="menubaritem1" style="width: 80px"> <a onmouseover="showMenu(1)" onmouseout="hideAll(currentMenu)" href="javascript:selectMenu(1)">Locations</a> 
    	</div>
    	<div id="menubaritem2" style="width: 80px"> <a onmouseover="showMenu(2)" onmouseout="hideAll(currentMenu)" href="javascript:selectMenu(2)">Products</a> 
    	</div>
    	<div id="menubaritem3" style="width: 120px"> <a onmouseover="showMenu(3)" onmouseout="hideAll(currentMenu)" href="javascript:selectMenu(3)">Discount 
    	  Coupon</a> </div>
    	<div id="menubaritem4" style="width: 120px"> <a onmouseover="showMenu(4)" onmouseout="hideAll(currentMenu)" href="javascript:selectMenu(4)">Selection 
    	  &amp; Care</a> </div>
      </div>
      <div id="contentwrap"> 
    	<div id="left"> 
    	  <h1>4 Durham Locations</h1>
    	  <ul>
    		<li>1. <a href="#">Renaissance Center</a></li>
    		<li>2. <a href="#">Universtiy Drive</a></li>
    		<li>3. <a href="#">North Gate Mall</a></li>
    		<li>4. <a href="#">Hillsborough Road</a></li>
    	  </ul>
    	  <h1>Hours of Operation</h1>
    	  <p>All lots open the day after Thanksgiving thru December 24th&nbsp;&ndash;&nbsp;7 
    		days a week 8 am &ndash; 10 pm.</p>
    	  <h1>Clip &amp; Save $4.00</h1>
    	  <p><a href="#">Click here</a> to save $4.00 on the purchase of any tree 
    		(4ft. &ndash; 12ft.)</p>
     </div>
    	<div id="right"> 
    	  <h1>Test</h1>
    	</div>
    	<div class="clearer"></div>
      </div>
      <div class="clearer"></div>
    </div>
    </body>
    </html>
    Paul

  8. #8
    SitePoint Enthusiast wonderin''s Avatar
    Join Date
    Mar 2004
    Location
    Durham, NC
    Posts
    62
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Paul,
    Thank God for people like yourself. I have seen all the help you give people and you are truly a gem. Thanks bro!!!
    Corey
    why must i lay low in a room full of strangers?


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
  •