Mehrere divs im einem gesamt-div und ein daraus resultierendes floating Problem

    Hallo @ all,


    ich habe folgendes Problem:



    [Blockierte Grafik: http://www.tassilo.sturm.serve…ige/seiten_demo_float.jpg]


    Ich möchte das rot eingekästelte div (worin sich die orange gekästelten
    (unter)-divs befinden neben dem blau eingekästelten div anordnen


    Ich weiss, das die breite des rot-eingekästelten div zusammen mit dem blau eingekästelten div BREITER als der viewport ist.
    Das soll auch so sein, ich möchte ein horizontal scrollbare Webseite.


    Leider muss ich die orange eingekästelten (unter)-divs in einem zusammenhängenden (hier rot) zusammenfassen, da ich später mit anker zu dem entsprechenden (unter)-div springen möchte!
    Dabei wird der Inhalt der gelb umrandeten divs später noch breiter, hier zur Anschauung hab ich die mal nicht so breit gemacht!


    http://goo.gl/xYQxQR


    Ich habe alles ausprobiert: display-inline-block hier, position: ablosute;
    dort, in allen erdenklichen variationen!


    Wer kann mir dabei bitte Helfen?


    Ich bin am verzweifeln!



    Grüsse der einsiedelnde

    PRIMA, DANKE Dir!


    Also muss ich mich dem Thema box-size-modelling widmen...


    Aber was mich nun interessiert, alle Angaben sind ja nun in px , ob das nun auch in % Angaben funktioniert (Stichwort responsive Design <<< falls dies überhaupt mit einem horizontalen Design funktioniert)


    Die Gesamtlängen-Angaben müssen wohl in px angegeben werden, sonst gleicht sich ja alles im Längenverhältnis an....


    Ich habe den Code mal ein wenig angepasst, siehe: http://goo.gl/xYQxQR
    *seufZ*


    Gruss T.
    Alles gut... soweit habe ich es...


    siehe: http://goo.gl/xYQxQR


    Nur sind momentan alle Angaben in px das möchte ich ändern, so das alle Angaben
    in % sind!
    Falls dies überhaupt möglich ist!!!!


    Da ergeben sich mir ein Paar Fragen:


    Es ist nicht so einfach, width für das blaue div sowie die einzelnen gelben divs im
    einfassenden roten div in % umzusetzen........
    Ich meine damit:
    Entweder: ich behalte die Angabe für den "wrapper" in px (hier 10800 irgendwas px.....)
    also alle divs nebeneinander sind irsinnig breit....
    und die div`s ( blau rot sowie die unterdivs in gelb) geb ich in % an......
    dann bedeutet das, das sich beispielsweise beim blauen div die 15% auf die 10800
    irgendwas px beziehen..... sehe ich das richtig?
    und so muss ich dann weitermachen: das rote div 5 stck. * 15% / das einzelne gelbe
    15%.......
    trotzalledem funktioniert das nicht, warum sehe ich das falsch?


    Achso oder ich mach die Angabe der "wrapper" auch in %, klaro das müssten dann
    ja mehr als 100% sein........
    Auch wenn ich das mache, funktioniert das nicht, warum?


    Igendwas bezieht sich immer auf irgendwas, aber es ist nicht klar ersichtlich worauf?


    Ich habe da keinen Überblick mehr!


    Wer kann mir da weiterhelfen und einen klaren Blick verschaffen!


    *seufZ*ende grüsse

    Einfacher wird es, wenn du in vw (viewportWidth) arbeitest ..
    Dann hast du nicht das prozentuale gedöns mit dem parent sondern kannst in ruhe arbeiten..


    Dein body hat 100vw, dein wrap z.B. 900vw
    Dann kannst du die 900vw in deinem wrap beliebig aufteilen, also wenn du 9 boxen im wrap hast, kann jede genau so breit sein wie der Bildschirm (100vw)


    Achja, prozent angaben beziehen sich immer auf das eltern element oder das worauf sich das element referenziert ..

    vielen DANK!!!!


    es funktioniert, bin auch schon ein stück weiter, siehe: http://goo.gl/xYQxQR
    nur was ich nicht verstehe, der wrapper ist ein wenig grösser als der rote content..... es passt aber, wenn ich den viewport im FF auf 300% und im IE auf 400% erhöhe


    ansonsten, wenn ich den schwarzen rahmen im verhältnis zum roten rahmen verkleinere dann springt der rot-umrandete content in die nächste zeile um
    (bei 300 bzw. 400%iger vergrösserung des viewports)


    also ist es irgendwie so eine art puffer für irgendwas........ naja kann man eventuell verschmerzen da ja sonst alles klappt.........


    die anker-funktion funzt auch schon, was ich noch machen werde ist, das ich in jedem gelb-umrandeten div, ganz unten, noch einen anker-link nach HOME setzen werde
    (oder eventuell NUR ein anker-link zum vorhergehenden div-bereich, mal sehen.......... was meinst du, ist sinnvoller?)


    jetzt ist es noch so, das sich der "header" mitbewegt, als ich ihn fixed machen wollte (position: fixed) , dann rutschte der untere div-salat weiter nach oben .... :o(


    wieder so ein fehler......... *grrrrrr*


    B) um das menue (nav) neben dem titel zu bekommen (jetzt ist die "nav)" ja noch darunter, muss ich da wieder irgendwo clear anwenden, oder wie bekomme ich anders hin?


    C) wenn man den viewport vergrössert (strg++) bleiben ja nun die einzelnen divs in der breite des viewports, das ist gut so,
    und der inhalt verteilt sich weiter nach unten....... mal sehen, villeicht kommt nicht so viel content in son div das man noch viel vertical scrollen müsste......


    nunja....... gute n8


    t.

    Das Platz-Puffer problem ist denke ich wegen der Outline..
    Das mit dem Header.. gib doch einfach nur dem 'slider' overflow: scroll; dann musst du nix fixen.
    Ansonnsten, ein gefixtes oder absolutes element, hat keine höhe in dem sinne mehr.. hier musst du mit padding oder margin die Höhe ausgleichen..

    Aja, verstehe, es summieren sich ja auch die 2px für die outlines...... (die kommen später ja sowieso weg, sie sind momentan nur, das ich mir ein besseres Bild aller Grössen / Grössenverhältnisse machen kann und ob alles passt....


    Mit "slider" meinst Du warscheinlich den Wapper und/oder was darin untergeordnet ist.......


    Also werde ich es mal mit "overflow: scroll;" probieren.......


    DANKE.....
    also, ich muss es doch mit "position: fixed;" lösen..... und es geht.......


    doch was ich momentan noch nicht optimal finde, da beim vergrössern das horizontale menü in den content hineinragt..........


    ich habe mal dem h3 und auch dem header ein position: absolute mitgegeben, doch irgendwie will das menü nicht ganz nach oben,


    was gut wäre dann überschneidet sich nicht beiderlei inhalt.......

    Einmal editiert, zuletzt von einsiedler () aus folgendem Grund: also, ich muss es doch mit "position: fixed;" lösen..... und es geht....... doch was ich momentan noch nicht optimal finde, da beim vergrössern das horizontale menü in den content hineinragt.......... ich habe mal dem h3 und auch dem header ein position: absolute mitgegeben, doch irgendwie will das menü nicht ganz nach oben, was gut wäre dann überschneidet sich nicht beiderlei inhalt.......

    Da sind so einige if - then Fälle, das ist sehr unübersichtlich was alles zu bedenken ist....


    Ich meinte wenn man mit strg++ vergrössert, dann sollte doch auch alles stimmen........


    Nunja........


    Ich habe mal testweise ein Foto eingefügt, liege ich da richtig?


    <figure class="imgbox"> <img src="fotos/demofotos_700px/erdbeerteller_web.jpg" width="700" height="700" alt="Bild1"> </figure>


    und das css:


    figure {
    display: table-cell;
    padding: 0 0 0 0;
    text-align: center;
    }


    figure img {
    margin: 0; padding: 0;
    width: 100%; height: auto;
    }


    .imgbox {
    margin: 0; padding: 0;
    width: 36.45vw;
    }




    zumindest skaliert das Foto richtig mit wenn man mit strg++ (vergrössert) ......


    ist das richtig so.... und das foto mit 700 * 700 px richtig skaliert????



    gruss t.

    Zitat von einsiedler

    Ich meinte wenn man mit strg++ vergrössert, dann sollte doch auch alles stimmen........


    NEINNEINNEINNEIN
    VERGISS DAS EINFACH UND SOFORT!!!!
    Wirklich, wer macht das und wofür zur hölle sollte man sich eine Website in 200% anschauen wollen?
    Einfach nein.


    Ne, echt nicht, einfach NEIN :'D


    Benutzer kommt mit 100% und fertig aus.
    Ich würde schon fast meine Hand ins Feuer legen das das etwa 99.9% der Web-agenturen das auchnicht beachten.. (verbessert mich wenn das Falch ist ^^)

    okay okay ;o))))))


    aber sag mal, die einbindung des img ist doch richtig oder?


    das img steht im verhältnis zur übrigen seitenbreite!!!!! richtig????


    ohne dem : width: 100%; height: auto;


    werden die fotos auf 1600 irgendwas px breite skaliert.......


    also muss man eine "box" drum machen , oder?


    (hier imgbox)

    also ein img wird über

    HTML
    <img src="hier/die/url.png" alt="beschreibung">

    Eingebunden.. wenn es muss kann eine Box drum rim, muss aber nicht.
    Das bild wird automatisch so breit und hoch wie es halt ist.
    Verändern würde ich daran, wenn es muss, das es halt mindestens so breit ist wie der bildschrim oder mindestens so hoch.
    In manchen browsern kann man inzwischen auch schon einstellen das es automatisch das Elternelement ausfüllt ( object-fit: cover; )
    Was ich oft für bilder hab

    CSS
    img{
  max-width: 100%;
  width: 100%;
  height: auto;
  display: block;
}

    Das findet man 'oft' in meinen stylesheets

Jetzt mitmachen!

Sie haben noch kein Benutzerkonto auf unserer Seite? Registrieren Sie sich kostenlos und nehmen Sie an unserer Community teil!

Benutzerkonto erstellen Anmelden