• Locked
No replies
Fri, 2012-02-17 22:26
skelniktoday
skelniktoday's picture
Offline
Last seen: 1 year 11 weeks ago
Regular
Arizona
Timezone: GMT-7
Joined: 2011-06-06
Posts: 21
Points: 28

I am providing a link to a test site I am working on. I am trying to learn CSS the best I can as it is a very much needed necessity these days. I would very much appreciate any help with my layout.

I am experiencing mixed results on multiple browsers and computers. Can anyone provide incite as to a more effective way to display my header and wrapper so that my design will remain consistent across multiple browsers. ( IE is giving me a major headache.)

My test page:
my test page

My CSS:

#wrapper
{ 
position: fixed; 
left: 330px;
top: 263px; 
width: 746px; 
background: rgba(200, 125, 54, 0.5);
height: 237px; 
z-index:0;
}
 
#header
{ 
position: fixed; 
left: 0px;
top: 0px;
background-image: url(<a href="http://www.thatbastardblogger.com/skelniktoday_new/megabanner_SKELNIKTODAY_main.jpg" rel="nofollow">http://www.thatbastardblogger.com/skelniktoday_new/megabanner_SKELNIKTODAY_main.jpg</a>); 
background-repeat: no-repeat;
background-position: -365px -50px;
background-size: 140%;
width: 1500px; 
border-style: solid; 
border-width: 2px; 
height: 100%; 
}
 
#middle
{ 
position: fixed; 
left: 329px;
top: -50px; 
width: 749px;
height: 313px;
background-image: url(<a href="http://www.thatbastardblogger.com/skelniktoday_new/megabanner_SKELNIKTODAY_TopMiddle.jpg" rel="nofollow">http://www.thatbastardblogger.com/skelniktoday_new/megabanner_SKELNIKTODAY_TopMiddle.jpg</a>); 
background-repeat: no-repeat;
background-position: 0px 0px;
background-size: 749px 313px;
 
}
 
#dragon_mouth
{ 
position: fixed; 
left: 330px;
top: 265.5px; 
width: 50px;
height: 200px;
background-image: url(<a href="http://www.thatbastardblogger.com/skelniktoday_new/megabanner_SKELNIKTODAY_DragonMouth.png" rel="nofollow">http://www.thatbastardblogger.com/skelniktoday_new/megabanner_SKELNIKTODAY_DragonMouth.png</a>); 
background-repeat: no-repeat;
background-position: 0px 0px;
background-size: 37px 148px;
z-index:1;
}
 
#sumo_foot
{ 
position: fixed; 
left: 712px;
top: 263px; 
width: 50px;
height: 30px;
background-image: url(<a href="http://www.thatbastardblogger.com/skelniktoday_new/megabanner_SKELNIKTODAY_SumoFoot.png" rel="nofollow">http://www.thatbastardblogger.com/skelniktoday_new/megabanner_SKELNIKTODAY_SumoFoot.png</a>); 
background-repeat: no-repeat;
background-position: 0px 0px;
background-size: 37px 22px;
z-index:1;
}
 
#main_logo
{ 
position: absolute; 
right: 0px;
bottom: -20px; 
width: 240px;
height: 107px;
background-image: url(<a href="http://www.thatbastardblogger.com/skelniktoday_new/small_stdesign_logo-NewSlogan.png" rel="nofollow">http://www.thatbastardblogger.com/skelniktoday_new/small_stdesign_logo-NewSlogan.png</a>); 
background-repeat: no-repeat;
background-position: 0px 0px 0px 0px;
background-size: 240px 107px;
z-index:2;
}
 
#line
{ 
position: fixed; 
left: 0px;
top: 490px; 
width: 1075px;
height: .25px;
z-index:1;
}
 
body
 {
    font-family: Arial, Helvetica, sans-serif;
    background: rgba(128, 127, 128, 1);
}

My HTML:

<!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>Untitled Document</title>
 
<link rel="stylesheet" href="http://www.thatbastardblogger.com/skelniktoday_new/stylesheet.css" type="text/css" charset="utf-8" /> 
<style type="text/css">
</style>
 
</head>
 
<body> 
 
<div id="header"> 
 
</div>
<div id="line"> 
<hr>
</div>
 
 <div id="middle"> 
<div id="main_logo"> 
 
</div>
 </div> 
 
 <div id="dragon_mouth"> 
 
 </div> 
 
 <div id="sumo_foot"> 
 
 </div> 
 
 <div id="wrapper"> 
 
 </div> 
</body>
</html>

Matt Skelnik ▪ Graphic/Web Designer
skelniktoday.com
Illustration - Digital Watercolor - Logo Design
Tucson, AZ 85622

▪ @mattskelnik ▪ Are YouLinkedIn?
C: 602-689-4412

Top
Tags: