The Web Design Group

... Making the Web accessible to all.

Welcome Guest ( Log In | Register )

 
Reply to this topicStart new topic
> Centering webpage, How do I center my webpage?
amilleraz
post May 28 2010, 03:30 AM
Post #1





Group: Members
Posts: 4
Joined: 27-May 10
Member No.: 11,968



I would like for the webpage below to be centered within a web browser. How can I accomplish this without compromising the look of the current page. Right now the webpage is floating to the left

Also, is there a way to accomplish this when I am putting together my css? Either way would be greatly appreciated.

Thanks in advance



CODE
<!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" />
<!-- TemplateBeginEditable name="doctitle" -->
<title>Untitled Document</title>
<!-- TemplateEndEditable -->
<link href="../style.css" rel="stylesheet" type="text/css" />
<!-- TemplateBeginEditable name="head" -->
<!-- TemplateEndEditable -->
</head>

<body>
<div id="container">
  <div id="header"><img src="../images/images/header.jpg" alt="header" width="955" height="161" border="0" usemap="#Map" />
    <map name="Map" id="Map">
      <area shape="rect" coords="172,76,794,149" href="../index.html" />
    </map>
  </div>
  <div id="menubar"><img src="../images/images/images/m1.jpg" width="178" height="57" alt="m1" /><a href="../page1.html"><img src="../images/images/images/pg1.jpg" width="167" height="57" alt="pg1" /></a><a href="../page2.html"><img src="../images/images/images/pg2.jpg" width="131" height="57" alt="pg2" /></a><a href="../page3.html"><img src="../images/images/images/pg3.jpg" width="142" height="57" alt="pg3" /></a><a href="../page4.html"><img src="../images/images/images/pg4.jpg" width="155" height="57" alt="pg4" /></a><img src="../images/images/images/m2.jpg" width="180" height="57" alt="m2" />
    <div id="main">
      <div id="maincontent"><!-- TemplateBeginEditable name="Text" --><!-- TemplateEndEditable --></div>
      <div id="footer_container"><img src="../images/images/images/images/Footer.gif" width="595" height="70" alt="footer" /></div>
    </div>
  </div>
</div>
</body>
</html>
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Darin McGrew
post May 28 2010, 01:35 PM
Post #2


WDG Member
********

Group: Root Admin
Posts: 8,365
Joined: 4-August 06
From: Mountain View, CA
Member No.: 3



Please see
http://dorward.me.uk/www/centre/
http://www.w3.org/Style/Examples/007/center.html
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
amilleraz
post May 28 2010, 04:00 PM
Post #3





Group: Members
Posts: 4
Joined: 27-May 10
Member No.: 11,968



QUOTE(Darin McGrew @ May 28 2010, 11:35 AM) *


Hey Darin,

Thanks for the posts, but for some reason I cannot seem to get the techniques described in those articles to get the results I am looking for. Maybe I am not applying them directly?

I have a body tag within my style sheet. I have tried to auto-space the margins in that....no luck getting it centered.

I also have a container div...which contains all of the content of the page and I tried the saeme technique described above and still no luck....

If you look within my website code, do you see a way of which I can accomplish what I am trying to do with the existing code or is there something new that I am going to have to add?

Someone told me that I could put the entire website within a table and center the table but I am unsure as of how to do this.

Thanks in advance
Drew
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post May 28 2010, 05:08 PM
Post #4


🌟Computer says no🌟
********

Group: WDG Moderators
Posts: 20,731
Joined: 9-August 06
Member No.: 6



Centering with auto margins only works if the box has a width. Maybe the boxes you try to center don't.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Darin McGrew
post May 28 2010, 06:39 PM
Post #5


WDG Member
********

Group: Root Admin
Posts: 8,365
Joined: 4-August 06
From: Mountain View, CA
Member No.: 3



Can you provide the URL (address) of a document that shows your best attempt? Just pasting the HTML (as you did above) isn't really enough for us to see what you've tried.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
amilleraz
post May 29 2010, 03:52 PM
Post #6





Group: Members
Posts: 4
Joined: 27-May 10
Member No.: 11,968



i resolved the issue by using a width for the container and using auto margins. Thanks for the help
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post May 29 2010, 07:15 PM
Post #7


🌟Computer says no🌟
********

Group: WDG Moderators
Posts: 20,731
Joined: 9-August 06
Member No.: 6



FYI the width doesn't need to be a fixed one. But maybe you knew that already.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post

Reply to this topicStart new topic
1 User(s) are reading this topic (1 Guests and 0 Anonymous Users)
0 Members:

 



- Lo-Fi Version Time is now: 26th April 2024 - 02:54 PM