tutorials.de Buch-Aktion 05/2012
ERLEDIGT
JA
ANTWORTEN
4
ZUGRIFFE
497
EMPFEHLEN
  • An Twitter übertragen
  • An Facebook übertragen
AUF DIESES THEMA
ANTWORTEN
  1. 27.08.11 13:14 #1
    Avatar von erik s.
    erik s. erik s. ist offline Mitglied Brokat
    Registriert seit
    Mar 2002
    Ort
    Frankfurt (Hessen)
    Beiträge
    317
    Hi,

    das Topic ist eventuell etwas verwirrend, ich versuche es zu entwirren.
    Ich möchte für einen DIV-Layer, der die Eigenschaft overflow:hidden hat, eine eigene Scrollfunktion erstellen. In diesem Layer sollen viele kleine, gleichgroße DIV-Blöcke immer in einer Zeile nebeneinander stehen, die es dann zu scrollen gilt.
    Das Problem ist bisher, dass die überstehenden Blöcke aufgrund der beschränkten Breite des Wrappers dann in die nächste Zeile geschoben werden.

    Mein Code bisher:
    Code html:
    1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
        <title>div test</title>
        <style type="text/css">
            body  {
                background-color:   #ddd;
            }
            .outer_wrapper  {
                border:             1px dotted #000;
                height:             85px;
                overflow:           hidden;
                position:           relative;
                width:              190px;
            }
            .inner_wrapper  {
                white-space:        nowrap;
                width:              auto;
            }
            .block  {
                background-color:   #333333;
                color:              #fff;
                display:            inline-block;
                float:              left;
                height:             80px;
                margin:             1px;
                width:              80px;
            }
        </style>
    </head>
    <body>
        <div class="outer_wrapper">
            <div class="inner_wrapper" style="">
                <div class="block" style="">
                    Block 1
                </div>
                <div class="block" style="">
                    Block 2
                </div>
                <div class="block" style="">
                    Block 3
                </div>
            </div>
        </div>
        <br clear="all" />
        <div class="inner_wrapper" style="">
            <div class="block" style="">
                Block 1
            </div>
            <div class="block" style="">
                Block 2
            </div>
            <div class="block" style="">
                Block 3
            </div>
        </div>
    </body>
</html>
    Der zweite, einzeln stehende innere DIV-Layer soll zeigen, wie es quasi in dem äußeren Layer aussehen soll.
    Das Ganze sieht dann so aus:
    http://www.web4ward.de/upload/div-layer.png
    Aussehen sollte es aber so (mit Photoshop erstellt):
    http://www.web4ward.de/upload/div-layer-soll.png

    Danke schon mal.

    EDIT: PS: Die Anzahl der Blöcke und damit die Breite des inneren Wrappers soll variabel sein.
    Geändert von erik s. (27.08.11 um 13:18 Uhr) Grund: PS't
     
    Zitieren Zitieren
  2. 27.08.11 13:54 #2
    Avatar von erik s.
    erik s. erik s. ist offline Mitglied Brokat
    Registriert seit
    Mar 2002
    Ort
    Frankfurt (Hessen)
    Beiträge
    317
    Okay, hat sich schon erledigt.
    Wenn man die float-Eigenschaft der Blöcke weglässt, klappt's auch

    Jetzt muss ich mich nur noch bei mir selber bedanken können
     
    Zitieren Zitieren
  3. 27.08.11 18:21 #3
    Avatar von erik s.
    erik s. erik s. ist offline Mitglied Brokat
    Registriert seit
    Mar 2002
    Ort
    Frankfurt (Hessen)
    Beiträge
    317
    Das läuft dann quasi auf das Gleiche hinaus am Ende. Aber gut zu wissen, dass Andere das Problem auch schon zu bewältigen hatten

    Gruß
     
    Zitieren Zitieren
  4. 27.08.11 23:21 #4
    Avatar von erik s.
    erik s. erik s. ist offline Mitglied Brokat
    Registriert seit
    Mar 2002
    Ort
    Frankfurt (Hessen)
    Beiträge
    317
    Da es eher unüblich ist, Listen so weit zu "verschandeln", dass deren Elemente nebeneinander sitzen, gehe ich davon aus, dass das auch nicht dein erster Versuch war
     
    Zitieren Zitieren
  5. 28.08.11 08:32 #5
    Avatar von erik s.
    erik s. erik s. ist offline Mitglied Brokat
    Registriert seit
    Mar 2002
    Ort
    Frankfurt (Hessen)
    Beiträge
    317
    Uff, meine Güte. Hab ich dich - nein, Moment - hast DU dich an einem schlechten Tag erwischt?
    Bleib mal ruhig, du hättest deinen "Danke-Bonus-Punkt" schon noch bekommen. Ich versteh bis heute noch nicht, wie man so besessen darauf sein kann. Sei's drum.

    Es tut mir wirklich ausgesprochen leid, dass dich meine Annahme in deiner Ehre angekratzt hat. Ich habe bisher tatsächlich noch nicht mit horizontalen Listen gearbeitet bzw. habe diese Möglichkeit noch nicht gesehen. Dafür: danke.

    Aber eins muss ich dir auch noch mit auf den Weg geben, da ich weiß, dass du auf jeden Fall hier nochmal reinschauen wirst (dein Ego drängt dich dazu ):
    Du bist also der Typ Menschenkenner, der nach dem ersten Wortwechsel seinen gegenüber zu 100% ausmachen kann und sich nicht die Mühe macht, mal genauer hinzuhören/-sehen. Dass ich jetzt einen Platz auf deiner Ignorier-Liste bekommen habe, kratzt nicht mal am Klarlack meines Egos. Aber danke für den Hinweis.

    Schönen Sonntag noch.
     
    Zitieren Zitieren
« Leidiges Thema: Zentrierung... | CSS DIV Layer untereinander zentrieren und Größe automatisch an Inhalt anpassen »

Ähnliche Themen

  1. Overflow:hidden
    Von RedShot im Forum CSS
    Antworten: 2
    Letzter Beitrag: 29.01.10, 22:32
  2. overflow:hidden im IE
    Von Templorials im Forum CSS
    Antworten: 8
    Letzter Beitrag: 16.07.08, 17:53
  3. overflow:hidden mit div Containern
    Von schleckerbeck im Forum CSS
    Antworten: 8
    Letzter Beitrag: 26.07.07, 16:36
  4. Warum liegen die Blöcke nicht nebeneinander?
    Von Spelmann im Forum CSS
    Antworten: 4
    Letzter Beitrag: 04.07.07, 19:07
  5. [CSS] overflow:hidden für Safari?
    Von Heavensdoor im Forum CSS
    Antworten: 0
    Letzter Beitrag: 27.08.04, 12:24