Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

Register Log in
  • Congratulations IamaSherpa on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

page allignment 2

Status
Not open for further replies.
bluehype

bluehype

Programmer
Mar 3, 2005
13
DE
Hi!

I would be grateful for a very basic tip.

On posting/viewing a html page in a browser the page is alligned to the left leaving a space to the right. I would like to re-allign the page to the centre. Thanks in advance

bH.
 
Sort by date Sort by votes
Not enough information, Post some code so we can see how your page is set up.



----------------------------------
Ignorance is not necessarily Bliss, case in point:
Unknown has caused an Unknown Error on Unknown and must be shutdown to prevent damage to Unknown.
 
Upvote 0 Downvote
Thanks for the attention:


<HTML>
<HEAD>
<TITLE>hain</TITLE>
<META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=iso-8859-1">
<style type="text/css">
<!--
body {
background-color: #0059AD;
}
-->
</style></HEAD>
<BODY>
<!-- ImageReady Slices (hain.psd) -->
<TABLE WIDTH=800 BORDER=0 CELLPADDING=0 CELLSPACING=0>
<TR>
<TD>
<IMG SRC="images/Abstandhalter.gif" WIDTH=27 HEIGHT=1></TD>
<TD>
<IMG SRC="images/Abstandhalter.gif" WIDTH=24 HEIGHT=1></TD>
<TD>
<IMG SRC="images/Abstandhalter.gif" WIDTH=49 HEIGHT=1></TD>
<TD>
<IMG SRC="images/Abstandhalter.gif" WIDTH=47 HEIGHT=1></TD>
<TD>
<IMG SRC="images/Abstandhalter.gif" WIDTH=1 HEIGHT=1></TD>
<TD>
<IMG SRC="images/Abstandhalter.gif" WIDTH=101 HEIGHT=1></TD>
<TD>
<IMG SRC="images/Abstandhalter.gif" WIDTH=3 HEIGHT=1></TD>
<TD>
<IMG SRC="images/Abstandhalter.gif" WIDTH=96 HEIGHT=1></TD>
<TD>
<IMG SRC="images/Abstandhalter.gif" WIDTH=100 HEIGHT=1></TD>
<TD>
<IMG SRC="images/Abstandhalter.gif" WIDTH=103 HEIGHT=1></TD>
<TD>
<IMG SRC="images/Abstandhalter.gif" WIDTH=174 HEIGHT=1></TD>
<TD>
<IMG SRC="images/Abstandhalter.gif" WIDTH=75 HEIGHT=1></TD>
<TD></TD>
</TR>
<TR>
<TD COLSPAN=12>
<IMG SRC="images/hain_01.gif" WIDTH=800 HEIGHT=42></TD>
<TD>
<IMG SRC="images/Abstandhalter.gif" WIDTH=1 HEIGHT=42></TD>
</TR>
<TR>
<TD COLSPAN=8 ROWSPAN=2>
<IMG SRC="images/hain_02.gif" WIDTH=348 HEIGHT=54></TD>
<TD COLSPAN=4>
<IMG SRC="images/hain_03.gif" WIDTH=452 HEIGHT=44></TD>
<TD>
<IMG SRC="images/Abstandhalter.gif" WIDTH=1 HEIGHT=44></TD>
</TR>
<TR>
<TD COLSPAN=4>
<IMG SRC="images/hain_04.gif" WIDTH=452 HEIGHT=10></TD>
<TD>
<IMG SRC="images/Abstandhalter.gif" WIDTH=1 HEIGHT=10></TD>
</TR>
<TR>
<TD ROWSPAN=2>
<IMG SRC="images/hain_05.gif" WIDTH=27 HEIGHT=323></TD>
<TD COLSPAN=2 ROWSPAN=3>
<IMG SRC="images/hain_06.gif" WIDTH=73 HEIGHT=325></TD>
<TD ROWSPAN=2>
<IMG SRC="images/hain_07.gif" WIDTH=47 HEIGHT=323></TD>
<TD COLSPAN=3 ROWSPAN=3>
<IMG SRC="images/hain_08.gif" WIDTH=105 HEIGHT=325></TD>
<TD COLSPAN=5>
<IMG SRC="images/hain_09.gif" WIDTH=548 HEIGHT=3></TD>
<TD>
<IMG SRC="images/Abstandhalter.gif" WIDTH=1 HEIGHT=3></TD>
</TR>
<TR>
<TD>
<IMG SRC="images/hain_10.gif" WIDTH=96 HEIGHT=320></TD>
<TD COLSPAN=3 ROWSPAN=2>
<IMG SRC="images/hain_11.gif" WIDTH=377 HEIGHT=322></TD>
<TD>
<IMG SRC="images/hain_12.gif" WIDTH=75 HEIGHT=320></TD>
<TD>
<IMG SRC="images/Abstandhalter.gif" WIDTH=1 HEIGHT=320></TD>
</TR>
<TR>
<TD ROWSPAN=3>
<IMG SRC="images/hain_13.gif" WIDTH=27 HEIGHT=18></TD>
<TD ROWSPAN=2>
<IMG SRC="images/hain_14.gif" WIDTH=47 HEIGHT=17></TD>
<TD ROWSPAN=2>
<IMG SRC="images/hain_15.gif" WIDTH=96 HEIGHT=17></TD>
<TD ROWSPAN=5>
<IMG SRC="images/hain_16.gif" WIDTH=75 HEIGHT=115></TD>
<TD>
<IMG SRC="images/Abstandhalter.gif" WIDTH=1 HEIGHT=2></TD>
</TR>
<TR>
<TD COLSPAN=2>
<IMG SRC="images/hain_17.gif" WIDTH=73 HEIGHT=15></TD>
<TD COLSPAN=3>
<IMG SRC="images/hain_18.gif" WIDTH=105 HEIGHT=15></TD>
<TD COLSPAN=3>
<IMG SRC="images/hain_19.gif" WIDTH=377 HEIGHT=15></TD>
<TD>
<IMG SRC="images/Abstandhalter.gif" WIDTH=1 HEIGHT=15></TD>
</TR>
<TR>
<TD>
<IMG SRC="images/hain_20.gif" WIDTH=24 HEIGHT=1></TD>
<TD COLSPAN=3 ROWSPAN=2> <a href="news.html"><img src="images/hain_21.gif" width=97 height=34 border="0"></a></TD>
<TD ROWSPAN=2>
<a href="ueberuns.html"><IMG SRC="images/hain_22.gif" WIDTH=101 HEIGHT=34 border="0"></a></TD>
<TD COLSPAN=2 ROWSPAN=2>
<a href="galerie.html"><IMG SRC="images/hain_23.gif" WIDTH=99 HEIGHT=34 border="0"></a></TD>
<TD ROWSPAN=2>
<a href="links.html"><IMG SRC="images/hain_24.gif" WIDTH=100 HEIGHT=34 border="0"></a></TD>
<TD ROWSPAN=2>
<a href="kontakt.html"><IMG SRC="images/hain_25.gif" WIDTH=103 HEIGHT=34 border="0"></a></TD>
<TD ROWSPAN=3>
<IMG SRC="images/hain_26.gif" WIDTH=174 HEIGHT=98></TD>
<TD>
<IMG SRC="images/Abstandhalter.gif" WIDTH=1 HEIGHT=1></TD>
</TR>
<TR>
<TD COLSPAN=2>
<IMG SRC="images/hain_27.gif" WIDTH=51 HEIGHT=33></TD>
<TD>
<IMG SRC="images/Abstandhalter.gif" WIDTH=1 HEIGHT=33></TD>
</TR>
<TR>
<TD COLSPAN=10>
<IMG SRC="images/hain_28.gif" WIDTH=551 HEIGHT=64></TD>
<TD>
<IMG SRC="images/Abstandhalter.gif" WIDTH=1 HEIGHT=64></TD>
</TR>
</TABLE>
<!-- End ImageReady Slices -->
</BODY>
</HTML>
 
Upvote 0 Downvote
Sticking with your Table Layout although not recommended, ( read here why: add another table that surrounds your webiste with one cell give it a width of 100% and then in the only cell add the align=center property to it:
Code: 
<table width=100%><tr><td [red]align=center[/red]>Website goes here</td></tr></table>



----------------------------------
Ignorance is not necessarily Bliss, case in point:
Unknown has caused an Unknown Error on Unknown and must be shutdown to prevent damage to Unknown.
 
Upvote 0 Downvote
Hi !!

Thanks for your info. I´m sorry but I´m a HTML novice
and it´s difficult for me to follow your instructions.

If you could be so kind to explain in a bit more detail I would be very grateful. If I have produced a table it was unknowingly. I don´t know if this is what happens automatically when loading a psd splice ?

Big Thanks

BH.
 
Upvote 0 Downvote
Your code is just one big table [blue]<TABLE WIDTH...>[/blue]:

Code: 
<!-- ImageReady Slices (hain.psd) -->
<TABLE WIDTH=800 BORDER=0 CELLPADDING=0 CELLSPACING=0>
    <TR>
        <TD>
            <IMG SRC="images/Abstandhalter.gif" WIDTH=27 HEIGHT=1></TD>
        <TD>
            <IMG SRC="images/Abstandhalter.gif" WIDTH=24 HEIGHT=1></TD>
        <TD>
            <IMG SRC="images/Abstandhalter.gif" WIDTH=49 HEIGHT=1></TD>
        <TD>
            <IMG SRC="images/Abstandhalter.gif" WIDTH=47 HEIGHT=1></TD>....

To get it centered type the following before the first <TABLE> tag:
Code: 
[red]<TABLE width=100%><TR><TD align="center">[/red]
<!-- ImageReady Slices (hain.psd) -->
<TABLE WIDTH=800 BORDER=0 CELLPADDING=0 CELLSPACING=0>
    <TR>
        <TD>
            <IMG SRC="images/Abstandhalter.gif" WIDTH=27 HEIGHT=1></TD>
        <TD>...


then at the very end after the last </TABLE> tag type in the following:
Code: 
...
<IMG SRC="images/Abstandhalter.gif" WIDTH=1 HEIGHT=64></TD>
    </TR>
</TABLE>
<!-- End ImageReady Slices -->
[red]</TD></TR></TABLE>[/red]

----------------------------------
Ignorance is not necessarily Bliss, case in point:
Unknown has caused an Unknown Error on Unknown and must be shutdown to prevent damage to Unknown.
 
Upvote 0 Downvote
No offense, but even throwing all the table-layout inhibitions to the wind that is still an extremely inneficient solution.

Since table layouts are not an issue and you are a self proclaimed HTML novice, you can use the align attribute on the table itself:
(take note that align is not a valid attribute for a table and for that reason will not perform a validation test, however if that is not a concern of yours then this solution will work fine in IE and Firefox)
Code: 
<html>
<body>
<table [b][COLOR=red]align="center"[/color][/b] border="1">
   <tr>
      <td>this is my table</td>
      <td>how do you like it?</td>
   </tr>
   <tr>
      <td>this is the bs way to center it</td>
      <td>pretty lame, huh?</td>
   </tr>
</table>
</body>
</html>

Additionally, I think it should be noted the proper way to do things....

Centering tables is done differently between firefox and ie, thankfully the solutions for both browsers don't interfere with the other. First, for IE you must encapsulate the table in a block level parent element and set the style of text-align:center on that element (preferably a div). Second, for firefox you must set the margin attributes for the left and right of the table to auto. These 2 processes would be considered the "right" way to center a table and would pass a validation test 100%:

Code: 
<html>
<body>
[b][COLOR=red]<div id="tableContainer" style="text-align:center">[/color][/b]
   <table [b][COLOR=red]style="margin:0 auto;"[/color][/b] border="1">
      <tr>
         <td>this is my table</td>
         <td>how do you like it?</td>
      </tr>
      <tr>
         <td>this is the proper way to center it</td>
         <td>100% validation friendly</td>
      </tr>
   </table>
[b][COLOR=red]</div>[/color][/b]
</body>
</html>

-kaht

How much you wanna make a bet I can throw a football over them mountains?
sheepico.jpg
 
Upvote 0 Downvote
Status
Not open for further replies.

Similar threads

cohan123
  • Locked
  • Question
page layout-&gt;page size, optimal for web
Replies
0
Views
404
cohan123
cohan123
ElizaShteto
  • Locked
  • Question
Split One Page in two separate Pages in Framemaker 11
Replies
0
Views
109
ElizaShteto
ElizaShteto
goldtooth
  • Locked
  • Question
Adding a linked table to a page in Dreamweaver
Replies
0
Views
128
goldtooth
goldtooth
malibu65k
  • Locked
  • Question
Show a button on a page based on query results
Replies
1
Views
127
okiiyama
okiiyama
murphyhg
  • Locked
  • Question
Page Scraping
Replies
0
Views
70
murphyhg
murphyhg

Part and Inventory Search

Sponsor

Back
Top