I can't thank you enough for this. It is far, far simpler as you suggested, and just looking at your CSS I've learned a lot.
Now I need to look into the SWFObject code. I used Dreamweaver's "Insert Media>Flash" menu command to insert some of the Flash pages. For the image slideshows, I'm using an online service called "Viewbook". I followed their instruction, which was simply to add the "embed" code that you can see on all of the image/slideshow pages.
Is something wrong with that?
Thanks again!
This works fine. Notice how much simpler it is? Also note there is no more relative positioning. Learn to let things just flow in the document. I haven't implemented the swfobject code however. The text is small because you set a font-size on #imagenav that is small however you never set the font size for the body so its going off of the browser default font size.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Home</title>
<style type="text/css">
* {
margin:0;
padding:0;
}
body {
background:#FFF;
margin:0;
padding:0;
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:12px;
}
a:link, a:visited {
padding-bottom: 1px;
color: #31363e;
text-decoration: none;
}
a:hover {
padding-bottom: 0;
color: #dddddd;
}
#wrapper {
margin: 60px auto;
width: 800px;
}
#banner {
font-size: .9em;
font-weight: bold;
font-family: Arial, Helvetica;
text-transform: uppercase;
list-style-type: none;
float:left;
}
#imagenav {
list-style: none;
font-size: 0.75em;
float:right;
font-family: Arial, Helvetica;
font-weight: 700;
}
#imagenav li {
display: inline;
color: #70757e;
letter-spacing: .06em;
padding-left: 8px;
text-transform: uppercase;
}
#imagenav li a {
border-left: 1px dotted #858c97;
padding: 0 6px 0 8px;
}
#flashcontent {
clear: both;
border: solid thin #666666;
width: 800px;
height: 600px;
}
#flashcontent p {
text-align: justify;
padding-left: 200px;
padding-right: 200px;
top: 140px;
position: relative;
line-height: 140%;
}
#flashcontent p.about {
text-align: justify;
padding-left: 200px;
padding-right: 200px;
top: 220px;
position: relative;
line-height: 140%;
}
#flashcontent ul {
padding-left: 100px;
top: 195px;
position: relative;
}
</style>
</head>
<body>
<div id="wrapper">
<ul id="banner">
<li><a href="index.html">CDK Arts</a></li>
</ul>
<ul id="imagenav">
<li><span class="projectname">"Choice"</span></li>
<li><a href="choicestatement.html">Statement </a></li>
<li><a href="portfolio.html">Portfolio</a></li>
<li><a href="/blog" target="_blank">Blog</a></li>
<li><a href="contact.html">Contact</a></li>
</ul>
<div id="flashcontent">
<embed style="width:800px; height:600px;" class="viewbook_presentation" type="application/x-shockwave-flash" src="http://embed.viewbook.com/28139/3a558c50d389c2" flashvars=""></embed>
</div>
</div>
</body>
</html>
