Can't center -_- [Archive]

Qued

July 11th, 2007, 11:23 PM

So here is the site I'm making: http://www.notintheface.biz/solarpillars
The content is not exactly centred. I have the left margin set to be 25% how do I actually center this completely?

[CSS]

body {
background-image: url(images/bg.gif);
background-repeat: repeat-x;
background-color: #f2fff4;
margin-left: 0px;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
font-family: "Verdana";
font-size: 12px;
}

/*Basics*/
a {
text-decoration: none;
color: #f3ec35;
}

a:hover {
color: #fff;
}

img {
padding: 0px;
border: 0px;
}

#links {
float: right;
}

#logo {
float: left;
}

#content1 {
width: 550px;
float: left;
padding-right: 10px;
padding-left: 10px;
padding-top: 0;
padding-bottom: 0;
height: 100%;
background-color: #e9f3eb;
margin-left: 25%;
}

#content {
width: 540px;
float: left;
height: 100%;
padding-right: 5px;
padding-left: 5px;
padding-top: 0;
padding-bottom: 0;
background-color: #fff;
}

#footer1 {
width: 550px;
float: left;
padding-right: 10px;
padding-left: 10px;
padding-top: 0;
padding-bottom: 0;
height: 100%;
background-color: #444845;
margin-left: 25%;
}

#footer {
width: 540px;
float: left;
height: 100%;
padding-right: 5px;
padding-left: 5px;
padding-top: 0;
padding-bottom: 0;
background-color: #2b2e2c;
color: #fff;
font-size: 10px;
}

#nav1 {
width: 550px;
float: left;
padding-right: 10px;
padding-left: 10px;
padding-top: 0;
padding-bottom: 0;
height: 100%;
background-color: #444845;
margin-left: 25%;
}

#nav {
width: 540px;
float: left;
height: 100%;
padding-right: 5px;
padding-left: 5px;
padding-top: 0;
padding-bottom: 0;
background-color: #2b2e2c;
color: #fff;
}

[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>SolarPillars.com - Never dig a trench or do wireing again!</title>
<link rel="stylesheet" type="text/css" href="style.css" />
</head>

<body>
<div id="nav1">
<div id="nav">
<div id="logo" align="left">
<img src="images/logo.gif">
</div>
<div id="links" align="right">
<br />
<a href="#">HOME</a> : <a href="#">ABOUTUS</a> : <a href="#">PRODUCT</a> : <a href="#">CONTACT</a>
<br />
<br />
</div>
</div>
</div>

<div id="content1">
<div id="content">
<center>
<object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" codebase="http://fpdownload.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=8,0,0,0" width="500" height="300" id="sildeshow" align="middle">
<param name="allowScriptAccess" value="sameDomain" />
<param name="movie" value="sildeshow.swf" /><param name="quality" value="high" /><param name="bgcolor" value="#ffffff" /><embed src="sildeshow.swf" quality="high" bgcolor="#ffffff" width="500" height="300" name="sildeshow" align="middle" allowScriptAccess="sameDomain" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer" />
</object>
</center>
</div>
</div>

<div id="content1">
<div id="content">
<h1>SolarPillars.com</h1><br />
<p>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Vestibulum ornare, dolor quis mollis sagittis, neque mi consequat diam, eget rutrum libero urna nec enim. Aliquam volutpat, lacus at imperdiet luctus, leo turpis aliquam est, in mattis diam elit ut lacus. Nunc accumsan lacus in nunc. Quisque in turpis eget ipsum condimentum tincidunt. Fusce luctus semper orci. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. Nam scelerisque euismod ante. Proin pretium augue vel augue. Morbi magna orci, ornare in, rutrum id, iaculis eu, est. Mauris vestibulum neque ut purus. Cras magna erat, mattis suscipit, molestie sit amet, lobortis et, tortor. Nulla at ipsum. Donec ornare semper augue. Morbi ac est. Etiam blandit. Proin odio lectus, posuere at, dictum cursus, suscipit eu, nunc. Ut ligula odio, luctus et, aliquam viverra, commodo vel, neque. Proin sit amet eros.
</p>
<p>
Donec ut nisl vitae metus semper tempus. Aliquam aliquet, pede quis condimentum mollis, sapien mauris auctor leo, a pulvinar dolor urna sed nulla. Morbi lacinia. Etiam cursus, turpis at scelerisque aliquet, mauris tellus euismod tortor, non volutpat libero elit ac mauris. Nunc varius elementum eros. Proin sed ipsum. Cras egestas ultricies libero. Sed pretium diam at augue. Morbi cursus ipsum ut nibh. Sed quam. Pellentesque tincidunt tempor erat. Donec eros.
</p>
<p>
Nulla vel orci vel dui auctor consectetuer. Vestibulum fringilla, nulla in consequat luctus, arcu tortor porta sem, sit amet dignissim metus mauris a metus. Nulla arcu magna, consequat non, tempor at, sodales nec, nulla. Curabitur et libero vitae arcu nonummy condimentum. Nunc sed mi ut augue mollis accumsan. Donec sed lacus. Morbi ut est eget libero faucibus sollicitudin. Proin ultrices elit at neque. Nunc eget lorem non ligula porta dapibus. Suspendisse quis nisi. Nunc volutpat sem et nunc. Vivamus eu quam. Curabitur sollicitudin pretium tellus. Vestibulum turpis. Sed eros risus, elementum quis, sagittis sit amet, gravida sit amet, pede. Vestibulum leo sem, porttitor a, vulputate imperdiet, mollis ut, pede. Curabitur rutrum arcu eget felis.
</p>

<br />
<br />
</div>
</div>

<div id="footer1">
<div id="footer">
<div class="copy" align="right">
<br />
Copyright © <a href="#">SolarPillars.com</a> 2001 - 2007. All rights reserved. <br />Design by <a href="http://www.notintheface.biz">NitF Design</a>
<br />
<br />
</div>
</div>
</div>

</body>
</html>

pixelSnobbery

July 12th, 2007, 05:33 AM

Create one more div that wraps everything up (navigation, main content, etc).

Give this div an id of #wrapper

set the css properties of this div as:

#wrapper {
margin-left:auto
margin-right:auto;
}

this should sort it out for you.

Also, remove the 25% margin on the content1 div...

Qued

July 12th, 2007, 09:36 AM

Did not work.

icio

July 12th, 2007, 09:41 AM

#container {
width: 550px;
margin: 0 auto 0 auto;
}

You're not using the code that you were given correctly if it didn't work. Here's a slightly different way of doing it.

Just use that code instead of the #container {} you've already got.

Hope that helps :thumb:

pixelSnobbery

July 12th, 2007, 09:42 AM

^ haha thanks Icio, I thought I was going mad for a while then!

Qued

July 12th, 2007, 10:47 PM

Um that did nothing. Am I missing something here because.. It's not working at all.

JonEngland

July 12th, 2007, 11:14 PM

What he says does work. This works too: Wrap a div tag around the rest of your code and just say align="center"., but it's not a css solution.

<div align="center">

</div>

jeffonfire

July 13th, 2007, 04:29 PM

Will this work

#wrapper {
margin-left:auto
margin-right:auto;
padding-left:auto
padding-right:auto;
}

McGuffin

July 13th, 2007, 04:41 PM

The other code will work:

#wrapper {
margin: 0 auto; // 0 for top/bottom margin, auto for left/right
}

As well, I looked at your source. You have 2 DIVs with the content1 id. When you're using IDs, you can only use it once (ie. only one DIV can have an id of "content1". If you want multiple instances of "content1", make it a class). Also, your design is broken in Safari 3.0 Mac OS X. You need to clean up your markup, you've got a ton of DIV wrappers that don't need to be there.

Qued

July 18th, 2007, 03:14 PM

Okay here is the site http://www.notintheface.biz/solarpillars/ not centered...
With the newer code for #wrapper.\

EDIT/ Nvm I fixed it. o.O