kleines HTML-Problem (doctype-Problem)

V

Valleo

Aktives Mitglied
Thread Starter
Dabei seit
24.10.2005
Beiträge
328
Reaktionspunkte
1
FOLGENDER CODE:

<table width="100%" height="100%" border="0" cellpadding="0" cellspacing="0">
<tr>
<td width="100%" height="100%" align="center" valign="middle">
<table width="1000" height="414" border="0" cellpadding="0" cellspacing="0">
<tr>
<td width="45" height="67" background="lo_lrand.png">&nbsp;</td>
<td height="67" background="lo_bg.png">&nbsp;</td>
<td width="45" height="67" background="lo_rrand.png">&nbsp;</td>
</tr>
<tr>
<td width="45" height="313" background="i_lrand.png">&nbsp;</td>
<td height="313" valign="top" background="i_bg.png">&nbsp;</td>
<td width="45" height="313" background="i_rrand.png">&nbsp;</td>
</tr>
<tr>
<td width="45" height="44" background="lu_lrand.png">&nbsp;</td>
<td height="44" background="lu_bg.png">&nbsp;</td>
<td width="45" height="44" background="lu_rrand.png">&nbsp;</td>
</tr>
</table>
</td>
</tr>
</table>

EIGENTLICH SOLLTE DIE INNERE TABELLE GENAU ZENTRAL DES BILDSCHIRMS LIEGEN, DOCH SIE KLEBT OBEN AM BROWSER-RAND. WARUM? DANKE.
 
Bei mir gehts mit Firefox und Safari. Die Tabelle bleibt vertikal mittig und 100% breit.
 
Habe auch Safari und in Firefox habe ich es auch probiert. Das bköde Ding klebt oben am Adresszeilenrand. Verstehe ich nicht.
 
mr-mac-max schrieb:
Bei mir gehts mit Firefox und Safari. Die Tabelle bleibt vertikal mittig und 100% breit.
Zum Vergrößern anklicken....

Kann ich bestätitigen. Funktioniert wunderbar.
 
Hallo Valleo,

welchen DOCTYPE hat deine Seite?

Für dieses Konstrukt benötigst du

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

dann sollte es überall funktionieren.

olli
 
Die innere Tabelle kann nicht zentral des Bildschirmes liegen, nicht mit normalen HTML-Angaben. Da sie sich ja selbst in einer Tabelle (die Äußere) befindet, kannst du sie auf die Art nur in dieser Tabelle "center" setzen. So:

<table align="center">
<table align="center"></table>
</table>

Um dann die äußere Tabelle mittig im Bildschirm zu erhalten, ist es nötig den Body "center" zu setzen:

<body align="center">
</body>

Viele Webbrowser interpretieren diese einfachen Angaben zur Center-Setzung eines äußeren Table aber nicht, dazu muß man dann Stylesheet verwenden. Etwa so:

Damit beträgt der äußere Abstand der Tabelle von links und rechts jeweils die Hälfte des zur Verfügung stehenden Platzes auf dem Bildschirm. Also genau die Mitte. Das ist ebenfalls eine Methode die nicht alle Browser verstehen, aber die meißten.

<body align="center" style="margin-left: 50%; margin-right: 50%;">
</body>

Willst du auch noch einen Abstand von oben, so füge margin-top: 10px; oder einen anderen Wert deiner Wahl hinzu.

Wenn du jedoch professionell Tabellen auf dem Bildschirm platzieren möchtest, egal in welchen HTML-Körpern diese sich zur Zeit befinden, so mußt du dich selbst ernsthaft mit http://de.selfhtml.org/ beschäftigen. Das Thema wäre hier zu umfangreich, um es auf die Schnelle zu erörtern. Suche nach Containern, DIV, CLASS und Positionierung im Bereich Stylesheet.
 
Hier ist dein Code mit dem besagten Doctype:

-----------

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

<html>

<head>
<meta http-equiv="content-type" content="text/html;charset=iso-8859-1">
<title>teeest</title>
</head>

<body>
<table width="100%" border="0" cellspacing="0" cellpadding="0" height="100%">
<tr>
<td align="center" valign="middle">
<table width="1000" border="1" cellspacing="0" cellpadding="0" height="414">
<tr>
<td width="45" height="67" background="lo_lrand.png">&nbsp;</td>
<td height="67" background="lo_bg.png">&nbsp;fsgfsgfsg</td>
<td width="45" height="67" background="lo_rrand.png">&nbsp;</td>
</tr>
<tr>
<td width="45" height="313" background="i_lrand.png">&nbsp;dhghdghdghg</td>
<td valign="top" height="313" background="i_bg.png">&nbsp;sgfsfg</td>
<td width="45" height="313" background="i_rrand.png">&nbsp;sfgfsg</td>
</tr>
<tr>
<td width="45" height="44" background="lu_lrand.png">&nbsp;sfgs</td>
<td height="44" background="lu_bg.png">&nbsp;</td>
<td width="45" height="44" background="lu_rrand.png">&nbsp;fsg</td>
</tr>
</table>
</td>
</tr>
</table>
</body>

</html>

-----------

Deine Bilder hatte ich natürlich nicht, deswegen der Rand und die Buchstaben.

olli
 
Mein Doctype ist XHTML 1.0 Transitional.
 
Sehe gerade, es liegt am Doctype! Aber geht das nicht irgendwie dennoch in xhtml?
 
Damit funktioniert das so nicht.

So wie du es konstruiert hast geht es nur mit besagtem Doctype.

Für XHTML gibt es andere Lösungungen ....

Es wäre aber kein Problem den Doctype so zu ändern, wie ich es beschrieben habe. Kopiere einfach den kompletten Quelltext.

olli
 
Valleo schrieb:
Sehe gerade, es liegt am Doctype! Aber geht das nicht irgendwie dennoch in xhtml?
Zum Vergrößern anklicken....


Das ist ein abendfüllendes Kapitel ---> selfhtml (sorry, aber ist so).
 
Valleo schrieb:
Sehe gerade, es liegt am Doctype! Aber geht das nicht irgendwie dennoch in xhtml?
Zum Vergrößern anklicken....

Vergessen ...

Sauberes HTML ist immer noch "erlaubt", weswegen du im Prinzip so weiter arbeiten kannst, obwohl Tabellen als Layoutraster aus vielen Gründen nicht mehr "in" sind.

Aber auch darüber wurde hier schon viel diskutiert.
 
2 Fragen noch abschließend: - Was wird jetzt als Layoutraster verwendet?
Arbeite mit Dreamweaver 8, das Teil ist ne Vorlage. Beim Anwenden der Vorlage auf eine neue Seite übernimmt mir der die Bilder nicht. Was nu?
 
1. Layoutraster ----> mit CSS (siehe mal wieder selfhtml)

2. Pfade sind bestimmt verloren gegangen, was aber mit einem Quelltext einfacher zu klären wäre.
 
So weit ich weiss, ist das Attribut "HEIGHT" in einem Table-Tag nicht erlaubt und der Code damit nicht valide. Das die Browser das z. T. trotzdem unterstützen ist schlimm genug :)

Ich würde das Problem auch mit CSS lösen.

Frank
 
2ndreality schrieb:
So weit ich weiss, ist das Attribut "HEIGHT" in einem Table-Tag nicht erlaubt und der Code damit nicht valide. Das die Browser das z. T. trotzdem unterstützen ist schlimm genug :)

Ich würde das Problem auch mit CSS lösen.

Frank
Zum Vergrößern anklicken....

Hi Frank,

du hast natürlich Recht, aber das Thema valider Code ... ;-)

Olli
 
Also, ich habe mich jetzt einfach mal mit Ebenen und CSS-Formatierung beschäftigt und ich könnte brechen ...
Entweder liegt der ganze Mist wieder nicht in der Mitte oder es ist ständig etwas verschoben worden, was in der Vorschau aber nicht so war. Dabei ist es völlig schnurz ob nun HTML 4.01 oder XHTML 1.1.

Hier nochmal mein Quelltext:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
<!-- TemplateBeginEditable name="doctitle" -->
<title>Der Scheiß</title>
<!-- TemplateEndEditable -->
<!-- TemplateBeginEditable name="head" --><!-- TemplateEndEditable -->
<style type="text/css">
<!--
body,td,th {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
color: #333333;
}
body {
background-image: url(../style/bg.png);
margin-left: 0px;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
}
a {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
}
-->
</style>
</head>
<body>
<div style="height:100%; width:100%; text-align:center">
<div style="height:424px; width:1000px">
<div style="height:67px; width:45px; float:left; background-image:url(../style/lo_lrand.png)"></div>
<div style="height:67px; width:910px; float:inherit; background-image:url(../style/lo_bg.png)"></div>
<div style="height:67px; width:45px; float:right; background-image:url(../style/lo_rrand.png)"></div>

<div style="height:357px; width:1000px"></div>
</div>
</div>
</body>
</html>

Hatte erst einmal noch nicht weiter gemacht, kriege noch die Macke hier. Bitte helft mir!
 
Valleo schrieb:
Mein Doctype ist XHTML 1.0 Transitional.
Zum Vergrößern anklicken....
Daran liegt’s.
XHTML kann keine 100%-ige Tabellenhöhe interpretieren. Musst es in HTML 4.01 umwandeln, dann geht’s.
 
2ndreality schrieb:
So weit ich weiss, ist das Attribut "HEIGHT" in einem Table-Tag nicht erlaubt und der Code damit nicht valide. Das die Browser das z. T. trotzdem unterstützen ist schlimm genug :)

Ich würde das Problem auch mit CSS lösen.

Frank
Zum Vergrößern anklicken....
Nur bei XHTML in Transitional und Strict.
Wenn es HTML Transitional ist, ist es auch valide.
 
Das sind ja keine Tabellen, das sind ja DIVs. Und wenn ich es jetzt in HTML umwandle, dann passiert da auch nicht mehr - kotz!
 
Du musst dich einloggen oder registrieren, um hier zu antworten.
Zurück
Oben Unten