I’m having issues getting this to work properly…I want all of my content to be centered and the orchid to “nudge” to the left of the header. Basically the way it is now is the overall look i’m going for, it’s just that the placement of the orchid is causing the entire container to be centered, am I making any sense?
Here’s the CSS code:
/* CSS Document */
body {
margin-left:auto;
margin-right:auto;
font-family:tahoma;
font-size:72%;
margin:0px;
background:#fcebf7;
text-align:center;
}
a:link{ text-decoration: none; color:#333333; }
a:hover{ text-decoration: none; color:#a90c76; }
a:visited{ text-decoration: none; color:#fdc975; }
#wrap {
margin-left:auto;
margin-right:auto;
width:886px;
top:0;
}
#orchid {
position:relative;
width:104px;
height:249px;
background:url('../images/orchid_left_side.gif') no-repeat top right;
float:left;
}
#header{
position:relative;
width:782px;
height:200px;
background: url('../images/header.gif') no-repeat top center;
float:left;
}
#nav{
position:relative;
width:782px;
height:33px;
background:url('../images/nav.gif') no-repeat top;
float:left;
text-align:center;
}
#navcontainer
{
left:200px;
margin:0;
padding: 0 0 0 12px;
}
#navcontainer UL
{
margin-left:200px;
list-style: none;
margin: 0;
padding-left: 175px;
border: none;
}
#navcontainer LI
{
display: block;
margin: 0;
padding: 0;
float: left;
width: auto;
}
#navcontainer A
{
color: #444;
display: block;
width: auto;
text-decoration: none;
margin: 0;
padding: 9px 10px;
font-weight:bold;
}
#navcontainer A:hover, #navcontainer A:active { color: #cf1a96; }
#navcontainer A.active:link, #navcontainer A.active:visited
{
position: relative;
z-index: 102;
background: #BBBBBB;
font-weight: bold;
}
#undernav{
position:relative;
width:782px;
height:16px;
background:url('../images/under_nav.gif') no-repeat top;
float:left;
}
#content{
position:relative;
width:782px;
height:600px;;
background:url('../images/contentback.gif') repeat-y;
float:right;
}
#footer{
position:relative;
width:782px;
height:99px;
padding-top:25px;
background:url('../images/footer.gif') no-repeat center top;
float:right;
}
/* Special Content Identifiers*/
#slideshow{
position:relative;
width:280px;
height:461px;
float:left;
}
#leftcontent{
position:relative;
width:486px;
height:100%;
padding-left:20px;
float:left;
text-align:left;
}
#cd{
width:150px;
height:92px;
background:url('../images/cd.gif');
}
Here’s the HTML:
<html>
<head>
<title>La Flor</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<link rel="stylesheet" href="css/ie.css" media="all">
<link rel="stylesheet" type="text/css" href="css/chrometheme/chromestyle.css" />
</head>
<body onload="preloadImages();">
<div id="wrap">
<div id="orchid"></div>
<div id="header"></div>
<div id="nav">
<div id="navcontainer">
<ul id="navlist">
<li><a href="index.html" title="home">Home</a></li>
<li><a href="our_services.html" title="our services">Our Services</a></li>
<li><a href="portfolio.html" title="portfolio">Portfolio</a></li>
<li><a href="about.html" title="about">About</a></li>
<li><a href="contact.html" title="contact">Contact</a></li>
</ul>
</div>
</div>
<div id="undernav"></div>
<div id="content">
<div id="leftcontent">
<div id="cd"></div>
</div>
<div id="slideshow">
<object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" codebase="http://fpdownload.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=7,0,0,0" width="280" height="461" id="slideshow" align="middle">
<param name="allowScriptAccess" value="sameDomain" />
<param name="movie" value="slideshow.swf" />
<param name="quality" value="high" />
<param name="bgcolor" value="#ffffff" />
<embed src="/images/slideshow.swf" quality="high" bgcolor="#ffffff" width="280" height="461" name="slideshow" align="middle" allowScriptAccess="sameDomain" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer" />
</object>
</div>
</div>
<div id="footer">La Flor Design, Llc. <br />Pembroke Pines, FL United States<br />
<a href="mailto:myevent@laflordesign.com">MyEvent<font color="#333333">@LaFlorDesign.Com</font></a>
</div>
</div>
</body>
</html>
