Web Analytics Made Easy -
StatCounter Trying to get rid of vertical space between divs - CodingForum

Announcement

Collapse
No announcement yet.

Trying to get rid of vertical space between divs

Collapse
X
 
  • Filter
  • Time
  • Show
Clear All
new posts

  • Trying to get rid of vertical space between divs

    Well, I haven't really uploaded this page yet, since Im still working these bugs out. But I dont think there is a need in this case since I can descirbe the problem...

    Here's the CSS:

    Code:
    body { 
    	background: url(images/jeans.jpg);
    	text-align: center; 
    	margin: 0px; 
    	padding: 0px; 
    	overflow: auto;
    	font: 12px/15px Arial, Helvetica, sans-serif;
    } 
    	.site {
    		width:780px;
    		margin-right: auto; 
    		margin-left: auto; 
    		position: relative; 
    		text-align: left;  
    		clear: both;
    	}
    		#header {
    			height: 308px;
    		}
    			#headtop {
    				background-image: url(images/headtop.jpg);
    				width: 780px;
    				height: 27px;
    			}
    			#linkhead {
    				width: 462px;
    				height: 133px;
    				float: left;
    			}
    				 #linkleft {
    					width: 193px;
    					height: 76px;
    					float: left;
    				}
    					 #headlink1 {
    						background: url(images/headlink1.jpg);
    						width: 51px;
    						height: 42px;
    						float: left;
    					}
    					 #headlink2 {
    						background: url(images/headlink2.jpg);
    						width: 142px;
    						height: 15px;
    						float: left;
    					}	
    					 #headlink3 {
    						background: url(images/headlink3.jpg);
    						width: 76px;
    						height: 27px;
    						float: left;
    					}	
    					 #headlink4 {
    						background: url(images/headlink4.jpg);
    						width: 66px;
    						height: 27px;
    						float: left;
    					}	
    					 #headlink8 {
    						background: url(images/headlink8.jpg);
    						width: 193px;
    						height: 34px;
    						float: left;
    					}	
    				 #headlink4a {
    				 	background: url(images/headlink4a.jpg);
    					width: 62px;
    					height: 61px;
    					float: left;
    				}
    				 #headlink2a {
    				 	background: url(images/headlink2a.gif);
    					width: 269px;
    					height: 15px;
    					float: left;
    				}
    				 #headlink5 {
    				 	background: url(images/headlink5.jpg);
    					width: 64px;
    					height: 27px;
    					float: left;
    				}		
    				 #headlink6 {
    				 	background: url(images/headlink6.jpg);
    					width: 62px;
    					height: 27px;
    					float: left;
    				}		
    				 #headlink7 {
    				 	background: url(images/headlink7.jpg);
    					width: 81px;
    					height: 27px;
    					float: left;
    				}		
    				 #headlink9 {
    				 	background: url(images/headlink9.jpg);
    					width: 64px;
    					height: 34px;
    					float: left;
    				}				
    				 #headlink10 {
    				 	background: url(images/headlink10.jpg);
    					width: 62px;
    					height: 34px;
    					float: left;
    				}			
    				 #headlink11 {
    				 	background: url(images/headlink11.jpg);
    					width: 58px;
    					height: 34px;
    					float: left;
    				}		
    				 #headlink12 {
    				 	background: url(images/headlink12.jpg);
    					width: 23px;
    					height: 34px;
    					float: left;
    				}		
    				 #headlink13 {
    				 	background: url(images/headlink13.jpg);
    					width: 127px;
    					height: 57px;
    					float: left;
    				}	
    				 #headlink14 {
    				 	background: url(images/headlink14.jpg);
    					width: 66px;
    					height: 57px;
    					float: left;
    				}	
    				 #headlink15 {
    				 	background: url(images/headlink15.jpg);
    					width: 109px;
    					height: 57px;
    					float: left;
    				}	
    				 #headlink16 {
    				 	background: url(images/headlink16.jpg);
    					width: 79px;
    					height: 57px;
    					float: left;
    				}	
    				 #headlink17 {
    				 	background: url(images/headlink17.jpg);
    					width: 58px;
    					height: 57px;
    					float: left;
    				}	
    				 #headlink18 {
    				 	background: url(images/headlink18.jpg);
    					width: 23px;
    					height: 57px;
    					float: left;
    				}	
    			#homelink {
    				background: url(images/homelink.jpg);
    				width: 205px;
    				height: 133px;
    				float: left;
    			}
    			#headlinkright {
    				background: url(images/headlinkright.jpg);
    				width: 113px;
    				height: 133px;
    				float: left;
    			}
    			#headbot {
    				background: url(images/headbot.jpg);
    				width: 780px;
    				height: 13px;
    				float: left;
    			}
    		#sitebody {
    			background: url(images/contentbody.jpg) repeat-y;
    			width: 780px;
    			overflow: auto;
    		}
    			#allcontentl {
    				background: url(images/contenthead.jpg) top no-repeat;
    				width: 628px;
    				height: inherit;
    				margin: 0px 0px 0px 0px;
    				float: left;
    				color: #666666;
    			}
    				#content {
    					width: 590px;
    					padding: 20px 0px 0px 0px;
    					margin: 0px 0px 0px 25px;
    					text-align: justify;
    				}
    			#allcontentr {
    				width: 152px;
    				margin: 0px 0px 0px 628px;
    			}
    				#sidenavtop {
    					width: 152px;
    					height: 78px;
    				}
    					#pfield {
    						width: 39px;
    						height: 78px;
    						float: left;
    					}
    						.sidelink1 {
    							background: url(images/sidelink1.jpg);
    							width: 39px;
    							height: 40px;
    						}
    						.sidelinkprint {
    							background: url(images/sidelinkprint.jpg);
    							width: 39px;
    							height: 38px;
    						}
    					#afield {
    						width: 28px;
    						height: 78px;
    						float: left;
    					}
    						.sidelinkadd {
    							background: url(images/sidelinkadd.jpg);
    							width: 28px;
    							height: 53px;
    						}
    						.sidelinkbot {
    							background: url(images/sidelinkbot.jpg);
    							width: 28px;
    							height: 25px;
    						}
    					#cfield {
    						width: 53px;
    						height: 78px;
    						float: left;
    					}
    						.sidelinkcontact {
    							background: url(images/sidelinkcontact.jpg);
    							width: 53px;
    							height: 40px;
    						}
    						.sidelinkbot2 {
    							background: url(images/sidelinkbot2.jpg);
    							width: 53px;
    							height: 38px;
    						}
    					#sidelinkright {
    						background: url(images/sidelinkright.jpg);
    						width: 32px;
    						height: 78px;
    						clear: right;
    						float: right;
    					}
    					#navout {
    						background: url(images/sidenavhead.jpg) top  no-repeat;
    						padding: 0px 0px 0px 0px;
    						margin: 0px 0px 0px 0px;
    						font: 11px Arial, Helvetica, sans-serif;
    						text-align: left;
    						color: #666666;
    					}
    					#nav {
    						width: 95px;
    						padding: 10px 0px 0px 0px;
    						margin: 0px 0px 0px 2px;
    						text-align: right;
    					}
    				#contentbot {
    					background: url(images/contentbot.jpg);
    					width: 628px;
    					height: 188px;
    					float: left;
    				}
    				#sidenavbot {
    					background: url(images/sidenavbot.jpg);
    					width: 152px;
    					height: 188px;
    				}
    				#footwrapper {
    					width: 780px;
    					height: 25px;
    					clear: both;
    				}
    					#footleft {
    						background: url(images/footleft.jpg);
    						width: 127px;
    						height: 25px;
    						float: left;
    					}
    					#foot {
    						background: url(images/foot.jpg);
    						width: 501px;
    						height: 25px;
    						float: left;
    					}
    					#footright {
    						background: url(images/footright.jpg);
    						width: 152px;
    						height: 25px;
    						float: left;
    					}
    				#footbot {
    					background: url(images/footbot.jpg);
    					width: 780px;
    					height: 17px;
    				}
    And here's the HTML:

    Code:
    <body>
    <div class="site">
    	<div id="header">
    		<div id="headtop"></div>
    		<div id="linkhead">
    			<div id="linkleft">
    				<div id="headlink1"></div>
    				<div id="headlink2"></div>
    				<div id="headlink3"></div>
    				<div id="headlink4"></div>
    				<div id="headlink8"></div>
    			</div>
    			<div id="headlink2a"></div>
    			<div id="headlink4a"></div>
    			<div id="headlink5"></div>
    			<div id="headlink6"></div>
    			<div id="headlink7"></div>
    			<div id="headlink9"></div>
    			<div id="headlink10"></div>
    			<div id="headlink11"></div>
    			<div id="headlink12"></div>
    			<div id="headlink13"></div>
    			<div id="headlink14"></div>
    			<div id="headlink15"></div>
    			<div id="headlink16"></div>
    			<div id="headlink17"></div>
    			<div id="headlink18"></div>
    		</div>
    		<div id="homelink"></div>
    		<div id="headlinkright"></div>
    		<div id="headbot"></div>
    	</div>
    	<div id="sitebody">
    		<div id="allcontentl">
    			<div id="content">
    sem. Aenean ultricies. Praesent mi. Etiam non risus. Suspendisse porttitor mattis leo. In quis quam et elit ornare condimentum. Class aptent taciti sociosqu litora torquent per conubia nostra, per inceptos hymenaeos. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nunc interdum aliquet enim. Etiam consequat. Etiam pulvinar auctor purus. Nulla diam neque, sagittis quis, scelerisque id, facilisis id, wisi. Nam purus. Vestibulum odio erat, ullamcorper eget, facilisis nec, commodo at, nisl. Donec quis nunc eget lorem egestas tempor. Nam euismod mauris quis sem. Morbi ipsum eros, vulputate a, volutpat et, malesuada quis, ante. Sed eget lectus. Pellentesque dapibus, turpis vitae faucibus tempus, sem neque lobortis ligula, at gravida lacus metus et libero. Nunc nonummy diam ac tortor.<br />
    sem. Aenean ultricies. Praesent mi. Etiam non risus. Suspendisse porttitor mattis leo. In quis quam et elit ornare condimentum. Class aptent taciti sociosqu litora torquent per conubia nostra, per inceptos hymenaeos. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nunc interdum aliquet enim. Etiam consequat. Etiam pulvinar auctor purus. Nulla diam neque, sagittis quis, scelerisque id, facilisis id, wisi. Nam purus. Vestibulum odio erat, ullamcorper eget, facilisis nec, commodo at, nisl. Donec quis nunc eget lorem egestas tempor. Nam euismod mauris quis sem. Morbi ipsum eros, vulputate a, volutpat et, malesuada quis, ante. Sed eget lectus. Pellentesque dapibus, turpis vitae faucibus tempus, sem neque lobortis ligula, at gravida lacus metus et libero. Nunc nonummy diam ac tortor.<br />
    sem. Aenean ultricies. Praesent mi. Etiam non risus. Suspendisse porttitor mattis leo. In quis quam et elit ornare condimentum. Class aptent taciti sociosqu litora torquent per conubia nostra, per inceptos hymenaeos. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nunc interdum aliquet enim. Etiam consequat. Etiam pulvinar auctor purus. Nulla diam neque, sagittis quis, scelerisque id, facilisis id, wisi. Nam purus. Vestibulum odio erat, ullamcorper eget, facilisis nec, commodo at, nisl. Donec quis nunc eget lorem egestas tempor. Nam euismod mauris quis sem. Morbi ipsum eros, vulputate a, volutpat et, malesuada quis, ante. Sed eget lectus. Pellentesque dapibus, turpis vitae faucibus tempus, sem neque lobortis ligula, at gravida lacus metus et libero. Nunc nonummy diam ac tortor.
    			</div>
    		</div>
    		<div id="allcontentr">
    			<div id="sidenavtop">
    				<div id="pfield">
    					<div class="sidelink1"></div>
    					<div class="sidelinkprint"></div>
    				</div>
    				<div id="afield">
    					<div class="sidelinkadd"></div>
    					<div class="sidelinkbot"></div>
    				</div>
    				<div id="cfield">
    					<div class="sidelinkcontact"></div>
    					<div class="sidelinkbot2"></div>
    				
    				</div>
    				<div id="sidelinkright"></div>
    			</div>
    			<div id="navout">
    				<div id="nav">
    sem. Aenean ultricies. Praesent mi. Etiam non risus. Suspendisse porttitor mattis leo. In quis quam et elit ornare condimentum. Class aptent taciti sociosqu litora torquent per conubia nostra, per inceptos hymenaeos. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nunc interdum aliquet enim. Etiam consequat. Etiam pulvinar auctor purus. Nulla diam neque, sagittis quis, scelerisque id, facilisis id, wisi. Nam purus. Vestibulum odio erat, ullamcorper eget, facilisis nec, commodo at, nisl. Donec quis nunc eget lorem egestas tempor. Nam euismod mauris quis sem. Morbi ipsum eros, vulputate a, volutpat et, malesuada quis, ante. Sed eget lectus. Pellentesque dapibus, turpis vitae faucibus tempus, sem neque lobortis ligula, at gravida lacus metus et libero. Nunc nonummy diam ac tortor.
    				</div>
    			</div>
    		</div>
    		<div id="contentbot">
    			
    		</div>
    		<div id="sidenavbot"></div>
    		<div id="footwrapper">
    			<div id="footleft"></div>
    			<div id="foot"></div>
    			<div id="footright"></div>
    		</div>
    		<div id="footbot"></div>
    	</div>
    </div>
    </body>
    The problem is that the #sitebody div is suppose to be right under the #header div, but there is an extremely large space(aprox. 300px) between them. I searched sround and found out a lot of other people are also having this problem and some are only having it is IE, but for me it's both IE and FF... Anyone know a way to fix this? Thnx in advance...
    Last edited by stickfigure; Oct 11, 2006, 12:31 AM.

  • #2
    Seems like someone wants to help me out...
    If there is anything wrong, or if someone needs me to actually upload the site, please tell me and I will do whatever I can to recieve help with this...

    Comment


    • #3
      Wow! You've got an extreme case of divitis.

      What doctype are you using?
      Learn CSS. | SSI | PHP includes | X/HTML Validator | CSS validator | Dynamic Site Solutions
      Java != JavaScript && JScript != JavaScript
      Design/program for Firefox (and/or Opera), apply fixes for IE, not the other way around.

      Comment


      • #4
        Using XHTML with CSS! And my site is validated through w3.org, so I can't figure out what the heck im doing wrong...

        Sorry, but im not familiar with what divtis means, I looked it up and found few vague explanations. Are you saying this is my problem? Thnx for the reply btw...

        Comment


        • #5
          What he means is you are using way too many divs. You need to think semantics when you are coding. Post a link to your site please.
          ||||If you are getting paid to do a job, don't ask for help on it!||||

          Comment


          • #6
            "divitis" isn't underlined for emphasis (a big faux pas on the web) -- it's a link. Did you follow it?

            When I google it several of the top 20 pages have fairly good explanaitions of it.

            Validating isn't everything. You can have plenty of code that validates that doesn't look right in any browser.

            I doubt the <div>s are causing the problem you asked about. Asking a question on a programming forum makes the rest of your code fair game for constructive criticism.
            Learn CSS. | SSI | PHP includes | X/HTML Validator | CSS validator | Dynamic Site Solutions
            Java != JavaScript && JScript != JavaScript
            Design/program for Firefox (and/or Opera), apply fixes for IE, not the other way around.

            Comment


            • #7
              Originally posted by Kravvitz View Post
              "divitis" isn't underlined for emphasis (a big faux pas on the web) -- it's a link. Did you follow it?
              Thnx, I did follow the link, but didnt understand it, but know I do. (I also misread the word as divtis, which lead to wrong search results. Sorry about that...)
              Originally posted by _Aerospace_Eng_ View Post
              Post a link to your site please.
              I uploaded the site, so you can have a better look at what im facing...
              splatterbyte.awardspace.com

              Comment


              • #8
                Can you find a different host? I'm trying to view background images in my browser but your host sees that as hotlinking not allowing me to view them. You seemed to overcomplicated things by slicing every image into a lot of different images. The whole point of not use tables is not to replace every td cell with a div.
                ||||If you are getting paid to do a job, don't ask for help on it!||||

                Comment


                • #9
                  Well, the reason I used so many divs, was because all the links I have were diagnol( templates, designs.... html&css, php&database... print,add,contact... all these are going to be mouse over css links) due to the artwork that I had them in... To make each link acurate and not cover area other than the text, I had to do this for css links...
                  I upped the site to a different host, here:
                  splatterbyte.freehostia.com
                  Thnx, I really appreciate you helping me... Im not much of a web designer as you can probably see, so im still geting used to it. I'd appreciate any pointer you could give me on my syntax...
                  Last edited by stickfigure; Oct 12, 2006, 04:06 AM.

                  Comment


                  • #10
                    Hmm usually for links like what you have its easier to use an image map. Don't slice up the header into so many pieces. That will help you imensely as you won't need as many divs.
                    ||||If you are getting paid to do a job, don't ask for help on it!||||

                    Comment


                    • #11
                      I see.. So I was planning on being able to change the look of my whole webite just by changing my CSS file... You think this would be possible if I have Image maps, because then the location on the maps will only be for the particular image... Or is there a beter way? And I guess this is what's causing my problem, huh?
                      Last edited by stickfigure; Oct 12, 2006, 11:04 AM.

                      Comment


                      • #12
                        I managed to somewhat fix my orignial issue by adding margin: -135px 0px 0px 0px; to #sitebody, but im not sure if this is a valid and universal way of doing this.

                        Comment


                        • #13
                          The cause of that gap is the height you have set on #header.

                          I suggest you look at this:
                          Tips on Debugging Layouts
                          and these:
                          http://www.alistapart.com/articles/sprites/
                          http://www.alistapart.com/articles/imagemap/
                          Last edited by Kravvitz; Oct 12, 2006, 02:15 PM.
                          Learn CSS. | SSI | PHP includes | X/HTML Validator | CSS validator | Dynamic Site Solutions
                          Java != JavaScript && JScript != JavaScript
                          Design/program for Firefox (and/or Opera), apply fixes for IE, not the other way around.

                          Comment


                          • #14
                            Thnx Kravvitz, that must have been the stupidest thing I've ever done... i dont know where I got the extra 135px when I was adding the divs inside #header...

                            Comment

                            Working...
                            X