Warum muss ich floaten

Cascading Style Sheets (CSS ist eine praktische Code-Sprache, die einmal erstellt für das Aussehen der ganzen Seite gilt. So können z. B. Schriftattribute wie Farbe, Schriftart und Link-Farben und Formatierung bequem eingestellt werden.) - Fragen - Antworten - Tipps dazu hier ..

Moderator: lauras

Beiträge bitte im neuen Forum

Warum muss ich floaten

Beitragvon neuling11 » Sonntag 7. August 2011, 18:02

Hallo,

wenn ich meinen Container Inhalt in dem Container Umschluss, welcher Mittig im Browserfenster sein soll,
floate und zwar nach links, dann ist der Umschlusscontainer zu klein, also "Inhalt" geht auch noch außerhalb weiter.

Floate ich jetzt aber auch den Container Umschluss nach links, dann schließt er sich wieder ganz um den Container Inhalt.
Warum ist das so?
Und wie kann ich es vermeiden?

Code: Alles auswählen
/* RESET STYLESHEET */
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td{margin:0;padding:0}table{border-collapse:collapse;border-spacing:0}address,caption,cite,code,dfn,em,strong,th,var{font-style:normal;font-weight:400}ol,ul{list-style:none}caption,th{text-align:left}h1,h2,h3,h4,h5,h6{font-size:100%;font-weight:400}q:before,q:after{content:''}abbr,acronym,fieldset,img{border:0} /*Reset Ende*/

html, body {
    height: 100%;
}
body{
   background: #dbdbdb;
}
div.umschluss {
    width: 980px;
    background-color: #ffffff;
    margin: 20px auto 0 auto;
    font-family: 'Forum', cursive;
    font-size: 16px;
    line-height: 1.2em;
    display: block;
    position: static;
-webkit-box-shadow: 0px 0px 10px 1px #1f1f1f;
-moz-box-shadow: 0px 0px 10px 1px #1f1f1f;
box-shadow: 0px 0px 10px 1px #1f1f1f;
/* -webkit-box-shadow: 0px 0px 15px 2px ;
-moz-box-shadow: 0px 0px 15px 2px ;
box-shadow: 0px 0px 15px 2px ; */


}

#navigation {


    background: url(bgnav.png) repeat-x bottom #ffffff;
    text-align: right      ;
    height: 170px;
    margin: 0 12px 0 12px;


}
#navigation img {
    float: right;
    display: inline;


}
#navigation ul {

/* margin: 0 auto 0 auto; */
display: inline-block;
float: left;
margin-top: 67px;
margin-left: 10px;
text-align: center;







}
#navigation li {
    float: left;
    height:48px;
    padding: 4px;
    background: url(bgnavli.png) no-repeat;
    text-align: center;
      margin: 0 1px 0 0 ;
    display: block;
/* -webkit-box-shadow: 1px 1px 4px 0.2px #c2c2c2;
-moz-box-shadow: 1px 1px 4px 0.2px #c2c2c2;
box-shadow: 1px 1px 4px 0.2px #c2c2c2; */



}
#navigation li.span{
    background: url(bgnavliakt.png) no-repeat;
}
#navigation li.span:hover {
    background: url(bgnavliakt.png) no-repeat;;
}
#navigation li.span a{
    color: #ffffff;
}

#navigation li:hover  {
    background: url(bgnavlihov.png) no-repeat transparent;
}
#navigation li:hover a {
    color: white;
}

#navigation li a {
    color: #202020;
    font-family: Verdana;

    font-size: 14px;
    text-decoration: none;
    display: block;
    padding-top: 9px;
    height:  38px;
    width: 110px;




}

#inhalt {

    padding: 20px 15px 5px 15px;
    margin: 2px 10px 0 10px;
    background: #fcfeff;
    float: left;
display: block;
    background-color: green;

}
#rechts {
    float: right; width: 200px;
    background: silver;
    display: block
}
#footer {
    margin-bottom: 30px;
    float: left;
}

neuling11
HTML-Freund
 
Beiträge: 128
Registriert: Freitag 17. Dezember 2010, 19:08
Wohnort: Deutschland

Re: Warum muss ich floaten

Beitragvon Sarkkan » Sonntag 7. August 2011, 18:35

Ich habe dich zwar nicht ganz verstanden, was du von mir willst.. aber ich glaube der Satz "Wer floatet muss auch clearen" ist hier angebracht :wink:
Benutzeravatar
Sarkkan
HTML-Acrobat
 
Beiträge: 1557
Registriert: Montag 5. April 2010, 01:46
Wohnort: Bei Köln

Re: Warum muss ich floaten

Beitragvon neuling11 » Sonntag 7. August 2011, 18:59

Hallo,

ich habe es mal mit clearen versucht,
allerdings verstehe ich es immernoch nicht so recht.

Das CSS ist ja in meinem ersten Post..

der html Aufbau sieht so aus: <html>
<body>
<div.umschluss>
<divid:navigation>
<ul>
<li></li>
</ul>
</navigationsdiv>
<inhalt>
</inhalt>
<rechts>
</rechts>
<footer></footer>


Und im Anhang noch ein Bild des Problems, Inhalt ist hier grün.
Wo müsste ich jetzt clearen?
Dateianhänge
fehler.jpg
neuling11
HTML-Freund
 
Beiträge: 128
Registriert: Freitag 17. Dezember 2010, 19:08
Wohnort: Deutschland

Re: Warum muss ich floaten

Beitragvon Sarkkan » Sonntag 7. August 2011, 20:10

Nach dem Contetn oder nach dem right solltest du clearen^^

An dem Bild kann man eigentlich ganz gut verstehen, wie das clearen funktioniert:
Bild
Und dazu noch die passende Anleitung
Benutzeravatar
Sarkkan
HTML-Acrobat
 
Beiträge: 1557
Registriert: Montag 5. April 2010, 01:46
Wohnort: Bei Köln

Re: Warum muss ich floaten

Beitragvon neuling11 » Montag 8. August 2011, 12:56

Hallo,

ah, ok, schade, dass clearen nicht im Html-Seminar oder Webmaster-Crashkurs behandelt wird....
Ich konnte jetzt durch das clearen das Anzeigeproblem mit dem Footer beheben,
aber nicht von dem Container Umschluss, der wird weiterhin so komisch angezeigt.
Eigentlich sollte der sich doch von alleine strecken, da alle anderen Container in ihm sind :?:

Nochmal ein Bild, wie es jetzt aussieht und der CSS Code

Code: Alles auswählen
/* RESET STYLESHEET */
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td{margin:0;padding:0}table{border-collapse:collapse;border-spacing:0}address,caption,cite,code,dfn,em,strong,th,var{font-style:normal;font-weight:400}ol,ul{list-style:none}caption,th{text-align:left}h1,h2,h3,h4,h5,h6{font-size:100%;font-weight:400}q:before,q:after{content:''}abbr,acronym,fieldset,img{border:0} /*Reset Ende*/

html, body {
    height: 100%;
}
body{
   background: #dbdbdb;
}
div.umschluss {
      width: 980px;
      clear: right;
    background-color: #ffffff;
    margin: 20px auto 0 auto;
    font-family: 'Forum', cursive;
    font-size: 16px;
    line-height: 1.2em;
    display: block;
    position: relative;

   -webkit-box-shadow: 0px 0px 10px 1px #1f1f1f;
-moz-box-shadow: 0px 0px 10px 1px #1f1f1f;
box-shadow: 0px 0px 10px 1px #1f1f1f;
/* -webkit-box-shadow: 0px 0px 15px 2px ;
-moz-box-shadow: 0px 0px 15px 2px ;
box-shadow: 0px 0px 15px 2px ; */


}

#navigation {


    background: url(bgnav.png) repeat-x bottom #ffffff;
    text-align: right      ;
    height: 170px;
    margin: 0 12px 0 12px;


}
#navigation img {
    float: right;
    display: inline;


}
#navigation ul {

/* margin: 0 auto 0 auto; */
display: inline-block;
float: left;
margin-top: 67px;
margin-left: 10px;
text-align: center;







}
#navigation li {
    float: left;
    height:48px;
    padding: 4px;
    background: url(bgnavli.png) no-repeat;
    text-align: center;
      margin: 0 1px 0 0 ;
    display: block;
/* -webkit-box-shadow: 1px 1px 4px 0.2px #c2c2c2;
-moz-box-shadow: 1px 1px 4px 0.2px #c2c2c2;
box-shadow: 1px 1px 4px 0.2px #c2c2c2; */



}
#navigation li.span{
    background: url(bgnavliakt.png) no-repeat;
}
#navigation li.span:hover {
    background: url(bgnavliakt.png) no-repeat;;
}
#navigation li.span a{
    color: #ffffff;
}

#navigation li:hover  {
    background: url(bgnavlihov.png) no-repeat transparent;
}
#navigation li:hover a {
    color: white;
}

#navigation li a {
    color: #202020;
    font-family: Verdana;

    font-size: 14px;
    text-decoration: none;
    display: block;
    padding-top: 9px;
    height:  38px;
    width: 110px;




}

#inhalt {

    padding: 20px 15px 5px 15px;
    margin: 2px 10px 0 10px;
    background: #fcfeff;
    width: 690px;
    float: left;
    clear: left;
    display: block;



}
#rechts {
    float: right; width: 240px;
    clear: right;
    background: silver;

}
#footer {
    margin-bottom: 30px;

    display: block;
    float: left;
    clear: both;
}

Dateianhänge
asfasfaf.jpg
neuling11
HTML-Freund
 
Beiträge: 128
Registriert: Freitag 17. Dezember 2010, 19:08
Wohnort: Deutschland

Re: Warum muss ich floaten

Beitragvon Sarkkan » Montag 8. August 2011, 17:58

Genau, wenn alle Stricke reißen einfach alles floaten und clearen und und und :D
Hast du die Sache mit dem Floaten und Clearen überhaupt ansatzweise verstanden?

setzt mal bitte bevor du den umschluss schließt ein leeres Div, welches du in beide Richtungen clearst (clear: both);

PS: Laut Google wird es wenigstens einige male erwähnt :/
Benutzeravatar
Sarkkan
HTML-Acrobat
 
Beiträge: 1557
Registriert: Montag 5. April 2010, 01:46
Wohnort: Bei Köln

Re: Warum muss ich floaten

Beitragvon neuling11 » Montag 8. August 2011, 18:06

Hallo,

floaten verstehe ich gut, clearen jetzt auch.
Aber mal ehrlich, nichts ist verständlicher als Erklärungen von Axel Pratzner.

Da es jetzt mit dem leeren div funktioniert, könntest du mir noch erklären, wieso?
neuling11
HTML-Freund
 
Beiträge: 128
Registriert: Freitag 17. Dezember 2010, 19:08
Wohnort: Deutschland

Re: Warum muss ich floaten

Beitragvon Sarkkan » Montag 8. August 2011, 20:18

Inhalt der floatet ist quasi "weich" und hat somit keine wirkliche Höhe im Vergleich zu einem "festen" objekt.
Beim Clearen geben wir an, das das clearende Element das erste Element unter dem floatenden Elementen ist und sich erst darunter weitere Elemente ansiedeln dürfen, außerdem gilt es quasi als "festes" Element^^
Damit muss auch das Elternelement mindestens bis zu dem clearenden Element gehen.

Hoffe ist halbwegs verständlich^^
Benutzeravatar
Sarkkan
HTML-Acrobat
 
Beiträge: 1557
Registriert: Montag 5. April 2010, 01:46
Wohnort: Bei Köln


Beiträge bitte im neuen Forum

Zurück zu CSS

Wer ist online?

Mitglieder in diesem Forum: 0 Mitglieder und 1 Gast

cron