Help - Search - Members - Calendar
Full Version: Unwanted space between header/image and div below..
HTMLHelp Forums > Web Authoring > Markup (HTML, XHTML, XML)
Focus1
Hi guy's, just finished up college for the term and getting back into some HTML but I'm having an issue here and I tried a lot of margin and padding options in CSS but it's not fixing my issue.

Basically if I have either a header with a color or an image as my header right below it, there is some unwanted space. I want the header to sit flush on the next div but it's just not happening for me.

In "sample 1" I want my navmenu to sit flush from the top header to the next set of div's, to take up the whole space but instead there seems to be lots of margin or padding around my navmenu ? I'm not sure how to explain this really, so sorry if I'm putting this across wrong.

I've put 2 links to samples of my issue below and I have all fingers and toes crossed that someone can help me out here because it's drove me nuts already smile.gif

As I say I'm quite new to HTML in general but I'm getting there but just can't the div's to sit flush as you can see with the image header in sample "2" and in sample "1" I'm just having a mess around with a floating layout so don't mind the messed up colours smile.gif

All suggestions appreciated!

Sample 1: http://img341.imageshack.us/img341/4049/floatingq.jpg
Sample 2: http://img38.imageshack.us/img38/8817/floating1.jpg

P.s my CSS is below smile.gif

body {
font: 76%/160% Tahoma, Verdana, Arial, sans-serif;
margin: 0;
text-align: center;
background-color: #EEEE00;
}

#wrapper {
width: 960px;
margin: 0 auto;
padding: 0;
text-align: left;
border-left: 1px solid #4f4f4f;
border-right: 1px solid #4f4f4f;
background-color: #fff;
}

#header {
width: 100%;
height: 150px;
background-color: green ;
}

#navmenu li {display: inline; padding: 0px 48px 0px 48px; text-align: center; background-color: #AAAAAA ; }

navmenu ul {margin: 0; padding: 0;
list-style-type: none; list-style-image: none; }

#left { /*720px normal width the padding of 30px applies to the top, right, bottom and left so I'm subtracting 60px from 720px*/
width: 660px;
float: left;
background-color: #fff;
padding: 30px;
}

#right { /* 240px is the entire size, 30px to the top, 25px to the right, 30px to the bottom and 25px to the left so subtracting 55px in total- 25 is for left and right and 30 is for top and bottom*/
width: 185px;
float: left;
background-color: #ccc;
padding: 30px 25px 30px 30px;
}

#footer {
clear: both;
width: 100%;
height: 150px;
background-color: green ;
}
pandy
We need the rest also. Can you link to the pages?
Focus1
Hi, in the sample 1 I haven't got the pages set up so I can link to them but in the second sample I have the 2 pages set up and yes I can link to them without any issues.

I have this problem will all my web practice pages, my header or header image never sits 'exactly' on top of the content below, I always have this 'gap' or space just below.

Cheers for the reply!
Focus1
I've just circled the issue with paint just to point it out as to the exact problem. The image is leaving a small space and the navmenu seems to have some padding on the top and bottom and is not taking up all the space like it should.

http://img100.imageshack.us/img100/8481/floatingg.jpg

http://img853.imageshack.us/img853/8817/floating1.jpg

Cheers guys
pandy
Post that the link to the page you have on the web then.
Focus1
Hi Pandy and again thanks for the reply!

I think I'll have to look for an alternative way to accomplish what I want to do as I googled so much my head hurts :/

Pandy none of these links are live on the web, I just have the files on my hard drive, I havn't got to the stage of having a site up to scratch to send live on the web 'yet'.

What I've done now is I've basically moved the navmenu div up into my header rather than having it right below it and I might have to leave it like this for future and just make an image in photoshop to sit about the links in the header.

In your opinion, am I doing the navbar/links right, or is there a more appropriate easier way to do my links so they will sit exactly under my banner/image/header ?

This is how I have it now, I'm thinking of making an image in photo shop to sit above my links in the header >> http://img809.imageshack.us/img809/7039/floating2l.png


Again, thanks for the help!
pandy
I misunderstood then. I thought you had one of them online. Well, post the HTML then.
Focus1
Hi Pandy, sorry my fault for not putting it across properly.

This is my practice design as of now http://img689.imageshack.us/img689/3712/floating3.png

As you can see I have my links/navmenu in the header, can you tell me is there a way of putting the navmenu exactly underneath the header in a block of colour that will strect right across my fixed width layout and have no gaps or white space to the top or below it ?

Code is as follows :

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">

<html>
<head>

<title>Floating Layout</title>

<meta http-equiv="Content-type"
content="text/thml; charset=ISO-8859-1">

<meta name="Description"
content="">

<meta name="Keywords"
content="">

<link rel="stylesheet" type="text/css" href="style.css">

</head>

<body>


<div id ="wrapper">

<div id ="header"> <br>
<br>
<br>
<br>
<br>
<br>

<div id="navmenu">

<ul>
<li><a href="Home.html">Home</a></li>
<li><a href="Aboutus.html">About Us</a></li>
<li><a href="Results.html">Results</a></li>
<li><a href="Memories.html">Memories</a></li>
<li><a href="Joinus.html">Join Us</a></li>
<li><a href="faq.html">FAQ</a></li>
</ul>
</div><!--/navmenu div-->
</div> <!--header div-->

<div id ="left">
<p><img src="bloomingflower.gif" alt="picture of flower" width="340" height="250">Berbeza dari pendapat umum yang popular, Lorem Ipsum bukan karya text secara rambang. Ia menpunyai asal usul dari secebis sastera klasik Latin dari kurun 45 TM (Tahum Masihi) , menjadikan ia karya berusia lebih 2000 tahun. Richard McClintock, seorang professor bahasa di Latin di Hampden-Sydney College in Virginia, USA, telah menyelidik salah satu ayat Latin yang kurang difahami, "consectetur" dan dalam menelitikan pengunaan perkataan ini dalam karya klasikal, telah menjumpai asal perkataan "consectetur" ini. Lorem Ipsum berasal dari seksyen 1.10.32 dan 1.10.33 karya "de Finibus Bonorum et Malorum" (Kebaikan dan Kejahan Yang Ekstrim) oleh Cicero, ditulis pada 45 SM. Buku ini ialah satu peniliitian tentang teori etika, dan amat popular pada zaman Renaissance. Ayat pertama Lorem Ipsum, "Lorem ipsum dolor sit amet..", datangnya dari ayat terkadung didalam seksyen 1.10.32.

Sejumlah text seragam Lorem Ipsum yang digunakan semenjak 1500an di terbitkan di bawah ini untuk mereka yang berminat. Seksyen 1.10.32 dan 1.10.33 from "de Finibus Bonorum et Malorum" oleh Cicero juga disertakan seperti kandungan asal, dan disusuli dengan versi Inggeris semenjak tahun 1914, yang di terjemah oleh H. Rackham.</p>

</div><!--left div-->

<div id ="right">
<p>Berbeza dari pendapat umum yang popular, Lorem Ipsum bukan karya text secara rambang. Ia menpunyai asal usul dari secebis sastera klasik Latin dari kurun 45 TM (Tahum Masihi) , menjadikan ia karya berusia lebih 2000 tahun. Richard McClintock, seorang professor bahasa di Latin di Hampden-Sydney College in Virginia, USA, telah menyelidik salah satu ayat Latin yang kurang difahami, "consectetur" dan dalam menelitikan pengunaan perkataan ini dalam karya klasikal, telah menjumpai asal perkataan "consectetur" ini. Lorem Ipsum berasal dari seksyen 1.10.32 dan 1.10.33 karya "de Finibus Bonorum et Malorum" (Kebaikan dan Kejahan Yang Ekstrim) oleh Cicero, ditulis pada 45 SM. Buku ini ialah satu peniliitian tentang teori etika, dan amat popular pada zaman Renaissance. Ayat pertama Lorem Ipsum, "Lorem ipsum dolor sit amet..", datangnya dari ayat terkadung didalam seksyen 1.10.32.

Sejumlah text seragam Lorem Ipsum yang digunakan semenjak 1500an di terbitkan di bawah ini untuk mereka yang berminat. Seksyen 1.10.32 dan 1.10.33 from "de Finibus Bonorum et Malorum" oleh Cicero juga disertakan seperti kandungan asal, dan disusuli dengan versi Inggeris semenjak tahun 1914, yang di terjemah oleh H. Rackham.</p>
</div><!--right div-->

<div id="footer">

</div><!--footer div-->

</div> <!--/wrapper div-->


</body>

</html>
pandy
It's the default margins browsers add to lists that cause the gap when you move the menu out of the header. The easiest way to handle that is to first remove all margin and padding from the list and then add back what you want them to be, if needed.

CODE
ul,li   { margin: 0; padding: 0 }


If you want to use other lists on the site, with the default styling, you may want to use a more specific selector than I did.

As for the background color, apply it to UL. Now you apply it to LI and you've made LI display inline, which means the background will just be behind the text and not go all the way out. Same as if you use a background with a 'real' inline element, like SPAN.

Just something I noticed, if you don't plan to use the DIV with the id 'navmenu' for anything else, it isn't needed. You can use the ID with UL directly so the DIV has no function really.
Focus1
Thank you very much, you're a star smile.gif

It was 12.40am last night and I was exhausted so I just got round to this now and straight away by removing the padding and margin from the li and ul it sat in flush right away so thank you very much as I spent literally hours googling and trying different solutions yesterday with no luck at all.

I seem to have some of the basics of HTML but I think I have a lot to learn as in I don't know what 'span' means, but I will soon as I google it, and also I will probably want to use more lists in the future on the same webpage and site so I'll have to research on how to name individual lists, I'm 'guessing' it's the same as classes as in >> <p class="first"> but I'll try get my head around that too.

Again, thanks very much for the help, really really appreciated smile.gif
Focus1
I feel terrible I'm back for more help already, sorry bout this...

I just went to place an image as my footer rather than having it just a background colour but again I seem to have hit a margin or padding problem. There is space all around the image, at the top, right, bottom and left. I again tried many ways to remove the padding and margin from the #footer, the .p and the .img but still no joy, can you tell me what I'm doing wrong ? Again I just want the image to sit flush with the div's above it, code below, many thanks!

P.s I also tried taking the img out of the #footer and just having the <p><img src="paypal_logo.gif" etc....</p> directly under the floating div's but no luck there either.

HTML

CODE
<div id="footer">
    <p><img src="paypal_logo.gif" alt="paypal logo" width="960px" height="150px"></p>
    
    </div><!--footer div-->


CSS

CODE
#footer {
clear: both;
margin: 0;
padding: 0; }




Here are links to the problem and to the original problem that you fixed for me smile.gif

Problem: http://img818.imageshack.us/img818/564/paypaly.png

Fixed: http://img39.imageshack.us/img39/9917/fixedd.png


Thanks again!
pandy
Yeah, paragraphs have margins, added by browsers. Basically all block level elements that stand out visibly have. P, H(n), BLOCKQUOTE, lists... That's what makes them stand out. If browsers didn't add margin to P, there would be no visible paragraphs, just line breaks, and all the text on a page would run together. DIV is a special case, it's constructed to be a "generic" block level element, so no browser adds additional styling to it, it just has the display property 'block'.

Same remedy as before - control the margins. But the P isn't needed really. You can just as well have the image directly in the DIV, unless you plan to also add text or the image represents text, then a P is maybe motivated.

It's also worth mentioning that browsers do this margin thing differently. One browser may add only bottom margin to P for instance, another both bottom and top. That's why it's good to either nullify all possibilities as I did above (and add back what you want) or clearly define all possible margins to start with for common block elements (except DIV). Then you don't have to check in every possible browser if it does things differently. You've already covered it all. When it comes to lists the padding is also involved and of course differs between browsers, that's why I set that to 0 also, even if it maybe didn't matter in this specific case.
pandy
QUOTE(Focus1 @ May 15 2012, 03:57 PM) *

I seem to have some of the basics of HTML but I think I have a lot to learn as in I don't know what 'span' means, but I will soon as I google it, and also I will probably want to use more lists in the future on the same webpage and site so I'll have to research on how to name individual lists, I'm 'guessing' it's the same as classes as in >> <p class="first"> but I'll try get my head around that too.


SPAN is as DIV, but inline. A generic inline element, as the saying goes. Browsers let it alone too. These two generic elements are meant to be used when there is no other element that fits the bill that's more appropriate. A risk is that they easily become overused. It's possible to build a page with nothing else than DIVs and SPAN and make it look dandy with CSS. But then there is no, or very little, structure. Bad karma.

Yeah, you can use class and you can use id. It's often a good idea to give main parts of the page IDs. Than you can often get to most things by using more advanced selectors and don't have to class and id everything. As with your paragraph in the footer. The footer already has an id, so you can use a contextual selector (AKA descendant selector) and don't have to add anything more to the HTML. Like so:

CODE
#footer p { margin: 0 }


http://htmlhelp.com/reference/html40/block/div.html
http://htmlhelp.com/reference/html40/special/span.html
http://htmlhelp.com/reference/html40/block.html
http://htmlhelp.com/reference/css/structure.html
http://www.w3.org/TR/CSS2/selector.html#descendant-selectors
Focus1
Pandy, thanks very much for this invaluable information, very much appreciated, and being honest I've learned much more of the important stuff of HTML and CSS via these forums by reading posts and getting help from you guys smile.gif than I actually learned during my full term in the college, so I cant' thank you enough!

I played around with margins for well over an hour now and I still couldn't get it... I was stumpted. The image I had I downloaded from google images just for testing but it just wouldn't sit right without margin problems, it was a .png.... but I then tried a jpg that I actually created in photoshop a couple months back and it sat in nicely!!

Hopefully 1 last question on this margin/padding situation, for the time being at least; The image is sitting in fine as my header so all is well there, but when I use the exact same image as my footer there is an ever so small gap right at the bottom, I've set all the margins I can think and see of to 0 but still it remains. Below are 2 links, the top fits nicely but as you can see from the bottom there is a very small margin, can this be eliminated ?

Top: http://img37.imageshack.us/img37/3315/topxl.jpg
Bottom(problem): http://img687.imageshack.us/img687/7694/bottomcd.jpg

Thanks again!!
pandy
QUOTE(Focus1 @ May 15 2012, 07:50 PM) *

The image I had I downloaded from google images just for testing but it just wouldn't sit right without margin problems, it was a .png.... but I then tried a jpg that I actually created in photoshop a couple months back and it sat in nicely!!

Sound like it wasn't a margin but actually part of the image itself.

QUOTE
Hopefully 1 last question on this margin/padding situation, for the time being at least; The image is sitting in fine as my header so all is well there, but when I use the exact same image as my footer there is an ever so small gap right at the bottom, I've set all the margins I can think and see of to 0 but still it remains. Below are 2 links, the top fits nicely but as you can see from the bottom there is a very small margin, can this be eliminated ?


What's the current HTML and CSS?
Focus1
Really brain testing stuff this, for a noob anyway.

HTML

CODE

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">

<html>
    <head>

    <title>Floating Layout</title>

    <meta http-equiv="Content-type"
    content="text/thml; charset=ISO-8859-1">

        <meta name="Description"
              content="">

        <meta name="Keywords"
              content="">

    <link rel="stylesheet" type="text/css" href="style.css">
  
    </head>
    
     <body>
    
    
    <div id ="wrapper">
    
    <div id ="header">
    <img src="bouquetv2.jpg" alt="picture of bouquet" width="960px" height="150px">
    
    </div> <!--header div-->
    <div id="navmenu">

         <ul>
     <li><a href="Home.html">Home</a></li>  
        <li><a href="Aboutus.html">About Us</a></li>
        <li><a href="Results.html">Results</a></li>
        <li><a href="Memories.html">Memories</a></li>
        <li><a href="Joinus.html">Join Us</a></li>
        <li><a href="faq.html">FAQ</a></li>
        </ul>
        </div><!--/navmenu div-->
    
    <div id ="left">
    <p><img src="bloomingflower.gif" alt="picture of flower" width="340" height="250">Berbeza dari pendapat umum yang popular, Lorem Ipsum bukan karya text secara rambang. Ia menpunyai asal usul dari secebis sastera klasik Latin dari kurun 45 TM (Tahum Masihi) , menjadikan ia karya berusia lebih 2000 tahun. Richard McClintock, seorang professor bahasa di Latin di Hampden-Sydney College in Virginia, USA, telah menyelidik salah satu ayat Latin yang kurang difahami, "consectetur" dan dalam menelitikan pengunaan perkataan ini dalam karya klasikal, telah menjumpai asal perkataan "consectetur" ini. Lorem Ipsum berasal dari seksyen 1.10.32 dan 1.10.33 karya "de Finibus Bonorum et Malorum" (Kebaikan dan Kejahan Yang Ekstrim) oleh Cicero, ditulis pada 45 SM. Buku ini ialah satu peniliitian tentang teori etika, dan amat popular pada zaman Renaissance. Ayat pertama Lorem Ipsum, "Lorem ipsum dolor sit amet..", datangnya dari ayat terkadung didalam seksyen 1.10.32.

Sejumlah text seragam Lorem Ipsum yang digunakan semenjak 1500an di terbitkan di bawah ini untuk mereka yang berminat. Seksyen 1.10.32 dan 1.10.33 from "de Finibus Bonorum et Malorum" oleh Cicero juga disertakan seperti kandungan asal, dan disusuli dengan versi Inggeris semenjak tahun 1914, yang di terjemah oleh H. Rackham.</p>
    
    </div><!--left div-->
    
    <div id ="right">
    <p>Berbeza dari pendapat umum yang popular, Lorem Ipsum bukan karya text secara rambang. Ia menpunyai asal usul dari secebis sastera klasik Latin dari kurun 45 TM (Tahum Masihi) , menjadikan ia karya berusia lebih 2000 tahun. Richard McClintock, seorang professor bahasa di Latin di Hampden-Sydney College in Virginia, USA, telah menyelidik salah satu ayat Latin yang kurang difahami, "consectetur" dan dalam menelitikan pengunaan perkataan ini dalam karya klasikal, telah menjumpai asal perkataan "consectetur" ini. Lorem Ipsum berasal dari seksyen 1.10.32 dan 1.10.33 karya "de Finibus Bonorum et Malorum" (Kebaikan dan Kejahan Yang Ekstrim) oleh Cicero, ditulis pada 45 SM. Buku ini ialah satu peniliitian tentang teori etika, dan amat popular pada zaman Renaissance. Ayat pertama Lorem Ipsum, "Lorem ipsum dolor sit amet..", datangnya dari ayat terkadung didalam seksyen 1.10.32.

Sejumlah text seragam Lorem Ipsum yang digunakan semenjak 1500an di terbitkan di bawah ini untuk mereka yang berminat. Seksyen 1.10.32 dan 1.10.33 from "de Finibus Bonorum et Malorum" oleh Cicero juga disertakan seperti kandungan asal, dan disusuli dengan versi Inggeris semenjak tahun 1914, yang di terjemah oleh H. Rackham.</p>
    </div><!--right div-->
    
    
    
    <div id="footer">

    <img src="bouquetv2.jpg" alt="picture of bouquet" width="960px" height="149px">
    
    </div><!--footer div-->    
    
    </div> <!--/wrapper div-->    
    
    </body>

    </html>



CSS
CODE

body {
font: 76%/160% Tahoma, Verdana, Arial, sans-serif;
margin: 0; padding: 0;
text-align: center;
background-color: #EEEE00;
}

#wrapper {

width: 960px;
margin: 0 auto;
padding: 0;
text-align: left;
border-left: 1px solid #4f4f4f;
border-right: 1px solid #4f4f4f;
background-color: #FFEC8B;
}

#header {
width: 100%;
height: 150px;
background-color: green;

}
#navmenu { font-size: 16px;  }
#navmenu li {display: inline; padding: 0px 48px 0px 48px; text-align: center; }

#navmenu ul {margin: 0; padding: 0;
            list-style-type: none; list-style-image: none; text-align: center; }
            
#navmenu ul,li   { margin: 0; padding: 0; }
#navmenu ul {background-color: #fff; }

#left { /*720px normal width the padding of 30px applies to the top, right, bottom and left so I'm subtracting 60px from 720px*/
width: 660px;
float: left;
background-color: #FFEC8B;
padding: 30px;
}

#right { /* 240px is the entire size, 30px to the top, 25px to the right, 30px to the bottom and 25px to the left so subtracting 55px in total- 25 is for left and right and 30 is for top and bottom*/
width: 185px;
float: left;
background-color: #ccc;
padding: 30px 25px 0px 30px;
}

#footer {

height: 150px;
clear: both;
margin: 0;
padding: 0;

}

#left img {
float: left;
border: 1px solid #fff;
margin: 0 1em 1em 0;
padding: 0;
}



Cheers!
Focus1
I think I figured something out for myself lol

It looked kinda weird because I had a 1 px solid border on the left and right and none at the bottom. I just added a 1px border at the bottom and it looks a bit more presentable but there is still a very small gap at the bottom but nothing as bad, but if I had no border on either side there would be still a small gap at the bottom and I'm not sure if anything can be done about that....

pandy
#footer is 150 pixels high and the image is 149 pixels high. I guess the difference is your gap.

Don't use height if you don't have any special reason to. The image will make the DIV expand anyway.
Focus1
Hmm, that was me just tampering with it trying to correct it and forgot to set it back to 150px but still the same after changing it to 150px, but I'm happy with how far I've got since last night.

Cheers for the help and knowledge!
This is a "lo-fi" version of our main content. To view the full version with more information, formatting and images, please click here.
Invision Power Board © 2001-2014 Invision Power Services, Inc.