CSS width bei position absolute

lima-city → Forum → Die eigene Homepage → HTML, CSS & Javascript

Autor dieses Themas

22:17, 12.4.2013

Hallo Leute,
ich hänge jetzt schon länger an einem Problem und zwar auf http://photography.futureweb-berlin.de/. Ich möchte die jeweiligen Alben dort in einer Zeile anzeigen lassen. Das Problem ist nun dass die Breite bei position absolute sich nicht anpasst.

Code sieht so aus:

Für ein Album im html:

<div class="row" style="margin-top: 50px;">
            <div class="rowflow">
            </div>

            <img src="gallery/...">
            <img src="gallery/...">
            <img src="gallery/...">
            <img src="gallery/...">
            <img src="gallery/...">
            <img src="gallery/...">
            <img src="gallery/...">
            <img src="gallery/...">
    </div>

im css:

.rowflow{
    background: #BF7230;
    opacity: 0.5;
    position: absolute;
    height: 100%;
    width: 100%;
    -webkit-transition: all 300ms ease-in-out;
    -moz-transition: all 300ms ease-in-out;
    -ms-transition: all 300ms ease-in-out;
    -o-transition: all 300ms ease-in-out;
    transition: all 300ms ease-in-out;
}

.rowflow:hover{
    opacity: 0;
}

.row{
    margin-bottom: 0;
    position: relative;
    height: 100%;
    width: 100%;
    overflow: auto;
    white-space: nowrap;

    background: #ff9030;
    clear: both;
    float: left;
    scrollbar-3dlight-color:#D3935D;
    scrollbar-arrow-color:#6D390D;
    scrollbar-base-color:#6D390D;
    scrollbar-track-color:#0e0501;
    scrollbar-darkshadow-color:#140A01;
    scrollbar-face-color:#7C3904;
    scrollbar-highlight-color:#AC5001;
    scrollbar-shadow-color:#000;
}

.row img{
    height: 150px;
}

Ein kleiner Scollbareffekt ist drin und man soll jedes scrollen können.

Geht das über css zu lösen oder muss ich Javascript benutzen?
Ich hoffe das reicht an Informationen und es ist verständlich genug erklärt. Wenn nicht bitte einfach sagen ;)

Vielen Dank schon mal im Vorraus
Schachfeld

Beitrag zuletzt geändert: 12.4.2013 22:25:03 von schachfeld

Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!

lima-city: Gratis werbefreier Webspace für deine eigene Homepage
hc-tools

hc-tools hat kostenlosen Webspace.

14:05, 13.4.2013
Ehrlich gesagt habe ich nicht wirklich verstanden was du machen willst. Deshalb meine Vermutung: Du willst eine minimale Breite, die wenn der Text länger wird verlängert wird?

Dann solltest du min-width im CSS bneutzen.
Autor dieses Themas
schachfeld

schachfeld hat kostenlosen Webspace.
23:08, 13.4.2013
Ich habe heute noch ein wenig recherchiert und meine Frage überdacht also nun die Frage:

Wie kann ich die Breite eines div-Containers automatisch anpassen lassen?

Ich habe es schon mit
```
display: inline-block
```
probiert aber das zerstört meine scrollmöglichkeit.
alphara

alphara hat kostenlosen Webspace.
23:16, 13.4.2013
Kann sein, dass ich das immer noch nicht richtig verstanden habe, aber vielleicht hilft dir
```
... {
    position:absolute;
    left:0px;
    right:0px;
    overflow:auto;
...
}
```
irgendwie weiter. Dieses Element ist immer so breit, wie es das Parent zulässt und scrollt, sobald es nötig ist.
Autor dieses Themas
schachfeld

schachfeld hat kostenlosen Webspace.

23:24, 13.4.2013
Danke für die Antwort aber leider ist das immer noch nicht die Lösung ;)
Vielleicht habe ich meine Frage falsch formuliert...
Ich möchte einen div-Container der sich in der Breite seinem Inhalt anpasst und dabei nicht die scroll-Funktion bei der nur das eigene div-Element gescrollt wird entfernt wird.

Es ist sehr schwer das zu erklären und ich glaube ich bin dadrin auch nicht so gut ;D Aber trotzdem danke für die Hilfsbereitschaft :)
Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!

lima-city: Gratis werbefreier Webspace für deine eigene Homepage

Dir gefällt dieses Thema?

Über lima-city

lima-city bietet dir kostenlosen und werbefreien Speicherplatz für Deine Homepage. Sofort anmelden und direkt loslegen mit Webspace, PHP, Datenbanken, günstigen Domains und einer tollen Community!

kostenloser Webspace werbefrei: lima-city