PDA

View Full Version : CSS centering issue


Sgtbaker84
July 30th, 2008, 02:14 AM
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>
Favardin
July 30th, 2008, 03:38 AM
Uploading the page would be helpful, but from what I see I guess the centering is problematic because of the floats. Why don't you assign the orchid as a background the wrapper itself? You can than use padding to push the content to the left and and a negative margin-right to pull the whole content again into position.
redelite
July 30th, 2008, 11:15 AM
Post a link, so we can see the images and play with it in Firebug
student07
July 30th, 2008, 02:02 PM
Post a link, so we can see the images and play with it in Firebug

i'm having a similar problem, the background is centered but i try to add layers with images and they are not centering properly
redelite
July 30th, 2008, 02:09 PM
i'm having a similar problem, the background is centered but i try to add layers with images and they are not centering properly

link?
student07
July 30th, 2008, 03:00 PM
okay
Sgtbaker84
July 30th, 2008, 03:21 PM
here ya go.
Click Here. (http://www.satusweb.com/laflor)
student07
July 30th, 2008, 04:31 PM
here is mine:

(http://www.onelifeentertainment.com/newindex.htm)
redelite
July 30th, 2008, 04:41 PM
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?

I don't see anything wrong except the big white space underneath the footer (which is the slide show). When I put text in the 'cd' div it goes in the correct spot. Maybe I'm just not following you.. :huh:

Do you mean have the box of the web site centered and not the container but still have the orchid to the left? :look:
Sgtbaker84
July 30th, 2008, 04:57 PM
Don't worry about the slideshow for now (i haven't tested in FF yet so idk what bugs i have to fix) i'm working off of IE6 for now. Basically, I want my content centered.
student07
July 30th, 2008, 07:19 PM
Don't worry about the slideshow for now (i haven't tested in FF yet so idk what bugs i have to fix) i'm working off of IE6 for now. Basically, I want my content centered.

I seem to be having similar trouble but only with layers.

this was helpful in centering my bg it looks good on FF an IE: http://www.stockvault.net/tutorials/dreamweaver_center_your_layout.php


However, when I create layers in Dreamweaver and then test it live on IE and FF it's all off and not in the same place as I see on my computer
student07
July 31st, 2008, 12:54 AM
anyone knows why my layer is nudging left?
i posted the link up thread

thank you