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 =)