Beginning CSS help.

Discussion in 'Web Design and Development' started by koinbahd, May 29, 2009.

  1. koinbahd macrumors newbie

    Joined:
    Sep 7, 2007
    #1
    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:
    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.
     
  2. angelwatt Moderator emeritus

    angelwatt

    Joined:
    Aug 16, 2005
    Location:
    USA
    #2
    I reworked the CSS some. A note though, IE has issues with transparent PNGs. You may want to convert them to transparent GIF. I can't remember if IE7/8 have fixed that, but IE6 can't handle it. The below positions images in the same place for Firefox and IE6 (with the images looking like crap in IE6 of course).
    Code:
    body, h1, h2, h3, p, a, ul, li, img, form, label, input, select {
    	margin: 0px;
    	padding: 0px;
    }
    body {
    	background:  url(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(bs.png) no-repeat;
    	height: 496px; width: 820px;
    	position: relative;
    	right: 0px;
    	top: 82px;
    	margin: 0;
    	padding: 0;
    	overflow:hidden;
    	cursor:pointer;
    	z-index: 1;
    }
    .donkey {
    	background: url(donkey.png) no-repeat;
    	float: right;
    	text-indent: -9999px;
    	height: 710px;
    	width: 829px;
    	position: relative;
    	left: 229px;
    	top: -495px;
    	z-index: 2;
    	clear: both;
    }
    h2 {
    	background: url(fbl.png) no-repeat;
    	float: left;
    	text-indent: -9999px;
    	width: 416px; height: 315px;
    	position: absolute;
    	top: 35px; left: -50px;
    	z-index: 10;
    	clear: both;
    }
     
  3. memco macrumors 6502

    Joined:
    May 1, 2008
    #3
    Just a quick note on the PNGs: IE6 has decent default support for 8-bit PNGS. These work pretty much like GIFs in IE, but in browsers that fully support PNG 8 you can actually get semi-transparent pixels depending on color palette. Sitepoint has an article explaining how to effectively use them and why they work.
     

Share This Page