zurück zur Startseite
  


Zurück XHTMLforum > (X)HTML und CSS > CSS
Seite neu laden DIV Höhe 100%

Antwort
 
LinkBack Themen-Optionen Ansicht
  #1 (permalink)  
Alt 28.07.2011, 21:43
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 24.07.2011
Beiträge: 17
Daniel86 befindet sich auf einem aufstrebenden Ast
Standard DIV Höhe 100%

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

Geändert von Daniel86 (28.07.2011 um 21:48 Uhr)
Mit Zitat antworten
Sponsored Links
  #2 (permalink)  
Alt 28.07.2011, 21:55
Benutzerbild von Crizzo
der mit dem Editor kämpft
XHTMLforum-Kenner
 
Registriert seit: 17.10.2006
Ort: Ost-Hessen
Beiträge: 4.834
Crizzo ist ein sehr geschätzer MenschCrizzo ist ein sehr geschätzer MenschCrizzo ist ein sehr geschätzer MenschCrizzo ist ein sehr geschätzer Mensch
Standard

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
__________________
Ohne Quelltext gibts selten Hilfe. Also: Onlinebeispiel hochladen und Link bereitstellen!
Foren-FAQ
Mit Zitat antworten
Sponsored Links
  #3 (permalink)  
Alt 28.07.2011, 22:33
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 24.07.2011
Beiträge: 17
Daniel86 befindet sich auf einem aufstrebenden Ast
Standard

@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!
Mit Zitat antworten
  #4 (permalink)  
Alt 28.07.2011, 22:46
Benutzerbild von Crizzo
der mit dem Editor kämpft
XHTMLforum-Kenner
 
Registriert seit: 17.10.2006
Ort: Ost-Hessen
Beiträge: 4.834
Crizzo ist ein sehr geschätzer MenschCrizzo ist ein sehr geschätzer MenschCrizzo ist ein sehr geschätzer MenschCrizzo ist ein sehr geschätzer Mensch
Standard

Zitat:
Zitat von Daniel86 Beitrag anzeigen
@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?
__________________
Ohne Quelltext gibts selten Hilfe. Also: Onlinebeispiel hochladen und Link bereitstellen!
Foren-FAQ
Mit Zitat antworten
  #5 (permalink)  
Alt 29.07.2011, 00:32
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 24.07.2011
Beiträge: 17
Daniel86 befindet sich auf einem aufstrebenden Ast
Standard

Zitat:
Zitat von Crizzo Beitrag anzeigen
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?
Mit Zitat antworten
  #6 (permalink)  
Alt 29.07.2011, 00:50
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 28.01.2005
Beiträge: 11.779
fricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz sein
Standard

Zitat:
Zitat von Daniel86 Beitrag anzeigen
Was ist falsch?
Die HTML-Kommentare in deinem Stylesheet.
Validieren!
Mit Zitat antworten
  #7 (permalink)  
Alt 29.07.2011, 00:59
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 24.07.2011
Beiträge: 17
Daniel86 befindet sich auf einem aufstrebenden Ast
Standard

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
Mit Zitat antworten
  #8 (permalink)  
Alt 29.07.2011, 01:07
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 28.01.2005
Beiträge: 11.779
fricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz sein
Standard

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.
Mit Zitat antworten
  #9 (permalink)  
Alt 29.07.2011, 11:03
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 24.07.2011
Beiträge: 17
Daniel86 befindet sich auf einem aufstrebenden Ast
Standard

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.
Mit Zitat antworten
Sponsored Links
  #10 (permalink)  
Alt 29.07.2011, 11:14
Benutzerbild von Crizzo
der mit dem Editor kämpft
XHTMLforum-Kenner
 
Registriert seit: 17.10.2006
Ort: Ost-Hessen
Beiträge: 4.834
Crizzo ist ein sehr geschätzer MenschCrizzo ist ein sehr geschätzer MenschCrizzo ist ein sehr geschätzer MenschCrizzo ist ein sehr geschätzer Mensch
Standard

Was fürn Tipp?
__________________
Ohne Quelltext gibts selten Hilfe. Also: Onlinebeispiel hochladen und Link bereitstellen!
Foren-FAQ
Mit Zitat antworten
Sponsored Links
Antwort

Themen-Optionen
Ansicht

Forumregeln
Es ist Ihnen nicht erlaubt, neue Themen zu verfassen.
Es ist Ihnen nicht erlaubt, auf Beiträge zu antworten.
Es ist Ihnen nicht erlaubt, Anhänge hochzuladen.
Es ist Ihnen nicht erlaubt, Ihre Beiträge zu bearbeiten.

BB-Code ist an.
Smileys sind an.
[IMG] Code ist an.
HTML-Code ist aus.
Trackbacks are an
Pingbacks are an
Refbacks are aus


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


Alle Zeitangaben in WEZ +2. Es ist jetzt 15:24 Uhr.