I’ve got a page that I cobbled together from several different sources. I admit I don’t understand the css well enough, but I’m learning as I go. Here’s the main problem: I can’t get the banner to display correctly. I’ve been doing some reading on the box model, so I’m pretty sure my problem lies there. Anyway, here’s the page:
http://www.elementalsource.com/elementalsource/my-web/port/mpmusic/index.html
It looks terrible in FF, so-so in Opera working as IE, and ok in IE.
I’d be grateful for any help. I’m willing to be taught.
CSS follows, then the HTML:
/* CSS Document */
body {
font-family: verdana, helvetica, sans serif;
margin: 0px 0px 0px 0px;
font-size: small;
line-height: 1.2;
background: #040404}
/*#picbox.right {
margin-top: 10px;
top: 50%;
left: 50%;
background-image = url(“images/Standing_Shot.jpg”) #040404 no-repeat;
float: right;
} */
#picbox{
margin-top: 0px;
/*top: 50%;
left: 50%;*/
background-image = url(“images/Standing_Shot.jpg”) #040404 no-repeat;
float: left;
}
#banner {
position:absolute;
width: 450px;
margin-top: 50px;
margin-left: 10px;
margin-right: auto;
margin-bottom: 30px;
border-style: solid;
border-width: 0px;
text-transform: lowercase;
font-size: 30pt;
font-family: verdana, helvetica, sans serif;
color: “#ccc”;
}
#blurb {
position:absolute;
width: 200px;
margin-top: 125px;
margin-left:10px;
margin-right:auto;
margin-bottom: 30px;
border-style: solid;
border-width: 0px;
text-transform: lowercase;
font-size: 11pt;
font-family: verdana, helvetica, sans serif;
color: #ccc;
}
}
#navbox {
position:absolute;
width: 360px;
margin-top: 50px;
margin-right:auto;
margin-left: 10px;
margin-bottom:10px;
text-transform: lowercase;
text-align: center;
font-family: verdana, helvetica, sans serif;
font-size: 16px;
top: 180px;
left: 40px;
width: 200px;
height: 200px;
color: “#ccc”;
}
#navbox a{text-decoration:none;color:#ccc}
#navbox a:visited {}
#navbox a:active {}
#navbox a:hover {color:white;font-size:20px;}
#footer{
position: absolute;
bottom: 0;
width: 70%; /* See note below */
text-align: center;
padding: 10px;
text-transform: lowercase;
color: “#ccc”;
}
}
<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01 Transitional//EN” “http://www.w3.org/TR/html4/strict.dtd”>
<html>
<head>
<meta http-equiv=“content-type” content=“text/html; charset=windows-1250”>
<meta name=“generator” content=“PSPad editor, http://www.pspad.com”>
<title>Michael Phelan Music</title>
<link href = “mpmusic.css” rel=“stylesheet” type=“text/css” />
<style type=“text/css”>
</style>
<body>
<div id = “picbox”>
images/Standing_Shot.jpg
<div id = “banner”>Michael Phelan Music </div>
<div id = “blurb”>Possibly the greatest vocalist/piano player in the Binghamton area! take a dash of nawlins soul, mix with a huge helping of harry connick, and you’ve got what it takes for any event. let the good times roll, or as they say down south, “Laissez les bon temps rouler!” whether the mood is romantic, funky, jazzy, or mellow, michael phelan and his music will make your occasion one you’ll never forget.</div>
<div id = “navbox”>
<a href = “index2.html”>home</a>
<a href = “bio.html”>bio</a>
<a href = “gigs2.html”>gigs, etc.</a>
<a href = “contact.html”>contact</a>
<a href = “music.html”>music</a>
<a href = “photos.html”>photos</a>
</div>
</div>
<div = “footer”>
howdy there
</div>
</body>
</html>