Log in

View Full Version : Center Allignment for a tableless design


subha20
08-19-2006, 06:30 AM
Hi everybody,

I am very new to this forum. I am now trying the tableless design using DIV and CSS. I have got sucess a little bit to make a design as such but my problem is I can't make the design come center of the IE or any other browser.

I want to make my design(tableless) centered Alligned

Regards
Subha
mwinter
08-19-2006, 04:33 PM
See Centring using CSS (http://dorward.me.uk/www/centre/), by David Dorward.

Mike
boogyman
08-19-2006, 07:09 PM
<style type="text/css">
<!--
body {
margin: 0 auto;
width: 600px;
text-align: left;
}
// -->
</style>



where width = the width you want your stuff is.
text-align is there to ensure that all of your text is aligned on the left
mwinter
08-19-2006, 07:24 PM
text-align is there to ensure that all of your text is aligned on the left

The text-align property is there because you included it, but you don't understand why. If you read the article I cited in my post, you'd realise why the text-align property with a value of left might be used when attempting to centre block-level content, and that it's not necessary with the code you posted.

If you'd also paid attention the last time you posted something like this, you would have hopefully heeded my advice to omit the comment declarations inside style (and script) elements, and not to suggest pixel dimensions.

Mike
subha20
08-22-2006, 12:59 PM
Thanks for the replies. I want the whole tableless page design should come at the center position of the browser. like the code we use for normal html layout like

<html>
<head>
<title>welcome</title>
</head>
<body>
<table width="750" border="0" cellspacing="0" cellpadding="0" align="center">
<tr>
<td>&nbsp;</td>
</tr>
</table>

<body>
</html>


I have used diff n types of CSSs like

#menu {
position: absolute;
height: 114px;
width: 143px;
left: 0px;
top: 0px;
}

and divs

<div id="menu"> <img src="images/seo-home.gif">&nbsp;<a href="#" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('about','','images/seo-about-on.gif',1)"><img src="images/seo-about.gif" alt="About SEO-Manchester" name="about" width="31" height="114" border="0"></a>
<a href="#" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('contact','','images/seo-contact-on.gif',1)"><img src="images/seo-contact.gif" alt="Contact SEO-Manchester" name="contact" width="32" height="114" border="0"></a>&nbsp;<a href="#" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('services','','images/manchester-seo-on.gif',1)"><img src="images/manchester-seo-services.gif" alt="SEO-Services" name="services" width="31" height="114" border="0"></a>&nbsp;
</div>

I want to allign the design at the center of the browser:)
mwinter
08-22-2006, 01:04 PM
#wrapper {
margin: 0 auto;
width: ??em;
}

Replace the question marks (?) with an appropriate value. You could use pixels, but em length values are preferable because they are proportional to font size. Likely values are somewhere between 30em and 50em.



<body>
<div id="wrapper">
<!-- document content goes here -->
</div>
</body>

Mike