mediengestalter.info
FAQ :: Mitgliederliste :: MGi Team

Willkommen auf dem Portal für Mediengestalter

Aktuelles Datum und Uhrzeit: Fr 26.04.2024 08:09 Benutzername: Passwort: Auto-Login

Thema: [Frage] Div und Höhe vom 15.11.2004


Neues Thema eröffnen   Neue Antwort erstellen MGi Foren-Übersicht -> Allgemeines - Nonprint -> [Frage] Div und Höhe
Autor Nachricht
shakadi
Griller Killer
Threadersteller

Dabei seit: 21.12.2003
Ort: SHA
Alter: 43
Geschlecht: Männlich
Verfasst Mo 15.11.2004 12:52
Titel

[Frage] Div und Höhe

Antworten mit Zitat Zum Seitenanfang

Div und Höhe
Irgendwie stehe ich auf dem Schlauch


Mahlzeit allerseits,

irgendwie stehe ich heute voll auf dem Schlauch. Ich hab nen zentriertes
3 spaltiges DIV Layout mit Header und Footer. Funktioniert auch alles Bestens.

Nur:
Nun will ich, das sich der linke und der rechte DIV mit der Höhe des mittleren
(Content) DIV strecken.

Aber:
Sie tuen es nicht. Weder mit

Code:
height: 100%;


noch mit.

Code:
height: auto;


Wie kann ich das lösen?
Hab hier schon die Suche gefüttert und auch einiges gefunden, hat aber irgendwie
alles nicht so ganz funktioniert. Ich steh vollkommen auf dem Schlauch. Hilfe.


Hier das HTML:
Code:
 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Titel</title>
<style type="text/css" media="screen">
<!--
@import url("css/style.css");
-->
</style>
</head>
<body>
<div id="container">
  <div class="banner"><img src="" alt="Platzhalter fuer HeadImg" width="900" height="180" id="HeadImg" /></div>
  <div id="menue">
    <p>Menu</p>
  </div>
  <div class="gk">
    <div class="gkbild"><img src="" alt="Platzhalter Rezeptbild" width="180" height="220" id="Rezeptbild" /></div>
    <div class="gkheader">
      <h3>Mehr Rezepte?</h3>
    </div>
    <div class="gktext">Hier finden Sie jeden Monat ein neues Rezept.</div>
  </div>
  <div id="content">
    <div class="headline"><img src="images/headlines/headline_rezepte.gif" alt="Headline: Rezepte" /></div>
    <div class="fliesstext">
      <h1>Beispiel Headline</h1>
      <ul>
        <li>Zutat 1 </li>
        <li>Zutat 2 </li>
        <li>Zutat 3 </li>
        <li>Zutat 4 </li>
        <li>Zutat 5 </li>
        <li>Zutat 6 </li>
      </ul>
      <p>Lorem Ipsum... <br />
      </p>
      </div>
  </div>
  <div id="footer">&nbsp;</div>
</div>
</body>
</html>


Das CSS:
Code:
body {
   margin: 0px;
   padding: 0px;
}

#container {
   width: 900px;
   margin: 0px auto;
   padding: 0px;
   background: #FFFDE2;
}

.banner {
   padding: 0;
   margin-bottom: 0;
   background: #005B4C;
}

#content {
   padding: 60px 200px 20px 220px;
   background: #FFFDE2;
   margin: 0px;
}

#menue {
   float: left;
   width: 180px;
   margin: 0px;
   padding: 58px 0px 0px;
   background: #005B4C;
   text-align: center;
   height: 100%;
}

.gk {
   float: right;
   width: 180px;
   margin: 0px;
   padding: 60px 0px 0px;
   background: #FFFDE2;
   border-right: 1px solid #CCDBD7;
   border-left: 1px solid #CCDBD7;
}

.gkheader {
   width: 180px;
   height: 30px;
   margin: 0px;
   padding: 0px;
   background: #005B4C;
   text-align: center;
}

.gkbild {
   width: 180px;
   margin: 0px;
   padding: 0px;
   background: #FFFDE2;
}

.gktext {
   width: 170px;
   margin: 0px;
   background: #CCDBD7;
   padding: 10px 5px;
   text-align: justify;
}

.headline {
   border: 0px;
   margin: 0px;
   padding-bottom: 10px;
   padding-left: 10px;
}

.fliesstext {
   margin: 0px;
   padding: 0px 35px 0px 15px;
   font: normal 14px/120% "Times New Roman", Times, serif;
   color: #000000;
   text-decoration: none;
   text-align: justify;
}

#footer {
   clear: both;
   padding: 0;
   margin-top: 0;
   background: #FFFDE2;
}



So. Nun habt ihr die Fakten. Bitte Hilfe....


Zuletzt bearbeitet von shakadi am Mo 15.11.2004 13:00, insgesamt 1-mal bearbeitet
  View user's profile Private Nachricht senden
dante

Dabei seit: 14.02.2004
Ort: NIC
Alter: 39
Geschlecht: Männlich
Verfasst Mo 15.11.2004 13:03
Titel

Antworten mit Zitat Zum Seitenanfang

das funktioniert meines wissens nich.

workaround: stelle in dem hauptdiv ne hintergrund bild rein um die zwei andern spalten zu "emulieren". die anderen divs ans ich haben dann nur text


würde mich sehr, sehr gerne eines besseren belehren lassen!


Zuletzt bearbeitet von dante am Mo 15.11.2004 13:03, insgesamt 1-mal bearbeitet
  View user's profile Private Nachricht senden Website dieses Benutzers besuchen
Anzeige
Anzeige
beeviZ

Dabei seit: 30.09.2002
Ort: -
Alter: -
Geschlecht: Männlich
Verfasst Mo 15.11.2004 13:21
Titel

Antworten mit Zitat Zum Seitenanfang

Richtig. Die Variante mit dem Hintergrundbild ist die gewöhnlichste eigentlich.
Geht auch anders, aber das kann der IE nich so wirklich Meine Güte!
  View user's profile Private Nachricht senden
shakadi
Griller Killer
Threadersteller

Dabei seit: 21.12.2003
Ort: SHA
Alter: 43
Geschlecht: Männlich
Verfasst Mo 15.11.2004 13:47
Titel

Antworten mit Zitat Zum Seitenanfang

hmm danke. aber irgendwie isses nicht so die lösung die ich such Menno!
  View user's profile Private Nachricht senden
 
Ähnliche Themen CSS-Frage: zentrierte Spalte, 100% Höhe
CSS DIV 100% Höhe
höhe vom div?
DIV und relativen Höhe?
Problem mit der Höhe
Höhe anpassen per Js
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.