FRIHOST • FORUMS • FAQ • TOS • BLOGS • DIRECTORY
You are invited to Log in or Register a Frihost Account!

How do I center my layout

   Frihost Forum Index -> Scripting -> Html, CSS and Javascript
 


ixtra
Can some one tell me how I can center my layout which I have made from photoshop so that no matter what resolution the
viewer's on, the layout is always displayed centered.
woodenbrick
I had this problem a few week ago and did this:

in stylesheet
Code:

.centeredImage { text-align:center; margin-top:0px; margin-bottom:0px; padding:0px;}

on page
Code:

<p class="centeredImage"><img src="images/heading.gif" height="217" width="524" alt="Precise Translations" />
</p>

There is possibly a better way to do it that I don't know about, it works anyway. Very Happy
ncwdavid
If you are using tables then put in one big table and then lots of other ones if needed:
Code:

<table align="center" width="800" border="0">
<tr>
<td>
PUT IT IN HERE TO START WITH.
</td>
</tr></table>


If you are using CSS then put in all in one div and then lots of different ones inside that:
Code:

#container{
margin-left: auto;
margin-right: auto;
width: 800px;
border: 1px solid #000000;
}


Then inside the HTML just do:
Code:

<div id="container">
PUT IT HERE.
</div>


Something like that. Just change the width and add the height if you need to. Goodluck.
mariohs
ncwdavid's solution is correct. Prefer the wrapper div solution.

You can also declare all margin properties in one declaration

Code:
#container{
margin:0 auto; /* this means 0 on top and bottom, and auto on left and right */
width: 800px;
border: 1px solid #000;
}


You must specify a width (that should be obvious, unless you wouldn't have to centralize that).
ixtra
ncwdavid wrote:
If you are using tables then put in one big table and then lots of other ones if needed:
Code:

<table align="center" width="800" border="0">
<tr>
<td>
PUT IT IN HERE TO START WITH.
</td>
</tr></table>


If you are using CSS then put in all in one div and then lots of different ones inside that:
Code:

#container{
margin-left: auto;
margin-right: auto;
width: 800px;
border: 1px solid #000000;
}


Then inside the HTML just do:
Code:

<div id="container">
PUT IT HERE.
</div>


Something like that. Just change the width and add the height if you need to. Goodluck.


Doesnt work for me Sad
I still have the same problem
The page is still inclined towards the left
Azmo
post your html and your css here so maybe we can tell you what you do wrong, would be alot easier then just asking Smile
mariohs
Would you mind posting your website address here? Very Happy
lepris
Try this:
put your image into a div element.
in html file:

Code:

<div id="image_container"><img src="http://myimage.frih.net"></div>

than in the style sheet:
begin with setting all margins and padding to 0, you do this like here :
Code:


body {
margin: 0 0 0 0;
padding: 0 0 0 0;
}


and now lets set the div centered horizontally:
Code:


#image_container {
position: relative;
left: 50%;

//this sets the left egde of your image at the exact half of the page

margin-left: -half_of_your_images_width)px;

//and now we set the image centered vertically
top: 50%;
margin-top: -(half_of_your_image_height)px;
}

if you don't set posiotion to relative, property 'left' won't work

I use this solution almost always. It was taken from book issued by the author of this wonderful webpage http://www.csszengarden.com/ . It's perfect in it's simplicity, the idea is to set the edge of an image in the midlle and substract half of the required dimension . have fun with this!
ixtra
Here is my html please tell me where I am making a mistake
Code:
<html>
<div id="container">
<head>
<title>Xtra Gfx</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<!-- ImageReady Styles (xtragfx.psd) -->
<style type="text/css">
<!--
body {
   background-color: #2e2d2d;
   background-image: url(main_bg.gif);
   background-repeat: repeat-y;
}

#container{
margin-left: auto;
margin-right: auto;
width: 800px;
border: 1px solid #000000;
}

#Table_01 {
   position:absolute;
   left:0px;
   top:0px;
   width:800px;
   height:800px;
}

#xtra-gfx-a {
   position:absolute;
   left:0px;
   top:0px;
   width:109px;
   height:800px;
}

#xtra-gfx-b {
   position:absolute;
   left:109px;
   top:0px;
   width:593px;
   height:132px;
}

#xtra-gfx-c {
   position:absolute;
   left:702px;
   top:0px;
   width:98px;
   height:800px;
}

#xtra-gfx-d {
   position:absolute;
   left:109px;
   top:132px;
   width:31px;
   height:47px;
}

#xtra-gfx-e {
   position:absolute;
   left:140px;
   top:132px;
   width:91px;
   height:47px;
}

#xtra-gfx-f {
   position:absolute;
   left:231px;
   top:132px;
   width:110px;
   height:47px;
}

#xtra-gfx-g {
   position:absolute;
   left:341px;
   top:132px;
   width:109px;
   height:47px;
}

#xtra-gfx-h {
   position:absolute;
   left:450px;
   top:132px;
   width:108px;
   height:47px;
}

#xtra-gfx-i {
   position:absolute;
   left:558px;
   top:132px;
   width:111px;
   height:47px;
}

#xtra-gfx-j {
   position:absolute;
   left:669px;
   top:132px;
   width:33px;
   height:47px;
}

#xtra-gfx-k {
   position:absolute;
   left:109px;
   top:179px;
   width:593px;
   height:19px;
}

#xtra-gfx-l {
   position:absolute;
   left:109px;
   top:198px;
   width:17px;
   height:576px;
}

#xtra-gfx-m {
   position:absolute;
   left:126px;
   top:198px;
   width:230px;
   height:89px;
   background-image: url(images/xtra-gfx-m.gif);
}

#xtra-gfx-n {
   position:absolute;
   left:297px;
   top:198px;
   width:60px;
   height:105px;
}

#xtra-gfx-o {
   position:absolute;
   left:357px;
   top:198px;
   width:335px;
   height:89px;
   background-image: url(images/xtra-gfx-o.gif);
}

#xtra-gfx-p {
   position:absolute;
   left:692px;
   top:198px;
   width:10px;
   height:576px;
}

#xtra-gfx-q {
   position:absolute;
   left:126px;
   top:287px;
   width:171px;
   height:16px;
}

#xtra-gfx-r {
   position:absolute;
   left:357px;
   top:287px;
   width:335px;
   height:16px;
}

#xtra-gfx-s {
   position:absolute;
   left:126px;
   top:303px;
   width:566px;
   height:471px;
   background-image: url(images/xtra-gfx-s.gif);
}

#xtra-gfx-t {
   position:absolute;
   left:109px;
   top:774px;
   width:593px;
   height:26px;
   background-image: url(images/xtra-gfx-t.gif);
}
.style1 {color: #FFFFFF}
.style2 {color: #ECE9D8}
 #element { text-align:left; background-color:#000; color:#FFF; width:770px; height:50px; }
-->
</style>
<!-- End ImageReady Styles -->
</head>
<body style="background-color:#2e2d2d; margin-top: 0px; margin-bottom: 0px; margin-left: auto; margin-right: auto;">
<div id="layout">
<div id="element">
<!-- ImageReady Slices (xtragfx.psd) -->
<div id="Table_01">
   <div id="xtra-gfx-a">
      <img src="images/xtra-gfx-a.gif" width="109" height="800" alt="">
   </div>
   <div id="xtra-gfx-b">
      <img src="images/xtra-gfx-b.gif" width="593" height="132" alt="">
   </div>
   <div id="xtra-gfx-c"><img src="images/xtra-gfx-c.gif" width="98" height="800" alt=""></div>
   <div id="xtra-gfx-d">
      <img src="images/xtra-gfx-d.gif" width="31" height="47" alt="">
   </div>
   <div id="xtra-gfx-e">
      <a href="http://xtragfx.uni.cc"><img src="images/xtra-gfx-e.gif" alt="" width="91" height="47" border="0"></a> </div>
   <div id="xtra-gfx-f">
      <a href="http://xtragfx.uni.cc/forums/"><img src="images/xtra-gfx-f.gif" alt="" width="110" height="47" border="0"></a> </div>
   <div id="xtra-gfx-g">
      <a href="http://"><img src="images/xtra-gfx-g.gif" alt="" width="109" height="47" border="0"></a> </div>
   <div id="xtra-gfx-h">
      <a href="http://www.xtragfx.uni.cc/contact.php"><img src="images/xtra-gfx-h.gif" alt="" width="108" height="47" border="0"></a> </div>
   <div id="xtra-gfx-i">
      <a href="http://www.xtragfx.uni.cc/forums/member.php?action=register"><img src="images/xtra-gfx-i.gif" alt="" width="111" height="47" border="0"></a> </div>
   <div id="xtra-gfx-j">
      <img src="images/xtra-gfx-j.gif" width="33" height="47" alt="">
   </div>
   <div id="xtra-gfx-k">
      <img src="images/xtra-gfx-k.gif" width="593" height="19" alt="">
   </div>
   <div id="xtra-gfx-l">
      <img src="images/xtra-gfx-l.gif" width="17" height="576" alt="">
   </div>
   <div id="xtra-gfx-m">         
     <p class="style1"><?php
if($mybb->user['uid'])
{
// The user is logged in, say Hi
echo "Welcome thanks for logging in ! " .$mybb->user['username'];
}
else
{
// The user is not logged in, Display the form
echo "<form action='forums/member.php' method='post'>
Username: <input type='text' name='username' size='20' maxlength='30' /><br />
Password: <input type='password' name='password' size='20' />
<input type='hidden' name='action' value='do_login'>
<input type='hidden' name='url' value='index.php' />
<input type='submit' class='submit' name='submit' value='Login' /></form><br>";
}
?>
   
   </p>
     </div>
   <div id="xtra-gfx-n">
      <img src="images/xtra-gfx-n.gif" width="60" height="105" alt="">
   </div>
   <div class="style1" id="xtra-gfx-o"></div>
   <div id="xtra-gfx-p">
      <img src="images/xtra-gfx-p.gif" width="10" height="576" alt="">
   </div>
   <div id="xtra-gfx-q">
      <img src="images/xtra-gfx-q.gif" width="171" height="16" alt="">
   </div>
   <div id="xtra-gfx-r">
      <img src="images/xtra-gfx-r.gif" width="335" height="16" alt="">
   </div>
   <div id="xtra-gfx-s"></p>
      <p class="style1">Welcome to xtragfx , we are   currently   under consrtuction <span class="style1"> </span></p>
      </div>
   <div id="xtra-gfx-t">
     <p class="style1">© 2006-2007 Xtra Gfx<br> Affiliates : <a href="http://www.intutorials.com/" class="style1">Intutorials</a></p>
     </div>
</div>
 </div><!--end element-->
  </div>
<!-- End ImageReady Slices -->
</body>
</div>
</html>
lepris
I corrected this for you. You have placed a <div> in head section !
Code:

<html>

<head>
<title>Xtra Gfx</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<!-- ImageReady Styles (xtragfx.psd) -->

<style type="text/css"><!--

body {
   background-color: #2e2d2d;
   background-image: url(main_bg.gif);
   background-repeat: repeat-y;
margin: 0 0 0 0;
padding: 0 0 0 0;
}

#layout{
position: relative;
width: 800px;
left: 50%;
margin-left: -400px;

}


#Table_01 {
   position:absolute;
   left:0px;
   top:0px;
   width:800px;
   height:800px;
}

#xtra-gfx-a {
   position:absolute;
   left:0px;
   top:0px;
   width:109px;
   height:800px;
}

#xtra-gfx-b {
   position:absolute;
   left:109px;
   top:0px;
   width:593px;
   height:132px;
}

#xtra-gfx-c {
   position:absolute;
   left:702px;
   top:0px;
   width:98px;
   height:800px;
}

#xtra-gfx-d {
   position:absolute;
   left:109px;
   top:132px;
   width:31px;
   height:47px;
}

#xtra-gfx-e {
   position:absolute;
   left:140px;
   top:132px;
   width:91px;
   height:47px;
}

#xtra-gfx-f {
   position:absolute;
   left:231px;
   top:132px;
   width:110px;
   height:47px;
}

#xtra-gfx-g {
   position:absolute;
   left:341px;
   top:132px;
   width:109px;
   height:47px;
}

#xtra-gfx-h {
   position:absolute;
   left:450px;
   top:132px;
   width:108px;
   height:47px;
}

#xtra-gfx-i {
   position:absolute;
   left:558px;
   top:132px;
   width:111px;
   height:47px;
}

#xtra-gfx-j {
   position:absolute;
   left:669px;
   top:132px;
   width:33px;
   height:47px;
}

#xtra-gfx-k {
   position:absolute;
   left:109px;
   top:179px;
   width:593px;
   height:19px;
}

#xtra-gfx-l {
   position:absolute;
   left:109px;
   top:198px;
   width:17px;
   height:576px;
}

#xtra-gfx-m {
   position:absolute;
   left:126px;
   top:198px;
   width:230px;
   height:89px;
   background-image: url(images/xtra-gfx-m.gif);
}

#xtra-gfx-n {
   position:absolute;
   left:297px;
   top:198px;
   width:60px;
   height:105px;
}

#xtra-gfx-o {
   position:absolute;
   left:357px;
   top:198px;
   width:335px;
   height:89px;
   background-image: url(images/xtra-gfx-o.gif);
}

#xtra-gfx-p {
   position:absolute;
   left:692px;
   top:198px;
   width:10px;
   height:576px;
}

#xtra-gfx-q {
   position:absolute;
   left:126px;
   top:287px;
   width:171px;
   height:16px;
}

#xtra-gfx-r {
   position:absolute;
   left:357px;
   top:287px;
   width:335px;
   height:16px;
}

#xtra-gfx-s {
   position:absolute;
   left:126px;
   top:303px;
   width:566px;
   height:471px;
   background-image: url(images/xtra-gfx-s.gif);
}

#xtra-gfx-t {
   position:absolute;
   left:109px;
   top:774px;
   width:593px;
   height:26px;
   background-image: url(images/xtra-gfx-t.gif);
}
.style1 {
color: #FFFFFF
}
.style2 {
color: #ECE9D8
}
 
#element {
text-align:left; background-color:#000; color:#FFF; width:770px; height:50px;
}

--></style>
<!-- End ImageReady Styles -->

</head>

<body>
<div id="layout">
<div id="element">
<!-- ImageReady Slices (xtragfx.psd) -->
<div id="Table_01">
   <div id="xtra-gfx-a">
      <img src="images/xtra-gfx-a.gif" width="109" height="800" alt="">
   </div>
   <div id="xtra-gfx-b">
      <img src="images/xtra-gfx-b.gif" width="593" height="132" alt="">
   </div>
   <div id="xtra-gfx-c"><img src="images/xtra-gfx-c.gif" width="98" height="800" alt=""></div>
   <div id="xtra-gfx-d">
      <img src="images/xtra-gfx-d.gif" width="31" height="47" alt="">
   </div>
   <div id="xtra-gfx-e">
      <a href="http://xtragfx.uni.cc"><img src="images/xtra-gfx-e.gif" alt="" width="91" height="47" border="0"></a> </div>
   <div id="xtra-gfx-f">
      <a href="http://xtragfx.uni.cc/forums/"><img src="images/xtra-gfx-f.gif" alt="" width="110" height="47" border="0"></a> </div>
   <div id="xtra-gfx-g">
      <a href="http://"><img src="images/xtra-gfx-g.gif" alt="" width="109" height="47" border="0"></a> </div>
   <div id="xtra-gfx-h">
      <a href="http://www.xtragfx.uni.cc/contact.php"><img src="images/xtra-gfx-h.gif" alt="" width="108" height="47" border="0"></a> </div>
   <div id="xtra-gfx-i">
      <a href="http://www.xtragfx.uni.cc/forums/member.php?action=register"><img src="images/xtra-gfx-i.gif" alt="" width="111" height="47" border="0"></a> </div>
   <div id="xtra-gfx-j">
      <img src="images/xtra-gfx-j.gif" width="33" height="47" alt="">
   </div>
   <div id="xtra-gfx-k">
      <img src="images/xtra-gfx-k.gif" width="593" height="19" alt="">
   </div>
   <div id="xtra-gfx-l">
      <img src="images/xtra-gfx-l.gif" width="17" height="576" alt="">
   </div>
   <div id="xtra-gfx-m">         
     <p class="style1"><?php
if($mybb->user['uid'])
{
// The user is logged in, say Hi
echo "Welcome thanks for logging in ! " .$mybb->user['username'];
}
else
{
// The user is not logged in, Display the form
echo "<form action='forums/member.php' method='post'>
Username: <input type='text' name='username' size='20' maxlength='30' /><br />
Password: <input type='password' name='password' size='20' />
<input type='hidden' name='action' value='do_login'>
<input type='hidden' name='url' value='index.php' />
<input type='submit' class='submit' name='submit' value='Login' /></form><br>";
}
?>
   
   </p>
     </div>
      <div id="xtra-gfx-n">
         <img src="images/xtra-gfx-n.gif" width="60" height="105" alt="">
      </div>
      <div class="style1" id="xtra-gfx-o"></div>
      <div id="xtra-gfx-p">
         <img src="images/xtra-gfx-p.gif" width="10" height="576" alt="">
      </div>
      <div id="xtra-gfx-q">
         <img src="images/xtra-gfx-q.gif" width="171" height="16" alt="">
      </div>
      <div id="xtra-gfx-r">
         <img src="images/xtra-gfx-r.gif" width="335" height="16" alt="">
      </div>
      <div id="xtra-gfx-s"></p>
         <p class="style1">Welcome to xtragfx , we are   currently   under consrtuction <span class="style1"> </span></p>
         </div>
      <div id="xtra-gfx-t">
        <p class="style1">� 2006-2007 Xtra Gfx<br> Affiliates : <a href="http://www.intutorials.com/" class="style1">Intutorials</a></p>
        </div>
   </div>
 </div><!--end element-->
</div>
<!-- End ImageReady Slices -->

</body>
</html>



Last edited by lepris on Wed Mar 21, 2007 9:18 am; edited 1 time in total
lepris
I checked in Firefox , IE and Opera and it was centered. Unfortunately as i cound't see the images , I cannot tell weather anything else goes wrong.

Besides it's not a good idea to use ImageReady for any other purpose than slicing images. The code it generates is messy, and extremmely complicated. But it should be just fine now. If you would like us to correct somethign else place you webpage on the server so that we could see the images and other faults.

have fun!
lepris
I also suggest using :
http://www.w3schools.com/html/default.asp

and also :
http://www.w3schools.com/css/default.asp

they make the life easier!
ixtra
Well I have uploaded it
It is centered but there seems to be another error
http://www.xtragfx.uni.cc/
Sad

Last edited by ixtra on Wed Mar 21, 2007 10:01 am; edited 1 time in total
lepris
But you didn't use my version of code ! Backup you copy, and insert the whole code i gave in the post ! I made several changes in it. I checked the online versions source and it is the old one.
ixtra
It is the exact code which you had given (try refreash) the only problem I see in this is that my background image is inclined towards the left and not in the center
lepris
it was correct 30 minutes agop, you have changed something. The problem is that you placed the background image twice . i suggest removing that image from body element.

or try pasting this back where it was
<body style="background-color:#2e2d2d; margin-top: 0px; margin-bottom: 0px; margin-left: auto; margin-right: auto;">
ixtra
either way doesnt work
Crying or Very sad
lepris
and now ? it should work


Code:
<html>

<head>
<title>Xtra Gfx</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<!-- ImageReady Styles (xtragfx.psd) -->

<style type="text/css"><!--

body {
   background-color: #2e2d2d;
   
margin: 0 0 0 0;
padding: 0 0 0 0;
}

#layout{
position: relative;
width: 800px;
left: 50%;
margin-left: -400px;
background-image: url(main_bg.gif);
   background-repeat: repeat-y;
}


#Table_01 {
   position:absolute;
   left:0px;
   top:0px;
   width:800px;
   height:800px;
}

#xtra-gfx-a {
   position:absolute;
   left:0px;
   top:0px;
   width:109px;
   height:800px;
}

#xtra-gfx-b {
   position:absolute;
   left:109px;
   top:0px;
   width:593px;
   height:132px;
}

#xtra-gfx-c {
   position:absolute;
   left:702px;
   top:0px;
   width:98px;
   height:800px;
}

#xtra-gfx-d {
   position:absolute;
   left:109px;
   top:132px;
   width:31px;
   height:47px;
}

#xtra-gfx-e {
   position:absolute;
   left:140px;
   top:132px;
   width:91px;
   height:47px;
}

#xtra-gfx-f {
   position:absolute;
   left:231px;
   top:132px;
   width:110px;
   height:47px;
}

#xtra-gfx-g {
   position:absolute;
   left:341px;
   top:132px;
   width:109px;
   height:47px;
}

#xtra-gfx-h {
   position:absolute;
   left:450px;
   top:132px;
   width:108px;
   height:47px;
}

#xtra-gfx-i {
   position:absolute;
   left:558px;
   top:132px;
   width:111px;
   height:47px;
}

#xtra-gfx-j {
   position:absolute;
   left:669px;
   top:132px;
   width:33px;
   height:47px;
}

#xtra-gfx-k {
   position:absolute;
   left:109px;
   top:179px;
   width:593px;
   height:19px;
}

#xtra-gfx-l {
   position:absolute;
   left:109px;
   top:198px;
   width:17px;
   height:576px;
}

#xtra-gfx-m {
   position:absolute;
   left:126px;
   top:198px;
   width:230px;
   height:89px;
   background-image: url(images/xtra-gfx-m.gif);
}

#xtra-gfx-n {
   position:absolute;
   left:297px;
   top:198px;
   width:60px;
   height:105px;
}

#xtra-gfx-o {
   position:absolute;
   left:357px;
   top:198px;
   width:335px;
   height:89px;
   background-image: url(images/xtra-gfx-o.gif);
}

#xtra-gfx-p {
   position:absolute;
   left:692px;
   top:198px;
   width:10px;
   height:576px;
}

#xtra-gfx-q {
   position:absolute;
   left:126px;
   top:287px;
   width:171px;
   height:16px;
}

#xtra-gfx-r {
   position:absolute;
   left:357px;
   top:287px;
   width:335px;
   height:16px;
}

#xtra-gfx-s {
   position:absolute;
   left:126px;
   top:303px;
   width:566px;
   height:471px;
   background-image: url(images/xtra-gfx-s.gif);
}

#xtra-gfx-t {
   position:absolute;
   left:109px;
   top:774px;
   width:593px;
   height:26px;
   background-image: url(images/xtra-gfx-t.gif);
}
.style1 {
color: #FFFFFF
}
.style2 {
color: #ECE9D8
}
 
#element {
text-align:left; background-color:#000; color:#FFF; width:770px; height:50px;
}

--></style>
<!-- End ImageReady Styles -->

</head>

<body>
<div id="layout">
<div id="element">
<!-- ImageReady Slices (xtragfx.psd) -->
<div id="Table_01">
   <div id="xtra-gfx-a">
      <img src="images/xtra-gfx-a.gif" width="109" height="800" alt="">
   </div>
   <div id="xtra-gfx-b">
      <img src="images/xtra-gfx-b.gif" width="593" height="132" alt="">
   </div>
   <div id="xtra-gfx-c"><img src="images/xtra-gfx-c.gif" width="98" height="800" alt=""></div>
   <div id="xtra-gfx-d">
      <img src="images/xtra-gfx-d.gif" width="31" height="47" alt="">
   </div>
   <div id="xtra-gfx-e">
      <a href="http://xtragfx.uni.cc"><img src="images/xtra-gfx-e.gif" alt="" width="91" height="47" border="0"></a> </div>
   <div id="xtra-gfx-f">
      <a href="http://xtragfx.uni.cc/forums/"><img src="images/xtra-gfx-f.gif" alt="" width="110" height="47" border="0"></a> </div>
   <div id="xtra-gfx-g">
      <a href="http://"><img src="images/xtra-gfx-g.gif" alt="" width="109" height="47" border="0"></a> </div>
   <div id="xtra-gfx-h">
      <a href="http://www.xtragfx.uni.cc/contact.php"><img src="images/xtra-gfx-h.gif" alt="" width="108" height="47" border="0"></a> </div>
   <div id="xtra-gfx-i">
      <a href="http://www.xtragfx.uni.cc/forums/member.php?action=register"><img src="images/xtra-gfx-i.gif" alt="" width="111" height="47" border="0"></a> </div>
   <div id="xtra-gfx-j">
      <img src="images/xtra-gfx-j.gif" width="33" height="47" alt="">
   </div>
   <div id="xtra-gfx-k">
      <img src="images/xtra-gfx-k.gif" width="593" height="19" alt="">
   </div>
   <div id="xtra-gfx-l">
      <img src="images/xtra-gfx-l.gif" width="17" height="576" alt="">
   </div>
   <div id="xtra-gfx-m">         
     <p class="style1"><?php
if($mybb->user['uid'])
{
// The user is logged in, say Hi
echo "Welcome thanks for logging in ! " .$mybb->user['username'];
}
else
{
// The user is not logged in, Display the form
echo "<form action='forums/member.php' method='post'>
Username: <input type='text' name='username' size='20' maxlength='30' /><br />
Password: <input type='password' name='password' size='20' />
<input type='hidden' name='action' value='do_login'>
<input type='hidden' name='url' value='index.php' />
<input type='submit' class='submit' name='submit' value='Login' /></form><br>";
}
?>
   
   </p>
     </div>
      <div id="xtra-gfx-n">
         <img src="images/xtra-gfx-n.gif" width="60" height="105" alt="">
      </div>
      <div class="style1" id="xtra-gfx-o"></div>
      <div id="xtra-gfx-p">
         <img src="images/xtra-gfx-p.gif" width="10" height="576" alt="">
      </div>
      <div id="xtra-gfx-q">
         <img src="images/xtra-gfx-q.gif" width="171" height="16" alt="">
      </div>
      <div id="xtra-gfx-r">
         <img src="images/xtra-gfx-r.gif" width="335" height="16" alt="">
      </div>
      <div id="xtra-gfx-s"></p>
         <p class="style1">Welcome to xtragfx , we are   currently   under consrtuction <span class="style1"> </span></p>
         </div>
      <div id="xtra-gfx-t">
        <p class="style1">� 2006-2007 Xtra Gfx<br> Affiliates : <a href="http://www.intutorials.com/" class="style1">Intutorials</a></p>
        </div>
   </div>
 </div><!--end element-->
</div>
<!-- End ImageReady Slices -->

</body>
</html>
ixtra
Well now the background image doesnt come
http://www.xtragfx.uni.cc/index3.html Sad
ammonkc
I'm not sure how it works with tables, but with divs and CSS styling it would just be something like this:

Code:

margin:0 auto;


A lot of times I tend to just put this at the top of my css class as a baseline possition.
oleszka
may be you can try this http://flumpcakes.co.uk/css/center-div-ie or this http://www.infinitywebdesign.com/research/cssverticalcentereddiv.htm just look at code source
taitj
Here is an excellent source on centering your webpage using CSS: http://www.techtuts.com/tutorials/589/centering_layouts_in_internet_explorer/
ammonkc
The simplest and best (in my opinion) way is to give your layout a wrapper

CSS:
Code:

div#wrapper { margin: 0 auto; }


Markup:
Code:

<div id="wrapper">
content
</div>
Reply to topic    Frihost Forum Index -> Scripting -> Html, CSS and Javascript

FRIHOST HOME | FAQ | TOS | ABOUT US | CONTACT US | SITE MAP
© 2005-2007 Frihost, forums powered by phpBB.