✔ Div Container und height? Für CSS Profis

Status
Nicht offen für weitere Antworten.
J

julchen

Erfahrenes Mitglied
Hallo zusammen,
ich möchte folgendes erreichen:

Ein Layout welches, in der Breite 760 pixel hat, der Top-Bereich eine Höhe von Beispielsweise 100 pixel und der Rest nach unten hin immer die volle Bildschirmhöhe bzw. bis zum unteren Bildschirmrand einnimmt. Das ganze möchte ich mit Div Containern lösen. Bis jetzt schaffe ich das aber leider nicht. Der untere Bereich nimmt immer mehr als 100% der Höhe ein, so dass vertikal immer ein Scrollbalken entsteht, obwohl ich noch keinen Text in der Seite habe.

Ach ja, das ganze sollte noch mittig zentriert werden.

Wer kann mir eventuell den Anfangscode als Beispiel posten.

Hier mein Versuch ohne mittige Positionierung:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>
<head>
<style type="text/css" media="screen"><!--
body { margin: 0px; padding: 0px; height: 100% }
html { margin: 0px; padding: 0px; height: 100% }
#Ebene1 { background-color: #000; width: 760px; height: 15% }
#Ebene2 { width: 100px; background-color: blue; position: relative; height: 85%;
}
--></style>
</head>

<body bgcolor="#ffffff">
<div id="Ebene1"></div>
<div id="Ebene2"></div>
</body>

</html>

Oder soll ich vielleicht doch wieder mit Tabellen arbeiten. Zumindest eine gesamte um die ganzen Divs legen und dann in der Tabelle mit Divs.

Gruss und Danke
julinus
 
Hi,

also, ich weiß jetzt nicht, was du für nen Browser nutzt, aber ne Scrollleiste hab ich weder beim IE (zumindest inaktiv) noch beim Mozilla Firefox. :confused:
Hier dein veränderter Code:

Code: 
<html>
<head>
<style type="text/css"><!--
body
{
  text-align:center;
  margin:0px auto;
}
#Ebene1
{
  background-color: #000;
  color: white;
  width: 760px;
  height: 15%;
}
#Ebene2
{
  background-color: blue;
  width: 100px;
  height: 85%;
}
#outercontent
{
  text-align:left;
  margin:0px auto;
  height: 100%;
  width:760px;
}
--></style></head>
<body>
<div id="outercontent">
<div id="Ebene1">Titel</div>
<div id="Ebene2">Navi</div>
</div>
</body>
</html>

Ich habe den body auf center gesetzt, und einen weiteren div-Container, um dort dann Höhe und Breite anzugeben, außerdem um eventuellen Text linksbündig auszurichten.
Viel Spass :)
 
Keine % Angaben für Top Bereich!

Hallo,
das mit den % Angaben im Top Bereich und dann im Content kenne ich schon. Ich möchte aber keine % Angaben im Top Bereich, weil ich da eine feste Grafik habe. Und daran scheiterts noch.

Trotzdem danke.

Juchen
 
Tach

Ich weiß zwar nicht, ob das in deinem Fall passt, aber leg doch einfach zwei div-container übereinander:
-Einen mit 100% Höhe (1)
-den anderen mit ner festen pixel-Höhe darüber (2)

Das lässt sich ja ganz einfach über den z-index machen.
Dann packst du noch ne Tabelle, die die selbe Höhe hat wie (2), ganz oben auf den Container (1) und dann kannst du darunter das Ganze mit Inhalt füllen.

Ich hoffe, das war halbwegs verständlich, sonst versuche ich mich morgen an einem Quelltext.

Gute Nacht

Ollek81
 
Code Beispiel wäre nett!

Hallo,
<<
Ich weiß zwar nicht, ob das in deinem Fall passt, aber leg doch einfach zwei div-container übereinander:
-Einen mit 100% Höhe (1)
-den anderen mit ner festen pixel-Höhe darüber (2)

Das lässt sich ja ganz einfach über den z-index machen.
Dann packst du noch ne Tabelle, die die selbe Höhe hat wie (2), ganz oben auf den Container (1) und dann kannst du darunter das Ganze mit Inhalt füllen.

Ich hoffe, das war halbwegs verständlich, sonst versuche ich mich morgen an einem Quelltext.
>>

erst mal danke für den thread. Wäre nett wenn Du mir ein kleines Beispiel posten könntest.

Hier nochmal die Vorgaben:

- layout 760 pixel breit, höhe entsprechend bildschirmauflösung (oder bei grösserem Inhalt entsprechend)
- mittig zentriert
- oberer bereich, top z.b. 100px hoch
- content bereich in der höhe rest des Bildschirms einnehmen
- im content, links navigation z.b. 100px breit, 100% hoch, daneben z.b. info 100px breit 100% hoch, daneben text restliche breite 100% hoch.

kann ich dann in dem z.b. info container eine grafik am unteren bereich der seite plazieren?

gruss und danke
julchen
 
Tach

Da hab ich wohl die Tücken der divs etwas unterschätzt.

PHP: 
<html>
<head>
<title>Div-Layout</title>
</head>
<body style="margin:0px; padding:0; spacing:0">
<div name="top" style="position:absolute; height:100px; width:760px; background-color:#000000; color:#FFFFFF; z-index:2">
  Der Top-Bereich
</div>

<div name="content" style="position:absolute; height:100%; width:760px; background-color:#FFFFFF; color:#000000; z-index:1">
  <div name="navi" style="height:100%; width:100px; background-color:#FA1324; float:left">
    <table height="100" width="100%" border="0" cellpadding="0" cellspacing="0">  <!-- Als Abstandhalter nach oben -->
      <tr><td>
        &nbsp;
      </td></tr>
    </table>

    Navigation
  </div>

  <div name="info" style="height:100%; width:100px; background-color:#BFBFBF; float:left">
    <table height="100" width="100%" border="0" cellpadding="0" cellspacing="0">  <!-- Als Abstandhalter nach oben -->
      <tr><td>
        &nbsp;
      </td></tr>
    </table>

    Info
  </div>

  <div name="rest" style="height:100%; width:560px; background-color:#D0D0D0; float:left">
    <table height="100" width="100%" border="0" cellpadding="0" cellspacing="0">  <!-- Als Abstandhalter nach oben-->
      <tr><td>
        &nbsp;
      </td></tr>
    </table>

    Rest
  </div>
</div>
</body>
</html>

Damit klappt die Anpassung des ganzen an die Höhe...
Allerdings bekomme ich es jetzt nichtmehr mittig.
Mit text-align:center und margin:auto spinnt das alles rum und verschiebt sich rechts raus. Keine Ahnung wieso. Dafür bin ich wohl nicht lange genug dabei.
Allerdings geht es, wenn du eine Tabelle um den ganzen Krempel machst:
PHP: 
<html>
<head>
<title>Div-Layout</title>
</head>
<body style="margin:0px; padding:0; spacing:0">
<table width="100%" height="100%" border="0" cellpadding="0" cellspacing="0"> <!-- zur Zentrierung -->
<tr><td align="center">

<div name="top" style="height:100px; width:760px; background-color:#000000; color:#FFFFFF">
  Der Top-Bereich
</div>

<div name="content" style="height:100%; width:760px; background-color:#FFFFFF; color:#000000">
  <div name="navi" style="height:100%; width:100px; background-color:#FA1324; float:left">
    Navigation
  </div>

  <div name="info" style="height:100%; width:100px; background-color:#BFBFBF; float:left">
    Info
  </div>

  <div name="rest" style="height:100%; width:560px; background-color:#D0D0D0; float:left">
    Rest
  </div>
</div>

</td></tr>
</table>

</body>
</html>

Dann kannst du aber auch schon fast alles mit Tabellen machen.

Naja, wie auch immer, ich hoffe ich konnte irgendwie helfen.
Sollte noch jemand rausfinden, wie das ohne die Tabelle rundrum oder einfacher geht, bin auf jeden Fall interessiert.

Schönen Tag und viel Spaß beim basteln

Ollek81
 
hi,

die kombination von höhenangaben in % und absolut (px) wird mit divs nicht funktionieren.

die scrollbars habe ich auch (mac os9 IE 5.1). allerdings nur, wenn beim body die höhe definiert ist - lass ich die weg, klappts.

zentrieren kannst du die seite im body mittels

body {
text-align: center;
margin: 0 auto;
}

dann muss vor dem content (für den IE) ein weiterer container mit 'text-align: left;' kommen, sonst sind auch die inhalte im content alle zentriert.

aber die lösung mit einem absolut positioniertem container (von ollek81) und z-index für den header, erscheint die einzig mögliche zu sein!

ne gute infoseite ist btw.

http://css.fractatulum.net/

greez
 
Status
Nicht offen für weitere Antworten.

Neue Beiträge

Zurück