Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: Pozycjonowanie relatywne bloków
Forum PHP.pl > Forum > Po stronie przeglądarki > CSS
sniffer
26.02.2006, 10:57:45
Witam wszystkich,

naszukałem się troche materiałów na powyższy temat, lecz nigdzie nie znalałem nic stosownego do omawianego problemu. Wszystkie artukuły i wypowiedzi ludzi na jakie natrafiłem były mało informacjo-dawcze lub wogóle mijały się z tematem.

Problem jaki spróbuje tu opisać, i miejmy nadzieję wraz ze społecznością rozwiązać, dotyczy, jak po temacie można wywnioskować, pozycjonowania.

Defakto chodzi mi tu o pozycjonowanie/układ relatywny elementów na stronie. Występować muszą ponadto następujące zależności pomiędzy blokami:
1. Wszystkie bloki muszą zachowywać stosowny odstęp od bloków sąsiednich, wjeżdżanie na inne jest niedopuszczalne.
2. Niektóre bloki są fixed width (tzn mają ustaloną szerokość) inne zajmują dostępne miejsce między blokami (brzegami strony, brzegiem strony a blokiem) przy zachowaniu 1.
3. Oczywiście co blok to inna wysokość, datego blok o szerokości większej niż blok poprzedzający od góry (możemy mówić tu o overflow'ingu) powinien zostać umieszczony do lewej, jednakże jego pozycja top powinna wynosić: 'koniec najdłuższego bloku' + odstęp.
4. Dla bloków umieszczanych jeden pod drógim (w tej samej kolumnie), mających tą samą szerokość (typ), możemy stosować div'y obejmujące w celu zgrupowania bloków i łatwiejszego pozycjonowania.

Poprzez blok rozumie jakiegoś div'a zawierającego inne elementy i/lub tekst, które w pozycjonowaniu nie biorą udziału.

Jak pisałem wyżej overflow bloku nie wchodzi w grę, dlatego wyróżniam wiele typów bloków w celu uproszczenia sprawy. Główne to: block - fixed width, mainblock - zmienne width, multiblock - zmienne width, posiada szerokość jak mainblock + szerokość kolumny/bloku popredzającego lub następnego.

Bloki typu block i mainblock nie mogą występować w tej samej 'kolumnie'. Mainblock może występować tylko raz w danej lini (row, wiersz) [bloki tego typu powinny znajdować się w jednej 'kolumnie', która zależnie od obszaru roboczego przeglądarki będzie zmieniać szerokość]

Dla uniknięcia dwuznacznośći, nie chcę stosować tu podziału na kolumny, czyli robić div'ów zawierających kolejne bloki. Mija się to z celem kiedy blok zajmuje dwie kolumny, wobec czego zasłaniał by treść następnej kolumny. [chyba, że istnieje do tego jakiś woraround :-) chętnie dowiem się jak to zrobić za pomocą css+div only]

Dla graficznego ukazania powyższego zamieszczam małego drafta:



Myśle, że oddaje to co wyżej napisałem. Pole pomiędzy blokami jest wolne.

To myśle na tyle w ramach wprowadzenia. Idąc dalej oraz wcielając problem w życie, potrzebne są klasy css do osiągnięcia takiego rezultatu. W tym miejscu liczę na ostrą dyskusję popartą przykładami :-)

Narazie sam nie wiem od którego końca się za to zabrać. Jako, że z definicji przewiduje dowolny układ elementów (oczywiście spełniający zastrzerzenia), potrzebna jest uniwersalność klas oraz metoda umieszczania kolejnych bloków w ciele strony aby były poprawnie wyświetlane.

Ktoś ma jakieś sugestie, popozycje, rozwiązania itp to bardzo prosze o wypowiedź. Temat wydaje się nie być łatwy dlatego im więcej głów nad nim myśli tym lepsze rezultaty...
mike
26.02.2006, 12:38:35
To jest moja propozycja:
index.html
[HTML] pobierz, plaintext 
  1. <?xml version="1.0" encoding="utf-8"?>
  2. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
  3.  
  4. <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="pl" >
  5.   <head>
  6.   <title></title>
  7.  
  8.   <meta name="author" content="Michał Mech" />
  9.   <meta http-equiv="Content-Type" content="application/xhtml+xml; charset=utf-8" />
  10.  
  11.   <link rel="stylesheet" type="text/css" href="style.css" />
  12.  
  13. </head>
  14.  
  15. <body id="body">
  16.  
  17. <div id="mainContainer">
  18.   <div id="threeBlocksContainer">
  19.     <div class="block"></div>
  20.     <div class="block"></div>
  21.     <div class="block"></div>
  22.   </div>
  23.  
  24.   <div id="logoMultiblock"></div>
  25.  
  26.   <div id="twoBlocksContainer">
  27.     <div class="block"></div>
  28.     <div class="block"></div>
  29.     <div class="block"></div>
  30.   </div>
  31.  
  32.   <div id="mainBlock"></div>
  33.  
  34.   <div id="multiblockSpanBefore"></div>
  35.  
  36.   <div id="block"></div>
  37.  
  38.   <div id="multiblock"></div>
  39.  
  40.   <div id="multiblockSpan2Column"></div>
  41.  
  42. </div>
  43.  
  44. </body>
  45. </html>
[HTML] pobierz, plaintext


style.css
Kod
html, body {
    margin: auto;
    padding: 0 0 5px 0;
    height: 100%;
    font: 12px Tahoma, Verdana, Arial, sans-serif;
}

div {
    margin: 5px;
    border: #f00 solid 1px;
}

div#mainContainer {
    margin: auto;
    width: 750px;
    border: 0px;
}

div#threeBlocksContainer {
    width: 200px;
    float: left;
}

div#threeBlocksContainer div.block {
    width: 188px;
    height: 50px;
    float: left;
}

div#logoMultiblock {
    margin-left: 0px;
    width: 530px;
    height: 100px;
    float: right;
}

div#twoBlocksContainer {
    margin-top: 0px;
    width: 200px;
    float: right;
}

div#twoBlocksContainer div.block {
    margin-bottom: 5px;
    width: 188px;
    height: 50px;
    float: right;
}

div#mainBlock {
    margin: 0px;
    width: 323px;
    height: 300px;
    float: right;
}

div#multiblockSpanBefore {
    width: 531px;
    height: 100px;
    float: left;
}

div#block {
    margin-top: 0;
    width: 200px;
    height: 100px;
    float: left;
}

div#multiblock {
    margin: 0;
    width: 536px;
    height: 200px;
    float: left;
}

div#multiblockSpan2Column {
    width: 745px;
    height: 100px;
    float: left;

------
1. Pod badzIEwIEm nie będzie ładnie wyglądać. Dodaj sobie alternatywne style , to już łatwe jest. badzIEwIEm nie rozumie margin i padding poprawnie. Pozamieniaj wartości tylko;
2. Wszystkie bloki mają ustawioną długość (widht) i szczerze wątpię czy uda Ci się zrobić ten layout bez tego. A na pewno będzie to bliskie nieosiągalnego.
sniffer
26.02.2006, 13:44:13
dzięki za odp. Ładnie to przerysowałeś na css+div (i prawie bezbłędnie :-) niestety nie o to tu chodzi.
Ustalanie width dla wszystkich typów nie wchodzi w grę.

Wstępnie chodziło by mi o wypracowanie paru podstawowych klas odpowiadających za wyświetlanie i pozycjonowanie poszczególnych typów bloków. Jak pisałem, muszą one być na tyle uniwersalne aby w dowolnym układzie (nie tylko jak na moim przykładzie) działały... Np. przy innej ilości kolumn niż 3.

Myślałem nad zastosowaniem div'ów wyrównujących, coś w rodzaju 'wrapperów' aby np. 'mainblock - span kol. przed' nie rozjeżdżał się na całą szerokość. Div ten znajdował by się między blokami po prawej a mainblock'iem oraz sięgał aż po multiblock poniżej.

Drógim rozwiązaniem byłoby prowadzenie div'a o szerokości bloku w linii znajdowania się 'mainblock - span kol. przed' bezpośrednio za nim aby wypełnić puste miejsce.

Oba div'y były by oczywiście: visibility: hidden;

Kod
div.block_left {
float: left;
position: relative;
padding: 0px;
margin: 0px;
margin-right: 10px;
margin-top: 10px;
}
div.block_right {
float: right;
position: relative;
padding: 0px;
margin: 0px;
margin-top: 10px;
}
/* mainblock = multiblock gdy brak spanningu */
div.mainblock, div.multiblock {
float: left;
position: relative;
width: auto;
padding: 0px;
margin: 0px;
margin-right: 10px;
margin-top: 10px;
}


Nie mam na razie pomysłu co zrobić z tymi multiblokami i jak zdefiniować im, żęby spanowały tylko jedną kolumnę oraz przed czy po.

Tymsamym ustawienie marginesów prawych elementom wysuniętym najbardziej na prawo spowoduje powstanie wolnej, zbędnej przestrzeni za nimi.

Można by również użyć różnych wartości display odpowiadającym tabelom, a w szczególności komórkom...

Niestety corazbardziej nieuchronnym wydaje mi się użycie JS... :/
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.