mediengestalter.info
FAQ :: Mitgliederliste :: MGi Team

Willkommen auf dem Portal für Mediengestalter

Aktuelles Datum und Uhrzeit: Di 06.12.2016 11:40 Benutzername: Passwort: Auto-Login

Thema: CSS Problem - Div Navi bis zum Footer vom 07.12.2005


Neues Thema eröffnen   Neue Antwort erstellen MGi Foren-Übersicht -> Tipps & Tricks für Nonprint -> CSS Problem - Div Navi bis zum Footer
Autor Nachricht
Benutzer 27999
Account gelöscht Threadersteller


Ort: -

Verfasst Mi 07.12.2005 10:25
Titel

CSS Problem - Div Navi bis zum Footer

Antworten mit Zitat Zum Seitenanfang

Guten Tag!

Ich google schon eine weile an dem Thema dran rum, aber ich finde keine passende Lösung.

Ich habe 4 Container. 1 Header, 1 Footer, 1 Navi und 1 Content...

Mein CSS sieht folgendermaßen aus:

Code:

  <style type="text/css">
  <!--
  html, body{
     text-align:center;
     margin:0;
     padding:0;
   height: 100%;
  }

  #header{
   width: 100%;
   background-color: #FFFFCC;
  }

  #content{
   padding: 15px;
   margin-left: 160px;
   background-color: #CCFF99;
  }

  #navigation{
   float: left;
   border-right: 1px solid #000080;
   width: 160px;
   height: 100%;
   min-height: 100%;
   margin-bottom: auto;
   background-color: #33FFCC;
  }

  #footer{
   clear:both;
   background-color: #CCFFCC;
  }
  -->
  </style>



Ich möchte nun den Navigationscontainer genausolang haben wie den Inhaltscontainer...

Ich bekomme ihn wohl auf 100% der Seite, aber sobald mehr inhalt in den Content-Container kommt, wird der groesser, aber der Navicontainer bleibt bei 100%... (Also er ändert seine Höhe nicht)

Mein HTML Code:


Code:

 <body>
    <div id="header">Header</div>
    <div id="navigation">Navigation</div>
    <div id="content">
   Blahblahblah...
    </div>
    <div id="footer">Footer</div>
 </body>


Ist sowas überhaupt möglich? Die Lösung sollte natürlich möglcihst auf allen gängigen Browsern laufen und sollte Barrierearm gestalltet sein (was sich aber wohl von selbst versteht *zwinker* )

Bis denn dann

Kiste1985
 
Feile

Dabei seit: 02.08.2005
Ort: Senden
Alter: -
Geschlecht: Männlich
Verfasst Mi 07.12.2005 11:33
Titel

Antworten mit Zitat Zum Seitenanfang

Code:
 <body>
    <div id="header">Header</div>
    <div id="navigation" style="hintergrundbild/farbe;">
      <div id="iNavi">Navigation</div>
      <div id="content">
      Blahblahblah...
      </div>
      <div style="clear:left;height:1px;overflow:hidden;"></div>
   </div>
   <div id="footer">Footer</div>
 </body>



Jetzt "spannt" der content bereich den Navicontainer in der Höhe auf und das hintergrundsbild/farbe zieht sich runter bis zum abschluss des inhalts. dem content und iNavi gibst du jetzt ein float:left;. das clearst du dann wieder mit nem <div> oder nem <br /> am ende bevor du den elterncontainer schließt.

hoffe ich konnte dir weiterhelfen
  View user's profile Private Nachricht senden Website dieses Benutzers besuchen
Anzeige
Anzeige
Benutzer 27999
Account gelöscht Threadersteller


Ort: -

Verfasst Mi 07.12.2005 12:09
Titel

Antworten mit Zitat Zum Seitenanfang

Danke für die Antwort, aber leider war die Lösung nicht zufriedenstellend...

Sie funktionierte ansatzweise im Internet Explorer... Opera da die beiden Elemente unternander gesetzt, so dass der Content bereich ganz links war, und bei nem Margin-left halt nur etws weiter vom Rand abgerückt!

Es muss doch ne möglichkeit geben? Sowas sieht man doch auf soviele Seiten...

Navigationsbox genauso lang bekommen wie der Inhalt... kA Wie....


mfg
Kiste1985
 
kaputt

Dabei seit: 08.05.2003
Ort: -
Alter: -
Geschlecht: Männlich
Verfasst Mi 07.12.2005 12:30
Titel

Antworten mit Zitat Zum Seitenanfang

Das kannst du nur über ein Hintergrundbild "faken". Einen Div um Navi und Content legen und dem ein Hintergrundbild geben... nach Navi und Content dann auch noch IM umschließenden Div einen weiteren Div anlegen, der den Style "clear: both" hat.
  View user's profile Private Nachricht senden
Benutzer 27999
Account gelöscht Threadersteller


Ort: -

Verfasst Mi 07.12.2005 14:00
Titel

Antworten mit Zitat Zum Seitenanfang

Hmmm achso... nagut, sowas wollte ich eigentlich eher nicht...

Schade, dass sowas in CSS nicht funktioniert... Is doch schon was wichtiges? Naja egal, lass ich mir ne alternative einfallen

Bis denn dann!
 
beeviZ

Dabei seit: 30.09.2002
Ort: Dortmund
Alter: 23
Geschlecht: Männlich
Verfasst Mi 07.12.2005 16:14
Titel

Antworten mit Zitat Zum Seitenanfang

Gleiche Höhe der beiden divs
100 % Höhe + Footer unten
  View user's profile Private Nachricht senden Website dieses Benutzers besuchen
 
Ähnliche Themen [CSS] Content Div überlagert Footer
[css] - Footer Problem
[css]problem beim positionieren vom footer!
Problem: Chrome CSS Footer Ausrichtung
Problem mit css navi
IE Problem mit CSS Navi
Neues Thema eröffnen   Neue Antwort erstellen
MGi Foren-Übersicht -> Tipps & Tricks für 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.