archivierte Beiträge lesen
- (CSS) Höhe div-Container anpassen von Torsten, 21. 03. 2005, 13:15
Höhe div-Container anpassen
Der folgende Beitrag wurde am 21. 03. 2005, 13:15 Uhr von Torsten veröffentlicht.
Hallo Forum,
ich habe es immer noch nicht geschafft eine Lösung zu meinem Problem zu finden. Ich weiß das es eigentlich nicht erwünscht ist ein vorhandenen Thread mit dem selben Thema neu zu eröffnen, aber in meinem alten Thread(http://forum.de.selfhtml.org/archiv/2005/3/t103483/) war meine Problembeschreibung nicht ganz verständlich, dadurch konnte mir auch nicht geholfen werden. Ich möchte mein Problem jetzt versuchen besser zu erklären. Ich hoffe mir kann einer helfen.
erstmal code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head><title>testseite</title>
<link rel="STYLESHEET" type="text/css" href="styles.css">
</head>
<body>
<div class="center">
<div class="nav">
<div class="bla">
<div class="content">
div-Container rechts
viel text<br>
viel text<br>
viel text<br>
viel text<br>
viel text<br>
viel text<br>
</div>
</div>
div-Conatiner links
<a href="#">button1</a><br>
<a href="#">button2</a><br>
</div>
</div>
</body>
</html>
div.nav {
width:148px;
float:left;
text-align:left;
background-color:#FF0000;
border-left:1px solid black;
border-right:1px solid black;
}
div.bla {
width:900px;
}
div.content {
width:743px;
float:right;
margin-top:5px;
border:1px solid black;
}
div.center {
width:900px;
margin:0px auto;
text-align:center;
margin-top:25px;
}
das Ergebnis im Firefox:
das Ergebnis im IE:
Wenn jetzt weniger oder mehr Text im <div class="content">-Container(rechts) ist, verändert sich die Höhe dieses Containers, diese Höhe wird dann dem <div class="nav">-Container(links) angepasst. Dies Funktioniert soweit im Firefox!
Das Ergebnis im Firefox ist genau das was ich will, im IE völlig falsch. Für den IE bekomme ich es einfach nicht hin, ich weiß nicht was ich noch machen soll. Seid dem ich Webseiten mache, verfluche ich den IE!!!
Wenn es mit CSS nicht machbar ist, vielleicht mit JS? Über Beispielcode würde ich mich sehr freuen.
Gruß
Torsten
Höhe div-Container anpassen
Der folgende Beitrag wurde am 21. 03. 2005, 15:28 Uhr von Torsten veröffentlicht.
Hallo,
jetzt hab ich mir die Mühe mit Bildchen und Code-Highlighting gemacht, und es kann mir immer noch keiner helfen? Hab ich wieder was falsch gemacht? Ist noch was unverständlich? Oder gibts keine Erfahrene CSS'ler mehr?
Gruß
Torsten
Höhe div-Container anpassen
Der folgende Beitrag wurde am 21. 03. 2005, 15:42 Uhr von Ingo Turski veröffentlicht.
Hi,
> Ich möchte mein Problem jetzt versuchen besser zu erklären.
Leider immer noch ohne Online-Beispiel, aber dafür wenigstens ein paar Illustrationen...
Deine DIV-Konstriktion ist unsinnig.
> <div class="center">
> <div class="nav">
wozu zwei DIVs?
> <div class="bla">
> <div class="content">
Du packst ein 743px breites DIV in ein 148px breites?
> </div>
> </div>
hier fehlt wohl noch was.
Nimm ein DIV für die zentrierte Gesamtbreite und setze hierin das DIV für die Navigation und den Inhalt. Darunter brauchst Du dann noch ein (evtl. leeres) clearendes Element.
Sofern der Inhalt stets höher als die Navigation ist, gebe dem äußeren DIV einfach den Hintergrund für die Navigation. Ansonsten müßtest Du eine in y-Achse gekachelte Hintergrundgrafik für das äußere DIV verwenden.
freundliche Grüße
Ingo
--
[barrierefreie Webseitenerstellung » Suchmaschinenoptimierung | em?] (Tanzschritte gesucht?;-)
Höhe div-Container anpassen
Der folgende Beitrag wurde am 21. 03. 2005, 16:14 Uhr von Torsten veröffentlicht.
Hi,
> > Ich möchte mein Problem jetzt versuchen besser zu erklären.
> Leider immer noch ohne Online-Beispiel, aber dafür wenigstens ein paar Illustrationen...
dafür sind die Screenshots da, als Online-Beispiel würde es nicht anders aussehen.
...
> > </div>
> > </div>
> hier fehlt wohl noch was.
eigentlich nicht, weiß nicht was du meinst!?
> Nimm ein DIV für die zentrierte Gesamtbreite und setze hierin das DIV für die Navigation und den Inhalt. Darunter brauchst Du dann noch ein (evtl. leeres) clearendes Element.
<body>
<div class="center">
<div class="nav">
div-Container links<br>
<a href="#">button1</a><br>
<a href="#">button2</a><br>
</div>
<div class="content">
div-Container rechts<br>
blablabla<br>
blablabla<br>
blablabla<br>
blablabla<br>
blablabla<br>
blablabla<br>
</div>
<div class="bottom"></div>
</div>
</body>
div.nav {
width:148px;
float:left;
text-align:left;
background-color:#FF0000;
}
div.content {
width:743px;
float:right;
margin-top:5px;
border:1px solid black;
}
div.bottom {
width:900px;
height:50px;
background-color:blue;
clear:right;
}
div.center {
width:900px;
margin:0px auto;
text-align:center;
margin-top:25px;
border:1px solid black;
}
wenn ich dich richtig verstanden habe sollte es so sein, komme dazu aber nicht zu meinem ergbenis:
> Sofern der Inhalt stets höher als die Navigation ist,...
Nein, das wird nicht der fall sein.
Ich muss davon ausgehen das es mit reinem CSS nicht möglich ist. Werde wohl doch auf JS zurück greifen müssen, schade, falls jemand noch ne Idee hat...
Gruß
Torsten
Höhe div-Container anpassen
Der folgende Beitrag wurde am 21. 03. 2005, 16:28 Uhr von Ingo Turski veröffentlicht.
Hi,
> > Leider immer noch ohne Online-Beispiel, aber dafür wenigstens ein paar Illustrationen...
> dafür sind die Screenshots da, als Online-Beispiel würde es nicht anders aussehen.
aber ein Online-Beispiel kann man ggfls. editieren.
> > > </div>
> > > </div>
> > hier fehlt wohl noch was.
> eigentlich nicht, weiß nicht was du meinst!?
ein </div> - oder Deine Einrückung ist fehlerhaft.
> > Nimm ein DIV für die zentrierte Gesamtbreite und setze hierin das DIV für die Navigation und den Inhalt. Darunter brauchst Du dann noch ein (evtl. leeres) clearendes Element.
Du hast den HTML-Code zwar so umgesetzt, aber die Farbzuweisungen vergessen.
> > Sofern der Inhalt stets höher als die Navigation ist,...
> Nein, das wird nicht der fall sein.
Dann hilft Dir die andere angesprochene Methode über eine Hintergrundgrafik.
freundliche Grüße
Ingo
--
[barrierefreie Webseitenerstellung » Suchmaschinenoptimierung | em?] (Tanzschritte gesucht?;-)
Höhe div-Container anpassen
Der folgende Beitrag wurde am 22. 03. 2005, 12:06 Uhr von Torsten veröffentlicht.
Hi,
> aber ein Online-Beispiel kann man ggfls. editieren.
dafür habe ich doch den Code gepostet, naja is ja auch egal.
> ein </div> - oder Deine Einrückung ist fehlerhaft.
Ein Erfahrener Webdesigner sollte das eigentlich erkennen können.
> Du hast den HTML-Code zwar so umgesetzt, aber die Farbzuweisungen vergessen.
Was hat den die Farbzuweisung mit meiner dynamisch veränderte Höhe zu tun? Wie gesagt, ich möchte dass die Höhe des linken Containers sich der Höhe des rechten Containers anpasst, sprich beide Container zu jeder Zeit dieselbe Höhe haben.
> Dann hilft Dir die andere angesprochene Methode über eine Hintergrundgrafik.
das geht leider auch nicht.
werde wohl doch auf JS zurück greifen müssen. Schade das man allein mit CSS in manchen fällen nicht auskommt.
Gruß
Torsten
Höhe div-Container anpassen
Der folgende Beitrag wurde am 22. 03. 2005, 13:28 Uhr von Ingo Turski veröffentlicht.
Hi,
> > aber ein Online-Beispiel kann man ggfls. editieren.
> dafür habe ich doch den Code gepostet, naja is ja auch egal.
nur daß man den Code erst lokal speichern muß, während das CSS in einem Online-Beispiel direkt editiert werden kann.
> > ein </div> - oder Deine Einrückung ist fehlerhaft.
> Ein Erfahrener Webdesigner sollte das eigentlich erkennen können.
... und die Einrückungen korrekt machen können. ;-)
> Was hat den die Farbzuweisung mit meiner dynamisch veränderte Höhe zu tun? Wie gesagt, ich möchte dass die Höhe des linken Containers sich der Höhe des rechten Containers anpasst, sprich beide Container zu jeder Zeit dieselbe Höhe haben.
Das geht nicht! Aber man kann dies optisch simulieren - deshalb die Farbzuweisungen bzw. die umständlichere Lösung über eine Hintergrundgrafik.
> > Dann hilft Dir die andere angesprochene Methode über eine Hintergrundgrafik.
> das geht leider auch nicht.
Doch. Warte noch ein wenig und Du siehst in Selfhtml ein entsprechendes Beispiel-Layout.
> werde wohl doch auf JS zurück greifen müssen. Schade das man allein mit CSS in manchen fällen nicht auskommt.
Man kommt - meistens jedenfalls, so auch in Deinem Fall.
freundliche Grüße
Ingo
--
[barrierefreie Webseitenerstellung » Suchmaschinenoptimierung | em?] (Tanzschritte gesucht?;-)
Höhe div-Container anpassen
Der folgende Beitrag wurde am 22. 03. 2005, 16:29 Uhr von Torsten veröffentlicht.
Hi,
> Man kommt - meistens jedenfalls, so auch in Deinem Fall.
Leider nicht, da es mein bestehendes Layout vernichten würde.
Hab es mal mit JS probiert, leider auch ohne Erfolg. Vielleicht kannst Du mir diesbezüglich weiter helfen?
Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head><title>testseite</title>
<link rel="STYLESHEET" type="text/css" href="styles.css">
<script language="JavaScript">
</script>
</head>
<body>
<div class="center">
<div id="nav">
div-Container links<br>
<a href="#">button1</a><br>
<a href="#">button2</a><br>
</div>
<div id="content">
div-Container rechts<br>
blablabla<br>
blablabla<br>
blablabla<br>
blablabla<br>
blablabla<br>
blablabla<br>
</div>
</div>
</body>
</html>
#nav {
width:148px;
float:left;
background-color:#FF0000;
}
#content {
width:743px;
float:right;
height:auto;
margin-top:5px;
background-color:#00FFFF;
}
div.center {
width:900px;
margin:0px auto;
text-align:center;
margin-top:25px;
}
Höhe div-Container anpassen
Der folgende Beitrag wurde am 22. 03. 2005, 16:44 Uhr von Maxx veröffentlicht.
Hallo,
> <head><title>testseite</title>
> <link rel="STYLESHEET" type="text/css" href="styles.css">
> <script language="JavaScript">
> <!--
> var dynheight = document.getElementById("content").offsetHeight;
> document.getElementById("nav").style.height = dynheight;
^^^
hier fehlt noch was
> //-->
> </script>
> </head>
zu diesem Zeitpunkt existiert weder "nav" noch "content". Die werden ja erst später geladen. Packe das Script in eine Funktion die du im
<body onLoad="deinefunktion()"> aufrufst.
Grüße,
Jochen
--
Heute schon gescribbelt?
Scribbleboard
Höhe div-Container anpassen
Der folgende Beitrag wurde am 22. 03. 2005, 17:57 Uhr von Torsten veröffentlicht.
Hi Jochen,
ok funktioniert, aber wozu dient +"xp"; ?
Gruß
Torsten
Höhe div-Container anpassen
Der folgende Beitrag wurde am 22. 03. 2005, 18:01 Uhr von Torsten veröffentlicht.
> ok funktioniert, aber wozu dient +"xp"; ?
ach schon klar, das ja die px-Angabe, ich depp, peinlich...
Gruß
Torsten
Höhe div-Container anpassen
Der folgende Beitrag wurde am 21. 03. 2005, 16:01 Uhr von Maxx veröffentlicht.
Hallo Torsten,
> div.nav {
> width:148px;
ist ein bischen knapp. width:900px; scheint mir geeigneter.
> <div class="center">
> <div class="nav">
> <div class="bla">
> <div class="content">
welchen Sinn hat bla? Du bringst damit das floating von "nav" und "content" durcheinander. Lass es weg und es funktioniert wie gewünscht.
Grüße,
Jochen
--
Heute schon gescribbelt?
Scribbleboard
© 1998-2013 SELFHTMLImpressumSoftware: Classic Forum 3.4
