SitePoint Sponsor

User Tag List

Results 1 to 8 of 8

Hybrid View

  1. #1
    SitePoint Member
    Join Date
    Nov 2005
    Posts
    8
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Getting some DIVs horizontaly next to eachother?

    I have decided to go tableless, it was going great until I tried to put some menu items over a banner.

    What im trying to do is get "News | Media | Projects | Supporters | Shop" in the bottom left corner of the banner and "Home | Site Map | Contact Us" in the top right corner.

    What I am getting instead is the left spacer and left menu only in Firefox and in IE the left menu and spacer, then under them and to the right the right menu and spacer. Ive spent the past 3 hours trying to figure it out and im about ready to stab myself with my desk lamp.

    <div class="banner">

    <div class="bannerspacerleft"></div>
    <div class="bannercontentmenu">News | Media | Projects | Supporters | Shop</div>

    <div class="bannersitemenu">Home | Site Map | Contact Us</div>
    <div class="bannerspacerright"></div>

    </div>

    --------------------------------

    div.banner {
    width: 799px;
    height: 69px;
    float:left;
    background-image: url(images/banner.gif)
    }

    div.bannerspacerleft {
    width: 50%;
    height: 43px;
    float:left;
    background-color: rgb(0,0,0);
    }

    div.bannercontentmenu {
    width: 50%;
    height: 26px;
    float:left;
    padding-left: 20px;
    font: 11pt arial;
    }

    div.bannersitemenu {
    width: 50%;
    height: 26px;
    float: right;
    padding-left: 20px;
    font: 11pt arial;
    }

    div.bannerspacerright {
    width: 50%;
    height: 43px;
    float:right;
    background-color: rgb(0,0,0);
    }



    Any and all help is appreciated.

  2. #2
    Caveat surfer Buddy Bradley's Avatar
    Join Date
    May 2003
    Location
    Cambridge, UK
    Posts
    2,366
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Get rid of the spacers, you don't need them - use CSS margins instead.

  3. #3
    Non-Member
    Join Date
    Jan 2005
    Location
    Netherlands
    Posts
    4,300
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hello

    Like Buddy, Spacers ? or do they get an image ?

    PS there are other Tag's then Div's ( you don't need all the classes then)

    header
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
    <head>
    <title>12345 12345 12345 12345 12345</title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    	<style type="text/css">
    	
    	head+/**/body .fc:after {
    	content:"."; 
    	display:block; 
    	height:0; 
    	clear:both; 
    	visibility:hidden;
    	}
    	/* \*/
    	* html .fc{height:1%;}
    	*+html .fc{display:inline-block;}
    	/*  */
    	
    	.banner{
    	width:799px;
    	height:69px;
    	margin:0 auto;
    	background:#ffccff url(images/banner.gif)
    	}
    
    	.l{float:left;width:50%;}
    	* html .x{float:left;width:49.9%;}
    
    	.bannerspacerleft,.bannerspacerright{
    	height:43px;
    	background: rgb(0,0,0);
    	}
    	.bannerspacerleft,.bannercontentmenu{margin:0 10px 0 0;}
    	.bannerspacerright,.bannersitemenu{margin:0 0 0 10px;}
    	.bannercontentmenu,.bannersitemenu{padding:3px 5px 3px 5px;}
    
    	.bannercontentmenu,.bannersitemenu {font: 11pt arial,sans-serif;}
    	</style>
    	<script type="text/javascript">
    
    	</script>
    </head>
    <body>
    <div class="banner fc">
    
    <div class="l">
    <h2 class="bannerspacerleft"></h2>
    <h3 class="bannercontentmenu">News | Media | Projects | Supporters | Shop</h3>
    </div>
    <div class="l x">
    <h2 class="bannerspacerright"></h2>
    <h3 class="bannersitemenu">Home | Site Map | Contact Us</h3>
    
    </div>
    </div>
    
    </body>
    </html>
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
    <head>
    <title>12345 12345 12345 12345 12345</title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    	<style type="text/css">
    	
    	head+/**/body .fc:after {
    	content:"."; 
    	display:block; 
    	height:0; 
    	clear:both; 
    	visibility:hidden;
    	}
    	/* \*/
    	* html .fc{height:1%;}
    	*+html .fc{display:inline-block;}
    	/*  */
    	
    	.banner{
    	width:799px;
    	height:69px;
    	margin:0 auto;
    	background:#ffccff url(images/banner.gif)
    	}
    
    	.l,.r{float:left;width:50%;}
    	* html .r{float:left;width:49.9%;}
    
    	.l h2,.r h2{
    	height:43px;
    	background: rgb(0,0,0);
    	}
    	
    	.l h2,.l h3{margin:0 10px 0 0;}
    	.r h2,.r h3{margin:0 0 0 10px;}
    	.l h3,.r h3{padding:3px 5px 3px 5px;}
    
    	.l h3,.r h3{font: 11pt arial,sans-serif;}
    	</style>
    	<script type="text/javascript">
    
    	</script>
    </head>
    <body>
    <div class="banner fc">
    
    <div class="l">
    <h2></h2>
    <h3>News | Media | Projects | Supporters | Shop</h3>
    </div>
    
    <div class="r">
    <h2></h2>
    <h3>Home | Site Map | Contact Us</h3>
    
    </div>
    </div>
    
    </body>
    </html>
    Last edited by all4nerds; Jun 20, 2006 at 03:54.

  4. #4
    SitePoint Member
    Join Date
    Nov 2005
    Posts
    8
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I have no idea what this means:

    head+/**/body .fc:after {
    content:".";
    display:block;
    height:0;
    clear:both;
    visibility:hidden;
    }
    /* \*/
    * html .fc{height:1%;}
    *+html .fc{display:inline-block;}
    /* */

    Dosent work so well in IE but it works in Firefox, maybe I can play around with it to get it to work. Thanks.

  5. #5
    Non-Member
    Join Date
    Jan 2005
    Location
    Netherlands
    Posts
    4,300
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hello

    clear the floats see FAQ CSS

    PS both examples work in FF OP IE

  6. #6
    SitePoint Member
    Join Date
    Nov 2005
    Posts
    8
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    What version of IE? I'm getting a freekout in IE 6.

    -so-

    I tried Buddy's idea to use margins and it exploded equaly in IE.

    I can take screen caps if it would help.

  7. #7
    Non-Member
    Join Date
    Jan 2005
    Location
    Netherlands
    Posts
    4,300
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hello

    this code works in

    IE 6 7 FF 1.07 1.5 Moz 1.7 OP 8 8.5 9 NS 6.2 7.1

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
    <head>
    <title>12345 12345 12345 12345 12345</title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    	<style type="text/css">
    	
    	head+/**/body .fc:after {
    	content:"."; 
    	display:block; 
    	height:0; 
    	clear:both; 
    	visibility:hidden;
    	}
    	/* \*/
    	* html .fc{height:1%;}
    	*+html .fc{display:inline-block;}
    	*+html .r{float:left;width:49.9%;}
    	/*  */
    	
    	.banner{
    	width:799px;
    	height:69px;
    	margin:0 auto;
    	background:#ffccff url(images/banner.gif)
    	}
    
    	.l,.r{float:left;width:50%;}
    	* html .r{float:left;width:49.9%;}
    	
    
    	.l h2,.r h2{
    	height:43px;
    	background: rgb(0,0,0);
    	}
    	
    	.l h2,.l h3{margin:0 10px 0 0;}
    	.r h2,.r h3{margin:0 0 0 10px;}
    	.l h3,.r h3{padding:3px 5px 3px 5px;}
    
    	.l h3,.r h3{font: 11pt arial,sans-serif;}
    	</style>
    </head>
    <body>
    <div class="banner fc">
    
    <div class="l">
    <h2></h2>
    <h3>News | Media | Projects | Supporters | Shop</h3>
    </div>
    
    <div class="r">
    <h2></h2>
    <h3>Home | Site Map | Contact Us</h3>
    
    </div>
    </div>
    
    </body>
    </html>

  8. #8
    SitePoint Member
    Join Date
    Nov 2005
    Posts
    8
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Its working great now. Thank You!


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
  •