nicht angemeldet
Float einer Tabelle Probleme IE8
0 0 0
Float einer Tabelle Probleme IE8
Gunnar BittersmannSehr geehrte Damen und Herren,
ich wende mich an Sie, da ich selber leider nicht mehr weiter weiß.
Es geht um ein Problem im IE8.
Ich habe eine Homepage im IE7 erstellt und leider wird mir mit IE8 meine Tabelle immer unter das Bild geschoben.
Ich habe es schon probiert mit div's nur leider habe ich noch keine Funktion gefunden welche mir meine rechte Seite der Tabelle immer genau untereinander macht.
Mit text-align: right; hängt es immer von der Zeichenanzahl ab.
und wenn ich von links margin_left: verwende fährt der Text leider nicht so schön zusammen wie bei einer Tabelle.
Hier der HTML CODE:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Titel</title>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<meta name="description" content="">
<meta name="author" content="">
<meta name="keywords" content="">
<meta name="generator" content="Webocton - Scriptly (www.scriptly.de)">
<link href="test2.css" type="text/css" rel="stylesheet">
<link href="../images/" type="image/x-icon" rel="shortcut icon">
</head>
<body>
<div class="container">
<div class="nav">
Navigation
</div>
<div class="image">
Bild
</div>
<div class="text">
<table border="1" summary="">
<tbody>
<tr>
<td id="spaltenbreite">Geschäftsleitung:</td>
<td>xxx</td>
</tr>
<tr>
<td>Technische Leitung:</td>
<td>xxx</td>
</tr>
<tr>
<td>Projektleitung:</td>
<td>xxx<br>xxx</td>
</tr>
<tr>
<td>Konstruktion:</td>
<td>xxx<br>xxx<br>xxx</td>
</tr>
<tr>
<td>Verwaltung:</td>
<td>xxx<br>xxx</td>
</tr>
</tbody>
</table>
</div>
<div class="text">
<table border="1" summary="">
<tbody>
<tr>
<td id="spaltenbreite">Geschäftsleitung:</td>
<td>xxx</td>
</tr>
<tr>
<td>Technische Leitung:</td>
<td>xxx</td>
</tr>
<tr>
<td>Projektleitung:</td>
<td>xxx<br>xxx</td>
</tr>
<tr>
<td>Konstruktion:</td>
<td>xxx<br>xxx<br>xxx</td>
</tr>
<tr>
<td>Verwaltung:</td>
<td>xxx<br>xxx</td>
</tr>
</tbody>
</table>
</div>
</div>
</body>
</html>
und hier der CSS Code dazu: (ohne Inhalt nur mit hintergrundfarben)
.container {
overflow: hidden;
}
.nav {
width: 165px;
float: left;
background-color: #58b744;
margin-bottom: -1000px;
padding-bottom: 1000px
}
.image {
width: 330px;
height: 200px;
float: left;
margin: 0px 20px;
background-color: #808080;
}
.text {
background-color: #800080;
padding-top: 10px;
text-align: left;
vertical-align: top;
margin-left: 190px;
min-width: 1px;
}
.text table {
width: 100%;
margin-top: 10px;
}
#spaltenbreite {
width: 50%;
}
Ich würde mich über Vorschläge sehr freuen.
-
Ich würde mich über Vorschläge sehr freuen.
Wir würden uns sehr darüber freuen, nicht mit unsemantischem Tabellen-Layout gequält zu werden. Die Daten, die Du hier in eine Tabelle packst, entsprechen einer Beschreibungs-Liste (description list, dl).
Zuallererst solltest Du den HTML4-Doctype durch den HTML5-Doctype ersetzen. Dann verwende statt <table><tr><td></td><td></td></tr></table> einfach <dl><dt></dt><dd></dd></dl> und formatiere diese mit CSS. Damit wird der Code flacher und es entfallen die Probleme, die sich aus der voreingestellten Formatierung bei Tabellen ergeben.
Gruß, LX
--
RFC 1925, Satz 3: Mit ausreichendem Schub fliegen Schweine ganz wunderbar. (...)-
Ich würde mich über Vorschläge sehr freuen.
Wir würden uns sehr darüber freuen, nicht mit unsemantischem Tabellen-Layout gequält zu werden. Die Daten, die Du hier in eine Tabelle packst, entsprechen einer Beschreibungs-Liste (description list, dl).
Zuallererst solltest Du den HTML4-Doctype durch den HTML5-Doctype ersetzen. Dann verwende statt <table><tr><td></td><td></td></tr></table> einfach <dl><dt></dt><dd></dd></dl> und formatiere diese mit CSS. Damit wird der Code flacher und es entfallen die Probleme, die sich aus der voreingestellten Formatierung bei Tabellen ergeben.
Gruß, LX
Sehr geehrter Herr LX,
Wegen den DOC jo ist ersetzt, wegen den Tabellen, wenn ich das ganze auf dl umstelle, hätte ch es gleich mit div's machen können hat den selben Effekt.
Wenn Sie mir zeigen können wie ich mit div's das selbe layout bekomme wie mit einer Tabelle wäre ich auch glücklich.
Mein Problem mit div's ist einfach das ich es nicht hinbekomme das es so aussieht wie die Tabelle.
mfg Dark
-
Ich habe es jetzt einfach so gelöst:
HTML CODE:
<div class= "textbody"> <div class="left"> Geschäftsleitung: </div> <div class="right"> xxx </div> <div class="left"> Technische Leitung: </div> <div class="right"> xxx </div> <div class="left"> Projektleitung: </div> <div class="right"> xxx<br>xxx </div> <div class="left"> Konstruktion: </div> <div class="right"> xxx<br>xxx<br>xxx </div> <div class="left"> Verwaltung: </div> <div class="right"> xxx<br>xxx </div> </div>und CSS dazu:
.textbody { margin-top: 10px; } .right { float: right; width: 40%; } .left { clear: right; font-weight: bold; line-height: 2; } *:first-child+html .right { width: 40%; }Das Ergebniss kommt meinem Ziel recht nahe,
trozdem thx
-
@@darkAngel012:
nuqneH
Ich habe es jetzt einfach so gelöst:
Und warum so’ne div-Suppe? Warum nicht so wie von LX gesagt?
<div class= "textbody">
<div class="left">
Geschäftsleitung:
</div>
<div class="right">
xxx
</div>
<div class="left">
Technische Leitung:
</div>
<div class="right">
xxx
</div>
⋮
</div>Also:
<dl>statt<div class= "textbody">
<dt>statt<div class="left">
<dd>statt<div class="right">(Im Stylesheet die Selektoren natürlich entsprechend ändern.)
BTW: Benenne Klassen nie nach der gegenwärtig gewünschten Darstellung!
Und schreibe 'ä', nicht '
ä'!Der HTML-Code sollte eher so aussehen:
<dl> <dt> Geschäftsleitung: </dt> <dd> xxx </dd> <dt> Technische Leitung: </dt> <dd> xxx </dd> ⋮ <dl>Qapla'
--
Gut sein ist edel. Andere lehren, gut zu sein, ist noch edler. Und einfacher.
(Mark Twain)-
@ Herr Bittersmann
Sie sagen ich soll die Umlaute direckt eingeben im Editor,
und selfhtml sagt ich soll die Umlaute so Schreiben wie ich es getan habe?
Was ist den jetzt die beste Lösung?
P.s. verwende UTF-8 als Kodierung.
Wegen dt dd, werde ich ändern.
mfg
-
@@darkAngel012:
nuqneH
@ Herr Bittersmann
Sie sagen […]Hier im Forum wird allgemein geduzt.
[…] selfhtml sagt ich soll die Umlaute so Schreiben wie ich es getan habe?
http://de.selfhtml.org/html/allgemein/zeichen.htm@title=http://de.selfhtml.org/html/allgemein/zeichen.htmNein, SELFHTML sagt das nicht, sondern: „Wenn Sie im Text einzelne Zeichen eingeben wollen, die nicht im Zeichenvorrat der verwendeten Kodierung enthalten sind, können Sie zwischen zwei Möglichkeiten wählen: Entweder Sie verwenden eine spezielle numerische Notation. Für häufiger verwendete Sonderzeichen stellt HTML aber auch so genannte benannte Zeichen zur Verfügung.“
P.s. verwende UTF-8 als Kodierung.
Das ist gut. Dann damit ist der Fall „Zeichen […], die nicht im Zeichenvorrat der verwendeten Kodierung enthalten sind“ nicht gegeben. UTF-8 kann jedes Unicode-Zeichen codieren; für numenrische Zeichenreferenzen oder Zeichen-Entity-Referezen besteht keinerlei Notwendigkeit (außer für Zeichen mit Sonderbedeutung: < und &, innerhalb von Attributwerten auch ' bzw. ").
Was ist den jetzt die beste Lösung?
Natürlich das, was ich sage. ;-)
Qapla'
--
Gut sein ist edel. Andere lehren, gut zu sein, ist noch edler. Und einfacher.
(Mark Twain)-
durch die Umstellung sind 2 neue Probleme aufgetreten:
<dl>
<dt>
Geschäftsleitung:
</dt>
<dd>
xxx
</dd>
</dl>
<dl>
<dt>
Technische Leitung:
</dt>
<dd>
xxx
</dd>
</dl>
<dl>dl {
margin: 10px 0;
padding: 0px;
}
dt {
margin-bottom: 5px;
float:left;
min-width: 300px;
font-weight: bold;
width: 30%;
}
dd {
display: inline-block;
min-width: 200px;
}Ich musste für jedes dt ein eigenes dl erzeugen da es sich ansonsten verschieben würde und nichtmehr untereinander bzw. nebeneinander stehen würde.
2te Fehler wenn ich in dd eine Liste Erzeuge, habe ich keine Zeilenumbrüche mehr?
Mein Ziel ist es eine Liste zu erzeugen, welche um 2 Bilder Floaten.
Dabei soll die Liste ineinander verschoben werden wenn das Fenster kleiner wird.------------------- ----------------------------------
| | | |
| ------ Gesch.. | | --------- Gesch... xxx |
| | | xxx | | | | |
| | | Techni..| --> | | | Techni.. xxx |
| |----| xxx | | |-------| xxx |
| Verwalt.. | | |
| xxx | | Verwalt.. xxx |
|-----------------| |--------------------------------|mfg
-
-
-
-
-
-