Forum PHP.pl > [HTML][CSS] Nietypowy szablon na divach

Pomoc - Szukaj - Użytkownicy - Kalendarz

Pełna wersja: [HTML][CSS] Nietypowy szablon na divach

The Night Shadow

5.11.2008, 20:51:30

Witam,

Jak w temacie problem dotyczy wykonania nietypowego szablonu strony WWW za pomocą divów. Pytania, które znajdziecie poniżej zadaję, ponieważ spotkałem mnóstwo fanatyków twierdzących, że używanie tabelek to technika przestarzała, zacofana i bezpodstawnie używana przez niektórych programistów. Ma jednak pewne mankamenty i mam wrażenie, że rzecz, o którą chodzi nie daje się wykonać za pomocą divów w taki sposób, by projekt spełniał określone wymagania. Mogę się jednak mylić stąd wielka prośba do was byście mi w tym pomogli.

Za przykład posłuży ten http://www.kamienica-wroclaw.pl/przyklad.png uproszczony schemat. Poniżej kilka wyjaśnień i wytycznych.

1. Nagłówek
- na górze strony
- stała wysokość
- tło obrazkowe powtarzające się w poziomie
- szerokość MINIMUM 950px dostosowywana do rozdzielczości ekranu
- jeżeli w którymkolwiek miejscu strony czy to w stopce, czy wewnętrznej części strony, czy też w samym nagłówku pojawi się tekst w rodzaju WWWWWWWWWWWWWWWWWWW, a więc ogólnie element szerszy niż okno przeglądarki nagłówek ma być tak samo szeroki jak najszerszy element na stronie, a tło w tym nagłówku ma wypełniać całą jego szerokość

2. Stopka
- na dole strony
- stała wysokość
- tło obrazkowe powtarzające się w poziomie
- szerokość MINIMUM 950px dostosowywana do rozdzielczości ekranu
- jeżeli w którymkolwiek miejscu strony czy to w nagłówku, czy wewnętrznej części strony, czy też w samej stopce pojawi się tekst w rodzaju WWWWWWWWWWWWWWWWWWW, a więc ogólnie element szerszy niż okno przeglądarki stopka ma być tak samo szeroka jak najszerszy element na stronie, a tło w tej stopce ma wypełniać całą jej szerokość
- w przypadku, gdy w pionie treści jest mało, stopka ma być dosunięta do dołu ekranu, w przeciwnym razie ma znajdować się poniżej pozostałych elementów

3. Menu
- stała szerokość
- zawsze w odległości 30 px od lewej krawędzi strony bez względu na rozdzielczość
- wysokość dostosowywana do rozdzielczości ekranu
- tło obrazkowe powtarzające się w pionie
- jeżeli w którykolwiek miejscu czy to w samym menu, czy też po prawej stronie w miejscu, gdzie ma być treść podstrony będzie więcej tekstu niż wysokość okna przeglądarki, menu ma być rozszerzane w dół w taki sposób, by zajmowało odpowiednio całą wolną przestrzeń między nagłówkiem, a stopką

4. Top
- stała szerokość
- stała wysokość
- jest to tło znajdujące się wyłącznie na samej górze menu

5. Bottom
- stała szerokość
- stała wysokość
- jest to tło znajdujące się wyłącznie na samym dole menu

6. Gradienty 1, 2, 3 i 4 są odpowiednio zawsze dosunięte do góry i dołu ekranu pod nagłówkiem i nad stopką w taki sposób by stanowiły tło podstrony (tam gdzie znajduje się treść).

Twierdzę, że tych założeń nie da się osiągnąć za pomocą divów i technika stosowania divów w tym przypadku jest kompletnie bezużyteczną.

Jeżeli się mylę to uprzejmie proszę o oświecenie mnie.

danek

5.11.2008, 20:58:35

Ogólnie nie miałbym problemu z implementacją takiego podziału.
Jedynym problemem byłoby dla mnie Menu na całą wysokość...

siemieng

5.11.2008, 21:18:40

Da się uzyskać taki efekt ale nie obędzie się bez pomocy choćby js, ja w takich przypadkach stosuję:

[HTML] pobierz, plaintext 
function flexheight () {
       var dbh = document.body.offsetHeight; <!-- pobranie wysokości okna przeglądarki  -->
	var felxdiv= document.getElementById('div_id'); <!-- pobranie diva z elastyczną wysokością  -->
	var flexheight = dbh - wys1 - wys2 - wys3..... <!-- minus wysokości elementów (divów) o stałym rozmiarze -->
	felxdiv.style.height = flexheight + 'px'; <!-- nadanie właściwej wyskości -->
}
[HTML] pobierz, plaintext

to prosta funkcja js

[HTML] pobierz, plaintext 
<body onload="flexheight ">
.....
</body>
[HTML] pobierz, plaintext

u mnie to działa, nie wiem może Ci się przyda, bo z samych divów tego nie zrobisz chyba ze tabelki zwykłej użyjesz

The Night Shadow

5.11.2008, 21:24:04

Aaaaaaaa widzisz siemieng o JS nie pomyślałem... dzięki, spróbuję w ten sposób :- )

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.