Ergebnis 1 bis 9 von 9
  1. #1
    petz_e ist offline Routinier
    registriert
    14-03-2006
    Beiträge
    258

    Floating madness

    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

  2. #2
    Avatar von dkdenz
    dkdenz ist offline Foren-Gott
    registriert
    13-04-2004
    Ort
    Lübeck
    Beiträge
    12.050

  3. #3
    petz_e ist offline Routinier
    registriert
    14-03-2006
    Beiträge
    258

    AW: Floating madness

    Zitat Zitat von dkdenz Beitrag anzeigen
    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
    Geändert von petz_e (12-08-2008 um 19:35 Uhr)

  4. #4
    Avatar von anna55
    anna55 ist offline Moderator
    registriert
    06-02-2006
    Ort
    Taunusstein
    Beiträge
    3.430

    AW: Floating madness

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

    PHP-Code:
    #content {
        
    displayblock;
        
    padding50px;
        
    backgroundurl(images/page.pngrepeat-y;
    }

    #portfolio {
        
    display:table;

    Padding reduzierst Du natürlich wieder!


    .:Taunusstein - Nachrichten und Kommentare


    "Ich bin doch lieber jeden Tag glücklich als im Recht."
    (Per Anhalter durch die Galaxis)

  5. #5
    petz_e ist offline Routinier
    registriert
    14-03-2006
    Beiträge
    258

    AW: Floating madness


  6. #6
    Avatar von anna55
    anna55 ist offline Moderator
    registriert
    06-02-2006
    Ort
    Taunusstein
    Beiträge
    3.430

    AW: Floating madness

    Nun, der IE hätte das nicht nötig gehabt. Der FF hat mit der Höhe gezickt. Das Aussehen war identisch mit FF2, Opera, Safari, IE6 und IE7. Du kannst ja mal hier schauen:
    IE NetRenderer - Browser Compatibility Check - (für die IEs)


    .:Taunusstein - Nachrichten und Kommentare


    "Ich bin doch lieber jeden Tag glücklich als im Recht."
    (Per Anhalter durch die Galaxis)

  7. #7
    petz_e ist offline Routinier
    registriert
    14-03-2006
    Beiträge
    258

    AW: Floating madness

    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.

  8. #8
    Avatar von anna55
    anna55 ist offline Moderator
    registriert
    06-02-2006
    Ort
    Taunusstein
    Beiträge
    3.430

    AW: Floating madness

    Zitat Zitat von petz_e Beitrag anzeigen
    Also arbeite ich mit festen Breiten und ziehe das Padding von der Breite ab. Dann siehts wieder korrekt aus.
    Klar geht das auch, zumal Du bei page eine feste Breite angegeben hast. Verstehe trotzdem die vielen floats nicht.


    .:Taunusstein - Nachrichten und Kommentare


    "Ich bin doch lieber jeden Tag glücklich als im Recht."
    (Per Anhalter durch die Galaxis)

  9. #9
    petz_e ist offline Routinier
    registriert
    14-03-2006
    Beiträge
    258

    AW: Floating madness

    Zitat Zitat von anna55 Beitrag anzeigen
    Verstehe trotzdem die vielen floats nicht.
    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
    Geändert von petz_e (13-08-2008 um 14:30 Uhr)

Ähnliche Themen

  1. Floating Menü
    Von Wugli im Forum JavaScript
    Antworten: 3
    Letzter Beitrag: 06-03-2008, 12:36
  2. Floating Galerie
    Von Prissi1985 im Forum JavaScript
    Antworten: 3
    Letzter Beitrag: 27-10-2006, 14:16
  3. Floating ad/ Layer ad Editor oder Script gesucht
    Von roteisen im Forum JavaScript
    Antworten: 0
    Letzter Beitrag: 22-08-2006, 16:17

Lesezeichen

Berechtigungen

  • Neue Themen erstellen: Nein
  • Themen beantworten: Nein
  • Anhänge hochladen: Nein
  • Beiträge bearbeiten: Nein
  •