Hi, I'm having trouble with my stylesheet :( It's my first and I'm completely lost. Basically there are two things I want it to do but I can't get them to work.

Firstly, I want there to be some space between my content div and my nav div (I hope this isn't considered advertising but you can see what's going on with my site at http://marilyn.theatricality.co.uk) Right now the text is so close to my navigation. I did manage to get a gap when I first added the padding, I saved it but the next time I checked it wasn't there anymore :(

The second thing is that I want the text in my disclaimer div to be small. I used to use the <small></small> tag but none of the tags I've added to my main page has overruled my stylesheet the way lissa says it should, so nothing's working. What am I doing wrong?


Here's the style sheet.


body {
margin: 10px 10px 10px;
background: #000000;
cursor: hand;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 11px;
color: #FFCCCC;
text-align: justify;
}

p, table, tr, td {
background: #000000
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 11px;
color: #FFCCCC;
text-align: justify;
}

input, option, select, textarea {
border: 1px solid #FFCCCC;
background: #000000;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 11px;
color: #FFCCCC;
}

a:link {
cursor: hand;
color: silver;
text-decoration: none;
}

a:active {
cursor: hand;
color: silver;
text-decoration: none;
}

a:visited {
cursor: hand;
color: CCFFCC;
text-decoration: none;
}

a:hover {
cursor: hand;
color: #ffffff;
text-decoration: none;
color: silver;
text-decoration: none;
}

a:visited {
cursor: hand;
color: CCFFCC;
text-decoration: none;
}

a:hover {
cursor: hand;
color: #ffffff;
text-decoration: none;
}

#content {
position: left;
padding: 20px;
overflow: auto;
background: #000000;
border: 0px solid #ffcccc;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 11px;
color: #ffcccc;
text-align: justify;
}

#nav {
position: right;
overflow: auto;
background: #000000;
border: 0px solid #ffcccc;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 11px;
color: #ffcccc;
text-align: justify;
}


#disclaimer {
position: bottom;
overflow: auto;
background: #000000;
border: 0px solid #ffcccc;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 8px;
color: #ffcccc;
text-align: justify;
}


Thanks :)

your link to your stylesheet (the <LINK> tag) should be before the </head> tag :) try that out. And try out padding-left: #px; instead of padding: #px; only :) if that doesn't work then try margin-left: #px;

Love,
Mirna

Thanks for replying. I put the LINK in the head tag first but that had no effect at all! The page was white, with black text, blue/purple links. That's the only way the stylesheet seems to work for me :(

As for the padding-left, where should I put it? I only want my text to stop earlier on the right side of the div. I don't want my left margin any larger to left of my text or my navigation to be further over to the right. Is it possible to use padding-right instead?

Your links may not work because you have a few different a:hovers and such. Combine them so that you only have one of each, and in the proper order (link, visited, active, hover). Although it seems to look fine to me, but then again I'm using IE 6 :P

The padding can be put in either div section - in the content, put padding right, and in the nav, put padding left. That will make it so that there's a buffer of space on that side of the container, and therefore more space between the two sections of text.

I've done everything you've suggested but none of it works :(

1) I've moved the link to my stylesheet into my head tag, and nope, no change.

2) I've put padding-right: 20px in to my content div and it's still pushing right up against my navigation. Not the slightest gap :(

3) I've altered the link order, not sure whether that was supposed to achieve anything but it's done.

4) I still can't get my final div to show up with smaller text. Is there a piece of code I'm missing?

5) None of my html tags will over-ride the stylesheet the way they're supposed to so how do I change the individual elements I want to change?

Anyone have any ideas what I can do to achieve the layout I'm aiming for? Help, I'm tearing my hair out :eek:

Thanks for all your help guys :) I think I've got it sorted out (mostly), I've compromised and left the divs behind in favour of tables and it's working much better.