Pozycjonowanie względem kontenera Opcje

[jastu]

Witam,
mam problem z pozycjonowanie - chce zrobić coś na kształt podglądu sali w kinie tzn. układu miejsc
jak to poustawiać? próbwałem z pozition:relative i top/right ale wyhodza bzdury
(IMG:style_emoticons/default/facepalmxd.gif)

[matiit]

Użyłbym canvas do tego.

[Crozin]

Pokaż jak próbowałeś. Raczej będziesz musiał tutaj skorzystać z pozycjonowania absolutnego.

[jastu]

nie korzystałem wcześniej z canvas
próbowałem z position:relative, ale łapał od śdroka strony (od body?)
//edit
eh, macie rozwiązanie

[HTML] pobierz, plaintext 
    <div style="border:1px solid #444; height: 300px; width:300px; padding: 10px; position:absolute ; display: table; top:100px; left: 100px;" id="div_sala2">
 
 
 
        <span style=" border:1px solid #444; clear: inherit;  position: absolute; display: block; height: 25px; width:25px; top:0; left:0" onclick="alert('0x0')">0</span>
        <span style=" border:1px solid #444; clear: inherit; position: absolute; display: block; height: 25px; width:25px; top:50; left:50" onclick="alert('50x50')">5</span>
        <span style=" border:1px solid #444; clear: inherit; position: absolute; display: block; height: 25px; width:25px; top:100; left:100" onclick="alert('100x100')">100</span>
 
        <span style=" border:1px solid #444; clear:inherit; position: absolute; display: block; height: 25px; width:25px; top:0; left:100" onclick="alert('0x100')">x10</span>
        <span style=" border:1px solid #444; clear:inherit;  position: absolute; display: block; height: 25px; width:25px; top:100; left:0" onclick="alert('100x0')">10x</span>
    </div>
[HTML] pobierz, plaintext 

Ten post edytował jastu 7.01.2014, 21:23:19

[dannyviajero]

A czy nadałeś parametr position:relative dla diva względem którego chcesz pozycjonować elementy ?

divy z parametrem absolute są pozycjonowane względem elementu relatywnego więc spróbuj nadać paramer relative kontenerowi div względem którego chcesz poustawiać elementy i wtedy za pomocą top... left.... powinieneś bez problemu wszystko poustawiać. Często tak robiłem i nie było większych problemów.

Pozdrawiam.

[registropl]

A nie próbowałeś ze zwykłym

[CSS] pobierz, plaintext 
.sala {
    background:#333;
    width:400px;
    height:400px;
    padding:20px
}
 
.fotel {
    background:#00ffff;
    width:20px;
    height:20px;
    margin:5px;
    float:left;
    display:inline;
}
 
.zajety {
    background:#ff0000;
}
[CSS] pobierz, plaintext 

[HTML] pobierz, plaintext 
<div class="sala">
    <div class="fotel"></div>
    <div class="fotel"></div>
    <div class="fotel"></div>
    <div class="fotel"></div>
    <div class="fotel"></div>
    <div class="fotel"></div>
    <div class="fotel"></div>
    <div class="fotel"></div>
    <div class="fotel"></div>
    <div class="fotel zajety"></div>
    <div class="fotel zajety"></div>
    <div class="fotel zajety"></div>
    <div class="fotel zajety"></div>
    <div class="fotel zajety"></div>
    <div class="fotel zajety"></div>
    <div class="fotel zajety"></div>
    <div class="fotel zajety"></div>
    <div class="fotel"></div>
    <div class="fotel"></div>
    <div class="fotel"></div>
    <div class="fotel"></div>
</div>
[HTML] pobierz, plaintext