Autor |
Nachricht |
reacon
Threadersteller
Dabei seit: 27.08.2004
Ort: -
Alter: 38
Geschlecht:
|
Verfasst Di 25.07.2006 18:08
Titel [CSS] DIV Höhenunterschiede |
|
|
Hallo zusammen,
ich habe ein Problem.
Ich habe 3 DIV's nebeneinander stehen.
Links Navi, in der Mitte ein Background image und rechts den Content.
hier mal ein Bild zur Veranschaulichung:
http://www.netwhisper.de/div.gif
Das Problem ist nun, dass wenn im Content rechts mehr Text eingeben wird die beiden linken DIV's sich nicht der Höhe anpassen.
Ein bekanntes Problem, ich habe bereits nach Faux Columnes gegoogelt, konnte das Problem mit einem Background Image nicht richtig lösen, zumal alle 3 DIV's auch noch einen "border-bottom" von 10 Pixeln haben.
Wie schaffe ich es nun, dass alle 3 DIV's gleich hoch sind, egal wieviel Inhalt in einem der DIV's steht ?
Ich danke euch schonmal im Voraus !
|
|
|
|
|
beeviZ
Dabei seit: 30.09.2002
Ort: -
Alter: -
Geschlecht:
|
Verfasst Di 25.07.2006 18:20
Titel
|
|
|
tabellen benutzen.
|
|
|
|
|
Anzeige
|
|
|
reacon
Threadersteller
Dabei seit: 27.08.2004
Ort: -
Alter: 38
Geschlecht:
|
Verfasst Di 25.07.2006 18:21
Titel
|
|
|
beeviZ hat geschrieben: | tabellen benutzen. |
Sorry, nicht möglich. Sonst funktioniert es nicht anders ?
///Edit: Hier mal ein besserer Screenshot mit den DIV Bereich:
http://www.netwhisper.de/div.gif
Zuletzt bearbeitet von reacon am Di 25.07.2006 19:09, insgesamt 3-mal bearbeitet
|
|
|
|
|
afriend
Dabei seit: 07.07.2006
Ort: -
Alter: -
Geschlecht: -
|
|
|
|
|
reacon
Threadersteller
Dabei seit: 27.08.2004
Ort: -
Alter: 38
Geschlecht:
|
Verfasst Di 25.07.2006 19:08
Titel
|
|
|
Danke. Ich werde mir das morgen mal reinpfeifen. Jetzt ist erstmal Feierabend für heute. Ich geb Bescheid, wenn sich was getan hat.
|
|
|
|
|
m
Moderator
Dabei seit: 18.11.2004
Ort: -
Alter: -
Geschlecht:
|
Verfasst Di 25.07.2006 21:57
Titel
|
|
|
Keine Ahnung was der Thread mit seinem Problem zu tun haben soll.
Irgendwie ist dein zweiter Screenshot jetzt der selbe wie der erste. Aber ich habe das mal so angepasst wie ich es in Errinnerung habe.
Mit Faux Columns lagst du schon richtig.
Code: | <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Layout | reacon</title>
<style type="text/css">
<!--
* {
margin:0;
padding:0;
}
body {
margin:30px;
}
#wrapper {
width:700px;
background:url(bg1.gif) repeat-y; /* 100px breite Grafik weil #nav = 100px */
border:1px solid #000;
border-bottom:10px solid #000;
overflow:hidden;
}
#nav {
list-style:none;
float:left;
width:100px;
}
#content {
float:right;
padding:0 0 0 80px; /* die breite des Bildes mit der Frau drauf */
width:520px;
background:#eee url(bg2.gif) no-repeat; /* das Bild der Dame */
}
-->
</style>
</head>
<body>
<div id="wrapper">
<ul id="nav">
<li>Navigation</li>
<li>Navigation</li>
<li>Navigation</li>
</ul>
<div id="content">
Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt
Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt
Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt
Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt
Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt
Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt
Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt
Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt
Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt
Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt
Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt
</div>
</div>
</body>
</html> |
Hier nochmal ein Beispiel mit Grafiken
Zuletzt bearbeitet von m am Di 25.07.2006 21:58, insgesamt 1-mal bearbeitet
|
|
|
|
|
afriend
Dabei seit: 07.07.2006
Ort: -
Alter: -
Geschlecht: -
|
Verfasst Di 25.07.2006 22:21
Titel
|
|
|
Hi
Zitat: |
Das Problem ist nun, dass wenn im Content rechts mehr Text eingeben wird die beiden linken DIV's sich nicht der Höhe anpassen.
|
Ob sich nun ein div-Layer über 100% erstreckt, bis zu einem Definierten anderen Layer
bzw. dem Seiten Ende, oder 3 Ddiv-layer. Die Lösung ist von der Basis her,die selbe,
wobei es natürlich mehr als einen Weg gibt.
Ich wünsch dir vel Glück beim Lösen des Problems & mfg
afriend
Zuletzt bearbeitet von afriend am Di 25.07.2006 22:22, insgesamt 2-mal bearbeitet
|
|
|
|
|
reacon
Threadersteller
Dabei seit: 27.08.2004
Ort: -
Alter: 38
Geschlecht:
|
Verfasst Do 27.07.2006 14:23
Titel
|
|
|
m hat geschrieben: |
Keine Ahnung was der Thread mit seinem Problem zu tun haben soll.
Irgendwie ist dein zweiter Screenshot jetzt der selbe wie der erste. Aber ich habe das mal so angepasst wie ich es in Errinnerung habe.
Mit Faux Columns lagst du schon richtig.
Code: | <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Layout | reacon</title>
<style type="text/css">
<!--
* {
margin:0;
padding:0;
}
body {
margin:30px;
}
#wrapper {
width:700px;
background:url(bg1.gif) repeat-y; /* 100px breite Grafik weil #nav = 100px */
border:1px solid #000;
border-bottom:10px solid #000;
overflow:hidden;
}
#nav {
list-style:none;
float:left;
width:100px;
}
#content {
float:right;
padding:0 0 0 80px; /* die breite des Bildes mit der Frau drauf */
width:520px;
background:#eee url(bg2.gif) no-repeat; /* das Bild der Dame */
}
-->
</style>
</head>
<body>
<div id="wrapper">
<ul id="nav">
<li>Navigation</li>
<li>Navigation</li>
<li>Navigation</li>
</ul>
<div id="content">
Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt
Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt
Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt
Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt
Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt
Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt
Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt
Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt
Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt
Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt
Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt
</div>
</div>
</body>
</html> |
Hier nochmal ein Beispiel mit Grafiken |
Vielen Dank für die ausführliche Erklärung ! Musste zwar noch einiges Umbauen, aber letztlich funktioniert das Beispiel astrein !
Danke auch an alle anderen.
|
|
|
|
|
|
|
|