Unwanted space between header/image and div below.. |
Unwanted space between header/image and div below.. |
Focus1 |
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 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 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 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 |
Focus1 |
May 15 2012, 08:57 AM
Post
#2
|
Newbie Group: Members Posts: 18 Joined: 24-March 12 Member No.: 16,776 |
Thank you very much, you're a star
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 |
pandy |
May 15 2012, 11:18 AM
Post
#3
|
🌟Computer says no🌟 Group: WDG Moderators Posts: 20,730 Joined: 9-August 06 Member No.: 6 |
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 |
Lo-Fi Version | Time is now: 25th April 2024 - 06:59 AM |