DIV Höhe 100%

Daniel86 · #1 (**permalink**) 28.07.2011, 20:43

Seit einigen Tagen beschäftige ich mich mit CSS, gleich am Anfang wurde mir hier im Forum schonmal geholfen.
Das meiste kann ich ja selbst herausfinden, aber jetzt hab ich seit zwei Tagen ein Problem, das ich einfach nicht behoben kriege:

Folgender Aufbau:

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
   "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title></title>

         <style type="text/css">

                     body {
                              background-color: #FFFFCC;
                     }

                     #container {
                             position: absolute;
                             top: 0%;
                             left: 50%;
                             width:700px;
                             margin-top: 0px;
                             margin-left: -300px;
                             background-color: lightblue;
                     }

                     #header {
                             width: 600px;
                             height: 240px;
                             background-color: red;

                     }
                     #content {
                             background-color: yellow;
                             width: 600px;
                     }

                     #footer {
                             width: 600px;
                             background-color: blue;
                     }

                     #randlinks {
                             width: 50px;
                             heigth: 100%;
                             float: left;
                             background-image: url(http://a1.twimg.com/profile_images/73601319/southpark_normal.gif);
                             background-color: black;
                     }

                     #randrechts {
                             width: 50px;
                             heigth: 100%;
                             float: right;
                             background-image: url(http://a1.twimg.com/profile_images/73601319/southpark_normal.gif);
                             background-color: black;
                     }

         </style>
</head>

<body>
     <div id="container">
              <div id="randlinks">
                       das ist der linke Rand mit Southpark Hintergrund (das wird später ein anderer)<br />
                       <br /><br /><br /><br /><br /><br /><br /><br /><br />
                       Ende Rand
              </div>


              <div id="randrechts">
                      das ist der rechte Rand mit Southpark Hintergrund (das wird später ein anderer)<br />
                      <br /><br /><br /><br /><br /><br /><br /><br /><br />
                      Ende Rand
              </div>

              <div id="header">
                      <img src="http://www.naanoo.com/live/wp-content/plugins/wp-o-matic/cache/e929f_dts_image_861_asosgjdrge_140_600_240.85714285714.jpg" alt="--" style="position: relative; top:0px; left:0px;"></img>
                      das ist der HEADER Div mit Fußball-Bild -----------------
                      das ist der HEADER Div mit Fußball-Bild
              </div>

              <div id="content" >
                      Das ist der Content DIV -----------------------------------------------------------------------------------------------------------------------
                      Das ist der Content DIV -----------------------------------------------------------------------------------------------------------------------
                      Das ist der Content DIV -----------------------------------------------------------------------------------------------------------------------
                      Das ist der Content DIV -----------------------------------------------------------------------------------------------------------------------
                      Das ist der Content DIV -----------------------------------------------------------------------------------------------------------------------
                      Das ist der Content DIV -----------------------------------------------------------------------------------------------------------------------
                      Das ist der Content DIV -----------------------------------------------------------------------------------------------------------------------
                      Das ist der Content DIV -----------------------------------------------------------------------------------------------------------------------
                      Das ist der Content DIV -----------------------------------------------------------------------------------------------------------------------
                      Das ist der Content DIV -----------------------------------------------------------------------------------------------------------------------
                      <br />
                      <br />
     </div><!--Ende content!-->
     <div id="footer">

                    <br />
                    DAS IST DER FOOTER DIV --------- DAS IST DER FOOTER DIV --------- DAS IST DER FOOTER DIV --------- DAS IST DER FOOTER DIV ---------
                    <br />
     </div><!--footer!-->
     </div><!--container!-->
</body>
</html>

meine Fragen sind:
1. Wieso erscheint das Bild nicht ganz oben?
2. wieso sind die Ränder rechts und links nicht so groß wie der Container DIV?
3. wieso umschließt der Container-DIV nicht alles?
Hat jemand Rat? Ist bestimmt ein Anfängerfehler...

Tausend Dank!

Viele Grüße,
Daniel

Crizzo · #2 (**permalink**) 28.07.2011, 20:55

Hi!
@1.: Wo erscheint es denn? Lad mal dein Beispiel hoch und poste den Link.

@2.: Wieso sollten die Ränder so groß sein? Für was hast du dem Container-Div überhaupt "position:absolute" gegeben? Mit der left und margin-left willst du den Container-Div zentrieren? Wenn ja, schlechte Methode benutze mal "margin: 0 auto;" (0 kann alternativ auch jeder andere Wert sein)

@3.: Du floatest aber clearst nicht, dein Container wächst also nicht mit: http://xhtmlforum.de/40267-faq-h-ufi...-und.html#faq2

Daniel86 · #3 (**permalink**) 28.07.2011, 21:33

@1: ich hab mal ein Screenshot davon hochgeladen (zu mehr bin ich im Moment noch nicht in der Lage

) http://img824.imageshack.us/img824/4229/seitek.jpg

@2: die Ränder sollen später ein Übergangs-Gif kacheln.
mit "position:absolute" und dem Rest will ich die Seite zentrieren,
hatte ich aus nem Youtube-Tut. Wie wäre deine Methode?

@3: ich dachte ich müsste nicht clearen, weil der Float bis unten hingehen soll. Hab's grad nochmal mit clearen probiert:

Code:

                    #cleardiv {
                             width: 600px;
                             clear: both;
                             }

im body dann:

Code:

     </div><!--Ende Footer!-->
     <div id="cleardiv"></div>
     </div><!--Ende Container!-->

so funktionierts aber auch nicht.
Was mach ich falsch?

Danke!

Crizzo · #4 (**permalink**) 28.07.2011, 21:46

Zitat:

Zitat von Daniel86

@1: ich hab mal ein Screenshot davon hochgeladen (zu mehr bin ich im Moment noch nicht in der Lage

) http://img824.imageshack.us/img824/4229/seitek.jpg

Du floatest den #header nicht.

Zitat:

@2: die Ränder sollen später ein Übergangs-Gif kacheln.
mit "position:absolute" und dem Rest will ich die Seite zentrieren,
hatte ich aus nem Youtube-Tut. Wie wäre deine Methode?

Gib dem Element einfach nur "margin: 0 auto" und eine Breite. Das reicht schon. Die position, left usw. schmeißt du raus.

Zitat:

@3:
Was mach ich falsch?

Genau deshalb brauchen wir einen lauffähige Online Version! Umständlich deinen Code kopieren, speichern, öffnen usw. kostet doch alles Zeit. Und woher soll ich denn jetzt wissen, wie der Code bei dir aktuell aussieht?

Daniel86 · #5 (**permalink**) 28.07.2011, 23:32

Zitat:

Zitat von Crizzo

Du floatest den #header nicht.

ist mir nicht klar wieso. Der #header ist doch in einer Reihe mit #content und #footer...
wie müsste das gehen?

Zitat:

Gib dem Element einfach nur "margin: 0 auto" und eine Breite. Das reicht schon. Die position, left usw. schmeißt du raus.

wenn ich das mache:

Code:

#container {
                             margin: 0 auto;
                             width: 700px;
                             }

dann kommt das hier bei raus: klick. Was ist falsch?

fricca · #6 (**permalink**) 28.07.2011, 23:50

Zitat:

Zitat von Daniel86

Was ist falsch?

Die HTML-Kommentare in deinem Stylesheet.
Validieren!

Daniel86 · #7 (**permalink**) 28.07.2011, 23:59

stimmt, jetzt ist's zentriert. War mir nicht klar, dass man das nicht darf.

Aber wieso funktioniert der Float nicht?
Und wieso ist der Inhalt vom #Header da unten, die Hintergrundfarbe (rot) aber oben?

klick

fricca · #8 (**permalink**) 29.07.2011, 00:07

Doch, Float funktioniert. Du weißt nur nicht, wie. Das lässt sich auch nicht mal eben schnell erklären. Kurz: Nicht #header weicht dem Float aus, sondern nur sein Inhalt. Und der Inhalt (das Bild) passt nicht neben das gefloatete Element.
Ich empfehle Grundlagenlektüre: LB Teil 1 (von 2009) kostenlos online lesen - Little Boxes - Webseiten gestalten mit HTML und CSS (von Peter Müller) Ganz durcharbeiten, nicht nur partiell überfliegen. Dort lernst du z.B. auch, wie Kommentare in CSS aussehen.
Die [FAQ]FAQ[/FAQ] haben auch viel zu bieten.

Leg das, was du da hast, bitte erstmal weg. Das Gebastel führt dich nicht weiter.
Da du nicht wirklich zeigst, was das werden soll, kann man auch nur Vermutungen anstellen. Und diese lautet: Für deinen Hintergrund brauchst du keine gefloateten Elemente. Dafür reicht ein Hintergrundbild im umgebenden Element.

Daniel86 · #9 (**permalink**) 29.07.2011, 10:03

Zitat:

LB Teil 1 (von 2009) kostenlos online lesen - Little Boxes - Webseiten gestalten mit HTML und CSS (von Peter Müller)

ist ja echt ein tolles Werk! Da wird einem einiges viel deutlicher.

Ich werde mir das alles mal verinnerlichen, nur will ich diese Seite jetzt fertigstellen, ich bin eigentlich kurz vor dem Ende.

Gebt mir doch bitte den Tipp wie's richtig wäre, ich gebe dann auch Ruhe und setze mich zum Lernen vor die Lektüre

Später werde ich noch eine ganze Homepage gestalten, dies ist die Vorab-Wilkommensseite.

Crizzo · #10 (**permalink**) 29.07.2011, 10:14

Was fürn Tipp?

Themen-Optionen
Druckbare Version zeigen Jemanden per E-Mail auf dieses Thema hinweisen
Ansicht
Linear-Darstellung Zur Hybrid-Darstellung wechseln Zur Baum-Darstellung wechseln

Ähnliche Themen
Thema	Autor	Forum	Antworten	Letzter Beitrag
Fragen zu CSS und Joomla	DOKTOR	CSS	2	23.05.2011 19:29
Brauche Hilfe: Schwarzes Nichts	Zwox	CSS	10	19.11.2010 16:53
Header entfernen	tripple	CSS	17	15.06.2010 15:41
Schriftfarbe in den Eintragungsfeldern von jforms	Steveislucky	CSS	2	16.03.2010 10:59
CSS Text nebeinander?	carstiee09	CSS	13	13.11.2009 19:18