I’m not on a website yet … It is all on my computer.
This is what I have … for my home page …
/*
CSS for Stuff from my head
*/
body {
font-family: Verdana, Arial, Helvetica, sans-serif;
background-color: #3f4145;
background-image: url(http://imgs.inkfrog.com/pix/klynnk1/Website_background.jpg);
background-image: url(http://imgs.inkfrog.com/pix/klynnk1/Website_background_textured_brick.jpg);
padding: 0;
margin: 0;
line-height: 125%;
}
h1, h2, h3, h6 {font-family: “Segoe Print”, “Trebuchet MS”, Arial, Helvetica, sans-serif; }
h1 {font-size: X-large;color: #5ec6cc; }
h2, ul {font-size: X-large; font-weight: normal; color: #5ec6cc; margin-top: 15px; padding-top: 15px; }
p {font-size: small; color: white; padding-right: 28em; }
#tagline p {font-family: Georgia, Times, serif; color: black; font-style: italic;
background-color: #4d7a7d;
background-color: #466E70;
border-top: 1px solid black;
border-bottom: 2px solid #3a3a3a;
padding-top: .2em;
padding-bottom: .1em;
padding-left: 14em;
margin: 0;
}
.fun {
color: #339999;
font-family: Georgia, Times, serif;
letter-spacing: 0.05em;
}
/* -----------------------------------------------------------------------------------------------------------------
This section deals with the position of items on the screen. It also includes all the graphic elements in my header.
-------------------------------------------------------------------------------------------------------------------- */
#header, #tagline, #navigation, #bodycontent {padding: 0px; margin-bottom: 0px; }
#navigation, #bodycontent, #grass {position: absolute; }
#pencils {
position: absolute;
top: 350px;
left: -110px;
z-index: 2;
}
#bodycontent {
top: 160px;
left: 200px;
z-index:3;
}
#stuff, #gallery, #about, #guestbook {
position: absolute;
top: 32px;
left: 152px;
z-index: 3;
}
#blackblock {position: absolute; background-color: #000000;
height: 88px;
width: 100%;
border-top: 4px solid #de182f; border-bottom: 4px solid #de182f;
top: 18px;
}
#jumpingcat {
position: absolute;
top: 220px;
left: 586px;
z-index:3;
}
#catguestbook {
position: absolute;
top: 340px;
left: 100px;
z-index:3;
}
#grass {
position: absolute;
top: -150px;
left: 237px;
z-index:3;
}
#tagline {
position: absolute;
top: 115px;
width: 100%;
}
#grayblock {
position: absolute;
background-color: #6e7273;
height: 145px;
width: 116px;
border: 2px solid black;
top: 4px;
left: 15px;
z-index: 2;
}
#logo {
position: absolute;
top: 2px;
left: 28px;
z-index:3;
}
#buttonA {
position: absolute;
top: 170px;
left: 10px;
}
/* --------------------------------------------------------------------------------------------------------------------
borders for photos on home page or wherever .......
----------------------------------------------------------------------------------------------------------------------*/
.galleryphoto p {
font-size: 65%;
font-weight: bold;
margin-top: 0px;
width: 430px;
line-height: 1.4em;
}
.galleryphoto img {
border: 6px solid #eeeeee;
}
.copyright {
font-weight: normal;
color: gray;
}
/* --------------------------------------------------------------------------------------------------------------------
these are my navigation links for left side of the page
----------------------------------------------------------------------------------------------------------------------*/
#buttonA ul {
margin: 0px;
padding: 0px;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
line-height: 30px;
}
#buttonA li {
list-style-type: none;
height: 30px;
width: 125px;
margin: 10px;
text-align:center;
}
#buttonA li a {
text-decoration: none;
height: 100%;
width: 100%;
display: block;
background-color: #999999;
border-style: solid;
border-bottom-color: #333333;
border-right-color: #555555;
border-left-color: #BBBBBB;
border-top-color: #DDDDDD;
}
#buttonA li a:link {
color: #000000;
font-weight: bold;
background-color: #999999;
border-style: solid;
border-bottom-color: #333333;
border-right-color: #555555;
border-left-color: #BBBBBB;
border-top-color: #DDDDDD;
}
#buttonA li a:visited {
color: #000000;
font-weight: normal;
background-color: #4d7a7d;
border-style: solid;
border-bottom-color: #333333;
border-right-color: #555555;
border-left-color: #BBBBBB;
border-top-color: #DDDDDD;
}
#buttonA li a:hover {
font-weight: bold;
color: #FFFFFF;
background-color: #777777;
border-style: solid;
border-bottom-color: #333333;
border-right-color: #555555;
border-left-color: #BBBBBB;
border-top-color: #DDDDDD;
}
#buttonA li a:active {
font-weight: bold;
color: #FFFFFF;
background-color: #666666;
border-style: solid;
border-top-color: #333333;
border-left-color: #555555;
border-right-color: #BBBBBB;
border-bottom-color: #DDDDDD;
}
/* ------------------------------------------------------------------------------------------------------------------
THIS GALLERY LAYOUT HAS BOTH LANDSCAPE AND PORTRAIT STYLE IMAGES
-------------------------------------------------------------------------------------------------------------------- */
a, a:visited, a:hover {}
#container {position relative; width:620px; height:700px; background:none; border:1px solid none; margin:-50px auto; font
-family:verdana, arial, sans-serif; font-size:12px;}
#container a.pics {float:left; padding:7px 21px; display:inline; color:#000; text-decoration:none; width:75px;
height:75px; cursor:default;}
#container a.pics img.thumb {display:block; border:1px solid #595959;}
#container a.pics span {display:none; border:0; width:600px; background:#bbb; border:1px solid #fff; text-align:center;
line-height:18px;}
#container a.pics span img {margin:10px auto; border:1px solid #000;}
#container a.pics:hover {white-space:normal;}
#container a.pics:hover img.thumb {border:1px solid #fff;}
#container a.pics:hover span {display: block; position: absolute; left: 9px; top: 80px; z-index: 10; height: 500px;}
#container a.pics:active img.thumb {border:1px solid #4d7a7d;}
#container a.pics:active span {display: block;position: absolute;left: 9px;top: 80px; z-index: 5;outline: 0;height:
500px;}
#container a.pics:focus {outline:0;}
#container a.pics:focus img.thumb {border:1px solid #4d7a7d}#container a.pics:focus span {display:block;
position:absolute; left:9px; top:80px; z-index:5; outline:0; height:500px;}
#container span.info {clear:left; display:block; text-align:center; line-height:20px; margin:0; padding:160px 0 0 0;
width:600px; color:#eee; z-index:1;}
#container span.info a {color:#000;}
#container span.info a:hover {text-decoration:none;}
#container {position: relative; top: 210px; left: -120px;}
/ ------------------------------------------------------------------------------------------------------------------
End of Gallery Layout
---------------------------------------------------------------------------------------------------------------------/
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Strict//EN”
“http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd”>
<html xmlns=“http://www.w3.org/1999/xhtml”>
<head>
<title>Kathy Kuczek - Stuff from my head</title>
<meta http-equiv=“Content-Type”
content=“text/html; charset=utf-8”/>
<link href=“style2.css” rel=“stylesheet” type=“text/css”/>
</head>
<body>
<div id=“header”>
<div id=“blackblock”>
</div>
<div id=“stuff”>
<p><img src=“http://imgs.inkfrog.com/pix/klynnk1/Website_Stuff_from_my_head_larger2.jpg”
border="0"alt=“Stuff from my head”/></p>
</div>
<div id=“grayblock”>
</div>
<div id=“logo”>
<p><img src=“http://imgs.inkfrog.com/pix/klynnk1/Mask_header_logo_94x125.jpg”
border="0" alt="screaming mask with drill bits in head"/></p>
</div>
<div id=“tagline”>
<p>Welcome -</p>
</div>
</div><!-- end of header div –>
<div id=“buttonA”>
<ul>
<li><a href=“index.html”>Home</a></li>
<li><a href=“pencil.html”>The Gallery</a></li>
<li><a href=“aboutme.html”>About me</a></li>
<li><a href=“guestbook.html”>Guestbook</a></li>
</ul>
</div>
<div id=“bodycontent”>
<div id=“jumpingcat”>
<p><img src=“http://imgs.inkfrog.com/pix/klynnk1/CAT_180.gif”
border=“0” alt=“jumping cat”/></p>
</div>
<div id=“grass”>
<p><img src=“http://imgs.inkfrog.com/pix/klynnk1/website_grass8.jpg”
border=“0” alt=“gradient with grass”/></p>
</div>
<h1>Welcome to my portfolio -</h1>
<p>This is a sampling of some of my projects - some for college and some just for fun.<br>
Visit <em>" The Gallery "</em> and select from a range of mediums: pencil, pen & ink,
acrylic, oils, mixed media, digital art, and 3-Dimensional sculpture.</p><br/>
<div class=“galleryphoto”>
<img src="http://imgs.inkfrog.com/pix/klynnk1/Home_150_Baseball_glove.jpg" border="0"
alt="baseball glove"/>
<img src="http://imgs.inkfrog.com/pix/klynnk1/Home_150_the_shed.jpg" border="0"
alt=“The shed”/>
<img src="http://imgs.inkfrog.com/pix/klynnk1/Home_150_Broken_fences.jpg" border="0"
alt="broken fences"/>
<img src="http://imgs.inkfrog.com/pix/klynnk1/Home_125_Miles.jpg" border="0"
alt="Miles twelve"/>
<p><span class="copyright">[© Kathy Kuczek]</span></p>
</div>
<div id=“pencils”>
<p><img src=“http://imgs.inkfrog.com/pix/klynnk1/pencils_test5.gif”
border="0" alt="colored pencils"/></p>
</div>
</div> <!-- end of body content div –>
</body>
<footer>
</footer>
</html>