The Web Design Group

... Making the Web accessible to all.

Welcome Guest ( Log In | Register )

> Unwanted space between header/image and div below..
Focus1
post May 14 2012, 03:42 PM
Post #1


Newbie
*

Group: Members
Posts: 18
Joined: 24-March 12
Member No.: 16,776
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 ;
}

This post has been edited by Focus1: May 14 2012, 03:46 PM
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
 
 Reply to this topicStart new topic
Replies
Focus1
post May 15 2012, 01:19 PM
Post #2


Newbie
*

Group: Members
Posts: 18
Joined: 24-March 12
Member No.: 16,776
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!
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post

Posts in this topic
Focus1   Unwanted space between header/image and div below..   May 14 2012, 03:42 PM
pandy   We need the rest also. Can you link to the pages?   May 14 2012, 04:02 PM
Focus1   Hi, in the sample 1 I haven't got the pages se...   May 14 2012, 04:47 PM
Focus1   I've just circled the issue with paint just to...   May 14 2012, 05:02 PM
pandy   Post that the link to the page you have on the web...   May 14 2012, 05:40 PM
Focus1   Hi Pandy and again thanks for the reply! I th...   May 14 2012, 05:51 PM
pandy   I misunderstood then. I thought you had one of the...   May 14 2012, 06:18 PM
Focus1   Hi Pandy, sorry my fault for not putting it across...   May 14 2012, 06:30 PM
pandy   It's the default margins browsers add to lists...   May 14 2012, 06:43 PM
Focus1   Thank you very much, you're a star :) It was ...   May 15 2012, 08:57 AM
pandy   I seem to have some of the basics of HTML but I t...   May 15 2012, 11:18 AM
Focus1   I feel terrible I'm back for more help already...   May 15 2012, 09:35 AM
pandy   Yeah, paragraphs have margins, added by browsers. ...   May 15 2012, 10:58 AM
Focus1   Pandy, thanks very much for this invaluable inform...   May 15 2012, 12:50 PM
pandy   The image I had I downloaded from google images ...   May 15 2012, 01:02 PM
Focus1   Really brain testing stuff this, for a noob anyway...   May 15 2012, 01:19 PM
Focus1   I think I figured something out for myself lol It...   May 15 2012, 01:29 PM
pandy   #footer is 150 pixels high and the image is 149 pi...   May 15 2012, 01:43 PM
Focus1   Hmm, that was me just tampering with it trying to ...   May 15 2012, 03:40 PM

« Next Oldest · Markup (HTML, XHTML, XML) · Next Newest »
 

Reply to this topicStart new topic
1 User(s) are reading this topic (1 Guests and 0 Anonymous Users)
0 Members:

 

Display Mode: Switch to: Standard · Switch to: Linear+ · Outline

Track this topic · Email this topic · Print this topic · Subscribe to this forum

- Lo-Fi Version Time is now: 20th May 2013 - 08:40 PM
Invision Power Board © 2013  IPS, Inc.
Licensed to: HTMLHelp.com, LLC