Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: Pozycjonowanie względem kontenera
Forum PHP.pl > Forum > Po stronie przeglądarki > CSS
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
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
  1. <div style="border:1px solid #444; height: 300px; width:300px; padding: 10px; position:absolute ; display: table; top:100px; left: 100px;" id="div_sala2">
  2.  
  3.  
  4.  
  5. <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>
  6. <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>
  7. <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>
  8.  
  9. <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>
  10. <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>
  11. </div>
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
  1. .sala {
  2. background:#333;
  3. width:400px;
  4. height:400px;
  5. padding:20px
  6. }
  7.  
  8. .fotel {
  9. background:#00ffff;
  10. width:20px;
  11. height:20px;
  12. margin:5px;
  13. float:left;
  14. display:inline;
  15. }
  16.  
  17. .zajety {
  18. background:#ff0000;
  19. }

  1. <div class="sala">
  2. <div class="fotel"></div>
  3. <div class="fotel"></div>
  4. <div class="fotel"></div>
  5. <div class="fotel"></div>
  6. <div class="fotel"></div>
  7. <div class="fotel"></div>
  8. <div class="fotel"></div>
  9. <div class="fotel"></div>
  10. <div class="fotel"></div>
  11. <div class="fotel zajety"></div>
  12. <div class="fotel zajety"></div>
  13. <div class="fotel zajety"></div>
  14. <div class="fotel zajety"></div>
  15. <div class="fotel zajety"></div>
  16. <div class="fotel zajety"></div>
  17. <div class="fotel zajety"></div>
  18. <div class="fotel zajety"></div>
  19. <div class="fotel"></div>
  20. <div class="fotel"></div>
  21. <div class="fotel"></div>
  22. <div class="fotel"></div>
  23. </div>
To jest wersja lo-fi głównej zawartości. Aby zobaczyć pełną wersję z większą zawartością, obrazkami i formatowaniem proszę kliknij tutaj.
Invision Power Board © 2001-2025 Invision Power Services, Inc.