PDA

Click to See Complete Forum and Search --> : CSS page centering

DesignIt
06-10-2005, 09:14 PM
Can someone tell me how to center this page? I can't seem to figure it out.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Title Here</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<link href="styles/global_cuddy.css" rel="stylesheet" type="text/css">
<script language="JavaScript" type="text/JavaScript">
<!--
function MM_reloadPage(init) { //reloads the window if Nav4 resized
if (init==true) with (navigator) {if ((appName=="Netscape")&&(parseInt(appVersion)==4)) {
document.MM_pgW=innerWidth; document.MM_pgH=innerHeight; onresize=MM_reloadPage; }}
else if (innerWidth!=document.MM_pgW || innerHeight!=document.MM_pgH) location.reload();
}
MM_reloadPage(true);
//-->
</script>

</head>

<body>
<div id="content">
<div id="leatherback" style="position: absolute; left: 182px; top: 6px; width: 191px; height: 558px; z-index: 1; background-image: url(images/home_leftnav.jpg); layer-background-image: url(images/home_leftnav.jpg); border: 1px none #000000;">
<div id="navleft" ><a href="*.htm" class="nav_1">HOME</a><br/>
<a href="*.htm" class="nav_1">LOCATION</a><br/>
<a href="*.htm" class="nav_1">COMMUNITY</a><br/>
<a href="*.htm" class="nav_1">PROPERTIES</a><br/>
<a href="*.htm" class="nav_1">HOMES</a><br/>
<a href="*.htm" class="nav_1">INFRASTRUCTURE</a><br/>
<a href="*.htm" class="nav_1">CONTACT US</a> </div>
</div>
<div id="top1" style="position: absolute; left: 373px; top: 6px; width: 189px; height: 108px; z-index: 2"><img src="images/home_top1.jpg" width="189" height="108" alt=""></div>
<div id="top2" style="position: absolute; left: 562px; top: 6px; width: 190px; height: 108px; z-index: 3"><img src="images/home_top2.jpg" width="190" height="108" alt=""></div>
<div id="top3" style="position: absolute; left: 752px; top: 6px; width: 190px; height: 108px; z-index: 4"><img src="images/home_top3.jpg" width="190" height="108" alt=""></div>
<div id="homehead" style="position: absolute; left: 373px; top: 114px; width: 569px; height: 141px; z-index: 5"><img src="images/home_headline.jpg" width="569" height="141" alt=""></div>
<div id="mainpic" style="position: absolute; left: 373px; top: 255px; width: 569px; height: 309px; z-index: 6"><img src="images/home_pic.jpg" width="569" height="309" alt=""></div>
<div id="footer1" style="position: absolute; left: 182px; top: 564px; width: 191px; height: 25px; z-index: 7; background: #000000"></div>
<div id="footer2" style="position: absolute; left: 373px; top: 564px; width: 569px; height: 25px; z-index: 8; background: #000000"><div class="H_copyright"> Copyright &copy; 2005 Message here</div>

</div>
</div>
</body>
</html>
ecsyle
06-10-2005, 09:48 PM
#content{
margin:0 auto;
text-align:center;
}

Now tell me why you can't use google
DesignIt
06-11-2005, 04:58 AM
You know when your coding and coding for hours and you just hit a wall...well that is what happened...I think I google more than anyone I know. Anyway, I have tried what you suggest and it doesn't work.
ecsyle
06-11-2005, 06:11 AM
It could be all that absolute positioning causing the problems.

Edit: I will have a look at it in more detail later. I am running late :)
Allen Harkleroad
06-11-2005, 06:46 AM
I would agree on the absolute positioning being the culprit. Try absolute center instead of left.
Ryan8720
06-11-2005, 04:40 PM
There is no absolute center. You'll have to remove the absolute positioning and make the outer div position relative and center it using what ecsyle posted. Then you can absolutely position the contents of the outer div to the outer div.
Allen Harkleroad
06-11-2005, 05:01 PM
div align center? I forget a lot of css but wouldn't that work?
JPnyc
06-11-2005, 05:08 PM
until the w3c gives us a method that's as simple and effective as center tags, I'll use those. CSS has a long way to go yet.
Allen Harkleroad
06-11-2005, 05:24 PM
yeah but CSS is awesome, you have to admit, it isn't so much W3 standards as it is browsers displaying differently. If all browsers would adhere to standards the WWW would be so much more consistent. I have nightmares about cross browser compatibility, a lot.
JPnyc
06-11-2005, 05:39 PM
Even discounting the browser issues, CSS still needs a lot of work. They need a command that forces elements to appear on the same horizontal line, no matter WHAT, like putting them in a table row does. display:inline doesn't do it, float doesn't either. They need a real centering command. We know the browser can parse center because the center tags work. It was just a matter of declaring the syntax. There should be alignments for every element, left, right, center, top and bottom. As you may have guessed by now, I'm no fan of the w3c. :)
DesignIt
06-13-2005, 04:42 PM
Well, I went ahead and decided to float the images. But I am having trouble getting <div id="homehead">&nbsp;</div> , to line up left, in Explorer. It lines up left in Safari and Netscape, but drops to the bottom in Explorer...any ideas??

<!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=iso-8859-1" />
<title>Untitled Document</title>

<style type="text/css" media="screen">
<!--

body
{
background-color:#003300
}

#content
{
font-size: 11px;
font-family: Verdana, Geneva, Arial, sans-serif;
line-height: 14px;
background-color:#003300
text-align: left;
visibility: visible;
margin-top: 40px;
margin-right: auto;
margin-left: auto;
position: relative;
width: 760px
}

#leather
{
position: relative;
padding: 0px;
margin-top: 10px;
width: 191px;
float: left;
background-image: url(images/home_leftnav.jpg);
height: 558px;
}

#top1
{
background-color: #FFFFFF;
position: relative;
padding: 0px;
margin-top: 10px;
width: 189px;
float: left;
margin-left: 0px;
margin-bottom: 0px;
background-image: url(images/home_top1.jpg);
height: 108px;
}

#top2
{
background-color: #FFFFFF;
position: relative;
padding: 0px;
margin-top: 10px;
width: 190px;
float: left;
margin-left: 0px;
margin-bottom: 0px;
background-image: url(images/home_top2.jpg);
height: 108px;
}

#top3
{
background-color: #FFFFFF;
position: relative;
padding: 0px;
margin-top: 10px;
width: 190px;
float: left;
margin-left: 0px;
margin-bottom: 0px;
background-image: url(images/home_top3.jpg);
height: 108px;
}

#homehead
{
background-color: #FFFFFF;
position: relative;
padding: 0px;
margin-top: 0px;
width: 569px;
float: left;
margin-left: 0px;
margin-bottom: 0px;
background-image: url(images/home_headline.jpg);
height: 141px;
vertical-align: top;
}

-->
</style>
</head>

<body>
<div align="center">
<div id="content">

<div id="leather"><div id="navleft">
<a href="*.htm" class="nav_1">HOME</a><br/>
<a href="*.htm" class="nav_1">LOCATION</a><br/>
<a href="*.htm" class="nav_1">COMMUNITY</a><br/>
<a href="*.htm" class="nav_1">PROPERTIES</a><br/>
<a href="*.htm" class="nav_1">HOMES</a><br/>
<a href="*.htm" class="nav_1">INFRASTRUCTURE</a><br/>
<a href="*.htm" class="nav_1">CONTACT US</a>
</div></div>

<div id="top1">&nbsp;</div>
<div id="top2">&nbsp;</div>
<div id="top3">&nbsp;</div>

<div id="homehead">&nbsp;</div>


</div></div>
</body>
</html>

Is there a workaround or something for this?
DesignIt
06-14-2005, 02:39 PM
Anyone have any feedback on this? =)

From what I have gathered on my own, there really is no way around this. It is just a IE MAC bug, plain and simple. Either ignore your IE MAC audience (approximately 1%) or do that section in tables. I will probably go with the latter.
Dakota1
06-14-2005, 03:20 PM
Got to looking over your code there Designit. Dude you should really think about starting from scratch. I don't know what your trying to layout but its a mess. If you post a link or a picture of what you are trying to do I may be able to help.
Dakota1
06-14-2005, 03:48 PM
Here is a link to a pretty nifty css tool that you might be interested in. http://www.inknoise.com/experimental/layoutomatic.php
DesignIt
06-14-2005, 11:52 PM
Dakota,
Wow! Great link that is. Thanks! I will definately be using that. I think it has helped me make better sense of CSS but I still can't figure out how to get those 2 bottom images lined up.

Images top1, 2 and 3 all line up but the 2 larger images (homehead, mainpic) underneath drop down still.

Here is what I have right now based off of layoutomatic:

<!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 name="generator" content="http://www.inknoise.com/experimental/layoutomatic.php" />

<style type="text/css">
#container {
width: 760px;
\width: 780px;
w\idth: 760px;
margin: 10px;
margin-left: auto;
margin-right: auto;
padding: 10px;
}

#content {
padding: 0;
margin-left: 191px;
background-color: gray;
}

#sidebar-a {
float: left;
height: 558px;
width: 191px;

margin: 0;
margin-right: 0;
padding: 0;
background-color: rgb(235, 235, 235);
background-image: url(images/home_leftnav.jpg);
}

#navleft
{
margin-left: 44px;
text-align: left;
text-decoration: none;
line-height: 17px;
font-family: Arial, Helvetica, sans-serif;
font-size: 11px;
font-weight: bold;
padding-top: 197px;
vertical-align: top;
}


/*nav links*/
a.nav_1:link {color: #FFFFFF; text-decoration: none; height: 19px;}
a.nav_1:visited { color: #FFFFFF; text-decoration: none; height: 19px;}
a.nav_1:hover { color: #FFEEBB; text-decoration: none; height: 19px;}
a.nav_1:active {color: #FFEEBB; text-decoration: none; height: 19px;;
}


#top1
{
background-color: #FFFFFF;
padding: 0px;
margin-top: 0px;
width: 189px;
float: left;
margin-left: 0px;
margin-bottom: 0px;
background-image: url(images/home_top1.jpg);
height: 108px;
}

#top2
{
background-color: #FFFFFF;
padding: 0px;
margin-top: 0px;
width: 190px;
float: left;
margin-left: 0px;
margin-bottom: 0px;
background-image: url(images/home_top2.jpg);
height: 108px;
}

#top3
{
background-color: #FFFFFF;
padding: 0px;
margin-top: 0px;
width: 190px;
float: left;
margin-left: 0px;
margin-bottom: 0px;
background-image: url(images/home_top3.jpg);
height: 108px;
}

#homehead
{
background-color: #FFFFFF;
padding: 0px;
margin-top: 0px;
width: 569px;
float: left;
margin-left: 0px;
margin-bottom: 0px;
background-image: url(images/home_headline.jpg);
height: 141px;
}

#mainpic
{
background-color: #FFFFFF;
padding: 0px;
margin-top: 0px;
width: 569px;
float: left;
margin-left: 0px;
margin-bottom: 0px;
background-image: url(images/home_pic.jpg);
height: 309px;
}

#footer {
clear: both;
padding: 0;
margin-top: 0;
background-color: 000000;
}
</style>
</head>
<body>
<div id="container">


<div id="sidebar-a">
<div id="navleft">
<a href="*.htm" class="nav_1">HOME</a><br/>
<a href="*.htm" class="nav_1">LOCATION</a><br/>
<a href="*.htm" class="nav_1">COMMUNITY</a><br/>
<a href="*.htm" class="nav_1">PROPERTIES</a><br/>
<a href="*.htm" class="nav_1">HOMES</a><br/>
<a href="*.htm" class="nav_1">INFRASTRUCTURE</a><br/>
<a href="*.htm" class="nav_1">CONTACT US</a>
</div>
</div>

<div id="content">

<div id="top1">&nbsp;</div>
<div id="top2">&nbsp;</div>
<div id="top3">&nbsp;</div>

<div id="homehead">&nbsp;</div>

<div id="mainpic">&nbsp;</div>

</div>

<div id="footer">&nbsp;</div>
</div>
</body>
</html>


Thanks again for your help!
ecsyle
06-15-2005, 02:08 AM
Here is a link to a pretty nifty css tool that you might be interested in. http://www.inknoise.com/experimental/layoutomatic.php
That is too cool :D
Dakota1
06-15-2005, 03:43 PM
Hi Designit, can you post a pic to show how you want it to look?
DesignIt
06-16-2005, 03:06 PM
Hi Designit, can you post a pic to show how you want it to look?

How do I upload a pic here? Otherwise I could email you a jpeg?
Dakota1
06-17-2005, 01:15 AM
How do I upload a pic here? Otherwise I could email you a jpeg?

When you are making a post, look down at the additional options box and click on the manage attachments link.
DesignIt
06-19-2005, 05:23 AM
Cool,
I will upload the image monday when I get to work. I took off 3 days this weekend. =)
DesignIt
06-20-2005, 03:00 PM
Hi Designit, can you post a pic to show how you want it to look?

Here is what I am building. It is, more or less, a home/splash page. The grey squares are where other images will go. I have the site laid out in tables w/CSS but would like to find a solid CSS solution preferably.
Thanks for your help!
Dakota1
06-21-2005, 01:17 AM
Ok, you may have to do a little tuning but in the browsers I tryed this in it works fine (don't know how it will look on a mac).

<!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=iso-8859-1" />
<title>Untitled Document</title>
<style type="text/css">
<!--
#wrapper {
width: 780px;
padding: 0px;
margin-right: auto;
margin-left: auto;
margin-top: 0px;
margin-bottom: 0px;
}

#topbanner {
float: right;
height: 108px;
width: 590px;
margin: 0px;
padding: 0px;
}

#leftsidebar {
float: left;
margin: 0px;
padding: 0px;
height: 560px;
width: 190px;
background-color: #999999;
}

#leftnav
{
margin-left: 44px;
text-align: left;
text-decoration: none;
line-height: 17px;
font-family: Arial, Helvetica, sans-serif;
font-size: 11px;
font-weight: bold;
padding-top: 197px;
vertical-align: top;
}

/*nav links*/
#leftnav a:link {color: #FFFFFF; text-decoration: none; height: 19px;}
#leftnav a:visited { color: #FFFFFF; text-decoration: none; height: 19px;}
#leftnav a:hover { color: #FFEEBB; text-decoration: none; height: 19px;}
#leftnav a:active {color: #FFEEBB; text-decoration: none; height: 19px;}

#topcontent
{
height: 142px;
float: left;
margin: 0px;
padding: 0px;
width: 590px;
}
#bottomcontent
{
padding: 0px;
float: left;
margin: 0px;
width: 590px;
height: 308px;
}

#footer {
padding: 0;
width: 780px;
margin: 0;
height: 20px;
clear: both;
border: 1px dotted #FF0000;
}

#top1 {
float: left;
}
#top2 {
float: left;
}
#top3 {
float: left;
}
-->
</style>
</head>

<body>
<div id="wrapper">
<div id="leftsidebar">
<div id="leftnav"> <a href="*.htm" class="nav_1">HOME</a><br/>
<a href="*.htm" class="nav_1">LOCATION</a><br/>
<a href="*.htm" class="nav_1">COMMUNITY</a><br/>
<a href="*.htm" class="nav_1">PROPERTIES</a><br/>
<a href="*.htm" class="nav_1">HOMES</a><br/>
<a href="*.htm" class="nav_1">INFRASTRUCTURE</a><br/>
<a href="*.htm" class="nav_1">CONTACT US</a></div>
</div>
<div id="topbanner">
<div id="top1"><img name="top1" src="" width="196" height="108" alt="" /></div>
<div id="top2"><img name="top2" src="" width="196" height="108" alt="" /></div>
<div id="top3"><img name="top3" src="" width="196" height="108" alt="" /></div>
</div>
<div id="topcontent">Content for id "topcontent" Goes Here</div>
<div id="bottomcontent">Content for id "bottomcontent" Goes Here</div>
<div id="footer">Content for id "footer" Goes Here</div>
</div>
</body>
</html>
DesignIt
06-21-2005, 03:15 PM
Hey Dakota,

REALLY APPRECIATE YOUR HELP!! It works perfectly in IE mac. Thanks again!! =)

Edit: Well...I take that back, after looking closer, it works just the same as mine. It kicks the bottomcontent down below, in MAC IE. GRRR...