Jump to content

Centering the page

Dubbeldam

By Dubbeldam
in HTML/XHTML

Recommended Posts

Dubbeldam Newbie

Dubbeldam

Posted
Posted

Ok I'm a bit confused and couldn't really get clear out of the w3schools.com documentation.I am redoing the layout for the website I'm working on.In the old layout I was always using absolute positioning, and the website was on the topleft of the browser. I want to center it now, So what do I do, Absolute, Relative? Something else?

Link to comment
Share on other sites
Synook w3schools Guru

Synook

Posted
Posted

To centre something with a fixed width, you can give it auto side-margins. If that doesn't work, you can also try setting the parent to text-align:center.

margin:0px auto;

Link to comment
Share on other sites
Dubbeldam Newbie

Dubbeldam

Posted
  • Author
Posted

Hmm.. Can you give me an example? Maybe with this code so I can see what you are doing

<?phpsession_start();?><html><?xml version="1.0" encoding="iso-8859-1"?><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><head><!--CASCADE STYLE SHEET--><style type="text/css">body{	background-image:url('images/background.jpg');background-repeat:no-repeat}img.poschat				 /*for the chat*/{position:fixed;left:260px;top:544px;width:77px;height:53px;opacity:0.4;filter:alpha(opacity=40);}img.poshome 				/*for the home*/{position:fixed;left:10px;top:544px;width:66px;height:51px;opacity:0.4;filter:alpha(opacity=40);} img.posprofile				/*for the profile*/{position:absolute;left:100px;top:542px;opacity:0.4;filter:alpha(opacity=40);}img.friends				/*for the friends*/{position:absolute;left:180px;top:542px;width:60px;height:54px;opacity:0.4;filter:alpha(opacity=40);}img.mail					/*for the mail*/{position:absolute;left:350px;top:542px;width:60px;height:54px;opacity:0.4;filter:alpha(opacity=40);}img.bar					/*for the menubar*/{position:absolute;left:0px;top:541px;z-index:-1;}  form.bar  {  position:absolute;  left:440px;  top:550px;  }</style></head><!--#########################THE MENU IMAGES###################--><!--The bar image--><img class=bar src="images/bar.jpg" id="bar" style="position: absolute; left: 0; top: 540" width="799" height="59"><!--the chat image--><img class=poschat src="images/chatnormal.jpg" alt="chatnormal" id="chat" onmouseover="this.style.opacity=1;this.filters.alpha.opacity=100" onmouseout="this.style.opacity=0.4;this.filters.alpha.opacity=40"><!--The home image--><img class=poshome src="images/homenormal.jpg" alt="homenormal" id="home"onmouseover="this.style.opacity=1;this.filters.alpha.opacity=100"onmouseout="this.style.opacity=0.4;this.filters.alpha.opacity=40"><!--The profle image--><a href="index.php"><img class=posprofile src="images/profilenormal.jpg" alt="profilenormal" id="profile" onmouseover="this.style.opacity=1;this.filters.alpha.opacity=100" onmouseout="this.style.opacity=0.4;this.filters.alpha.opacity=40"></a><!--The friends image--><a href="friendlist.php"><img class=friends src="images/friendsnormal.jpg" alt="friendsnormal" id="friends" onmouseover="this.style.opacity=1;this.filters.alpha.opacity=100" onmouseout="this.style.opacity=0.4;this.filters.alpha.opacity=40"></a><!--The mail image--> <img class=mail src="images/mailnormal.jpg" alt="mailnormal" id="mail" onmouseover="this.style.opacity=1;this.filters.alpha.opacity=100"onmouseout="this.style.opacity=0.4;this.filters.alpha.opacity=40"><!--The search bar--><form class=bar name="simple_bar" method="post" action="searchpeople.php">  <table width="400" border="0" cellpadding="5">	<tr>	  <td>		<input type="hidden">		<b>Search:</b><input type="text" name="keyword" size="30" maxlength="50"><input type="submit" value="Find">	  </td>	</tr>  </table></form> <div style="overflow: auto; width: 400px; background-color:#ffffff; filter:alpha(opacity=60); opacity:0.6; position:absolute; left:200; border:1px solid black;"><table style="width: 300px" cellpadding="0" cellspacing="0" border="0"><tr width="150">  <td width="188"><b>Name</b></td>  <td><b>City, Country</b></td></tr></table></div><br><?php*?><div style="overflow: auto; height: 500px; width: 400px; background-color:#ffffff; filter:alpha(opacity=60); opacity:0.6; position:absolute; left:200; border:1px solid black;">  <table style="width: 300px;" cellpadding="0" cellspacing="0" border="0"><?php*	?>		<tr>	<td width="200">	<?php *	?>	<br><br>	</td>	<td>	<?php* 	?>	<br><br>	</td>	</tr>			<?php*?> </table></div></html>
Link to comment
Share on other sites
DizzyDan Member

DizzyDan

Posted
Posted

I believe this to be more of a CSS issue.This might be what you are looking for,Wrap the whole page in a <div> call it wrap or whatever you want and in the css code CSS

#wrap{position: relative;margin: 0 auto;}

Synook, since margin is set '0' do you need to state 'px'? I thought since it is 0 it doesnt matter the unit type because 0 is 0 no matter what but i could be wrong. Does that affect certain browers maybe?

Link to comment
Share on other sites
ShadowMage Devoted Member

ShadowMage

Posted
Posted
since margin is set '0' do you need to state 'px'? I thought since it is 0 it doesnt matter the unit type because 0 is 0 no matter what but i could be wrong. Does that affect certain browers maybe?
No you don't need to have a unit specified, but it's a good habit to always specify a unit. That way you don't forget to specify one when you do need it.BTW, Dubbeldam, if you have time or want to take the time, I'd recommend scrapping your whole page and starting over. You're using way too much positioning. Probably all of what you're trying to achieve can be done without it, using floats, clears, margins, padding, and display. But if you're looking for a "band-aid" then DizzyDan's solution will work.
Link to comment
Share on other sites
ShadowMage Devoted Member

ShadowMage

Posted
Posted
But I don't get it. How can I put an image somewhere without positioning it? Doesn't make sense to me =P
Like I said:
using floats, clears, margins, padding, and display
Unless you're trying to achieve a "collage" effect or have "randomly placed" images. Then the only way is to use positioning. But for most typical applications you can use the above mentioned properties.EDIT:For example, it looks as though you are trying to create a menu bar. For this you don't need to use positioning. You could simply wrap all of your images in a div and give each one a float: left property:
<div id='menubar_div'>   <!--The bar image-->   <img class=bar src="images/bar.jpg" id="bar" style="position: absolute; left: 0; top: 540" width="799" height="59">   <!--the chat image-->   <img class=poschat src="images/chatnormal.jpg" alt="chatnormal" id="chat" onmouseover="this.style.opacity=1;this.filters.alpha.opacity=100" onmouseout="this.style.opacity=0.4;this.filters.alpha.opacity=40">   <!--The home image-->   <img class=poshome src="images/homenormal.jpg" alt="homenormal" id="home" onmouseover="this.style.opacity=1;this.filters.alpha.opacity=100" onmouseout="this.style.opacity=0.4;this.filters.alpha.opacity=40">   <!--The profle image--><a href="index.php">   <img class=posprofile src="images/profilenormal.jpg" alt="profilenormal" id="profile" onmouseover="this.style.opacity=1;this.filters.alpha.opacity=100" onmouseout="this.style.opacity=0.4;this.filters.alpha.opacity=40">   </a>   <!--The friends image--><a href="friendlist.php">   <img class=friends src="images/friendsnormal.jpg" alt="friendsnormal" id="friends" onmouseover="this.style.opacity=1;this.filters.alpha.opacity=100" onmouseout="this.style.opacity=0.4;this.filters.alpha.opacity=40">   </a>   <!--The mail image-->   <img class=mail src="images/mailnormal.jpg" alt="mailnormal" id="mail" onmouseover="this.style.opacity=1;this.filters.alpha.opacity=100" onmouseout="this.style.opacity=0.4;this.filters.alpha.opacity=40"></div>

Notice I gave the div an id='menubar_div'That way I can target all the images inside of it without creating a class for each image:#menubar_div img {float: left;}

Link to comment
Share on other sites
DizzyDan Member

DizzyDan

Posted
Posted
I appreciate the help I really doBut I don't get it. How can I put an image somewhere without positioning it? Doesn't make sense to me =P
Correct me if i am wrong but from what i have gotten while asking 100 questions on the forum and dealing with webdesign you want to try to get away of positioning everything and have the webpage flow naturally because things tend to work better that way. Makes it easier to fix problems when they occur and makes it easier down the road.EDIT: Next you will get yelled at to use strict DTD and Validate the code.
Link to comment
Share on other sites
ShadowMage Devoted Member

ShadowMage

Posted
Posted
Correct me if i am wrong but from what i have gotten while asking 100 questions on the forum and dealing with webdesign you want to try to get away of positioning everything and have the webpage flow naturally because things tend to work better that way. Makes it easier to fix problems when they occur and makes it easier down the road.
Quite true, in fact.
Next you will get yelled at to use strict DTD and Validate the code.
Not yelled at. Advised. There are some cases where a transitional DTD is required, but in most cases I prefer to use Strict. Strict seems to provide the best cross-browser compatibility. And no matter what DTD you use, you should definitly be validating. That too will provide the best compatibility.
Link to comment
Share on other sites
jeffman w3schools Guru

jeffman

Posted
Posted

DizzyDan you are correct. I personally use positioning as seldom as possible. Some things like CSS dropdown menus don't work right without it. A few special cases require it. When I plan a new page, I go in with the expectation that I won't be using it at all. I mean, it's not even in my mind.

Link to comment
Share on other sites
Dubbeldam Newbie

Dubbeldam

Posted
  • Author
Posted

I appreciate the help. But apparently I'm not as well educated in HTML/CSS as I thought I was haha. I am trying but I still am running into problems. Also, I see what they do in the examples given by w3schools. But there are still problems that my code has.1. The bar image is supposed to be under the other images. I tried z-index but that is not working =(.2. The bar image is not all the way on the left. Like 1 cm to the right from the left border of the screen.3. The page is still not in the center =(.But, the code does surprisingly look a lot better now. Thanks for that!

<?phpsession_start();?><?xml version="1.0" encoding="iso-8859-1"?><!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><!--CASCADE STYLE SHEET--><style type="text/css">body{	background-image:url('images/background.jpg');background-repeat:no-repeat}#menubar_div img {float: left;padding:0.6em;} </style></head><body><div style="width: 400px; background-color:#ffffff; filter:alpha(opacity=60); opacity:0.6; border:1px solid black;">	<table style="width: 300px" cellpadding="0" cellspacing="0" border="0">		<tr width="150">		<td width="188"><b>Name</b></td>		<td><b>City, Country</b></td>		</tr>	</table></div><?php#?><div style="height: 500px; width: 400px; background-color:#ffffff; filter:alpha(opacity=60); opacity:0.6; border:1px solid black;">	<table style="width: 300px;" cellpadding="0" cellspacing="0" border="0">	<?php#	?>		<tr>		<td width="200">		<?php#		?>					</td>		<td>		<?php#		?>					</td>		</tr>	<?php	#	?>	</table></div><div id='menubar_div'>   <!--The bar image-->   <img src="images/bar.jpg" id="bar" style="z-index: -1;" width="799" height="59">   <!--The home image-->   <img src="images/homenormal.jpg" onmouseover="this.style.opacity=1;this.filters.alpha.opacity=100" onmouseout="this.style.opacity=0.4;this.filters.alpha.opacity=40">   <!--The profle image-->   <a href="index.php">   <img src="images/profilenormal.jpg" onmouseover="this.style.opacity=1;this.filters.alpha.opacity=100" onmouseout="this.style.opacity=0.4;this.filters.alpha.opacity=40">   </a>   <!--The friends image-->   <a href="friendlist.php">   <img src="images/friendsnormal.jpg" onmouseover="this.style.opacity=1;this.filters.alpha.opacity=100" onmouseout="this.style.opacity=0.4;this.filters.alpha.opacity=40">   </a>   <!--the chat image-->   <img src="images/chatnormal.jpg" onmouseover="this.style.opacity=1;this.filters.alpha.opacity=100" onmouseout="this.style.opacity=0.4;this.filters.alpha.opacity=40">   <!--The mail image-->   <img src="images/mailnormal.jpg" onmouseover="this.style.opacity=1;this.filters.alpha.opacity=100" onmouseout="this.style.opacity=0.4;this.filters.alpha.opacity=40">	<!--The search bar-->	<form name="simple_bar" method="post" action="searchpeople.php">		<table width="400" border="0" cellpadding="5">			<tr>				<td>					<input type="hidden">					<b>Search:</b>					<input type="text" name="keyword" size="30" maxlength="50">					<input type="submit" value="Find">				</td>			</tr>		</table>	</form> </div></body></html>

Link to comment
Share on other sites
ShadowMage Devoted Member

ShadowMage

Posted
Posted

This image:<img src="images/bar.jpg" id="bar" style="z-index: -1;" width="799" height="59">is supposed to be the background of the menubar? If so just remove the image tag altogether and set it with CSS:#menubar_div {background: url('images/bar.jpg');}To center your page, put all of your content that needs to be centered inside of another div. Give this div an id (like 'wrapper') and the following CSS:#wrapper {width: 960px; /*Adjust width to fit your needs*/margin: 0px auto;}

Link to comment
Share on other sites
Dubbeldam Newbie

Dubbeldam

Posted
  • Author
Posted

thank you thank you... but the problems still are not over, the following code produces the following layout

<?phpsession_start();?><?xml version="1.0" encoding="iso-8859-1"?><!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><!--CASCADE STYLE SHEET--><style type="text/css">body{	background-image:url('images/background.jpg');background-repeat:no-repeat;background-position:center top;}#menubar_div img {float: left;padding:0.6em;} #menubar_div {background: url('images/bar.jpg');background-repeat:no-repeat;width: 799px;height: 59px;}#wrapper {width: 960px; /*Adjust width to fit your needs*/margin: 0px auto;} </style></head><body><div id="wrapper"><div style="width: 400px; background-color:#ffffff; filter:alpha(opacity=60); opacity:0.6; border:1px solid black;">	<table style="width: 300px" cellpadding="0" cellspacing="0" border="0">		<tr width="150">		<td width="188"><b>Name</b></td>		<td><b>City, Country</b></td>		</tr>	</table></div><?php*?><div style="height: 500px; width: 400px; background-color:#ffffff; filter:alpha(opacity=60); opacity:0.6; border:1px solid black;">	<table style="width: 300px;" cellpadding="0" cellspacing="0" border="0">	<?php*	?>		<tr>		<td width="200">		<?php*		?>			<br><br>		</td>		<td>		<?php*		?>			<br><br>		</td>		</tr>	<?php*	?>	</table></div><div id='menubar_div'>   <!--The bar image-->  <!-- <img src="images/bar.jpg" id="bar" style="z-index: -1;" width="799" height="59"> -->   <!--The home image-->   <img src="images/homenormal.jpg" onmouseover="this.style.opacity=1;this.filters.alpha.opacity=100" onmouseout="this.style.opacity=0.4;this.filters.alpha.opacity=40">   <!--The profle image-->   <a href="index.php">   <img src="images/profilenormal.jpg" onmouseover="this.style.opacity=1;this.filters.alpha.opacity=100" onmouseout="this.style.opacity=0.4;this.filters.alpha.opacity=40">   </a>   <!--The friends image-->   <a href="friendlist.php">   <img src="images/friendsnormal.jpg" onmouseover="this.style.opacity=1;this.filters.alpha.opacity=100" onmouseout="this.style.opacity=0.4;this.filters.alpha.opacity=40">   </a>   <!--the chat image-->   <img src="images/chatnormal.jpg" onmouseover="this.style.opacity=1;this.filters.alpha.opacity=100" onmouseout="this.style.opacity=0.4;this.filters.alpha.opacity=40">   <!--The mail image-->   <img src="images/mailnormal.jpg" onmouseover="this.style.opacity=1;this.filters.alpha.opacity=100" onmouseout="this.style.opacity=0.4;this.filters.alpha.opacity=40">	<!--The search bar-->	<form name="simple_bar" method="post" action="searchpeople.php">		<table width="400" border="0" cellpadding="5">			<tr>				<td>					<input type="hidden">					<b>Search:</b>					<input type="text" name="keyword" size="30" maxlength="50">					<input type="submit" value="Find">				</td>			</tr>		</table>	</form> </div></div></body></html>

newcode.jpgand the old previous code got thisoldcode.jpgWhat do I have to do to get that back?

Link to comment
Share on other sites
Ingolme w3schools Guru

Ingolme

Posted
Posted

Hmm, there's one problem that's going to affect rendering on browsers. Remove this line, because it's setting the browser to quirks mode:

<?xml version="1.0" encoding="iso-8859-1"?>

In quirks mode browsers will render things differently from eachother.In order to center a block element, you just have to add "margin: 0 auto;" to the CSS.

Link to comment
Share on other sites

Archived

This topic is now archived and is closed to further replies.

Go to topic listing
×
×
  • Create New...