Hello and welcome to our community! Is this your first visit?
Register
Results 1 to 8 of 8
  1. #1
    Insanity Skype's Avatar



    Join Date
    Apr 2007
    Location
    England
    Posts
    27,397

    Gaps between divs?

    See the gaps at the top and bottom of the content? How would I get rid of those?

    [img]http://**********.com/img/1238483163.png[/img]

    It's bugging the crap outta me.

    Please only reply if you know for DEFINITE how to fix it.

    HTML:
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    
    <html xmlns="http://www.w3.org/1999/xhtml">
    
    <head>
    
    <link rel="stylesheet" type="text/css" href="style.css" />
    
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    
    <title>Theme3 &bull; Earth</title>
    
    </head>
    
    <body>
    
    <div id="shadow">
    
    <div id="container">
    
    	<div id="header"></div>
        
        	<div id="navigation">
            
            	<ul>
                	[*]Home[*]Link[*]Link[*]Link[*]Link[*]Link[*]Link
    			[/list]
        
        	</div>
        
        		<div id="content">
                
                	
    
    
                
                	Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras ac lectus. Vivamus ut erat. Maecenas luctus, felis a malesuada tristique, erat dolor porta neque, et accumsan metus mauris sodales odio. Fusce erat dui, bibendum ac, ornare id, fermentum quis, tortor. Aenean ultricies elit et nisl. Donec tempor orci ac nibh. Sed consectetur scelerisque elit. Morbi quis nisl. Pellentesque aliquam odio et libero. Aenean ultrices. Suspendisse turpis urna, ornare vitae, elementum sed, posuere eu, nunc. In porttitor.
    
    
    
    
    
    Nullam sit amet felis a ligula aliquam elementum. Ut interdum. Duis in odio quis sapien iaculis fringilla. Pellentesque luctus, nunc quis laoreet faucibus, orci odio vestibulum velit, sit amet luctus dolor odio vitae felis. Aenean convallis ipsum eu risus. In sed odio. In hac habitasse platea dictumst. Integer bibendum mattis justo. Quisque condimentum felis nec justo. Phasellus eget felis nec est dictum facilisis. Integer sollicitudin, massa ac fringilla gravida, metus ligula mollis arcu, quis venenatis erat nisi in eros. Nullam vel lacus ac tortor mattis tincidunt. In hac habitasse platea dictumst. Vivamus feugiat diam nec leo. Aliquam eros. Vivamus quis diam. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin at felis quis tortor lacinia tristique. Donec commodo, libero eu rutrum dignissim, ipsum mi ultrices mauris, at scelerisque dolor tellus eget lacus.
    
    
    
    
    
    Vivamus iaculis velit sed enim. Aliquam id velit. Etiam et lectus. Suspendisse sed libero. Ut egestas sem sit amet nulla. Nunc ullamcorper purus a nisl. Proin consectetur sapien in nibh. Integer et mi non quam tempus bibendum. Phasellus nibh lectus, gravida sed, ornare sit amet, faucibus non, enim. In vitae quam. Donec suscipit turpis id massa. Aenean elit turpis, feugiat et, facilisis ac, mattis sodales, augue. Mauris tristique mauris quis ante. Suspendisse consectetur. Vivamus ac ipsum. Donec eu erat. Nulla non justo in risus elementum semper. Nunc leo.
    
    
    
    
    
    Nunc quam diam, ullamcorper quis, volutpat nec, tincidunt quis, tellus. Maecenas vitae risus. Curabitur id magna sed nibh interdum rhoncus. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Cras vitae dolor. Nunc lobortis. Aenean consequat ultrices enim. Sed lorem nisi, convallis quis, euismod ac, sagittis a, dolor. Integer ut orci viverra erat eleifend semper. Ut quis eros volutpat enim adipiscing tempor. Sed convallis quam a neque. Ut sed velit. Vivamus vel erat. Aliquam diam. Proin vitae nisi sit amet velit elementum auctor. Cras lorem. Cras ac diam ac ante fermentum sagittis.
    
    
    
    
    
    Suspendisse arcu lorem, sollicitudin non, eleifend sed, molestie vel, urna. Nam pulvinar pulvinar nunc. Fusce vitae tellus. Vestibulum massa elit, mattis vel, blandit eu, rutrum ut, metus. Duis at lacus at dolor hendrerit aliquam. Maecenas quis lacus. Curabitur fermentum ante sit amet nisl. Morbi cursus vulputate sapien. Phasellus dignissim, arcu vel ultrices ornare, diam neque tincidunt lectus, vitae scelerisque urna nisi sit amet diam. Suspendisse sed metus. 
    
    				</p>
                
                </div>
                
    		<div id="footer">
            
            	Template by Skype &bull; Your Website 2009
        
       		</div>
            
    	<div id="twitter">
        
        </div>
    	
    </div>
    
    </div>
    
    </body>
    
    </html>


    CSS:
    Code:
    body {
    	background-color:#351e01;
    	background-image:url(images/bg2.png);
    	background-repeat:repeat-x;
    	width:600px;
    	font-family:"Trebuchet MS", Arial, Helvetica, sans-serif;
    	font-size:12px;
    	color:#000;
    	text-align:center;
    	height:auto;
    	margin:auto;
    }
    
    #shadow {
    	background-image:url(images/shadow.png);
    	background-repeat:repeat-y;
    	width:650px;
    	margin:auto;
    	text-align:center;
    }
    
    #container {
    	width:600px;
    	height:auto;
    	margin:auto;
    }
    
    #header {
    	width:600px;
    	text-align:center;
    	background-image:url(images/header.png);
    	background-repeat:no-repeat;
    	height:150px;
    }
    
    #navigation {
    	width:600px;
    	height:40px;
    	text-align:center;
    	background-color:#2a374b;
    	margin:auto;
    	display:block;
    	padding:0;
    	float:none;
    }
    
    #navigation ul, li {
    	padding:0;
    	font-size:26.5px;
    	display:inline;
    	list-style-type:none;
    }
    
    #navigation a {
    	font-size:18px;
    	color:#6782b9;
    	background-color:#2a374b;
    	padding-bottom:7px;
    	padding-top:10px;
    	padding-left:10px;
    	padding-right:10px;
    	text-decoration:none;
    }
    
    #navigation a:visited {
    	font-size:18px;
    	color:#6782b9;
    	background-color:#2a374b;
    	padding-bottom:7px;
    	padding-top:10px;
    	padding-left:10px;
    	padding-right:10px;
    	text-decoration:none;
    }
    
    #navigation a:hover {
    	color:#000;
    	background-color:#b3cbdd;
    }
    
    #content {
    	width:600px;
    	margin:auto;
    	height:auto;
    	text-align:left;
    	background-color:#b3cbdd;
    }
    
    #content p {
    	padding-bottom:10px;
    	padding-top:40px;
    	padding-left:10px;
    	padding-right:10px;
    }
    
    #footer {
    	width:600px;
    	font-size:10px;
    	background-color:#b3cbdd;
    }


    If there's some unnecessary CSS/HTML I don't need, tell me please. I learn from my mistakes

    Also, I've tried setting the content to float left, but then it stops my drop shadow from working. With the drop shadow, I basically made an image 650 px wide with an invisible 600px box with a drop shadow on, then I wrapped the whole site in this div so the drop shadow is displayed. It was the easiest way I could think of with my current situation.

    Anyway, help if you can. Thanks.

  2. #2
    Veteran Enthusiast

    Join Date
    Jul 2006
    Location
    106 is fumpin', pumpin' up in this hoe, for sho, my bro
    Posts
    7,112

    Re: Gaps between divs?

    I have had this problem before, and if I remember correctly, it was to do with the

    tags.
    Try switching them out for
    [center:3mdlh4lx]Fuck you. Cunt.[/center:3mdlh4lx]

  3. #3
    Insanity Skype's Avatar



    Join Date
    Apr 2007
    Location
    England
    Posts
    27,397

    Re: Gaps between divs?

    But I need the

    tags for the padding of the text, otherwise it goes right up to the edge of the div and looks weird.

  4. #4
    Veteran Enthusiast Yadda's Avatar


    Join Date
    Mar 2006
    Location
    Ontario
    Posts
    7,862

    Re: Gaps between divs?

    I don't exactly know the purpose of "height: auto;" but I never really have used it and have made layouts just like this before. I am presuming that the navigation is directly above your layout.

    Try removing some nested "height: auto;" declaratives and see how that works.


  5. #5
    Veteran Enthusiast

    Join Date
    Jul 2006
    Location
    106 is fumpin', pumpin' up in this hoe, for sho, my bro
    Posts
    7,112

    Re: Gaps between divs?

    Quote Originally Posted by Skype
    But I need the

    tags for the padding of the text, otherwise it goes right up to the edge of the div and looks weird.
    Create padding using css in the stylesheet, either by using padding or margin.
    [center:3mdlh4lx]Fuck you. Cunt.[/center:3mdlh4lx]

  6. #6
    Insanity Skype's Avatar



    Join Date
    Apr 2007
    Location
    England
    Posts
    27,397

    Re: Gaps between divs?

    Quote Originally Posted by Mackeo
    Quote Originally Posted by Skype
    But I need the

    tags for the padding of the text, otherwise it goes right up to the edge of the div and looks weird.
    Create padding using css in the stylesheet, either by using padding or margin.
    All that does is pushes out the content.

    So like, rather than padding the text, the text stays in the same place and the div tag just gets wider.


  7. #7
    Veteran Enthusiast

    Join Date
    Jul 2006
    Location
    106 is fumpin', pumpin' up in this hoe, for sho, my bro
    Posts
    7,112

    Re: Gaps between divs?

    Create a div for the text then.......
    [center:3mdlh4lx]Fuck you. Cunt.[/center:3mdlh4lx]

  8. #8
    Insanity Skype's Avatar



    Join Date
    Apr 2007
    Location
    England
    Posts
    27,397

    Re: Gaps between divs?

    Nevermind I fixed it, lol.

    Set the nav div and the content div to float:left;.

    I'm pretty sure this is incorrect, but it shows fine in IE and FF, so I don't mind.

    Thanks for yer help Mackeo.


 

Posting Permissions

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