nicht angemeldet
Document Type Wc3 macht Probleme!
Hallo,
Mein Ziel ist folgendes: Ich möchte eine Webseite mit einer Navigation oben (das wollte ich mit einer Tabelle realisieren, weil ich das Slice Tool von Photoshop benutzen will) und danach ein 3-Spaltiges Div container layout wie hier beschrieben: <http://de.selfhtml.org/css/layouts/mehrspaltige.htm#dreispaltig@title=Dreispaltiges Layout> erstellen. Vom Code her habe ich das im wesentlichen so gemacht, wobei ich um den Code kurz zu halten, jetzt erstmal nur ein Bild in der Tabelle oben reingemacht habe
Der untenstehende Code Produziert eine Seite die so aussieht:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
<head>
<title>Dreispaltiges Layout</title>
<style type="text/css">
*{margin:0px;padding:0px;}
#Navigation {
float: left;
width: 235px;
margin-left:10px;
}
#Info {
float: right;
width: 200px;
margin-right:10px
}
#Inhalt {
margin: 0 220px 0 255px;
padding:0px;
}
.rahmen{
border-width:1px;
border-color:#d6d6d6;
border-style:solid;
}
</style>
</head>
<body >
<!-- header -->
<table id="Tabelle_01" width="86" height="93" bgcolor="#FF0000" border="0"
cellpadding="0" cellspacing="0" >
<td>
<img src="Dont-Drink-Water--P.gif" width="86" height="93" alt=""></td>
</table>
<div style="margin-top:10px">
<div id="Navigation" class="rahmen">
Text<br>Text<br>Text<br>Text<br>Text<br>Text<br>Text<br>Text<br>
</div>
<div id="Info" class="rahmen">
Text<br>Text<br>Text<br>Text<br>Text<br>Text<br>Text<br>Text<br>Text<br>Text<br>
</div>
<div id="Inhalt" class="rahmen">
FSpass und Witz
Text<br>Text<br>Text<br>Text<br>Text<br>Text<br>Text<br>
</div>
</body>
</html>
Mein Problem ist, mit dem Code erhalte ich die Version wie auf Bild 1, d.h. in der Tabelle mit Bildern, gibt es ein padding-bottom mit 1pixel obwohl ich ihn ausgestellt habe, dieses Problem tritt in Chrome,Firefox und IE auf, andere hab ich nicht getestet.
Wenn ich die erste Zeile ("<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">") einfach weglasse habe ich das Problem zwar nicht mehr, aber ich erhalte das Bild mit der 2, in der im mittleren Div-Container plötzlich ein paddingleft mit 1pixel ist, obwohl padding:0 eingestellt ist. Dieses Problem tritt von den drei genannten Browsern nur im IE auf.
Falls jemand weiß wie man beide Probleme auf einmal Lösen kann, wäre ich sehr dankbar!!!
Viele Grüße
IWHF2
-
Hallo,
Zur Erklärung des Abstandes unter der Grafik in der Tabelle:
Bilder, Tabellen und seltsame LückenDie beste Möglichkeit ist hier wohl, die Tabelle zu entfernen. Sie enthält nur das Bild, dazu braucht es keine Tabelle. Formatierungen lassen sich auch durch CSS vornehmen, Layouttabellen sollten vermieden werden.
Wenn du die Grafik weiter als <img> einbinden musst anstatt z.B. als CSS-Hintergrundbild, so kannst du das img-Element mit
vertical-align: bottomoderdisplay: blockso positionieren, dass kein Abstand nach unten mehr bleibt (siehe Artikel).Allgemein ergibt es Sinn, immer im standardkonformen Browsermodus zu arbeiten. Nur in diesem setzt der Browser CSS korrekt um. Ich empfehle dir, einen vollständigen DOCTYPE zu verwenden, wie es auch in dem SELFHTML-Beispiel getan wird. Beispielsweise:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">Grüße,
Mathias -
Hello,
<table id="Tabelle_01" width="86" height="93" bgcolor="#FF0000" border="0"
cellpadding="0" cellspacing="0" ><td>
<img src="Dont-Drink-Water--P.gif" width="86" height="93" alt=""></td></table>
Ich sehe hier aber auch ein (führendes) Whitespace vor dem <img> und glaube mich daran zu erinnern, dass diverse Browser damit bei <img>-Elementen schon immer Probleme hatten, zumindest mit nachfolgenden Whitespaces.
Außerdem stehen die <td>-Elemente hier scheinbar gar nicht in einem <tr>, sondern direkt im <table>-Element. Ist das erlaubt?
Liebe Grüße aus dem schönen Oberharz
Tom vom Berg
