View Full Version : Main and sidebar?


Mokora
05-26-2005, 08:37 AM
Alright, I've been working on my blog recently, and I'm thoroughly stumped on how you go about assigning a certain CSS code to one div. This can be done, right?

My site is here: http://x.mokora.net

I basically want the text in the main div on the left to be a different color than that of the sidebar, along with different links, etc, and everything I've tried has failed. How would I go about making the sidebar use one type of CSS, and the main another?

Thanks in advance!

Merike
05-26-2005, 10:46 AM
You would have this in your css:

div.dividordivclasshere{
color:#yourcolorcode;}

for links I suppose this should work:

div.idname A:link{
properties here}
div.idname A:visited{
properties here}
and so on with hover and active

Monkey Bizzle
05-26-2005, 04:40 PM
just to clear things up:

gasell put div.dividordivclass

when using classes and ids in CSS a . represents a class and a # represents an id. So, if in your CSS you had:

div.main{blah blah}

then your HTML would be <div class="main">. A class can be used more than once throughout a page. Like you could use it to style your headers on your menu for example. If in your CSS you had:

div#main{blah blah}

then in your HTML would be <div id="main">. An id can only be used once per page. You can use it more than once in your site tho. People use ids when they are setting the main divs for content/menu for example.

So... to answer your question a little better, in your HTML, you have:

<div id="main" style="position: absolute; left: 14; top: 434; width: 256;">

You've given it an id but you aren't using that id in your CSS so that's what we are going to do.

Change that line to just <div id="main">

In your CSS, put

#main
{position: absolute;
left: 14px;
top: 434px;
width: 256px;
color: #FFFFFF;}

and just change the FFFFFF to whatever color you want for the text.

For the links, this should work;

#main a:link
{background: none;
color: #FFFFFF;
text-decoration: none;}

#main a:visited
{background: none;
color: #FFFFFF;
text-decoration: none;}

#main a:hover
{color: #82BCDB;
text-decoration: none;
background: #FFFFFF;}

#main a:active
{background: none;
color: #FFFFFF;
text-decoration: none;}

and just change the attributes to whatever you want them as. If that doesn't work or if you are confused or soething, just post again =)