Jump to content

Help to center my web pages

cs1h

By cs1h
in HTML Help

 Share

Recommended Posts

cs1h Advanced Member

cs1h

Posted
Posted

Hi,

 

I am having trouble getting my web page to center in browsers. I have tried doing using css and div tags but I can't get it to work.

 

The code is, 

<!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>

<link href="css_cinema.css" rel="stylesheet" type="text/css" />

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

body {
text-align:center;
}

#container {
margin: 0 auto;
}
</style>

</head>

<body>

<div id="container">

  <div id="top_banner" style="z-index: 2; position: absolute; left: 0px; top: 0px; width: 900px; background-image: url(top_background_image.png); height: 170px; border-right-color: #000000; border-right-style: solid; border-right-width: 1px;"></div>
  
  <div id="top_side" style="z-index: 2; position: absolute; left: 0px; top: 0px; width: 300px; height:300px; background-image: url(top_corner.png);"></div>


<div id="side_menu" style="z-index: 2; position: absolute; left: 0px; top: 300px; width: 150px; height:700px; background-image: url(side_background.png); border-bottom-color: #000000; border-bottom-style: solid; border-bottom-width: 1px;"></div>

<div id="main_box" style="z-index: 2; position: absolute; left: 150px; top: 170px; width: 750px; height:830px; border-bottom-color: #000000; border-bottom-style: solid; border-bottom-width: 1px; border-right-color: #000000; border-right-style: solid; border-right-width: 1px;">content goes here</div>

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

 

Can anyone help?

 

Thanks,

Colin

Link to comment
Share on other sites
haku Regular Member

haku

Posted
Posted

When you position something absolutely, it gets positioned on the page exactly where you tell it, and doesn't move.

 

That's the basic source of your problems, but I can see that overall you must just be starting out with CSS, in which case it would be worth spending some time learning how it works. Spend some time on the following tutorials, and it will give you a good start to CSS. If you don't spend some time learning at the start, it will lead to HUGE headaches in the future, as CSS is hard enough to use effectively even when you do understand the basics.

 

HTML dog CSS tutorials

Link to comment
Share on other sites
TheFilmGod Advanced Member

TheFilmGod

Posted
Posted

Here do this:

 

<div style="width: 800px; margin: 10px auto 0 auto; position: relative;">

  all other content

</div>

 

This creates a div that is 800px wide and that is centered. All the other elements will be positioned according to this div, since it has "position: relative" attached to it.

Link to comment
Share on other sites
haku Regular Member

haku

Posted
Posted

Well now you can!

 

To give an example, if I have the following structure:

 

<div id="container">
  <img id="img1" src="path1.jpg" />
  <img id="img2" src="path2.jpg" />
  <img id="img3" src="path3.jpg" />
  <img id="img4" src="path4.jpg" />
</div>

 

And the following CSS:

 

#container
{
   width: 50%;
   margin: 0 auto;
   position: relative;
}

#img1
{
   position: absolute;
   top: 0;
   left: 0;
}

#img2
{
   position: absolute;
   top: 0;
   right: 0;
}

#img3
{
   position: absolute;
   bottom: 0;
   left: 0;
}

#img4
{
   position: absolute;
   bottom: 0;
   right: 0;
}

 

Then the containing div will be centered in the screen, and the four images will be positioned in the four corners of that div.

Link to comment
Share on other sites
KevinM1 Advanced Member

KevinM1

Posted
Posted

I thought the actual element was positioned relatively to where it normally would've been.

 

Weird.  Guess it's lucky that I don't use relative positioning frequently.

 

Actually, you're right: http://www.w3.org/TR/REC-CSS2/visuren.html#positioning-scheme

 

And, no, you don't need position: relative to center something on the screen.  Merely putting margin: 0 auto will suffice.

Link to comment
Share on other sites
haku Regular Member

haku

Posted
Posted

micmania1: The center tag is deprecated and as such shouldn't be used. It may or may not be supported in future browsers, and from one thread that was started in on this site, it appears that it may not be supported in firefox 3 - which has a hefty market share right now.

 

And, no, you don't need position: relative to center something on the screen.  Merely putting margin: 0 auto will suffice.

 

If you had looked at the original posters post, you would see:

 

A) they already did that, and

B) it doesn't work.

 

And if you know about CSS, you would be able to tell:

 

C) why

D) that you do in fact need position: relative to center the code as the user has posted it

 

In this case margin: 0 auto doesn't suffice.

Link to comment
Share on other sites
corbin Regular Member

corbin

Posted
Posted

Well now you can!

 

To give an example, if I have the following structure:

 

..........

 

 

I probably would've done that a bit differently x.x.  I didn't learn the magic of auto margins until about a week ago, and never thought about em much.  I would consider my self good at PHP, but when it comes to CSS, I'm terrible.

Link to comment
Share on other sites
siwelis Member

siwelis

Posted
Posted

I'm old school, but this can easily be done without CSS...

 

Put all of your content inside a table and just center the table...

 

<div align="center">
<table border="0" cellpadding="0" cellspacing="0" style="border-collapse: collapse" width="80%">
  <tr>
    <td width="100%">
<!--Start content-->     
HERES ALL YOUR CONTENT! ALL NEATLY DISPLAYED IN THE CENTER OF PAGE!
<!--End content-->         
    </td>
  </tr>
</table>
</div>

 

Play with the "width" attribute to see how you want it... (don't forget to check it in multiple resolutions (control panel>display>resolution...) - pretty much all browsers interpret the ol' school table stuff the same, but you can test it in different browsers too)

Link to comment
Share on other sites
TheFilmGod Advanced Member

TheFilmGod

Posted
Posted

I'm old school, but this can easily be done without CSS...

 

Put all of your content inside a table and just center the table...

 

<div align="center">
<table border="0" cellpadding="0" cellspacing="0" style="border-collapse: collapse" width="80%">
  <tr>
    <td width="100%">
<!--Start content-->     
HERES ALL YOUR CONTENT! ALL NEATLY DISPLAYED IN THE CENTER OF PAGE!
<!--End content-->         
    </td>
  </tr>
</table>
</div>

 

Play with the "width" attribute to see how you want it... (don't forget to check it in multiple resolutions (control panel>display>resolution...) - pretty much all browsers interpret the ol' school table stuff the same, but you can test it in different browsers too)

 

This is exactly why you don't use table. You see all the clutter just one table has created? - But that isn't all.

 

To just center a table with 80% width, requires 4 tags. While css requires 1.

 

<div style="margin: 0 auto; width: 80%;">

Content goes here.

</div>

Link to comment
Share on other sites
haku Regular Member

haku

Posted
Posted

Not only that, tables are outdated, non-semantic, and combine content and presentation, which goes against current day standards.

 

You are correct in that you are old-school, but in this case I'm sorry to tell you, that is not a good thing.

Link to comment
Share on other sites
siwelis Member

siwelis

Posted
Posted

Please correct me if I'm wrong, but it seems that tables will never cease being supported and are currently interpreted correctly and supported more than CSS (think mobile devices!).

 

I say they'll never ceased being supported because that would render a lot of information presentation across the internet useless... While it may not be the latest style (pun intended) of presentation, it's still a major backbone. Take a look at this page, even it uses tables! Some things just need the solidity of tables IMO... I guess that's why major companies like Yahoo and Google haven't switched completely to CSS yet. It's also like a mullet, it's coming back!!!

 

My code and my hair may look like hell, but it's functionality I seek. I've probably been missing out a lot without exploring CSS completely, but I've never been motivated working with something that works and when testing out CSS having cross-OS and cross-browser issues issues. I don't even own an iPhone or a cellphone with a browser in general, so I'd just be guessing and crossing my fingers that my CSS would be interpreted right.

 

Oh well! lol I don't want to argue about it anyway, the bottom line is I was just providing an another solution.

 

You can do it without divs too...

 

  <center>
  <table border="1" cellpadding="0" cellspacing="0" style="border-collapse: collapse" bordercolor="#111111" width="87%">
    <tr>
      <td width="100%">CONTENT</td>
    </tr>
  </table>
  </center>

<!--OR-->

  <table border="1" cellpadding="0" cellspacing="0" style="border-collapse: collapse" bordercolor="#111111" width="87%" align="center">
    <tr>
      <td width="100%">CONTENT</td>
    </tr>
  </table>

Link to comment
Share on other sites
TheFilmGod Advanced Member

TheFilmGod

Posted
Posted

^^^ Response to previous post:

 

Of course tables will always be supported and rendered more correctly than css - tables are needed for tabular data and even css gurus like to style their tabular data nicely. Tables are also much easier for computers to deduce. On the other hand, the box model is extremely complex, but worthwhile for computers to render them and people to learn.

 

The reason google and yahoo still use tables is NOT because tables are more efficient and better - during production it costs more to develop and upkeep them. The reason they use them is because tables are the best supported technique to position things on the screen. Even IE4 would be able to position it correctly.

 

Tables are not coming back - it just seems like it because there are millions of newbies (possibly like yourself) who try to develop websites without first reading a good book about html/css and proper web design. To me, they are just wasting their time.

Link to comment
Share on other sites
This thread is more than a year old. Please don't revive it unless you have something important to add.

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

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

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.