mediengestalter.info
FAQ :: Mitgliederliste :: MGi Team

Willkommen auf dem Portal für Mediengestalter

Aktuelles Datum und Uhrzeit: Fr 29.03.2024 01:55 Benutzername: Passwort: Auto-Login

Thema: [CSS] DIV Höhenunterschiede vom 25.07.2006


Neues Thema eröffnen   Neue Antwort erstellen MGi Foren-Übersicht -> Allgemeines - Nonprint -> [CSS] DIV Höhenunterschiede
Autor Nachricht
reacon
Threadersteller

Dabei seit: 27.08.2004
Ort: -
Alter: 38
Geschlecht: Männlich
Verfasst Di 25.07.2006 18:08
Titel

[CSS] DIV Höhenunterschiede

Antworten mit Zitat Zum Seitenanfang

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 !
  View user's profile Private Nachricht senden
beeviZ

Dabei seit: 30.09.2002
Ort: -
Alter: -
Geschlecht: Männlich
Verfasst Di 25.07.2006 18:20
Titel

Antworten mit Zitat Zum Seitenanfang

tabellen benutzen.
  View user's profile Private Nachricht senden
Anzeige
Anzeige
reacon
Threadersteller

Dabei seit: 27.08.2004
Ort: -
Alter: 38
Geschlecht: Männlich
Verfasst Di 25.07.2006 18:21
Titel

Antworten mit Zitat Zum Seitenanfang

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
  View user's profile Private Nachricht senden
afriend

Dabei seit: 07.07.2006
Ort: -
Alter: -
Geschlecht: -
Verfasst Di 25.07.2006 19:01
Titel

Antworten mit Zitat Zum Seitenanfang

Hi,

hier findest Du deine Lösung, musst Du dir nur anpassen.

http://www.mediengestalter.info/forum/4/css-problem-64135-2.html

mfg
afriend

ps.
Wenn Du nicht weiterkommst, frag einfach *zwinker*
  View user's profile Private Nachricht senden Website dieses Benutzers besuchen
reacon
Threadersteller

Dabei seit: 27.08.2004
Ort: -
Alter: 38
Geschlecht: Männlich
Verfasst Di 25.07.2006 19:08
Titel

Antworten mit Zitat Zum Seitenanfang

afriend hat geschrieben:
Hi,

hier findest Du deine Lösung, musst Du dir nur anpassen.

http://www.mediengestalter.info/forum/4/css-problem-64135-2.html

mfg
afriend

ps.
Wenn Du nicht weiterkommst, frag einfach *zwinker*


Danke. Ich werde mir das morgen mal reinpfeifen. Jetzt ist erstmal Feierabend für heute. Ich geb Bescheid, wenn sich was getan hat.
  View user's profile Private Nachricht senden
m
Moderator

Dabei seit: 18.11.2004
Ort: -
Alter: -
Geschlecht: Männlich
Verfasst Di 25.07.2006 21:57
Titel

Antworten mit Zitat Zum Seitenanfang

afriend hat geschrieben:
Hi,

hier findest Du deine Lösung, musst Du dir nur anpassen.

http://www.mediengestalter.info/forum/4/css-problem-64135-2.html

mfg
afriend

ps.
Wenn Du nicht weiterkommst, frag einfach ;)


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
  View user's profile Private Nachricht senden Website dieses Benutzers besuchen
afriend

Dabei seit: 07.07.2006
Ort: -
Alter: -
Geschlecht: -
Verfasst Di 25.07.2006 22:21
Titel

Antworten mit Zitat Zum Seitenanfang

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
  View user's profile Private Nachricht senden Website dieses Benutzers besuchen
reacon
Threadersteller

Dabei seit: 27.08.2004
Ort: -
Alter: 38
Geschlecht: Männlich
Verfasst Do 27.07.2006 14:23
Titel

Antworten mit Zitat Zum Seitenanfang

m hat geschrieben:
afriend hat geschrieben:
Hi,

hier findest Du deine Lösung, musst Du dir nur anpassen.

http://www.mediengestalter.info/forum/4/css-problem-64135-2.html

mfg
afriend

ps.
Wenn Du nicht weiterkommst, frag einfach *zwinker*


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.
  View user's profile Private Nachricht senden
 
Neues Thema eröffnen   Neue Antwort erstellen
MGi Foren-Übersicht -> Allgemeines - Nonprint


Du kannst keine Beiträge in dieses Forum schreiben.
Du kannst auf Beiträge in diesem Forum nicht antworten.
Du kannst an Umfragen in diesem Forum nicht mitmachen.