So I had the unfortunate position of making a website for a friend who I occasionally made DJ promotional fliers for. I had dabbled in HTML and some flash websites before, but never in CSS. I did a lot of reading of tutorials online and did a lot of view source and CSS files to try and get an understanding of what went into it the past few weeks. I think I have fairly decent grasp of the concept of what CSS does, but the implementation of it is where I am stuck. My buddy wants his website to look layout wise similar to Von Dutchs' Website with the main graphic in the center, navigation up top and then 3 columns for quick links to their Calendar, Gallery and Contact.
http://www.beatmixsessions.com/ That is what I have currently. It seems to work fine in Safari/FF, but in IE it just explodes. The main graphic appears way at the bottom in IE 8 and on any other version it just dies.
There is the HTML I have:
Here is the CSS I have:
It seems pretty basic to me but for some reason no matter what I try I just can't seem to get it to work. I have no idea if the code I have written is even good, and I've just copied some of it from the vondutch website as a starting point, so any pointers on cleaning what I have up so far would be great as like I stated, I'm pretty new to learning the CSS format.
http://www.beatmixsessions.com/ That is what I have currently. It seems to work fine in Safari/FF, but in IE it just explodes. The main graphic appears way at the bottom in IE 8 and on any other version it just dies.
There is the HTML I have:
Code:
<!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>
<title>Franchise Boys Lincoln</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="stylesheet" type="text/css" href="style2.css"/>
<!--[if IE 6]><link rel="stylesheet" type="text/css" href="ie6-style.css" /><![endif]-->
</head>
<body>
<div id="page-wrapper">
<div class="donkey">
</div>
<h2>Logo</h2>
<div class="m-top-image">
</div>
</div>
</body>
</html>Here is the CSS I have:
Code:
body, h1, h2, h3, p, a, ul, li, img, form, label, input, select {
margin: 0px;
padding: 0px;
}
body {
background: url(images/background1.png) no-repeat center top;
font-family: Georgia, "Times New Roman", Times, serif;
font-size: 12px;
color: #000000;
}
#page-wrapper {
width: 800px;
margin-right: auto;
margin-left: auto;
}
.m-top-image {
background: url(images/bs.png) no-repeat;
text-indent: -9999px;
height: 496px;
width: 820px;
position: relative;
right: 0px;
top: 82px;
margin: 0;
padding: 0;
overflow:hidden;
cursor:pointer;
z-index: 1
}
.donkey {
background: url(images/donkey.png) no-repeat;
float: right;
text-indent: -9999px;
height: 710px;
width: 829px;
position: relative;
left: 229px;
top: 0px;
z-index: 2;
clear: both;
}
h2 {
background: url(images/fbl.png) no-repeat;
float: left;
text-indent: -9999px;
width: 416px;
height: 315px;
position: relative;
bottom: 675px;
right: 211px;
z-index: 1000;
clear: both;
}It seems pretty basic to me but for some reason no matter what I try I just can't seem to get it to work. I have no idea if the code I have written is even good, and I've just copied some of it from the vondutch website as a starting point, so any pointers on cleaning what I have up so far would be great as like I stated, I'm pretty new to learning the CSS format.
