wrapper um schließt nicht mehr die gesamte Seite

Magellan · #1 (**permalink**) 24.06.2009, 18:38

Hallo mein wrapper um schließt nicht mehr die gesamte Seite sondern nur noch den
Bereich mit position: relative; die ge float en Bereich sind mir zwar nicht davon geschwebt.
Doch wo habe ich da einen Anweisung vergessen? Und welche?

Danke euch jetzt schon mal

Magellan

regloh · #2 (**permalink**) 24.06.2009, 19:01

Du schreibst doch nun nicht zum ersten Mal einen Beitrag hier, oder? Wie soll man so denn sagen, woran es liegt, wenn du keinerlei Code postest?

Erster Gedanke: Du clearst nicht.

Magellan · #3 (**permalink**) 24.06.2009, 20:01

Das habe ich nicht gleich eingestellt wie es doch recht viel ist.

muss ich alles clear en?

Zitat:

/*================================================= ==================
2.*/

body { background-color: #000080;
color: #FFD700;
}
/*================================================= ================
3. Formatierung der Class Anweisung */

.zentriert {text-align: center;}
.zeile {line-height: 2.5em;}

/*================================================= =================
4.*/

#wrapper{ /*Grundramen der Seite*/
background-color: #000080;
border: 0.1px solid red;
width: 77em;
margin-right: auto;
margin-left: auto;
height: 100%;
}

/*================================================= ==================
5. Skiplinks verstecken*/

.versteckmich {
position: absolute;
left: -9999px;
top: -9999px;
display: inline;
width: 0;
height: 0;
}

/*================================================= =================
6. Navigartion per TAB-Taste sichtbar machen*/

.tabmich:focus, .tabmich:active {
position: absolute;
top: 9999px;
left: 10350px;
display : inline;
width: 20em;
height: 1.3em;
text-align: center;
background-color: #0000cd;
color: #ffd700;
padding: 0px;
border: 1px solid black;
}

/*================================================= ==================
7. Navibereich A*/

#navibereich_a {
position: relative;
background: #000080;
border: 0.px solid red;
padding: 0.1em 0em 0.19em 0em;
margin-left: 2.5em;
width: 72em;
height: 1.3em;
}

/*================================================= ===================
8. Titelbild */

#titelbild{
position: relative;
background: #000080;
background-image:url(/projekte/tanuga/bilder/sawanne1.jpg);
border: 0px solid red;
padding-top: 1.5em;
margin-left: 0.5em;
text-align: center;
font-style: italic;
line-height: 2.5em;
width: 76em;
height: 13em;}

/*================================================= ====================
9. Logo */

#logo {
position: relative;
background: transparent;
background-image:url();
border: 0px solid red;
top: 0;
left: 0;
width: 0;
}
/*================================================= ===================
10. Navigation B */

#navibereich_b {
position: relative;
background: #000080;
border: 0px solid red;
padding: 0.2em 0em 1.5em 1.8em;
width: 75.2em;
height: 0em;

}
/*================================================= ====================
11. Grundcontainer umfasst den gesamten unteren bereich der Seite. */

#grundcontainer{
background: #000080;
border: 0px solid red;
position: relative;
margin: 0em;
width: auto;
height: 100%;}

/*================================================= ===================
12. Container_1 mit Profil und Kontinente */

#container_1{
background: #000080;
border-right: px solid red;
border-top: px solid red;
border-left: px solid red;
-moz-border-radius-topright:30px;
-khtml-border-radius-topright:30px;
position: relative;
padding: 0.1em;
margin: 0.3em;
float: left;
width: 19em;
height: 102em;}

/*================================================= ====================
12.a Anmeldung Startseite*/

#anmelden{
background: #000080;
position: relative;
border: 0px solid red;
padding: 0 0 0 0.2em;
margin-top: 1em;
font-size: 0.85em;
line-height: 1.5em;
color: #FFFFFF;
width: 20em;
height: 8em;}

/*================================================= ====================
12.b Kontinente*/

#kontinent{ /*Kontinente*/
background: #000080;
position: relative;
border: 0px solid red;
padding: 1.3em 0 0 2em;
margin-top: 1em;
line-height: 1.6em;
width: 16.5em;
height: auto;
z-index: 100;
}

/*================================================= ===================
12.c Sachthemen*/

#sachthemen {
background: #000080;
position: relative;
border: 0px solid red;
padding: 1.3em 0 0 2em;
margin-top: 1em;
line-height: 1.6em;
width: 16.5em;
height: 22em;}

/*================================================= ===================
12.d Tanuga Arcaden*/

#arcaden{
background: #000080;
position: relative;
border: 0px solid red;
padding: 1em 0 0 2em;
margin-top: 1em;
line-height: 1.6em;
width: 16.5em;
height: 29em;}

/*============================ Ende Contener_1=======================
13. Container 2 */

#container_2{
background: #000080;
border: 0px solid red;
position: relative;
padding-top: 0.9em;
margin: 0.2em;
left: 0.4em;
float: left;
clear: right;
width: 34.1em;
height: 110em;}

/*================================================= ==================
13.a Werbung*/

#werbe_1{
background: #000066;
position: relative;
border:0px solid red;
width: 440px;
height: 29em;}

/*================================================= ==================
13.a Text im eingabe Bereich */

#text_1{
background: #000066;
position: relative;
border:0px solid red;
text-align: center;
width: 440px;
height: 15em;}

/*================================================= ==================
13.b Globus*/

#eingabe{
background: #000066;
position: relative;
border: 0em solid red;
padding-top: 1%;
padding-left: 3%;
margin-top: 1em;
width: 33em;
height: 33em;}

/*================================================= ====================
13.c Berichte*/

#berichte{
background: #000080;
position: relative;
border: 0px solid red;
padding-top: 0em;
padding-left: 0em;
margin-top: 1em;
margin-left: 1em;
text-align: center;
width: 32em;
height: 5em;}

/*================================================= =======================
13.d Neue Bilder*/

div.box9{
background: #000080;
position: relative;
border: 0px solid red;
padding-top: 0.8em;
padding-left: 0em;
margin:1em 0 0 1em;
text-align: center;
width: 32em;
height: 5em;}

/*======================== Ende Contener_2==========================
14.*/

#container_3{
background: #000080;
border-left: px solid red;
border-top: px solid red;
border-right: px solid red;
-moz-border-radius-topleft:30px;
-khtml-border-radius-topleft:30px;
position: relative;
padding: 0.9em;
margin: 0.3em;
float: right;
width: 19em;
height: 101em;}

/*================================================= ====================
14.a Erlebnisreisen*/

#aktiv{
background: #000080;
position: relative;
border: 0px solid red;
padding: 1em 0 0 2em;
line-height: 1.6em;
width: 17em;
height: 28em;}

/*================================================= ====================
14.b Service */

#service{
background: #000080;
position: relative;
border: 0px solid red;
padding: 1em 0 0 2em;
margin-top: 1em;
line-height: 1.6em;
width: 17em;
height: 22em;}

/*================================================= =====================
14.c Empfehlungen*/

#empfehlung{
background: #000080;
position: relative;
border: 0px solid red;
padding-top: 1em;
padding-left: 2em;
margin-top: 1em;
line-height: 1.6em;
width: 17em;
height: 29em;}

/*======================== Ende Contener_3===============================
15. Letzteteile*/

#letztezeile {
background: #000080;
position: absolute;
border: 0px solid red;
top: 130.75em;
left: 0.6em;
text-align: center;
width: 76em;
height: 2em;}

#kannada{
background: transparent;
}

/*================================================= =================
16.*/

} /* Ende @media == nicht Löschen ist wichtig*/

/* 17.========= Ende Bildschirm. css====================================*/

regloh · #4 (**permalink**) 24.06.2009, 20:09

Das CSS allein bringt genauso wenig etwas. Man braucht schon auch das Markup, um das DOM zu erkennen.

Zitat:

muss ich alles clear en?

Hast du dich schonmal mit float und clear beschäfftigt? Wenn nicht, dann lies dich ein. Grundsätzlich ist es in fast allen Fällen notwendig, zu clearen, damit das umgebende Element die darin befindlichen floats einschließt. Siehe auch http://xhtmlforum.de/40267-faq-h-ufi...-und.html#faq2

Magellan · #5 (**permalink**) 24.06.2009, 20:36

Das war das erste mal und es ist mir erst jetzt aufgefallen das es nicht umschließt.
Ich hatte jetzt auch mehr gehofft, dass es einer kurz erklärt.

Ich wollte hier keinen durch den Dschungel meines Quelltextes auf Fehler suche schicken.

regloh · #6 (**permalink**) 24.06.2009, 20:58

Man sieht es eigentlich auch erst, wenn man z.B. eine Hintergrundfarbe setzt.

Du solltest dich schon selbst mit den Grundlagen beschäftigen. Float und Clear kommen in fast allen Designs vor und man sollte wissen, was diese Eigenschaften bewirken. Ein floatendes Element wird aus dem normalen Dokumentenfluss genommen, sodass andere Blockelemente dieses "nicht mehr sehen". Sie verhalten sich also so, als würde das float-Element nicht existieren. Inline-Elemente (Text, ect.) weichen den floats aus und umfließen sie. Clear stellt dann den normalen Fluss wieder her.

Wenn nun also ein float in einem div existiert, dann ist das div erstmal nur so hoch, wie der nicht floatende Inhalt. Wenn dieser nicht floatende Inhalt kleiner ist, als das floatende Element, ragt das float also aus dem div heraus. Clear beendet das umfließen, der Text steht also unterhalb des floats und das umgebende div umschließt nun auch das float.

Magellan · #7 (**permalink**) 24.06.2009, 21:17

Ja das mit den Grundlagen habe ich ja gemacht nur ist das auch schon wieder ein paar Monate
Vergangen und jetzt stehe ich ein wenig unter Zeitdruck.

Das ich es nicht falsch verstehe muss ich das div des wrapper clear en oder das div in dem das float steht. Kann es aber auch ausprobieren.

Danke
Magellan

regloh · #8 (**permalink**) 24.06.2009, 21:23

Zitat:

Ja das mit den Grundlagen habe ich ja gemacht nur ist das auch schon wieder ein paar Monate
Vergangen und jetzt stehe ich ein wenig unter Zeitdruck.

Dann lies dich wieder ein. Das dauert ja keine Stunden

Zitat:

Das ich es nicht falsch verstehe muss ich das div des wrapper clear en oder das div in dem das float steht.

Da ich dein Markup nicht kenne, kann ich natürlich keine verlässliche Aussage treffen. Prinzipiell muss in dem Element, was ein floatendes Element enthält, ein clearendes Element eingebunden werden, damit das float wieder aufgehoben wird.

Magellan · #9 (**permalink**) 25.06.2009, 08:49

Danke für dein Hilfe werde es gleich mal testen.

Zitat:

Dann lies dich wieder ein. Das dauert ja keine Stunden

Aber wenn Du wüstest wie viel Stunden ich in den letzten zwei Jahren mit einlesen verbracht habe,

du würdest diesen guten rat überdenken.

aber Danke

werd ich machen Magellan

Ähnliche Themen
Thema	Autor	Forum	Antworten	Letzter Beitrag
Element ausserhalb seite positionieren, so daß keine scrollbar entsteht	st-SaHiB	CSS	5	20.07.2009 08:49
Nach klick auf menüpunkt soll die gewünschte seite in der seite erscheinen	rs-web	CSS	45	17.07.2009 14:16
Fixer Header (CSS Frame) und Sprung zu Anker auf dieser Seite	Chico_wau	CSS	2	14.05.2007 18:08
Probleme mit Seite auf IE6	Ragnaroek	CSS	4	09.03.2007 20:02
Navigation links und oben soll aktive Seite anzeigen	Zischel	CSS	2	16.02.2007 22:30