Dreamweaver, HTML CSS Question

[jdwanchalk]

Alright, I want my left sidebar and header to be links, but I don't want them blue or underlined. I know I can go into page properties and change what the links do, but that will effect the main content as well.

So, is this something I should change in CSS?

This is how they read currently...

.thrColElsHdr #header {
background: #000000;
padding: 0 10px;
color: #FFFFFF;
}

.thrColElsHdr #sidebar1 {
float: left;
width: 11em;
color: #FFFFFF;
}


I guess I need to know what I should add to the CSS so that the text remains as it is while allowing me to turn it into links.

Thanks, Jonathan

[Marcelo]

This should do it:

#header a {
background: #000000;
padding: 0 10px;
color: #FFFFFF;
text-decoration:none;
}

Also, put border="0" on the images.

[jdwanchalk]

This should do it:

#header a {
background: #000000;
padding: 0 10px;
color: #FFFFFF;
text-decoration:none;
}

Also, put border="0" on the images.

Nope, still the same.

[Josh]

Try adding these to the css. The first one will be the color of your non-sidebar links and the 2nd two will be for the links in your sidebar. I just picked some random colors and didn't factor in line-height or decoration or anything like that. I know there is a better way to do this though. I used to be able to do this with my eyes closed but I've been reusing the same templates and just altering the header images for so long I've lost my touch I guess.

a{color:#000099;}
.twoColElsLt #sidebar1 a{color:#006633;}
.twoColElsLt #sidebar1 a:hover{color:#000;

I have a proposal that'll save you plenty of time messing with templates, sending a pm now.

[jdwanchalk]

Try adding these to the css. The first one will be the color of your non-sidebar links and the 2nd two will be for the links in your sidebar. I just picked some random colors and didn't factor in line-height or decoration or anything like that. I know there is a better way to do this though. I used to be able to do this with my eyes closed but I've been reusing the same templates and just altering the header images for so long I've lost my touch I guess.



I have a proposal that'll save you plenty of time messing with templates, sending a pm now.

This did not work either, I tried editing your code to match what was up already and that also did not work. It changed everything green, but the links were still blue and underlined.

[Josh]

This did not work either, I tried editing your code to match what was up already and that also did not work. It changed everything green, but the links were still blue and underlined.

Is this what you are looking to do:

Untitled Document

The sidebar link colors can be controlled with:

.thrColElsHdr #sidebar1 a{color:#006633; text-decoration:none;}
.thrColElsHdr #sidebar2 a{color:#006633; text-decoration:none;}

and the content links can be controlled with:

a{color:#000099;}

[jdwanchalk]

Is this what you are looking to do:

Untitled Document

The sidebar link colors can be controlled with:



and the content links can be controlled with:

Where should I add the sidebar1 CSS? Within the sidebar 1 css?

[jdwanchalk]

Is this what you are looking to do:

Untitled Document

The sidebar link colors can be controlled with:



and the content links can be controlled with:

Here is what it looks like now...


.thrColElsHdr #header {
background: #000000;
padding: 0 10px;
color: #FFFFFF;
}


what SHOULD it look like?

[Josh]

Where should I add the sidebar1 CSS? Within the sidebar 1 css?

I just stuck them under the .thrColElsHdr #sidebar1 {

/* Tips for sidebar1:
1. Be aware that if you set a font-size value on this div, the overall width of the div will be adjusted accordingly.
2. Since we are working in ems, it's best not to use padding on the sidebar itself. It will be added to the width for standards compliant browsers creating an unknown actual width.
3. Space between the side of the div and the elements within it can be created by placing a left and right margin on those elements as seen in the ".thrColElsHdr #sidebar1 p" rule.
*/
.thrColElsHdr #sidebar1 {
float: left;
width: 11em; /* since this element is floated, a width must be given */
background: #EBEBEB; /* the background color will be displayed for the length of the content in the column, but no further */
padding: 15px 0; /* top and bottom padding create visual space within this div */
}
a{color:#000099;}
.thrColElsHdr #sidebar1 a{color:#006633; text-decoration:none;}
.thrColElsHdr #sidebar2 a{color:#006633; text-decoration:none;}
.thrColElsHdr #sidebar2 {
float: right;
width: 11em; /* since this element is floated, a width must be given */
background: #EBEBEB; /* the background color will be displayed for the length of the content in the column, but no further */
padding: 15px 0; /* top and bottom padding create visual space within this div */
}
.thrColElsHdr #sidebar1 h3, .thrColElsHdr #sidebar1 p, .thrColElsHdr #sidebar2 p, .thrColElsHdr #sidebar2 h3 {
margin-left: 10px; /* the left and right margin should be given to every element that will be placed in the side columns */
margin-right: 10px;
}

[jdwanchalk]

I just stuck them under the .thrColElsHdr #sidebar1 {

Perfect, thank you, I was about to kill someone.