[Peter_Holm]

Har följande problem:

Jag har en div-låda på 300x300pix.

Jag vill positionera "smådivvar" säg t.ex. 50x50pix i den lådan som ska innehålla bilder på 50x50pix som ska vara a:länkar.

Jag får det att fungera med en "smådiv" med relativ pos och top- och -left angivelser. Men när jag lägger till en till "smådiv" så går det inte att positionera den korrekt för det verkar som den påverkas av den första "smådiven"...

Jag vill egentligen ha image maps men lightbox funkar inte då.

HTML
<div id="test">
<div class="lankbildpos1">[img]../jpg/lankbild1.jpg[/img]</div>
<div class="lankbildpos2">[img]../jpg/lankbild1.jpg[/img]</div>
</div>

CSS
#test {
background-image: url(../jpg/fejkkarta.jpg);
background-repeat: no-repeat;
height: 300px;
width: 300px;
}
.lankbildpos1 {
width: 50px;
background-color: #066;
height: 50px;
position: relative;
top: 20px;
left: 20px;
}
.lankbildpos2 {
width: 50px;
background-color: #39F;
height: 50px;
position: relative;
top: 0px; <-- det här ignorerar ff..
left: 0px; <-- det här också.
}

Producerar:

[Syke]

EDIT: Rensat

Asch .. du menar inte att du ska fylla hela stora lådan med smådivvar efter varandra, utan du vill positionera ut dem lite hur som helst?

Om objekt är relativt positionerade tar de fortfarande upp sin "orginalplats" i flödet. Det du vill göra (tror jag) är att sätta din containerdiv till relative och smådivvarna till absolute.

[Althalos]

Om du vet precis hur stor lådan är och precis hur stora bilderna är så borde du ju veta vart du vill att varje låda ska hamna och då hade du ju kunnat använda position:absolute; såvitt jag förstår.

Det fungerar som så att den stora lådan är position:relative; sedan bild nr.1 är t. ex. {position:absolute; top:0px;left:0px;} andra är {position:absolute; top:0px;left:50px;}, tredje är {position:absolute; top:0px;left:100px;} och så vidare.. sedan nästa rad är samma sak fast top kan t. ex. vara, som minst för att 50x50 inte ska överlappa varandra, 50px...

[Peter_Holm]

Den där "div id=test" finns ju i sin tur på en webbsida med innehåll, jag har tänkt göra en "karta", (därav fejkkartan) där jag positionerar in bilderna i "rummen" och har dom klickbara...

Bara för att lightbox strular med imagemaps...finns folk som fått det att funka men inte jag.

Men innehållet på sidan där denna div id=test ska ligga är ju inte statisk. Ska prova med relative på test-divven och återkommer.

Tack för er tid.

[terbon]

Varför inte bara

<div id="test">
 * *<ul>
 * * * *<li>
 * * * * * *<a href="bild1.jpg" rel="lightbox"><img src="../jpg/lankbild1.jpg" /></a>
 * * * * * *<a href="bild2.jpg" rel="lightbox"><img src="../jpg/lankbild2.jpg" /></a>
 * * * *</li>
 * *</ul>
</div>

Och sätta samma storlek på ul som på diven, och sen ha[*] likastor som länkbilderna, som jag antar är likastora som #tests: storlek delat med antal bilder på raden. Och sen får du köra float: left, eller display: inline

[terbon]

Originally posted by Peter_Holm@Jan 2 2009, 15:10
.lankbildpos2 {
width: 50px;
background-color: #39F;
height: 50px;
position: relative;
top: 0px; <-- det här ignorerar ff..
left: 0px; <-- det här också.
}

Det är ju klart att ff ignorerar det. Det är ju fel. Du kan inte använda top, left med position relative, du får använda margin och padding

[martine]

Originally posted by terbon@Jan 3 2009, 13:17
Det är ju klart att ff ignorerar det. Det är ju fel. Du kan inte använda top, left med position relative, du får använda margin och padding

Där har du fel. Titta på w3c-specken.

Klart man kan sätta top/right/bottom/left med position: relative precis som med fixed|absolute, det är bara med static som de inte har någon funktion.

Sätter du position: relative och exempelvis top: 3px; left: 3px; så får du en relativ förskjutning (alltså en förskjutning gentemot var det annars skulle ha befunnit sig) av elementet med 3px vilket kan vara praktiskt ibland.

[Peter_Holm]

Tack för era svar.

Jag labbade lite med positioner på en massa smådivvar och tröttnade så jag gjorde såhär.

Tabell med 1rad och 2col.

Karta i vänstra col. Imagemaps i kartans rum som länkar. sen ett gäng gömda div:ar i den andra kolumnen som visas onmouseover respektive imagemap, dw:s inbyggda behaviours. Funkar okey...dvs struntade i lightbox på den sidan.

MVH

[terbon]

Oj, missat det (borde nog kollat upp) har aldrig själv använt nått annat än margin-top, margin-left osv. Shi fick jag

[martine]

Originally posted by terbon@Jan 3 2009, 19:18
Oj, missat det (borde nog kollat upp) har aldrig själv använt nått annat än margin-top, margin-left osv. Shi fick jag

Jo, det gäller att man är säker här på wn.se, här kommer man inte undan med några halvsanningar… ;-)