Forums > How to add colors ect.

Forums > Resource Center > Webmasters' Corner > Webmasters' Corner Resolved Topics

funride

Mar 5 2009, 09:24 PM

So I kind of just made this code from my head and what I remeber.

CODE

<style>
.content1 {position: absolute; top:###px; left:###px; width:###px; height:###px; overflow: auto;}
.content2 {position: absolute; top:###px; left:###px; width:###px; height:###px; overflow: auto;}
</style>

CODE

<div class="content1">
STUFF GOES HERE
</div>
<div class="content2">
STUFF GOES HERE
</div>

But my question is. In the CSS how do I put the text colors, navigation, and background image.

Another question, should I just design the tables along with the header image in PSP2 then allign them with the code?

newkidontheblock

Mar 5 2009, 09:27 PM

just add the css

CODE

color: #XXXXXX;

to you css.

Here is some HEX code.
http://img441.imageshack.us/img441/2940/bgcolors1536se2.png

funride

Mar 5 2009, 09:31 PM

QUOTE(Fawaz @ Mar 5 2009, 10:27 PM)

just add the css

CODE

color: #XXXXXX;

to you css.

Here is some HEX code.
http://img441.imageshack.us/img441/2940/bgcolors1536se2.png

How do I add the background image?

Maccabee

Mar 5 2009, 10:07 PM

If you talking about the whole page then use the body tag in your css.

body{
background-color:XXXXXX;
background-image:url();
}

Mikeplyts

Mar 5 2009, 11:25 PM

You can also use an "img" tag if you just want a "background" image for a certain div class.

theerinkal

Mar 7 2009, 01:57 PM

All you have to do is change all of the XX's to numbers. and insert an image url for the background.
You can add a hole bunch of stuff to the code. PM me if you need me to help you out with this code.

I just usually just make them with my editor and just align them because that's easier for me but do whatever your better with.

Definitions-
Top= how far from the top you want something
Left= how far from the left you want something

CODE

<style type="text/css">
body {background-image: url("IMAGE URL HERE"); background-repeat: repeat;
color: COLOR OF TEXT HERE; font-family: arial, sans serif, times; font-size: XXpx}
#content {width: XXpx; height: XXpx; top: XXpx; left: XXpx;}
#navigation {width: XXpx; height: XXpx; top: XXpx; left: XXpx;}
<style>
<div id="content">
TEXT HERE
</div>
<div id="navigation">
TEXT & LINKS HERE
</div>

alek

Mar 17 2009, 09:22 PM

heres every property i can think of that you don't already have

CODE

.content {
    color: red;
    font-size: 12px;
    font-family:arial;
    font-weight: normal;
    text-decoration: none;
    text-transform: none;
    line-height: 13px;
    letter-spacing: 0px;
    word-spacing: 4px;
}

CODE

this is the code with explanation

.content {
    color: red;(can be the name of a color or a hex code ex. of hex #000000 )
    font-size: 12px;(change the 12 to any number)
    font-family: arial;(theres tons of fonts, just replace arial with it)
    font-weight: normal;(bold or normal theres more specific ones but i dont use them)
    text-decoration: none;(can be underline, strikethrough)
    text-transform: none;(can be uppercase, lowercase, or none)
    line-height: 13px;(change the 13 to any number)
    letter-spacing: 0px;(cange 0 to any number)
    word-spacing: 4px;(cange 4 to any number)
}

This is a "lo-fi" version of our main content. To view the full version with more information, formatting and images, please click here.