Well I thought I had CSS down, but not quite yet. I defenitely have learned a lot. I created a page for my band a while page using only html, since I used only html it distorted the image when it was on any other sized monitor, or in a different browser. Since then I have been introduced to CSS and now I'm trying to convert my image into a CSS style sheet, and a index.html. I thought that I would start with the header. Since this web site in my opinion really has two headers. (see example image below). I did the simple one, then decided to try the more complex one. (Although the simple one isn't even complete.).
For the first header (the pink bar at the top) I created an image of just the color with the correct width and height. I figured I'd come back to the text links because i think i know how to do those.
For the second header, the one with the band name, I created an image of the background, and then an image of the button. I was trying to get it to work out in CSS but didnt get it right. I'm not sure why it isn't working, it makes sense to me. Please let me know what you think is the problem.
CSS
CODE
mg {
border: 0px
}
#content {
height: 100%;
min-height: 100%;
text-align: left;
}
#content,
#width {
/* max-width hack for IE since it doesn't understand the valid css property*/
width: expression(document.body.cliendWidth > 1024 ? "1024px" : "100%");
}
#content[id],
#width[id] {
width: 100%;
height: auto;
}
#header {
position: relative;
height: 21px;
background: url(images/header.gif) repeat;
border: solid 1px #000000;
}
#button {
position: absolute;
top: -52px;
left: 436px;
}
#button1 {
position: absolute;
top: -52px;
left: 519px;
}
#button2 {
position: absolute;
top: -52px;
left: 602px;
}
#button3 {
position: absolute;
top: -52px;
left: 685px;
}
border: 0px
}
#content {
height: 100%;
min-height: 100%;
text-align: left;
}
#content,
#width {
/* max-width hack for IE since it doesn't understand the valid css property*/
width: expression(document.body.cliendWidth > 1024 ? "1024px" : "100%");
}
#content[id],
#width[id] {
width: 100%;
height: auto;
}
#header {
position: relative;
height: 21px;
background: url(images/header.gif) repeat;
border: solid 1px #000000;
}
#button {
position: absolute;
top: -52px;
left: 436px;
}
#button1 {
position: absolute;
top: -52px;
left: 519px;
}
#button2 {
position: absolute;
top: -52px;
left: 602px;
}
#button3 {
position: absolute;
top: -52px;
left: 685px;
}
HTML
CODE
<!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" xml:lang="en" lang="en">
<head>
<title>Nascent Descent</title>
<meta http-equiv="content-type" content="text/html; charset=utf-8 />
<link rel="stylesheet" href="style.css" type="text/css" />
<div id="content">
<div id="header">
<div id="button">
<a href="index.html"><img src="Images/button.gif" id="Home" alt="Home" align="top" border="0" width="81px" height="27px"></a>
</div>
<div id="button1">
<a href="index.html"><img src="Images/button.gif" id="Home" alt="Home" align="top" border="0" width="81px" height="27px"></a>
</div>
<div id="button2">
<a href="index.html"><img src="Images/button.gif" id="Home" alt="Home" align="top" border="0" width="81px" height="27px"></a>
</div>
<div id="button3">
<a href="index.html"><img src="Images/button.gif" id="Home" alt="Home" align="top" border="0" width="81px" height="27px"></a>
</div>
<div id="title">
Nascent Descent
</div>
</div>
<div id="footer">
Copyright 2008 K.DiGennaro
</div>
</div>
</div>
</body>
</html>
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>Nascent Descent</title>
<meta http-equiv="content-type" content="text/html; charset=utf-8 />
<link rel="stylesheet" href="style.css" type="text/css" />
<div id="content">
<div id="header">
<div id="button">
<a href="index.html"><img src="Images/button.gif" id="Home" alt="Home" align="top" border="0" width="81px" height="27px"></a>
</div>
<div id="button1">
<a href="index.html"><img src="Images/button.gif" id="Home" alt="Home" align="top" border="0" width="81px" height="27px"></a>
</div>
<div id="button2">
<a href="index.html"><img src="Images/button.gif" id="Home" alt="Home" align="top" border="0" width="81px" height="27px"></a>
</div>
<div id="button3">
<a href="index.html"><img src="Images/button.gif" id="Home" alt="Home" align="top" border="0" width="81px" height="27px"></a>
</div>
<div id="title">
Nascent Descent
</div>
</div>
<div id="footer">
Copyright 2008 K.DiGennaro
</div>
</div>
</div>
</body>
</html>
Example of webpage design.
Thanks again,
Kevin
