Recent Art

Navigation

Home Portfolio Goodies Change Style Site Tagboard

Dailies

• • • • • • • • • • • •

Sotm

Basic Layout (Background Image)

ONLY IF YOU MAKE A BACKGROUND IMAGE this is only if you make a background image like this http://www.learning.comforting-lie.com/backgrounds/bg_8.jpg *you would make it the right size for you* to have this instead of making columns.

<html> - this creates the opening to your html code.
<head> -everything that’ isn’t displayed on the website. 
<title> the name of your website </title>

<STYLE type=text/css> - this activates the style of your site.

<!--     - the opening of your stylesheet.

img {
border : 0px;}  - this is if you want a border for your images.

A:link
{ text-decoration: none;
color:#FDFDFE;}  - this I wat you want a link to look like

A:visited
{ text-decoration: none; color=#FDFDFE;} – this is wat you want a link to look like afer it has been visited. (I recoment that you outt he same settings as the A:link)

A:hover{
text-decoration : none;
font-weight : none;
color : #9A6477;
cursor : crosshair;
}    -this is wat you want to happen when you go over a link with your mouse

body {  -this is all the main design/look of your website.
background-color: #95A9C5;   -this is the background color for your website
background-repeat: repeat-y;color: #000000;  - repat y is just the way it will repeat
font-family: verdana, arial, helvetica, sans-serif;  - this is the font for your website
color: #FDFDFE;   - this is the font colour for your website
font-weight: normal; - this is how you want your wrting to look. (normal, bold, italic, underlined ect.)
font-size:8pt;   - this is the size for your font
scrollbar-face-color : #95A9C5;  - this is how you want your scrollbar to look like
scrollbar-highlight-color: #95A9C5;   - this is how you want your scrollbar to look like
scrollbar-shadow-color: #95A9C5;  - this is how you want your scrollbar to look like
scrollbar-3dlight-color : #95A9C5;  - this is how you want your scrollbar to look like
scrollbar-arrow-color: #7EA0CD;  - this is how you want your scrollbar to look like
scrollbar-track-color: #7EA0CD;   - this is how you want your scrollbar to look like
}

#leftcolumn{  -this is the name of you div layer for your left column in your background image
position: absolute;  -this is the positon of your background image (absolute is recommended)
left: 20px;  -this is how many pixles away from the left you want it so it fites in your left column in your background image
top: 430px;  -this is how many pixles away from the top you want it so it fites in your left column in your background image
width: 200px;  -this is how many pixles you want it to be, like the width of your text of you left column
height: auto; -this is the height of your text, you can leave it on auto
display:block;  -this is just so it displays it the way you wanted it *keep how it is*
float:left;  -this is just so it displays it all at the same place *keep how it is*
}

#content{   -this is the name of you div layer for your main content in your background image
position: absolute;  -this is the positon of your background image (absolute is recommended)
left: 240px;  -this is how many pixles away from the left you want it so it fites in your content in your background image
top: 430px; -this is how many pixles away from the top you want it so it fites in your content in your background image
width: 490px; -this is how many pixles you want it to be, like the width of your text of you left column
height: auto;  -this is the height of your text, you can leave it on auto
display:block;  -this is just so it displays it the way you wanted it *keep how it is*
float:left;  -this is just so it displays it all at the same place *keep how it is*

}
}

--></STYLE> - this the closure of your stylesheet

**YOU MAY ADD MORE DIVS IF YOU NEDD MORE**
<META content="MSHTML 6.00.2900.2963" name=GENERATOR></HEAD>  -this is just to generate your coding

<BODY style="LEFT: 0px; TOP: 0px" background=URL OF BACKGROUND IMAGE HERE><SPAN style="LEFT: 0px; WIDTH: 750px; POSITION: absolute; TOP: 0px; HEIGHT: 481px"><IMG style="BORDER-TOP-STYLE: none; BORDER-RIGHT-STYLE: none; BORDER-LEFT-STYLE: none; BORDER-BOTTOM-STYLE: none" alt="" src="URL OF HEADER HERE" useMap=#mcver10.jpg border=0></SPAN>   -this is the code for your background image and header to show up.

<DIV id=’leftcolumn’>  - this is the div layer for you left column
**CONENT FOR LEFT COLUMN HERE**
</div>  -make sure to close the div layer when you are done.

<DIV id=’content’>  - this is the div layer for you content
**CONENT FOR CONTENT HERE**
</div>  -make sure to close the div layer when you are done.

</body>  -this closes the whole design for your website
</HTML>  -this closes all the coding of your website

*OTHER STUFF*
<a href=’URL’>NAME SHOWN INSTEAD OF URL</a>   - how you want a link to lok instead of having the actual url

<a href=’mailto:EMAIL’>NAME SHOWN INSTEAD OF EMAIL ADDRESS</a>   - how you want an e-mail address to look instead of the actual email adress

<img src=’URL TO IMAGE’>  -shows an image

<a href=’URL TO IMAGE’><img src=’URL TO IMAGE/THUMB’>  -shows an image or thumb

<b>TEXT</b>  -make a text bold

<u>TEXT</>  -underline a text

<i>TEXT</i>  -make a text italic

<br> - skips a line

<br><br> - skips 2 lines

<font size=’SIZE’>WORD/SENTENCE</font>  -changes the size of a font or senteces for only the selcted one

<font color=’#COLORCODE’>WORD/SENTENCE</font>  -changes the color of a font or senteces for only the selcted one

Back