SitePoint Sponsor

User Tag List

Results 1 to 9 of 9
  1. #1
    SitePoint Enthusiast
    Join Date
    Aug 2005
    Posts
    70
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    CSS layout help!! Weird additional space added

    Hi, i'm having a big problem yet cant seem to work out what im doing wrong!!

    I am desiging a site, which has a menu which is floated. I want the design to have a floated menu, however it is causing me grief.

    When here is no menu (see link), everything is layed out fine.
    http://www.monsterserve.net/nomenu.htm

    When i incldue the floating menu, for some reason there is additional height added in the spacer div (again see link)
    http://www.monsterserve.net/withmenu.htm

    Cant work out for the life of me why it should be adding height, it does it in ie6 and firefox

    Also, how would i go about floating the submenu to the right, and adding a little space between the submenu bottom and the paragraph?

    Code for site can be got from links, or from include below:

    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
    <html>
    <head>
    <style type="text/css">
    
    p{
    	margin: 0px;
    	padding:0px;
    	text-align: justify;
    }
    
    #submenu
    {
    	width:200px;
    	height:200px;
    	border: 1px solid black;
    }
    
    body
    {
    	margin:0px;
    	padding:0px;
    	font-family: Tahoma, Arial,sans-serif;
    	font-size: 11px;
    }
    
    #container
    {
    	width: 800px;
    	margin-left: auto;
    	margin-right: auto;
    	margin-top: 10px; /* offset 10px from page top */
    	text-align:left;
    	border: 1px solid black;
    }
    
    #menu
    {
    	position:relative;
    	width:275px;
    	height:20px;
    	border: 1px solid black;
    	left: 76px;
    	top: 44px;
    }
    
    #left
    {
    float:left;
    width:400px;
    margin: 0px;
    }
    
    #right
    {
    	margin-left: 400px;
    	padding: 10px;
    	border-left: 1px solid black;
    }
    
    #spacer
    {
    	height:30px;
    	border-bottom: 1px solid black;
    }
    
    </style>
    
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    <title>Untitled Document</title>
    </head>
    <body>
    <div id="container">
    	<div id="menu">menu</div>
    	<div id="spacer">spacer</div>
    	<div id="left">picture</div>
    	<div id="right">
    		<div id="submenu">submenu</div>
    		<p>
    			Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec molestie. Sed aliquam sem ut arcu.
    			Phasellus sollicitudin. Vestibulum condimentum facilisis nulla. In hac habitasse platea dictumst.
    			Nulla nonummy. Cras quis libero. Cras venenatis. Aliquam posuere lobortis pede. Nullam fringilla
    			urna id leo. Praesent aliquet pretium erat. Praesent non odio. Pellentesque a magna a mauris
    			vulputate lacinia. Aenean viverra. Class aptent taciti sociosqu ad litora torquent per conubia nostra,
    			per inceptos hymenaeos. Aliquam lacus. Mauris magna eros, semper a, tempor et, rutrum et, tortor
    		</p>
             </div> <!-- end right div -->
    </div> <!-- end container div -->
    </body>
    </html>
    Many thanks in advance, hopefully someone can help me before i go insane!!

    Cheers,

    Chris

  2. #2
    Winemaster bronze trophy BonRouge's Avatar
    Join Date
    Oct 2004
    Location
    Sendai, Japan
    Posts
    2,417
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I'm sorry, I haven't played around with your page or anything like that, but I think you're starting from a misunderstanding... Do you know what happens when you use relative positioning and 'top' or 'left'? The space that the element takes up is taken up, and then the element appears to have moved, but it kind of hasn't. The space that it fills without the position values is still taken up - the element just appears to have moved. I have a feeling that I haven't explained this very well, but I hope you get the picture. This is the root of your confusion.

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

    you do not float the menu?

    PS container height is controled by margins on element in it

    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    <title>Untitled Document</title>
    <style type="text/css">
    *{padding:0;margin:0;}
    p{
    	margin: 0px;
    	padding:0px;
    	text-align: justify;
    }
    
    #submenu
    {
    	width:200px;
    	height:200px;
    	border: 1px solid black;
    }
    
    body
    {
    	margin:0px;
    	padding:0px;
    	font-family: Tahoma, Arial,sans-serif;
    	font-size: 11px;
    }
    
    #container
    {
    	width: 800px;
    	margin-left: auto;
    	margin-right: auto;
    	margin-top: 10px; /* offset 10px from page top */
    	text-align:left;
    	border: 1px solid black;
    }
    
    #menu{
    	float:left;
    	width:275px;
    	height:20px;
    	border: 1px solid black;
    	background:#ffffcc;
    }
    
    #left
    {
    float:left;
    width:400px;
    margin: 0px;
    }
    
    #right
    {
    	margin-left: 400px;
    	padding: 10px;
    	border-left: 1px solid black;
    }
    
    #spacer{
    	background:#ccffcc;
    	border-bottom: 1px solid black;
    }
    .fl{float:left;}
    
    .fcl{clear:both;height:0px;overflow:hidden;/*margin-top:-1px;*/}
    </style>
    
    
    </head>
    <body>
    <div id="container">
    	
    	<div id="spacer">
    	<p class="fl">spacer</p>
    	<div id="menu">menu</div>
    	<div class="fcl">menu</div>
    	</div>
    	
    	<div id="left">picture</div>
    	<div id="right">
    		<div id="submenu">submenu</div>
    		<p>
    			Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec molestie. Sed aliquam sem ut arcu.
    			Phasellus sollicitudin. Vestibulum condimentum facilisis nulla. In hac habitasse platea dictumst.
    			Nulla nonummy. Cras quis libero. Cras venenatis. Aliquam posuere lobortis pede. Nullam fringilla
    			urna id leo. Praesent aliquet pretium erat. Praesent non odio. Pellentesque a magna a mauris
    			vulputate lacinia. Aenean viverra. Class aptent taciti sociosqu ad litora torquent per conubia nostra,
    			per inceptos hymenaeos. Aliquam lacus. Mauris magna eros, semper a, tempor et, rutrum et, tortor
    		</p>
             </div> <!-- end right div -->
    </div> <!-- end container div -->
    </body>
    </html>

  4. #4
    SitePoint Enthusiast
    Join Date
    Aug 2005
    Posts
    70
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    thanks for the code and replies chaps, all4nerds that is almost what im after, however i would like the menu to be positioned overlapping the border as shown in this picture

    Cheers

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

    position absolute

    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    <title>Untitled Document</title>
    <style type="text/css">
    *{padding:0;margin:0;}
    p{
    	margin: 0px;
    	padding:0px;
    	text-align: justify;
    }
    
    #submenu
    {
    	width:200px;
    	height:200px;
    	border: 1px solid black;
    }
    
    body
    {
    	margin:0px;
    	padding:0px;
    	font-family: Tahoma, Arial,sans-serif;
    	font-size: 11px;
    }
    
    #container
    {
    	width: 800px;
    	margin-left: auto;
    	margin-right: auto;
    	margin-top: 10px; /* offset 10px from page top */
    	text-align:left;
    	border: 1px solid black;
    }
    
    #menu{
    position:absolute;
    left:60px;
    top:20px;
    height:30px;
    	width:275px;
    	height:20px;
    	border: 1px solid black;
    	background:#ffffcc;
    }
    
    #left{
    float:left;
    width:400px;
    margin: 0px;
    }
    
    #right{
    margin-left: 400px;
    padding: 10px;
    border-left: 1px solid black;
    }
    
    #spacer{
    height:30px;
    width:100%;
    position:relative;
    background:#ccffcc;
    border-bottom: 1px solid black;
    }
    
    .fl{float:left;}
    
    .fcl{clear:both;height:0px;overflow:hidden;/*margin-top:-1px;*/}
    
    .mar{margin:5px 0 5px 0;}
    </style>
    
    
    </head>
    <body>
    <div id="container">
    	
    	<div id="spacer">
    	<p class="fl">spacer</p>
    	<div class="fcl"></div>
    	<div id="menu">menu</div>
    	</div>
    	
    	<div id="left">picture</div>
    	<div id="right">
    		<div id="submenu">submenu</div>
    		<p>
    			Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec molestie. Sed aliquam sem ut arcu.
    			Phasellus sollicitudin. Vestibulum condimentum facilisis nulla. In hac habitasse platea dictumst.
    			Nulla nonummy. Cras quis libero. Cras venenatis. Aliquam posuere lobortis pede. Nullam fringilla
    			urna id leo. Praesent aliquet pretium erat. Praesent non odio. Pellentesque a magna a mauris
    			vulputate lacinia. Aenean viverra. Class aptent taciti sociosqu ad litora torquent per conubia nostra,
    			per inceptos hymenaeos. Aliquam lacus. Mauris magna eros, semper a, tempor et, rutrum et, tortor
    		</p>
    </div> <!-- end right div -->
    </div> <!-- end container div -->
    </body>
    </html>

  6. #6
    SitePoint Enthusiast
    Join Date
    Aug 2005
    Posts
    70
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks very very much

    Where did you learn css? could you recommend any good books that have problems/solutions such as mine?

    i can only hope to be as good at css as you one day!!

    Thanks again

    Chris

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

    10 years fooling around

  8. #8
    SitePoint Evangelist figbeam's Avatar
    Join Date
    Jun 2004
    Location
    Sweden
    Posts
    508
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    There's lots of links and info in the sticky thread Beginners thread (Guide to anything and everything) in the Just starting your design forum.

  9. #9
    Winemaster bronze trophy BonRouge's Avatar
    Join Date
    Oct 2004
    Location
    Sendai, Japan
    Posts
    2,417
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    ... and there's always W3Schools.


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
  •