CSS: Afbeeldingen gaan buiten DIV

[spleethoven]

Ik heb een pagina waarin een div staat (handcontainer) met volgende css

Cascading Stylesheet: css

.handcontainer
{
    position:relative;
    width:500px;
    margin:auto;
    border:1px dashed #000000;
    height:100px;
    top:275px;
}

.card {
    height: 100px;
    width: 75px;
}

Met een javascript voeg ik hier wat divs aan toe, welk ongeveer een 75 pixels breed zijn. Aangezien het een soort van spel met kaarten is, is het best dat deze overlappen. ik zet dus op de dynamisch toegevoegde div een left van (aantalkaarten*37.5). Echter lijkt de css niet te registreren dat die left er staat. Van zodra er genoeg kaarten zijn, springen ze naar buiten de div, en gaan ze daar verder.

De left word wel ingesteld met inline css.

Voorbeeld:



Enig idee wat ik over het hoofd zie?

[ Voor 0% gewijzigd door MueR op 26-05-2011 17:01 ]

[MueR]

Die .card zal toch een vorm van positioning moeten hebben (tenzij je dat ook middels JS doet). Daarbij ook iets van een overflow?

[ Voor 3% gewijzigd door MueR op 26-05-2011 17:03 ]

[BasieP]

de .left van de card geeft ie op dmv JS ja. (zie startpost)

Ik vraag me ook af of er nog iets van floating oid wordt gebruikt, want het gedrag dat je browser toont lijkt daar wel op.
heb je die JS ook voor ons?

[418O2]

gewoon lekker absoluut positioneren die kaarten. en dan zo positioneren

pseudo:

JavaScript:

$("img.kaart").each(function() { $(this).css("left", ($(this).prevAll() *75)); });

[ Voor 5% gewijzigd door 418O2 op 26-05-2011 17:16 ]

[MueR]

BasieP schreef op donderdag 26 mei 2011 @ 17:11:
de .left van de card geeft ie op dmv JS ja. (zie startpost)

Ik mis wel de position:absolute oid

[spleethoven]

Het was een position:relative die er te veel stond

Positie van kaart op absoluut gezet en zo werkt het zoals het hoort.

Bedankt voor de suggesties!