[SOLVED] CSS wrapper affecting body

I am doing a website for a friend as a favour, so I thought I would experiment with external CSS style sheets. I’m very new to this technique.

I have tried to avoid using tables and try to do the whole layout in a CSS wrapper,

The problem is that the body text seems to be affected by the wrapper, so that I can’t align the text left or give the text a margin. However within the html the <div id="content"> tag needs to be within the <div id="wrapper"> in order to nest within the layout which the wrapper produces.

In a nut shell I can’t control the body text on its own. All text on the page is affected by the wrapper including the navigation.

It could be that something in the CSS isn’t working, or a DIV is in the wrong place?
Or the way the CSS links up, or the way each CSS rule is named?

http://www.fireintheholeproductions.com/

http://www.fireintheholeproductions....heholemain.css

I hope this makes some sense?

Many thanks

I'm guessing you didn't hand code the CSS? There appears to be no organization in there and a number of errors

I don't quite understand what exactly you're having issues with, though. Are you expecting the text inside the wrapper divider to go farther left to the side of the window? You have it set to 85% width, so it won't do that. Or are you saying you cannot figure out how to target the text to style it the way you want. Anyway, glad to hear you're going the external style sheet route. You're HTML looks nice and lean!

If you can clarify a bit more, it'll be easier to help you.

Thanks for reply. I have used samples from many tutorials, so it isn’t all hand coded.

Yes I would like the text to have a margin, maybe 6px, and not go right against the red border which the wrapper is making. And you see the way the body text is aligned central…I would like it to just align left.
Also I do not want the effect the navigation…I want to differentiate two styles body and navigation.


I was hoping this part of the CSS code would effect the body text? Some element to this work such as the font size. But no matter how much padding I put in, nothing will happen. Also the align left, is being overrule by the wrapper?

There is another question about the HTML, I was wondering if <div id="content"> is the correct name of the DIV, if I want to control the body text? I am assuming this code is affect the body?

html, body {margin: 12;
padding: 4;
width: 100%;
height: 100%;
background-color:#000000;
color:#D1D1D1;
font-family: Geneva, Arial, Helvetica, sans-serif;
font-size: 12pt;
text-align: left;
}


Hope this is clearer?

<stuck record>

Validate your HTML.
Validate your CSS.

</stuck record>

You need to learn about CSS specificity. For example, if you have two rules like this:

Code: Select all

#wrapper { text-align: center }
html, body { text-align: left }

...then all the text within #wrapper will be aligned to the centre. The "#" ID has greater specificity, so that rule takes precedence.

I have taken out all the align rules. All the text including the navigation looks as if it is aligned left.

The wrapper is overriding the body, With the CSS specificity. I have read through this web I am not yet sure how to link specifically to a attribute. I will need time to try a few things.

Also I will first fix those errors.

I'm a little confused however that's not unusual.
Can you just add some padding to your #content?

I do not see #content in your css but see it in your html

Code: Select all

#content {
padding: 6px;
}

That worked straight away, some interesting things are happening. I took away the html, body {margin: 12; rule. (not sure if it was doing much) In Mozilla the background looks white, but this is more promising than it was.

It's still a long way short, I will probably have a few questions in the new year.
Off to a new year party now.

Have a good new year!

__________________
Marc
Staff Manager - Webforumz.com

Want to be a moderator? PM me.