Welcome to Dream.In.Code
Getting Help is Easy!

Join 136,508 Programmers for FREE! Get instant access to thousands of experts, tutorials, code snippets, and more! There are 1,705 people online right now. Registration is fast and FREE... Join Now!




CSS help?

 
Reply to this topicStart new topic

CSS help?

tommyflint
7 Aug, 2008 - 08:50 AM
Post #1

D.I.C Head
Group Icon

Joined: 24 Jul, 2008
Posts: 56


My Contributions
hey guys i have been sent this .css by my friend for my forum,
i was wondering if could look thru it and add some comments to which parts of the page it will change so i can put my own backrounds in for the header of the page etc.
Would be a real great help as i am just learn CSS cheers
=]
CODE

body
    {
        font-family: "trebuchet ms", verdana, sans-serif;
        font-size: 12px;
        line-height: 1.5em;
        color: #333;
        background: #ffffff;
        margin: 0;
        padding: 0;
        text-align: center;
        width: 100%;
    }

p
    {
        margin-top: 10px;
    }

h3
    {
        font: bold 140% trebuchet ms, sans-serif;
        letter-spacing: 5px;
        margin-bottom: 0;
        color: #000000;
    }

hr {
        color: #eee;
        background-color: #000;
        height: 2px;
}

.codeblock
{
    margin-left: 20px;
    margin-right: 20px;
    padding: 5px 5px 5px 5px;
    background: #eeeeee;
    border: thin dashed black;
}

table.featuretable
{
    width: 60%;
    padding: 10px;
    align: middle;
    background: #eeeeee;
    border: thin solid black;
}

td.featurename
{
    font-weight: bold;
    text-transform: uppercase;
    font-size: 14px;
}

td.featurefooter
{
    color: #ffffff;
    background: #000000;
    letter-spacing: 0.1em;
    padding-left: 5px;
}
a:link
    {
        text-decoration: none;
        color: #000;
    }

a:visited
    {
        text-decoration: none;
        border-bottom: 1px dotted #369;
        color: #000;
    }

a:hover, a:active
    {
        text-decoration: none;
        border-bottom: 1px solid #036;
        color: #000;
    }

img
{
    border: 0;
}

/* ---( specific divs )----------------------------- */

#container
    {
        position: absolute;
        top: 85px;
        left: 0px;
        background: #ffffff;
        margin: 0 auto 0 auto;
        border-bottom: 1px solid #eee;
        text-align: left;
        width: 100%;
    }

#menu {
        font-family: "trebuchet ms", verdana, sans-serif;
        font-size: 14px;
        font-weight: bold;
        position: absolute;
       height: 27px;
       top: 60px;
       left: 0px;
       width: 100%;
       padding: 0px;
       color: #000000;
background-color: #eee
}

#menu a:visited
    {
        color: #000000;
        border-bottom: solid thin #ffffff;
    }

#header
    {
         position: absolute;
        top: 0px;
        left: 0px;
        height: 60px;
        width: 100%;
        background: #333;
        padding-top: 8px;
        font-size: 25px;
        letter-spacing: 0.4em;
    }

#header h1
{
    font-size: 30px;
    text-transform: uppercase;
    letter-spacing: 0.3em;
    color: #fff;

}

#main
    {
        margin: 5px 5px 5px 5px;
        padding: 5px 5px 5px 5px;
        background: #FFFFFF;
/*        border: thin solid black;*/
    }


/* --- bar ---------------------------- */

#bar
    {
        float: left;
        width: 200px;
        background: #eee;
        z-index: 1;
        padding: 10px;
margin-right: 30px;
    }

#bar h1
{
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.3em;
}

/*------- */


table {
    border: thin solid #cccccc;
    background: #ffffff;
}

th {
    letter-spacing: 2.5px;
    background: #eeeeeee;
    color: #000000;
    text-transform: uppercase;
    text-align: center;
    border-top: thick solid #eeeeee;
    border-bottom: thin solid #cccccc;
}

tr.head {
    letter-spacing: 1.5px;
    background: #dddddd;
    color: #000000;
    text-transform: uppercase;
    border-top: thick solid #eeeeee;
    border-bottom: thin solid #cccccc;
}

tr.body {
    background: #ffffff;
    color: #000000;
}

td {
    border: thin solid #cccccc;
    padding: 10px;
}


This post has been edited by tommyflint: 7 Aug, 2008 - 08:59 AM
User is offlineProfile CardPM
+Quote Post

P4L
RE: CSS Help?
7 Aug, 2008 - 10:06 AM
Post #2

P4L==DIC
Group Icon

Joined: 7 Feb, 2008
Posts: 860



Thanked: 3 times
Dream Kudos: 75
My Contributions
css
body
{
font-family: "trebuchet ms", verdana, sans-serif;
font-size: 12px;
line-height: 1.5em;
color: #333;
background: #ffffff;
margin: 0;
padding: 0;
text-align: center;
width: 100%;
}

p
{
margin-top: 10px;
}

h3
{
font: bold 140% trebuchet ms, sans-serif;
letter-spacing: 5px;
margin-bottom: 0;
color: #000000;
}

hr {
color: #eee;
background-color: #000;
height: 2px;
}

.codeblock
{
margin-left: 20px;
margin-right: 20px;
padding: 5px 5px 5px 5px;
background: #eeeeee;
border: thin dashed black;
}

table.featuretable
{
width: 60%;
padding: 10px;
align: middle;
background: #eeeeee;
border: thin solid black;
}

td.featurename
{
font-weight: bold;
text-transform: uppercase;
font-size: 14px;
}

td.featurefooter
{
color: #ffffff;
background: #000000;
letter-spacing: 0.1em;
padding-left: 5px;
}
a:link
{
text-decoration: none;
color: #000;
}

a:visited
{
text-decoration: none;
border-bottom: 1px dotted #369;
color: #000;
}

a:hover, a:active
{
text-decoration: none;
border-bottom: 1px solid #036;
color: #000;
}

img
{
border: 0;
}

/* ---( specific divs )----------------------------- */

#container
{
position: absolute;
top: 85px;
left: 0px;
background: #ffffff;
margin: 0 auto 0 auto;
border-bottom: 1px solid #eee;
text-align: left;
width: 100%;
}

#menu {
font-family: "trebuchet ms", verdana, sans-serif;
font-size: 14px;
font-weight: bold;
position: absolute;
height: 27px;
top: 60px;
left: 0px;
width: 100%;
padding: 0px;
color: #000000;
background-color: #eee
}

#menu a:visited
{
color: #000000;
border-bottom: solid thin #ffffff;
}

#header
{
position: absolute;
top: 0px;
left: 0px;
height: 60px;
width: 100%;
background: #333;
padding-top: 8px;
font-size: 25px;
letter-spacing: 0.4em;
}

#header h1
{
font-size: 30px;
text-transform: uppercase;
letter-spacing: 0.3em;
color: #fff;

}

#main
{
margin: 5px 5px 5px 5px;
padding: 5px 5px 5px 5px;
background: #FFFFFF;
/* border: thin solid black;*/
}


/* --- bar ---------------------------- */

#bar
{
float: left;
width: 200px;
background: #eee;
z-index: 1;
padding: 10px;
margin-right: 30px;
}

#bar h1
{
font-size: 12px;
text-transform: uppercase;
letter-spacing: 0.3em;
}

/*------- */


table {
border: thin solid #cccccc;
background: #ffffff;
}

th {
letter-spacing: 2.5px;
background: #eeeeeee;
color: #000000;
text-transform: uppercase;
text-align: center;
border-top: thick solid #eeeeee;
border-bottom: thin solid #cccccc;
}

tr.head {
letter-spacing: 1.5px;
background: #dddddd;
color: #000000;
text-transform: uppercase;
border-top: thick solid #eeeeee;
border-bottom: thin solid #cccccc;
}

tr.body {
background: #ffffff;
color: #000000;
}

td {
border: thin solid #cccccc;
padding: 10px;
}




Look through the code again, and look for the header section. That is where you can change the background image by using
css

#header
{

background-image: url(<!--insert image here-->);
}

User is offlineProfile CardPM
+Quote Post

Fast ReplyReply to this topicStart new topic
Time is now: 12/2/08 08:43PM

Live Help!

Tutorials

Programming

Web Development

Reference Sheets

Code Snippets

DIC Chatroom

Bye Bye Ads

Monthly Drawing

Thumb Drive

Top Contributors

Top 10 Kudos This Month