• Das Erstellen neuer Accounts wurde ausgesetzt. Bei berechtigtem Interesse bitte Kontaktaufnahme über die üblichen Wege. Beste Grüße der Admin

Floating madness

P

petz_e

New member
Hallo,

Ich habe da ein Problem mit einer einfachen Webpage. Der Footer wird nicht als letztes angezeigt, sondern direkt unter dem Header platziert. Das Problem ist wohl das floating des Contents (Thumbnails). Muss ich also alle Elemente der ganzen Seite floaten damit sie die Grösse ihrer Childs annehmen?

HTML:

Code: 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
  
  <title>Webpage</title>
  
  <link rel="stylesheet" type="text/css" href="styles.css" />
</head>

<body>
  
  <div id="page">
  
    <div id="header">
        <div id="banner"><p>Title</p></div>
    </div>
    
    <div id="content">
        
        <p>Main Area.</p>
        
        <div id="portfolio">
            <ul class="thumb">
                <li><a href="/"><img src="gallery/thumb/01.jpg" /></a></li>
                <li><a href="/"><img src="gallery/thumb/02.jpg" /></a></li>
                <li><a href="/"><img src="gallery/thumb/03.jpg" /></a></li>
                <li><a href="/"><img src="gallery/thumb/04.jpg" /></a></li>
                <li><a href="/"><img src="gallery/thumb/05.jpg" /></a></li>
            </ul>
        </div>

    
    </div>
    
    <div id="footer"><p>copyright information</p></div>
  </div>

</body>

</html>

STYLESHEET
Code: 
html {
    height: 100%;
}

body, dd, dl, dt, form, h1, h2, h3, h4, h5, h6, li, ol, p {
    margin: 0;
    border: 0 none transparent;
    padding: 0;
}

img {
    border: 0;
}

body {
    height: 100%;
    color: #000;
    font-family: Arial, Helvetica, sans-serif;
    text-align: center;
    background: #000 url(images/bg.png);
}

#page {
    width: 772px;
    margin: 0 auto;
    text-align: left;
}

#header {
    height: 243px;
    background: url(images/top.png) no-repeat;
}

#header p {
    text-indent: -9999px;
}

#content {
    float: left;
    padding: 10px;
    background: url(images/page.png) repeat-y;
}

#footer {
    height: 68px;
    background: url(images/foot.png) no-repeat;
}

#footer p {
    text-indent: -9999px;
}



#portfolio {
    float: left;
}


ul.thumb {
    margin: 0;
    padding: 0;
    width: 100%;
    list-style: none;
}

ul.thumb li {
    float: left;
    margin: 0;
    padding: 0;
}

Patrick
 
dkdenz schrieb:
Wenn Du floatest musst Du auch irgendwann, irgendwo clearen: clear: Umfließen von Elementen beenden: CSS-Referenz auf CSS 4 You - The Finest in Stylesheets
Zum Vergrößern anklicken....
Ich habe jetzt beim Footer ein clear gesetzt. Damit der Content-Container dieselbe Höhe hat wie das gefloatete Portfolio UL, habe ich dieses auch gefloatet. Wenn ich jetzt jedoch versuche ein Padding, also einen Innenabstand für den Content zu setzen, läuft die Breite über.

Wie kann man dieses Problem ungehen? Währe schon schön wenn ich einen globalen Innenabstand für den Inhalt des Hauptcontainers angeben könnte.

So sieht es jetzt aus:
Code: 
html {
    height: 100%;
}

body, dd, dl, dt, form, h1, h2, h3, h4, h5, h6, li, ol, p, a, img {
    margin: 0;
    padding: 0;
    border: 0 none transparent;
}

body {
    height: 100%;
    text-align: center;
    background: #000 url(images/bg.png);
}

#page {
    width: 772px;
    margin: 0 auto;
    background: #fff;
    text-align: left;
}

#header {
    height: 243px;
    background: red;
}

#content {
    float: left;
    clear: left;
    width: 772px;
    padding: 10px;
    background: green;
}

#footer {
    float: none;
    clear: left;
    height: 68px;
    background: blue;
}

/* Portfolio */

ul.thumb {
    margin: 0;
    padding: 0;
    width: 100%;
    list-style: none;
    float: left;
}

ul.thumb li {
    width: 160px;
    height: 120px;
    float: left;
}

Patrick
 
Zuletzt bearbeitet:
Ausgehend von Deinem zuerst geposteten Code und weil mir ein wenig schwindlig wurde vom vielen float, habe ich content und portfolio geändert:

PHP: 
#content {
    display: block;
    padding: 50px;
    background: url(images/page.png) repeat-y;
}

#portfolio {
    display:table;
}

Padding reduzierst Du natürlich wieder!
 
Ohne Float:
  • width: 100%;
  • padding: 10px;
wird korrekt angezeigt. Mit Float wird das Padding zusätzlich zu den 100% dazugerechnet. Also arbeite ich mit festen Breiten und ziehe das Padding von der Breite ab. Dann siehts wieder korrekt aus.
 
anna55 schrieb:
Verstehe trotzdem die vielen floats nicht.
Zum Vergrößern anklicken....
In meinem 2. Beispiel oder im 1?

Die Grundidee ist eine Thumbnail-Gallery, wobei ich die Bilder als unordered-list angebe und mit float nebeneinander setze. Ich habe mal gelesen dass man mit float auf 2 Dinge achten muss:

a) die Breite der gefloateten Elemente wird auf die kleinsmögliche Breite reduziert wenn keine explizite Breite angegeben ist, und

b) die Elterncontainer nehmen nicht mehr die Höhe der gefloateten Elemente an, es sei denn sie werden ebenfalls gefloatet. Und das habe ich im 2. Beispiel versucht zu machen. Jedoch endet das damit dass die gesamte Seite ein float: left bekommt :( Eine feste Höhe für die Elternobjekte ist ausgeschlossen, da ich ja nicht weiss wie hoch der Inhalt ist (der nachher dynamisch erzeugt wird).

Patrick
 
Zuletzt bearbeitet:
Du musst dich einloggen oder registrieren, um hier zu antworten.
Zurück
Oben