6 Replies - 1359 Views - Last Post: 13 April 2007 - 06:02 PM

#1 Shadow OSX  Icon User is offline

  • D.I.C Head

Reputation: 1
  • View blog
  • Posts: 67
  • Joined: 28-March 06

Relative Positioning

Posted 27 March 2007 - 07:16 AM

Hello. I have a question that may have been answered before concerning CSS. I went through the search engine and could not find what I was looking for...

I am curious about positioning my web page so that it will automatically load centered. Just like this site. www.websterdesign.com

Also when I resize the browser window the content moves as well. These two things are exactly what I want. I know how to do this with frames, but I really would like to know the CSS way to do it. So if you could give me and explain the CSS code in the simplest of terms that would be great.

Thank you all.

Is This A Good Question/Topic? 0
  • +

Replies To: Relative Positioning

#2 girasquid  Icon User is offline

  • Barbarbar
  • member icon

Reputation: 108
  • View blog
  • Posts: 1,825
  • Joined: 03-October 06

Re: Relative Positioning

Posted 27 March 2007 - 08:13 AM

View PostShadow OSX, on 27 Mar, 2007 - 07:16 AM, said:

Hello. I have a question that may have been answered before concerning CSS. I went through the search engine and could not find what I was looking for...

I am curious about positioning my web page so that it will automatically load centered. Just like this site. www.websterdesign.com

Also when I resize the browser window the content moves as well. These two things are exactly what I want. I know how to do this with frames, but I really would like to know the CSS way to do it. So if you could give me and explain the CSS code in the simplest of terms that would be great.

Thank you all.



If I understand you correctly, you're talking about using CSS to center something.
Here's a link to example code for Auto-width Margins for centering, and here's another link to example code for negative margins for centering.

Cheers,
Girasquid
Was This Post Helpful? 0
  • +
  • -

#3 Shadow OSX  Icon User is offline

  • D.I.C Head

Reputation: 1
  • View blog
  • Posts: 67
  • Joined: 28-March 06

Re: Relative Positioning

Posted 27 March 2007 - 08:41 AM

Thanks I'm gonna try this. I'll let you know if it doesn't work. Thanks again.
Was This Post Helpful? 0
  • +
  • -

#4 Shadow OSX  Icon User is offline

  • D.I.C Head

Reputation: 1
  • View blog
  • Posts: 67
  • Joined: 28-March 06

Re: Relative Positioning

Posted 27 March 2007 - 11:59 AM

Ok I tired and searched for code and finally got it to work. It is centered horizontally perfectly.

The problem I have now is centering it vertically. If anyone can help that would be great. Here is the code I have:

<style type="text/css">
<!--
body {
	background-color: #CCCCCC;
	margin:50px 0px;
	padding:0px;
	text-align:center;
	margin-top: 25px;
	}
.style1 {
	font-family: Arial, Helvetica, sans-serif;
	font-size: x-small;
	color: #666666;
}
div#main {
	width: 850px;
	margin: 0px auto;
	text-align: left;
	padding: 15px;
}
-->
</style></head>

<body>
  <!--DWLayoutTable-->
  
  <tr>
	<td width="850" height="546" valign="middle"><object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=7,0,19,0" width="850" height="546">
	  <param name="movie" value="intro.swf" />
	  <param name="quality" value="high" />
	  <embed src="intro.swf" quality="high" pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash" width="850" height="546"></embed>
	</object></td>
  </tr>
</table>
  <!--DWLayoutTable-->
  
  <tr>
	<td width="850" height="37" valign="top"><p align="center" class="style1">Copyright  Lead Group Design, 2007<br />
	No part of this website may be reproduced or transmitted by any process without prior permission from Lead Group Design. All rights reserved. </p></td>
  </tr>
</table>
</body>
</html>

Was This Post Helpful? 0
  • +
  • -

#5 fuzzyjello  Icon User is offline

  • New D.I.C Head

Reputation: 1
  • View blog
  • Posts: 19
  • Joined: 13-April 07

Re: Relative Positioning

Posted 13 April 2007 - 01:43 PM

View PostShadow OSX, on 27 Mar, 2007 - 11:59 AM, said:

Ok I tired and searched for code and finally got it to work. It is centered horizontally perfectly.

The problem I have now is centering it vertically. If anyone can help that would be great. Here is the code I have:

<style type="text/css">
<!--
body {
	background-color: #CCCCCC;
	margin:50px 0px;
	padding:0px;
	text-align:center;
	margin-top: 25px;
	}
.style1 {
	font-family: Arial, Helvetica, sans-serif;
	font-size: x-small;
	color: #666666;
}
div#main {
	width: 850px;
	margin: 0px auto;
	text-align: left;
	padding: 15px;
}
-->
</style></head>

<body>
  <!--DWLayoutTable-->
  
  <tr>
	<td width="850" height="546" valign="middle"><object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=7,0,19,0" width="850" height="546">
	  <param name="movie" value="intro.swf" />
	  <param name="quality" value="high" />
	  <embed src="intro.swf" quality="high" pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash" width="850" height="546"></embed>
	</object></td>
  </tr>
</table>
  <!--DWLayoutTable-->
  
  <tr>
	<td width="850" height="37" valign="top"><p align="center" class="style1">Copyright  Lead Group Design, 2007<br />
	No part of this website may be reproduced or transmitted by any process without prior permission from Lead Group Design. All rights reserved. </p></td>
  </tr>
</table>
</body>
</html>


The text-align center on the body might be throwing things off. The main div you have should be centering itself thanks to the auto margin. If you want to center things in your body, just throw
<div align="center">whatever</div>
around your object.

Was This Post Helpful? 0
  • +
  • -

#6 DilutedImage  Icon User is offline

  • D.I.C Addict
  • member icon

Reputation: 14
  • View blog
  • Posts: 646
  • Joined: 20-November 06

Re: Relative Positioning

Posted 13 April 2007 - 03:46 PM

Using an align attribute in html is not recommended, as you no longer have a separation of content and format. The correct way to center text is with "text-align:center"; not "align='center'". If you simply must do it in the tag though, then do it with "style='text-align:center;'".

As for centering vertically; there isn't really a good way to do it. It can be done (I've done it), but not in a 'proper' way. At least not that I'm aware of. For ideas on how to do it though, Google the phrase "CSS center vertically".

2

This post has been edited by DilutedImage: 13 April 2007 - 03:48 PM

Was This Post Helpful? 0
  • +
  • -

#7 Arbitrator  Icon User is offline

  • D.I.C Addict
  • member icon

Reputation: 51
  • View blog
  • Posts: 530
  • Joined: 26-January 05

Re: Relative Positioning

Posted 13 April 2007 - 06:02 PM

The correct way to center elements is to use CSS. Thus, the align attribute shouldn’t be used; it’s officially deprecated (obsolete) too.

There are two CSS methods to horizontally center content:

To center text or elements displayed as text (those with display: inline, display: inline-block, or display: inline-table) use the text-align: center declaration. Examples of elements displayed as text by default include span, img, and input.

To center block level elements, use margin-left: auto and margin-right: auto or margin: 0 auto for short. Examples of blocks include div, body, and p. It’s a bit different from the text-align: center declaration in that you apply it directly to the element to be centered instead of the parent element of the content to be centered.

One further issue with centering blocks is that the correct method does not work in Internet Explorer unless the document is displayed in standards mode. To invoke standards mode, the document must have a document type declaration. This is a normal requirement of HTML, although many people forget it. Internet Explorer has an abnormal requirement in addition to this: nothing, including comments or whitespace, must be precede the document type declaration. Internet Explorer 7 allows an exception (the XML declaration) for XHTML documents; you shouldn’t be serving XHTML to that browser at all though. I would recommend an HTML 4.01 DTD, if you’re not using one already:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
  "http://www.w3.org/TR/html4/strict.dtd">

As for vertical centering, I wouldn’t bother unless you don’t mind giving your layout a fixed height. Internet Explorer doesn’t support any of the CSS methods that must be used when you have a content‐based height. The best way to center a dynamic‐height layout would probably be to use Javascript. You might also be able to do it by using tables and exploiting browser bugs, but that’s bad practice.

This post has been edited by Arbitrator: 13 April 2007 - 06:04 PM

Was This Post Helpful? 0
  • +
  • -

Page 1 of 1