ganz *simpel* | alles mittig stellen?

  • Themenstarter Themenstarter yiiP
  • Beginndatum Beginndatum
Y

yiiP

Guest
Hi!

Habe meine Page schon fast fertig,
... (Buttons müssen noch einmal überarbeitet werden),
er Code ist fertig und die Page ist online. Jetzt wollte ich aber, das mein komplettes design "mittig" im Browser erscheint, und nicht wie jetzt links oben. Da der ganze Code aber schon steht, wollte ich nicht noch einmal alles machen... Hat fast 5 Tage gedauert (beginner).

Habe mir gedacht, machste einfach noch ne Tabelle über ALLES, was im Body steht und setzt die mittig aus,... läuft so aber nicht,... oder? Bei mir gehts nicht, evt. FEHLER, ka.
Also wollte ich euch fragen ob ihr mir vielleicht helfen könntet?


Poste mal den Code hier rein, wäre echt nett, wenn mir jemand helöfen könnte
Wenn ihr die Page mit dem design dazu sehn müsst, LINK hier

M f G


Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN">

<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />

<title>Portfolio Alexander Otto</title>

</head>
<body style="background-image:url(images/bg.jpg); margin:0px; margin-top:0px; margin-left:0px; margin-bottom:0px; margin-right:0px;">
<table width="1005" border="0" align="center" cellpadding="0" cellspacing="0" >
<tr valign="top">
<td height="71" style="background-image:url(images/kid_01.gif); background-repeat:no-repeat;" colspan="3"> </td>
</tr>

<tr valign="top">
<td width="70" height="393"style="background-image:url(images/kid_02.gif); background-repeat:no-repeat;"> </td>
<td width="779">
<table width="760" border="0" cellpadding="0" cellspacing="0">
<tr valign="top">
</tr>

<tr valign="top">
<td width="178" height="392" style=background-image:url(images/kid_05_3.gif); background-repeat:no-repeat;">
<table width="178" border="0" cellpadding="0" cellspacing="0">
<tr valign="top">
<td width="178" height="234">


<!-- Navigation -->
<table width="177" border="0" cellpadding="0" cellspacing="0">
<tr valign="top">
<td width="177" height="183" class="naviback">  </td>
</tr>

<tr valign="top">
</tr>

<tr valign="top">
<td width="177" height="44" class="naviback"><a href="news.html"onmouseover="austausch1.src='images/Kid_Button_News_H igh.jpg';"onmouseout="austausch1.src='images/Kid_Button_News.jpg';"> <img src="images/Kid_Button_News.jpg"border="0" width="176"height="39"name="austausch1"></a>
</tr>

<tr valign="top">
</tr>

<tr valign="top">
<td width="177" height="44" class="naviback"><a href="profile.html"onmouseover="austausch2.src='images/Kid_Button_Pro file_High.gif';"onmouseout="austausch2.src='images/Kid_Button_Profile.g if';"> <img src="images/Kid_Button_Profile.gif"border="0" width="176"height="39"name="austausch2"></a>
</tr>

<tr valign="top">
</tr>

<tr valign="top">
<td width="177" height="44" class="naviback"><a href="works.html"onmouseover="austausch3.src='images/Kid_Button_Works _High.gif';"onmouseout="austausch3.src='images/Kid_Button_Works.gif';"& gt; <img src="images/Kid_Button_Works.gif"border="0" width="176"height="39"name="austausch3"></a>
</tr>

<tr valign="top">
</tr>

<tr valign="top">
<td width="177" height="42" class="naviback"><a href="guest.html"onmouseover="austausch4.src='images/Kid_Button_Guest _High.gif';"onmouseout="austausch4.src='images/Kid_Button_Guest.gif';"& gt; <img src="images/Kid_Button_Guest.gif"border="0" width="176"height="39"name="austausch4"></a>
</tr>
</table>

<!-- Navigation END -->
</td>
</tr>
<tr valign="top">
</tr>

<tr valign="top">
</tr>

<tr valign="top">
</tr>

<tr valign="top">
</tr>
</table>
</td>

<td width="22" height="392" style="background-image:url(images/kid_06.gif); background-repeat:no-repeat;"> </td>
<td width="574" height="392" style="background-image:url(images/bg.jpg);">
<table width="558" border="0" cellpadding="0" cellspacing="0">
<tr valign="top">
<td width="558" height="105" style="background-image:url(images/oben.gif); background-repeat:no-repeat;"> </td>
</tr>

<tr valign="top">
<td width="558" height="254">
<table width="558" border="0" cellpadding="0" cellspacing="0">
<tr valign="top">
<td width="84" height="254" style="background-image:url(images/rechts.gif); background-repeat:no-repeat;"> </td>
<td width="400" height="254" style="background-image:url(images/mitte.gif); background-repeat:no-repeat;"><iframe src="news_texts.html" frameborder="0" name="iframe" scrolling="auto" style="filter: Chroma(color=#EBDCF8)" width="400" height="254"> </iframe> </td>
<td width="74" height="254" style="background-image:url(images/links_2.gif); background-repeat:no-repeat;"> </td>
</tr>
</table>
</td>

<tr valign="top">
<td width="558" height="34" style="background-image:url(images/unten.gif); background-repeat:no-repeat;"> </td>
</tr>
</table>
</td>

<tr valign="top">
</tr>
</table>
</td>

<td width="156" height="393" style="background-image:url(images/nix.jpg); background-repeat:no-repeat;"> </td>
</tr>

<tr valign="top">
<td height="130" style="background-image:url(images/kid_03_3.gif); background-repeat:no-repeat;" colspan="3"> </td>
</tr>
</table>
</body>
</html>
 
Die einfachste Lösung, die mir spontan einfällt, wäre über den kompletten Code im body einen div-Container ziehen. Der müsste dann mit align: center und margin: auto definiert werden und fertig! Allerdings hatte ich keine Zeit mir den gesammten Code anzusehen. Von daher könnten Konflikte zwischen dem jetzigen und dem mit Container entstehen. Aber des stellt sich ja dann heraus... Greetz
 
Ich weiß jetzt nicht genau, was Du wie miitig haben möchtest.
Vielleicht ist es ja so, wie ich denke:

!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN">

<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />

<title>Portfolio Alexander Otto</title>

</head>
<body style="background-image:url(images/bg.jpg); margin:0px; margin-top:0px; margin-left:0px; margin-bottom:0px; margin-right:0px;">
<table width="1005" border="0" align="center" cellpadding="0" cellspacing="0" >
<tr valign="top">
<td height="71" style="background-image:url(images/kid_01.gif); background-repeat:no-repeat;" colspan="3"> </td>
</tr>

<tr valign="top">
<td width="70" height="393"style="background-image:url(images/kid_02.gif); background-repeat:no-repeat;"> </td>
<td width="779">
<table width="760" border="0" cellpadding="0" cellspacing="0">
<tr valign="top">

</tr>

<tr valign="top">
<td width="178" height="392" style=background-image:url(images/kid_05_3.gif); background-repeat:no-repeat;">
<table width="178" border="0" cellpadding="0" cellspacing="0" align="center">
<tr valign="top">
<td width="178" height="234">


<!-- Navigation -->
<table width="177" border="0" cellpadding="0" cellspacing="0">
<tr align="center" valign="top">
<td width="177" height="183" class="naviback"> </td>
</tr>

<tr valign="top">

</tr>

<tr valign="top">
<td width="177" height="44" class="naviback"><a href="news.html"onmouseover="austausch1.src='images/Kid_Button_News_H igh.jpg';"onmouseout="austausch1.src='images/Kid_Button_News.jpg';"> <img src="images/Kid_Button_News.jpg"border="0" width="176"height="39"name="austausch1"></a>
</tr>

<tr valign="top">

</tr>

<tr valign="top">
<td width="177" height="44" class="naviback"><a href="profile.html"onmouseover="austausch2.src='images/Kid_Button_Pro file_High.gif';"onmouseout="austausch2.src='images/Kid_Button_Profile.g if';"> <img src="images/Kid_Button_Profile.gif"border="0" width="176"height="39"name="austausch2"></a>
</tr>

<tr valign="top">

</tr>

<tr valign="top">
<td width="177" height="44" class="naviback"><a href="works.html"onmouseover="austausch3.src='images/Kid_Button_Works _High.gif';"onmouseout="austausch3.src='images/Kid_Button_Works.gif';"& gt; <img src="images/Kid_Button_Works.gif"border="0" width="176"height="39"name="austausch3"></a>
</tr>

<tr valign="top">
</tr>

<tr valign="top">
<td width="177" height="42" class="naviback"><a href="guest.html"onmouseover="austausch4.src='images/Kid_Button_Guest _High.gif';"onmouseout="austausch4.src='images/Kid_Button_Guest.gif';"& gt; <img src="images/Kid_Button_Guest.gif"border="0" width="176"height="39"name="austausch4"></a>
</tr>
</table>

<!-- Navigation END -->
</td>
</tr>
<tr valign="top">
</tr>

<tr valign="top">
</tr>

<tr valign="top">
</tr>

<tr valign="top">
</tr>
</table>
</td>

<td width="22" height="392" style="background-image:url(images/kid_06.gif); background-repeat:no-repeat;"> </td>
<td width="574" height="392" style="background-image:url(images/bg.jpg);">
<table width="558" border="0" cellpadding="0" cellspacing="0">
<tr valign="top">
<td width="558" height="105" style="background-image:url(images/oben.gif); background-repeat:no-repeat;"> </td>
</tr>

<tr valign="top">
<td width="558" height="254">
<table width="558" border="0" cellpadding="0" cellspacing="0">
<tr valign="top">
<td width="84" height="254" style="background-image:url(images/rechts.gif); background-repeat:no-repeat;"> </td>
<td width="400" height="254" style="background-image:url(images/mitte.gif); background-repeat:no-repeat;"><iframe src="news_texts.html" frameborder="0" name="iframe" scrolling="auto" style="filter: Chroma(color=#EBDCF8)" width="400" height="254"> </iframe> </td>
<td width="74" height="254" style="background-image:url(images/links_2.gif); background-repeat:no-repeat;"> </td>
</tr>
</table>
</td>

<tr valign="top">
<td width="558" height="34" style="background-image:url(images/unten.gif); background-repeat:no-repeat;"> </td>
</tr>
</table>
</td>

<tr valign="top">
</tr>
</table>
</td>

<td width="156" height="393" style="background-image:url(images/nix.jpg); background-repeat:no-repeat;"> </td>
</tr>

<tr valign="top">
<td height="130" style="background-image:url(images/kid_03_3.gif); background-repeat:no-repeat;" colspan="3"> </td>
</tr>
</table>
</body>
</html>
 
...

Alles wollte ich mittig haben. Also das komplette design der Page, jetzt ist
es oben links ( siehe Link ). Das sollte
halt nicht oben links, sondern oben mitte sein. Und normal würde es ja reichen, wenn ich die oberste Tabelle auf align="center" schreibe, aber funktioniert nicht so wie ich mir das vorstellen :D Was ist also *falsch*?

Code:
<table width="1005" border="0" align="center" cellpadding="0" cellspacing="0">

thx fuer die Antworten

Mfg
 
Geht doch einfach:

Code:
<html>
<head><style>
#placeholder { text-align: center; } // für IE
#wrapper { margin: auto; } // für Firefox & Co.
</style>
<body>
<div id="placeholder">
<div id="wrapper">
zentrierter content, egal was
</div>
</div>
</body>
</html>

//EDIT: das Attribut align in <table> ist meines Wissens nicht valide, d.h. es wird auch nicht interpretiert. Musst du dir so denken: du gibst dort an, dass etwas innerhalb von <table> zentriert werden soll, aber nicht dass <table> selbst zentriert wird. Da die Ausrichtung innerhalb von <table> den <tr>s und <td>s überlassen ist bringt align daher nichts. Da ich inzwischen generell alles mit xhtml/css mache käme so eine Angabe für mich auch gar nicht mehr in Betracht, abgesehen davon dass es für mich rein logisch fraglich ist.
 
Ich hatte den Link nicht gesehen.

Dann müsste der gesamtquelltext eigentlich so aussehen:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN">

<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />

<title>Portfolio Alexander Otto</title>

</head>
<body style="background-image:url(images/bg.jpg); margin:0px; margin-top:0px; margin-left:0px; margin-bottom:0px; margin-right:0px;">
<table width="1005" border="0" align="center" cellpadding="0" cellspacing="0" >
<tr valign="top">
<td height="71" style="background-image:url(images/kid_01.gif); background-repeat:no-repeat;" colspan="3">
<div align="center">

</div>
</td>
</tr>

<tr valign="top">
<td width="70" height="393"style="background-image:url(images/kid_02.gif); background-repeat:no-repeat;">
<div align="center">

</div>
</td>
<td width="779">
<div align="center">
<table width="760" border="0" cellpadding="0" cellspacing="0">
<tr valign="top">

</tr>
<tr valign="top">
<td width="178" height="392" style=background-image:url(images/kid_05_3.gif); background-repeat:no-repeat;">
<table width="178" border="0" cellpadding="0" cellspacing="0">
<tr valign="top">
<td width="178" height="234"><!-- Navigation -->
<table width="177" border="0" cellpadding="0" cellspacing="0">
<tr valign="top">
<td width="177" height="183" class="naviback"> </td>
</tr>
<tr valign="top">

</tr>
<tr valign="top">
<td width="177" height="44" class="naviback"><a href="news.html"onmouseover="austausch1.src='images/Kid_Button_News_H igh.jpg';"onmouseout="austausch1.src='images/Kid_Button_News.jpg';"><img src="images/Kid_Button_News.jpg"border="0" width="176"height="39"name="austausch1"></a>
</tr>
<tr valign="top">

</tr>
<tr valign="top">
<td width="177" height="44" class="naviback"><a href="profile.html"onmouseover="austausch2.src='images/Kid_Button_Pro file_High.gif';"onmouseout="austausch2.src='images/Kid_Button_Profile.g if';"><img src="images/Kid_Button_Profile.gif"border="0" width="176"height="39"name="austausch2"></a>
</tr>
<tr valign="top">

</tr>
<tr valign="top">
<td width="177" height="44" class="naviback"><a href="works.html"onmouseover="austausch3.src='images/Kid_Button_Works _High.gif';"onmouseout="austausch3.src='images/Kid_Button_Works.gif';"& gt; <img src="images/Kid_Button_Works.gif"border="0" width="176"height="39"name="austausch3"></a>
</tr>

<tr valign="top">
</tr>

<tr valign="top">
<td width="177" height="42" class="naviback"><a href="guest.html"onmouseover="austausch4.src='images/Kid_Button_Guest _High.gif';"onmouseout="austausch4.src='images/Kid_Button_Guest.gif';"& gt; <img src="images/Kid_Button_Guest.gif"border="0" width="176"height="39"name="austausch4"></a>
</tr>
</table>

<!-- Navigation END -->
</td>
</tr>
<tr valign="top">
</tr>

<tr valign="top">
</tr>

<tr valign="top">
</tr>

<tr valign="top">
</tr>
</table>
</td>

<td width="22" height="392" style="background-image:url(images/kid_06.gif); background-repeat:no-repeat;"> </td>
<td width="574" height="392" style="background-image:url(images/bg.jpg);">
<table width="558" border="0" cellpadding="0" cellspacing="0">
<tr valign="top">
<td width="558" height="105" style="background-image:url(images/oben.gif); background-repeat:no-repeat;"> </td>
</tr>

<tr valign="top">
<td width="558" height="254">
<table width="558" border="0" cellpadding="0" cellspacing="0">
<tr valign="top">
<td width="84" height="254" style="background-image:url(images/rechts.gif); background-repeat:no-repeat;"> </td>
<td width="400" height="254" style="background-image:url(images/mitte.gif); background-repeat:no-repeat;"><iframe src="news_texts.html" frameborder="0" name="iframe" scrolling="auto" style="filter: Chroma(color=#EBDCF8)" width="400" height="254"> </iframe> </td>
<td width="74" height="254" style="background-image:url(images/links_2.gif); background-repeat:no-repeat;"> </td>
</tr>
</table>
</td>

<tr valign="top">
<td width="558" height="34" style="background-image:url(images/unten.gif); background-repeat:no-repeat;"> </td>
</tr>
</table>
</td>

<tr valign="top">
</tr>
</table>
</td>

<td width="156" height="393" style="background-image:url(images/nix.jpg); background-repeat:no-repeat;"> </td>
</tr>

<tr valign="top">
<td height="130" style="background-image:url(images/kid_03_3.gif); background-repeat:no-repeat;" colspan="3"> </td>
</tr>
</table>
</body>
</html>
 
Ich bin mir jetzt nicht 100% sicher, aber die Seite sieht so aus (auch von der Formatierung her), als ob sie mit Photoshop erstellt wurde.
Dann gesliced und mit nem HTML Editor weiter verarbeitet wurde.
Das machts mit den Ebenen etwas schwer, zwecks der Formatierung, aber wie gesagt, ich bin mir auch nicht 100% sicher.
 
Zurück
Oben