Weird Spaces Options

[Redwards]

I am trying to improve a website but one part I can't understand is these weird spaces on the header images when I set the type to html 5.

http://obannonfamilyroofing.com/

That is the website, I am wondering if I should merge all those images into one or something to solve the problem. I am not extremely knowledgeable with html so help would be appreciated.

[pandy]

I think you should, but not for the reason of the gaps. I don't see a purpose for the slicing. It doesn't make the page load faster, if that's why you've done it.

About the gaps, see here:
https://developer.mozilla.org/en-US/docs/Im...Mysterious_Gaps

[Redwards]

I didn't design the website originally so I wasn't really sure of their purpose for using slices. I just put the image together now I guess I just need to put in some java script for the contact us part of the top image. What reasons can you assume that they tried to use slices?

[pandy]

Well, one reason is so you can link different parts of the image without using an image map. Another is the old myth that large images should be sliced to make the page load faster.

[Redwards]

Ok well I am looking in to changing the page heavily as most of the structure is formed with tables and such. From much of what I have been reading that is bad practice currently. I just don't know what to use for having the different areas with different background colors.

Previously it was done by making the content into a table and then changing that background color. I would rather use the more acceptable form. The problem is I just don't know what that is in terms of CSS.

[pandy]

That part of CSS is very straightforward. Any element can have a background with CSS. If you want to keep the look of the current page it would be very simple. Just wrap the different sections each in their own DIV (header, footer, main content...) and apply the styling to that. And remove the tables, of course. DIVs order themselves one above the other naturally, so not much more advanced CSS is needed more than for the menu.

[Redwards]

Ok, thank you for your help. I am not really up to date with the web standards.

[pandy]

Nothing to be afraid of. While some parts of CSS are tricky and take some time to understand, what you need for this isn't. It's much easier than using tables actually. Just try and you'll see.

[jonasmarsh621]

Although I'm not pretty sure about it. In this scenario, learning about CSS and HTML is a welcome sight.

[Redwards]

Only problems I am having now is a space between the main header image and the navigation bar. Also for some reason the navigation bar is not spreading all the way across the page.

[pandy]

No tables - nice!

The gap is the result of two things. One is the same as before. The thing with images and gaps doesn't apply only to tables. That article I linked to is old and was written when people's table based designs started to break all over the web. The problem really is with images inside any kind of block level wrapper, in your case the DIV. So you can use one of the remedies described in the article. I'd just make the image display: block.

The other cause is the top margin browsers add to UL. Just set it to 0.

[Redwards]

I did both of those things and I still have the space for some reason.

[pandy]

Nah. You made the DIV display: block, not the image it contains.

CODE

#image {
    display: block;
    
    }

Try this instead.

CODE

#image image { display: block }

In case you don't know that's a contextual or descendant selector. Means any element 'image' that's inside another element with the id 'image'.
http://htmlhelp.com/reference/css/structure.html
http://www.w3.org/TR/CSS2/selector.html#descendant-selectors

[Redwards]

I used

CODE

img {
    display:block;
    margin:0 auto;
    }

It made the gap smaller but it is still there.

[Frederiek]

Since you float the links, you need to clear the floats afterwards, e.g. by setting that to the #greybody div. Or use the micro clear fix from Nicolas Gallagher: http://nicolasgallagher.com/micro-clearfix-hack/ .

Set margin: 0px auto; to #nav, instead of the separate rules you have now. You then need to do something about the padding set to the links. Since the links are of different widths, you can set one global left/right padding, suiting most, and setting a smaller padding for those that are larger. Or using widths.

Just a hint: A good thing to do is put a wrapper div around the entire page. Setting a width to that, avoids having to set a width to each new div inside.

[pandy]

Ah, sorry. The bottom margin on UL also comes into play, so you must remove both.

You may not want to make all images block. Also, don't give containers that contain text a fixed height. If you increase the text size (text size, not page zoom!) in your browser you can see what happens with the text when there's no longer room for it in the gray box. Use min-height if you must, otherwise nothing and let the box expand with its content.

[Redwards]

Since you float the links, you need to clear the floats afterwards, e.g. by setting that to the #greybody div. Or use the micro clear fix from Nicolas Gallagher: http://nicolasgallagher.com/micro-clearfix-hack/ .

Set margin: 0px auto; to #nav, instead of the separate rules you have now. You then need to do something about the padding set to the links. Since the links are of different widths, you can set one global left/right padding, suiting most, and setting a smaller padding for those that are larger. Or using widths.

Ok, so I got rid of the gap, but I am guessing that the reason there is that little indent on the navigation bar is because of what you said here. If so I don't fully understand how I can set different paddings from the global padding. I tried looking it up but I guess I don't know the proper terms.

[pandy]

There's more to lists and indention. Browsers can give both UL and LI margin and/or padding and they do it differently. Because of that it's a good idea to first set everything to zero and then add back what you want, if any. That way you don't have to know which browser does what.

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

You may not want to do that for all lists though, in case you'll use a "real" list somewhere, so use the #nav selector to target this specific list.

The above will get rid of the left indention, but the nav bar won't stretch all the way to the right. All the measures probably don't add up to 900 px.

I'd do what Frederiek said, clear the floats, and then use the background color with UL rather than with A, that way it will cover up small discrepancies.

You must clear the floats for the background on UL to have any effects. Since floats don't take up any space UL collapses. You can see that by giving UL a nice red border. All you'll see is a read line, because UL has no height. If you clear the floats UL will expand to contain them.

Another way would be to give the UL an explicit height. If you use em as the unit the height of UL should follow the text size if the user changes it. About 1.3 em seems about right (just trial and error).

[Redwards]

There's more to lists and indention. Browsers can give both UL and LI margin and/or padding and they do it differently. Because of that it's a good idea to first set everything to zero and then add back what you want, if any. That way you don't have to know which browser does what.

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

You may not want to do that for all lists though, in case you'll use a "real" list somewhere, so use the #nav selector to target this specific list.

The above will get rid of the left indention, but the nav bar won't stretch all the way to the right. All the measures probably don't add up to 900 px.

I'd do what Frederiek said, clear the floats, and then use the background color with UL rather than with A, that way it will cover up small discrepancies.

You must clear the floats for the background on UL to have any effects. Since floats don't take up any space UL collapses. You can see that by giving UL a nice red border. All you'll see is a read line, because UL has no height. If you clear the floats UL will expand to contain them.

Another way would be to give the UL an explicit height. If you use em as the unit the height of UL should follow the text size if the user changes it. About 1.3 em seems about right (just trial and error).

Ok thank you. I believe I have fixed most of the website now.