How To Center a Website ?

  • Mili
  • Newbie
  • Newbie
  • User avatar
  • Posts: 13

Post 3+ Months Ago

hi everyone

im making a website

but even if it is a little embarssing for me to ask how
i dont know how to center a website...
i know how to place the margins
but i have no idea how to make it centered everytime it is oppened in any window.....

can anyone help ?

thanks

bye
  • Anonymous
  • Bot
  • No Avatar
  • Posts: ?
  • Loc: Ozzuland
  • Status: Online

Post 3+ Months Ago

  • Rat
  • Guru
  • Guru
  • User avatar
  • Posts: 1190
  • Loc: desk

Post 3+ Months Ago

Type:

Code: [ Select ]
<center>Content here</center>
  • SpooF
  • ٩๏̯͡๏۶
  • Bronze Member
  • User avatar
  • Posts: 3422
  • Loc: Richland, WA

Post 3+ Months Ago

okay well if your using a table like most ppl do then its really easy in youe html you should find something that looks like this
Code: [ Select ]
<table width="800" height="1000" border="0" cellpadding="0" cellspacing="0">

something like that well if you want to center your page all you have to do is add this in there someplace (at the end)
Code: [ Select ]
align="center"

that will center your table in the middle of the window
and if your not you u want to center EVERYTHING in your page then you can just but this in

Code: [ Select ]
<center>
webpage html stuff here
</center>
  1. <center>
  2. webpage html stuff here
  3. </center>
  • Mili
  • Newbie
  • Newbie
  • User avatar
  • Posts: 13

Post 3+ Months Ago

ight, thanks !
ill try all that now !
  • Mili
  • Newbie
  • Newbie
  • User avatar
  • Posts: 13

Post 3+ Months Ago

i was wondering if any of you would know how to make a small .gif image the backgound.......

like i know how to make it entirely as a background but what im trying to do is to make the image be only on the right site of the website as the background and also on the left......and everything else of the background would just be a color ?

does anyone know ?

is my question too confusing :S

thanks in advance

bye
  • rtm223
  • Mastermind
  • Mastermind
  • User avatar
  • Posts: 1855
  • Loc: Uk

Post 3+ Months Ago

try this code:

Code: [ Select ]
html{
background-image:url(image.png);
background-repeat:no-repeat;
background-position:100% 0%;
background-color:red;
}

body{
margin:0px;
background-image:url(image.png);
background-repeat:no-repeat;
background-position:0% 0%;
}
  1. html{
  2. background-image:url(image.png);
  3. background-repeat:no-repeat;
  4. background-position:100% 0%;
  5. background-color:red;
  6. }
  7. body{
  8. margin:0px;
  9. background-image:url(image.png);
  10. background-repeat:no-repeat;
  11. background-position:0% 0%;
  12. }


It actually turns really funky when you start to apply styles to the html element. The content of the page has to be taller than the image or the left one stops appearing.

The second position (0% on both) is distance from the top of the screen, you can change that to px or a different percentage if you like.

You must have the 0 margin on the body, else, again, the page goes all funky - I don't think you are supposed to use the html tag this way - but it does work.

Enjoy :)
  • musik
  • Legend
  • Super Moderator
  • User avatar
  • Posts: 6893
  • Loc: up a tree

Post 3+ Months Ago

Just below the
Code: [ Select ]
</head>
tag I put this
Code: [ Select ]
<div align="center">
Its the easiest way I've found.


Cheers,
Rose
  • Mili
  • Newbie
  • Newbie
  • User avatar
  • Posts: 13

Post 3+ Months Ago

hey everybody : )

im really surprised on how fast and precise you guys replied : )

thank u so much !

it really helped !!


this community is grate !!

long live Ozzu.com : )


if the webmasters can hear me......and if ozzu.com needs any graphical services in the future you can count on me for no charge : )
of course if you like my style : )
thats all i can do and offer to try to show my gratitude to this community : )


thanks again people


hope to hear of you soon : )

bye : )
  • musik
  • Legend
  • Super Moderator
  • User avatar
  • Posts: 6893
  • Loc: up a tree

Post 3+ Months Ago

Cheers Mili, ozzu is indeed a great place. If your into making graphics etc you should check out some of our Competitions
  • Johan007
  • Guru
  • Guru
  • User avatar
  • Posts: 1080
  • Loc: Aldershot, UK

Post 3+ Months Ago

Ok but if you want to centre vertically as well as horizontally you can embed your tables in this HTML wrapper:

Code: [ Select ]
<table border="0" cellspacing="0" cellpadding="0" height="100%" width="100%">
 <tr>
  <td valign="middle" align="center">
  <table border="0" cellspacing="0" cellpadding="0" width="520">
   <tr>
    <td>content here</td>
   </tr>
   </table>    
  </td>
 </tr>
</table>
  1. <table border="0" cellspacing="0" cellpadding="0" height="100%" width="100%">
  2.  <tr>
  3.   <td valign="middle" align="center">
  4.   <table border="0" cellspacing="0" cellpadding="0" width="520">
  5.    <tr>
  6.     <td>content here</td>
  7.    </tr>
  8.    </table>    
  9.   </td>
  10.  </tr>
  11. </table>


Best used with Dreamweaver or similar.
  • rtm223
  • Mastermind
  • Mastermind
  • User avatar
  • Posts: 1855
  • Loc: Uk

Post 3+ Months Ago

if you wanna do it with css:

Code: [ Select ]
body{
  text-align:center; /*for IE5*/
}
.centered{
  margin:auto;
}
  1. body{
  2.   text-align:center; /*for IE5*/
  3. }
  4. .centered{
  5.   margin:auto;
  6. }


Although you cannot center vertically with CSS :(
  • Moses08
  • Graduate
  • Graduate
  • Moses08
  • Posts: 196

Post 3+ Months Ago

Won't this work for vertical alignment with CSS?

Code: [ Select ]
div
{
vertical-align: bottom
}
  1. div
  2. {
  3. vertical-align: bottom
  4. }
  • rtm223
  • Mastermind
  • Mastermind
  • User avatar
  • Posts: 1855
  • Loc: Uk

Post 3+ Months Ago

Well It won't give you a vertically-<b>centered</b> page :wink: anyway no it won't, because:

Quote:
vertical-align'
<b>Applies to:</b> inline-level and 'table-cell' elements


So you cannot apply it to a div (block level element) anyway.

Secondly:

Quote:
This property affects the vertical positioning inside a line box of the boxes generated by an inline-level element.


Take for eg:

Code: [ Select ]
<table style="height:500px">
  <tr>
    <td style="vertical-align:middle;">
      <div>hello</div>
    </td>
  </tr>
</table>
  1. <table style="height:500px">
  2.   <tr>
  3.     <td style="vertical-align:middle;">
  4.       <div>hello</div>
  5.     </td>
  6.   </tr>
  7. </table>


The table cell has vertical-align set to middle, which is ok because it is a table cell element. However, the div is not affected by the alignment because it is a block level element. It will just sit at the top of the cell. This is my understanding anyway.

Although I would <i>imagine</i> that IE5 and IE6/quirks will display this in the middle. Both display text-align incorrectly.

http://www.w3.org/TR/CSS21/visudet.html ... ical-align

Post Information

  • Total Posts in this topic: 13 posts
  • Users browsing this forum: No registered users and 59 guests
  • You cannot post new topics in this forum
  • You cannot reply to topics in this forum
  • You cannot edit your posts in this forum
  • You cannot delete your posts in this forum
  • You cannot post attachments in this forum
 
 

© 1998-2014. Ozzu® is a registered trademark of Unmelted, LLC.