nicht angemeldet
Problem mit div's
0 0 0
Problem mit div's
Hallo zusammen,
ich möchte mich von tabellenbasiertem Layout lösen und daher mein neues Projekt direkt mit css-basiertem Layout angehen.
Jetzt stoße ich ziemlich schnell auf mein erstes Problem:
Ich habe links eine Box mit der Navigation und daneben eine für den Kontent. Da ich einen Rahmen rundherum haben möchte, stecken beide in einem weiteren div, das eine border hat. Wenn jetzt allerdings die Navigationsleiste länger ist als der Contentbereich, wird im Firefox das äußere div mit dem Rahmen nicht mitvergrössert, im IE "wächst er mit".
Hier mein testdokument:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=iso-8859-1">
<style type="text/css">
* {
margin: 0;
padding: 0;
}
.main {
margin-left: 10%;
margin-top: 5%;
width: 70%;
border: 3px solid #1D107B;
padding: 0.5em;
}
.navi {
float: left;
width: 10em;
border-right: 3px solid #1D107B;
}
.contentbox {
margin-left: 10em;
}
</style>
</head>
<body>
<div class="main">
<div class="navi">
<p>test test test test test test test test test test test test test test test test test test</p>
</div>
<div class="contentbox">
<p>test test test test test test test test test test test test test test test test test test</p>
<p>test test test test test test test test test test test test test test test test test test</p>
<p>test test test test test test test test test test test test test test test test test test</p>
<p>test test test test test test test test test test test test test test test test test test</p>
<p>test test test test test test test test test test test test test test test test test test</p>
</div>
</div>
</body>
</html>
Ist wahrscheinlich ein typischer Anfängerfehler, aber ich finde gerade keine Antwort, habe mein Beispiel auch mit den Beispielen zu css-basiertem Layout hier bei Selfhtml verglichen, sehe allerdings nicht, was ich anders gemacht bzw. vergessen habe.
Danke schonmal, alzani!
-
Hier nochmal mein Dokument mit größerem Inhalt in der Navigationsbox. Bei dem mein Anzeigeproblem im Firefox auftritt:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=iso-8859-1">
<style type="text/css">
* {
margin: 0;
padding: 0;
}
.main {
margin-left: 10%;
margin-top: 5%;
width: 70%;
border: 3px solid #1D107B;
}
.navi {
float: left;
width: 10em;
border-right: 3px solid #1D107B;
}
.contentbox {
margin-left: 10em;
}
</style>
</head>
<body>
<div class="main">
<div class="navi">
<p>test test test test test test test test test test test test test test test test test test</p>
<p>test test test test test test test test test test test test test test test test test test</p>
<p>test test test test test test test test test test test test test test test test test test</p>
<p>test test test test test test test test test test test test test test test test test test</p>
<p>test test test test test test test test test test test test test test test test test test</p>
</div>
<div class="contentbox">
<p>test test test test test test test test test test test test test test test test test test</p>
<p>test test test test test test test test test test test test test test test test test test</p>
<p>test test test test test test test test test test test test test test test test test test</p>
<p>test test test test test test test test test test test test test test test test test test</p>
<p>test test test test test test test test test test test test test test test test test test</p>
</div>
</div>
</body>
</html>-
Hi,
habs nicht ausprobiert, aber vielleicht hilft es, wenn du das Float im COntent wieder aufhebst.
-
habs nicht ausprobiert, aber vielleicht hilft es, wenn du das Float im COntent wieder aufhebst.
Ich verstehe nicht ganz, was du damit meinst. Wenn ich "clear: left;" für die Contentbox nehme, stehen die Inhalte ja nicht mehr nebeneinander. Oder stehe ich gerade auf dem Schlauch?
LG, alzani!
-
-
-
Hallo,
versuch dein Glück mal mit div 100% problem oder ähnlichem in der Archiv-Suche. Das Thema ist schon 100 mal abgehandelt worden.
bydey
--
-- noch immer ein erfolgloser <DIV> Jünger ---
versuch dein Glück mal mit div 100% problem oder ähnlichem in der Archiv-Suche. Das Thema ist schon 100 mal abgehandelt worden.
Wenn man weiß, wonach man sucht, findet man in weniger als 5 Minuten zig passende Ergebnisse. Aber ich weiß ja gar nicht, wo mein Problem genau liegt, sonst wäre ich sicher alleine zu einer Lösung gekommen. Bei deinem Suchvorschlag bin ich bisher auf den Tip gestossen, das Problem mit einem Hintergrundbild zu lösen, was mir aber nicht gefällt, da ich dann ja auf eine feste breite angewiesen wäre und ich möchte ja, daß der Contentbereich flexibel bleibt.
Naja, werde mal weitersuchen...Gruß, Alzani!
-
-
Ich habe jetzt ein weiteres div in die umschließende Box gepackt, das nur 1px hoch ist und im css das Atribut "clear: left;" besitzt, sowie die gleiche border wie die Navi-Box, damit keine Lücke entsteht.
Jetzt wird es zwar im Firefox vernünftig dargestellt, aber im IE habe ich jetzt eine "Leerzeile" am Ende, wenn der Navigationsbereich kürzer ist als der Contentbereich:<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=iso-8859-1">
<style type="text/css">
* {
margin: 0;
padding: 0;
}
.main {
margin-left: 10%;
margin-top: 5%;
width: 70%;
border: 3px solid #1D107B;
}
.navi {
float: left;
width: 10em;
border-right: 3px solid #1D107B;
}
.contentbox {
margin-left: 10em;
border-left: 3px solid #1D107B;
}
.clearer {
height: 1px;
clear: left;
width: 10em;
border-right: 3px solid #1D107B;
}
</style>
</head>
<body>
<div class="main">
<div class="navi">
<p>test test test test test test test test test test test test test test test test test test</p>
</div>
<div class="contentbox">
<p>test test test test test test test test test test test test test test test test test test</p>
<p>test test test test test test test test test test test test test test test test test test</p>
<p>test test test test test test test test test test test test test test test test test test</p>
<p>test test test test test test test test test test test test test test test test test test</p>
<p>test test test test test test test test test test test test test test test test test test</p>
</div>
<div class="clearer"></div>
</div>
</body>
</html>Irgendwie ist habe ich das Gefühl, daß das keine saubere Lösung, sondern eher geproscht ist. Kann mir dazu vielleicht jemand einen Tip geben?
LG, alzani!
-
Hallo,
ich habe mal im Archiv gesucht und einen Eintrag gefunden, der dir vielleicht hilft:
http://forum.de.selfhtml.org/archiv/2006/3/t125254/#m807416bydey
--
-- noch immer ein erfolgloser <DIV> Jünger ---
Hallo dey,
danke für dein Beispiel, es ist ja im prinzip ähnlich wie mein Ansatz, nach beiden Boxen ein Element einzusetzen, das das float wieder aufhebt.
Ich habe es auch eingesetzt und es löst beide Probleme, die ich hatte:<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=iso-8859-1">
<style type="text/css">
* {
margin: 0;
padding: 0;
}
#main {
margin-left: 10%;
margin-top: 5%;
width: 70%;
border: 3px solid #1D107B;
}
.navi {
float: left;
width: 10em;
border-right: 3px solid #1D107B;
}
.contentbox {
margin-left: 10em;
border-left: 3px solid #1D107B;
}
.clearfix {display: inline-table;}
.clearfix:after {
content: " ";
display: block;
height: 0;
clear: left;
}
/* Hides from IE-mac \*/
* html .clearfix {height: 1%;}
.clearfix {display: block;}
/* End hide from IE-mac */
</style>
</head>
<body>
<div id="main" class="clearfix">
<div class="navi">
<p>test test test test test test test test test test test test test test test test test test</p>
<p>test test test test test test test test test test test test test test test test test test</p>
<p>test test test test test test test test test test test test test test test test test test</p>
<p>test test test test test test test test test test test test test test test test test test</p>
<p>test test test test test test test test test test test test test test test test test test</p>
</div>
<div class="contentbox">
<p>test test test test test test test test test test test test test test test test test test</p>
<p>test test test test test test test test test test test test test test test test test test</p>
<p>test test test test test test test test test test test test test test test test test test</p>
<p>test test test test test test test test test test test test test test test test test test</p>
<p>test test test test test test test test test test test test test test test test test test</p>
</div>
</div>
</body>
</html>Ist das denn eine saubere Lösung? Sicher wesentlich besser, als ein Hintergrundbild einzusetzen, aber durch "display: inline-table;" simuliert man doch eine Tabelle, ist das dennoch dem Tabellenlayout vorzuziehen? Wie gesagt, es ist mein erstes css-Layout und ":after" kannte ich z.B. nicht.
-
Hallo,
Ist das denn eine saubere Lösung? Sicher wesentlich besser, als ein Hintergrundbild einzusetzen, aber durch "display: inline-table;" simuliert man doch eine Tabelle, ist das dennoch dem Tabellenlayout vorzuziehen? Wie gesagt, es ist mein erstes css-Layout und ":after" kannte ich z.B. nicht.
Ganz klar JEIN.
Das Layouten über table- und deren Kind-Elemente ist NICHT wegen des boxartigen Layouts verpöhnt, sondern weil
a) die Layout-Information in der HTML-Datei enthalten ist und das negative Auswirkungen auf Ladezeit, Suchmaschinen, etc. pp hat und
b) das Layout sehr fix ist speziell wenn es sich über viele Seiten wiederholt und
c) extreme Verschachtelung sehr leicht zu Fehlern führtGrundsätzlich ist es sehr schön, wenn man beim Layout ohne dieses _boxing_ auskommt und die Elemente anders als mit dem starren Einsperren in oben unten links rechts 3px 100% etc. auskommt. Aber ich schaffe das selber auch nicht. Mein Designgeist lebt immer noch in Tabellen >:--((
bydey
--
-- noch immer ein erfolgloser <DIV> Jünger --
-
-
-