✔ DIVs werden untereinander dargestellt

  • Themenstarter Themenstarter LeH
  • Beginndatum Beginndatum
Status
Nicht offen für weitere Antworten.
L

LeH

Ich habe noch einmal ein Problem.
Nachdem ich mich hier durch sämtliche Threads geschlagen habe und mehrmals das gesamte Konzept umgeworfen habe stehe ich noch vor zwei Problemen:

1. Header und Footer sind richtig positioniert. Es soll eine linke Navigationsleiste geben und eine rechte; dazwischen der ContentBlock. Jedoch werden die 3 Bereiche untereinander statt nebeneinander dargestellt.
---
links
mitte
rechts
---
Wie löse ich dieses Problem?

2. Ich habe um alle meine 5 Blocke eine FrameDiv gespannt. Den halt zentriert usw.
Zum oberen Fensterrand habe ich ihm 10px Abstand gegeben, also top: 10px;. Funktioniert gut. Wenn ich jedoch schreibe: bottom: 10px; wird diese angabe nicht beachtet. Woran liegt das?

CSS CODE
Code: 
body 
{  
       margin: 0px auto;
       height: 100%;
       background-color: #AAAAAA;
}

#frame
{
top: 10px;

       background-color: #F9F9F9;
       position: absolute;
       left: 50%;
       margin-left: -300px; 
       width: 600px;
       height: 100%;

}

#oben
{
width: 100%;
       height: 100px;
       padding: 0;


       border-width: 1px;
       border-style: solid;
       border-color: black;
}

#links
{
       width: 100px;


       border-width: 1px;
       border-style: solid;
       border-color: black;
}

#mitte
{
     padding: 0;




       border-width: 1px;
       border-style: solid;
       border-color: black;
}

#rechts
{


       width: 100px;


       border-width: 1px;
       border-style: solid;
       border-color: black;
}

#unten
{
       bottom: 10px;

       width: 100%;
       height: 50px;

       position: absolute;
       border-width: 1px;
       border-style: solid;
       border-color: black;
padding: 0;
}

HTML CODE

Code: 
<html>
<head>
<title>Index</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div id="frame">
	<div id="oben">Oben</div>
	<div id="links">Links</div>
	<div id="mitte">Mitte</div>
	<div id="rechts">Rechts</div>
	<div id="unten">Unten</div>
</div>
</body>
</html>


Ich hoffe ihr könnt mir helfen.

Leon
 
Das klappt gut, doch wenn ich den div "rechts" mit float rechts versehe rutscht mir der Footer nen ganzes Stück nach links. Jedoch nur im IE, bei FF und Opera funktioniert es.

Irgendwo müssen da große Fehler drin sein, denn es gibt so viele Kleine Sachen, die da bei der Browserdarstellung nicht stimmen. Kann das mal wer checken? Ich komm da echt nicht mehr weiter.
 
Zuletzt bearbeitet von einem Moderator:
Versuch mal

#links {float:left;}
#rechts {float:right;}
#mitte {margin-left:100px;margin-right:100px;}
#unten {clear:both;}

Und das mit bottom bei #unten, versuch da mal margin-bottom:10px;
Oder in #frame padding-bottom:10px;
 
Danke für euren Einsatz, echt.

1.
Ich habe einen Screenshot angehängt, auf dem man das nun auftretene Problem deutlich erkennen kann. Wie bekomme ich den Div auf die gleiche Höhe bzw. in die Lücke rein?

2.
Ist mit den Vorschlägen nicht gelöst. Wenn ich margin-bottom: 10px bei #unten mache erscheint es so wie im zweiten Bild im Anhang.
Ich schiebe nur den #unten div nach oben anstatt den ganzen #frame.
Wenn ich margin-bottom: 10px;
oder padding-bottom: 10px;
oder nur bottom: 10px;
bei #frame mache reagieren die Browser nicht.

3. Wie mache ich es, dass sich die 3 Felder bis nach unten zum #unten div ziehen?

----
CSS CODE (nochmal ein wenig aufgeräumt und umgeschrieben)
Code: 
body 
{
       height: 100%;
       margin: 0px auto;
       background-color: #AAAAAA;
}

#frame
{
       position: absolute;
       width: 600px;
       height: 100%;
       top: 10px;
       left: 50%;
       margin-left: -300px;
       background-color: #F9F9F9;
}

#oben
{
       height: 100px;
       width: 100%;
       padding: 0;
       border: 1px solid black;
}

#links
{
       width: 100px;
       float: left;
       border: 1px solid black;

}

#mitte
{
       padding: 0px;
       margin-left: 100px;
       margin-right: 100px;
       border: 1px solid black;
}

#rechts
{
       width: 100px;
       float:right;
       border: 1px solid black;
}

#unten
{
       bottom: 0px;
       height: 50px;
       width: 100%;
       clear: both;
       position: absolute;
       padding: 0;
       border: 1px solid black;
}

Leon

EDIT: Habe mal versucht bei #frame position: absolute; und bottom: 10px;
Dann klappt das mit dem Abstand unten, aber halt nur bei Opera. Falls ihr nicht auf alle Probleme Antworten wisst, reicht auch auf eine. Hauptsache ich komme weiter, ich hänge hier ganz schön fest.
 

Anhänge

  • Ohne Titel-2 Kopie.gif
    Ohne Titel-2 Kopie.gif
    4,1 KB · Aufrufe: 289
  • Ohne Titel-3 Kopie.gif
    Ohne Titel-3 Kopie.gif
    4,1 KB · Aufrufe: 262
Zuletzt bearbeitet von einem Moderator:
1. Im html Code erst #links, dann #rechts, dann #mitte
2. Dann gib mal body einen padding-bottom.
3. Kann ich gerade leider nicht so beantworten.
 
1. Funktioniert! Super Danke!
2. Hilft nichts! CSS CODE:
---
body
{
height: 100%;
margin: 0px auto;
background-color: #AAAAAA;
padding-bottom: 10px;
}
---
Brower reagieren nicht!
3. Wenn ich bei height: 100%; einstelle schießen die 3 DIVs völlig über den Footer hinaus. Wenn ich da so rumwurschtel komme ich beim IE auf 74%. Das passt dann halt bei den anderen Browsern nicht. Mit height: auto; erreiche ich auch nichts.

Danke danke nochmals für Problem 1. ; )

Leon
 
Hab leider auch keine Antwort für Dich... aber dasselbe Problem. (mit der Höhe)


Ich habe eine Subnavigation unten, welche immer am unteren Rand kleben sollte.

Es gibt da auch ein JavaScript, mit welchem man die Pixel des Fensters berechnen kann, aber ob das bei allen Browsern oder wenn JS ausgeschaltet ist...

Wäre für eine CSS-Lösung (height: 100%;) oder irgendetwas anderes sehr dankbar


IBO

Anbei ein Auszug aus dem Script, wie ich mir das dachte:
HTML: 
<script language="JavaScript">
	 DIVhoch = Hoehe-141; /* Die Höhe wird anderswo berechnet */
	 document.write('<div class="midbg" style="height:'+ DIVhoch +'px;">');
</script>

Und so funktionierts auch.

Ein schönes Script für die Pixel gibts z.B. hier:
http://www.jbels-design.com/dwmx2004/browser_innen.htm
 
Zuletzt bearbeitet:
Status
Nicht offen für weitere Antworten.

Neue Beiträge

Zurück