CSS Anyone?

[charmax]

Do any of you on my flist know how to deal with CSS? If so, can you please, please help me out? ;) I have validated my stylesheet and it comes up clean but... I am still getting 2 big errors with the layout. One is the navigation background image (popping up where I don't want it to! Behind other links! Stay in the bloody navigation!) and number 2 error is the links I make within a page (bizarre wideness! Navigation image!)

Any help on this will be much appreciated.

ETA: Issues all fixed thanks to lim

Comments

[lim.livejournal.com]

I'm just trawling and I noticed this.

Your navigation background image is applied to your anchor selector (a).

If you just want it on the navigation, and not ALL links in your layout, you need to take out this

a {

* background-image : url(http://bronze-ambition.net/BTP/images/navbg.jpg);
* display : block;
* background-color : #61846c;
* color : #4f868d;
* padding : 5px;


and group it with your #nav div instead, so, underneath

div#navigation {

* float : left;
* width : 300px;


put

#navigation a, a:link{background:url(http://bronze-ambition.net/BTP/images/navbg.jpg) #61846c;color:#4f868d;padding:5px;display:block;}

[lim.livejournal.com]

and, er, then of course you need to style your global a and a:link as you want it.

[charmax.livejournal.com]

Oh thank you thank you! I shall change it now. :D

[charmax.livejournal.com]

Again thank you, that is fixed! There is still something up with the links but the image has gone now.

[lim.livejournal.com]

*nosy*

What's up with the links? Your CSS is very muddled. It would be easier to find the problem if you ordered it hierarchically:

body {
font: 0.9em Tahoma, Arial, sans-serif;
text-align: center;
color: #000;
background: url(http://bronze-ambition.net/BTP/images/palebg.jpg) #61846c left repeat-y;
}
a, a:link {
color: #6b9b91;
text-decoration: none;
font-weight: normal;
background: #61846c;
}
a:visited {
color: #000;
}
a:active {
color: #000;
cursor: help;
}
a:hover {
color: #468191;
font-weight: bold;
cursor: help;
background: #b5b466;
}
blockquote {
margin: 5px 10px;
padding: 5px;
border-right: 5px solid #bab869;
font-family: Arial, Tahoma, sans-serif;
}
ul {
padding: 5px 20px;
border-right: 10px solid #507e7e;
color: #000;
background: #468191;
}
p {
margin: 5px 10px 10px;
}
header h1 {
background-color: #bab768;
color: #56857f;
height: 490px;
line-height: 490px;
margin: 0;
padding-left: 0;
background: url(http://bronze-ambition.net/BTP/images/BTPheader.jpg);
}
#container {
text-align: left;
width: 700px;
margin: 0 auto;
}
#navigation {
text-align: center;
float: left;
width: 300px;
}
#navigation a, a:link {
background: #61846c url(http://bronze-ambition.net/BTP/images/navbg.jpg);
color: #bebc6b;
padding: 5px;
display: block;
}
#content p {
text-align: left;
line-height: 1.4;
}
#extra {
float: right;
width: 400px;
color: #000;
background: #61846c;
}
#footer {
width: 700px;
height: 35px;
background: url(http://bronze-ambition.net/BTP/images/footerbg.jpg);
}
#footer p {
margin: 0;
padding: 1em 2em;
}


'k? What do you want to change?

[charmax.livejournal.com]

I have changed the hierarchy as you suggested and it's all working great now! Thank you for all your help on this. :D Do you mind if I call on you if I have any further problems?

[(Anonymous)]

Any time. :)

[lim.livejournal.com]

Er, that was me saying anytime. LJ keeps logging me out.

[charmax.livejournal.com]

Ok I thought I had my links sorted but they are still acting weird http://beyond.bronze-ambition.net/art2.php

What am I doing wrong??

[lim.livejournal.com]

dear GOD this is annoying. I cannot stay logged into LJ however many cookies I allow. Dammit.

Anyway. Yes: notes. Here if you want them. No biggie if not.

[charmax.livejournal.com]

I keep having the same problem with LJ today, well not just LJ, every site I visit. Everything in general is being a pain in the arse! Heh.

Back to the coding - I'm not quite sure what you mean by
"Your content division is inheriting its link styles from your navigation division instead of your body."

I think notes will be very helpful if you have them!

[zeromuchjenn.livejournal.com]

Also, if you use Firefox, get the "Web Developer" extension. There's an "Edit CSS" function that allows you to practice in real time ;)

[charmax.livejournal.com]

I have it! :D

[obsessive24.livejournal.com]

This is completely unrelated (CSS flies way over my head), and I may be the least observant person in the universe, but I just noticed that you have animated House mood icons. *dies* That may just be the coolest thing I've ever seen in my life. Bliss!

[charmax.livejournal.com]

As you can see I am no expert at CSS either. I am slowely understanding it though.

The moods - lidi made! They are fantabulous. :D