Witaj Gościu! ( Zaloguj | Rejestruj )

Forum PHP.pl

 
 Reply to this topicStart new topic
> [HTML][CSS] Nietypowy szablon na divach, Mam wrażenie, że nie da się go wykonać za pomocą DIVÓW
The Night Shadow
post 5.11.2008, 20:51:30
Post #1





Grupa: Zarejestrowani
Postów: 495
Pomógł: 2
Dołączył: 5.02.2006
Skąd: Wrocław

Ostrzeżenie: (0%)
-----

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.


--------------------
Programista Stron i Serwisów WWW oraz Aplikacji Internetowych
Specjalista ds. Pozycjonowania Aplikacji Internetowych
Copywriter
Go to the top of the page
+Quote Post
danek
post 5.11.2008, 20:58:35
Post #2





Grupa: Zarejestrowani
Postów: 48
Pomógł: 1
Dołączył: 1.02.2004
Skąd: warszawa

Ostrzeżenie: (0%)
-----

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


--------------------
E-Danek.info
Go to the top of the page
+Quote Post
siemieng
post 5.11.2008, 21:18:40
Post #3





Grupa: Zarejestrowani
Postów: 101
Pomógł: 7
Dołączył: 16.01.2007

Ostrzeżenie: (0%)
-----

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

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


to prosta funkcja js

[HTML] pobierz, plaintext 
  1. <body onload="flexheight ">
  2. .....
  3. </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 winksmiley.jpg
Go to the top of the page
+Quote Post
The Night Shadow
post 5.11.2008, 21:24:04
Post #4





Grupa: Zarejestrowani
Postów: 495
Pomógł: 2
Dołączył: 5.02.2006
Skąd: Wrocław

Ostrzeżenie: (0%)
-----

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


--------------------
Programista Stron i Serwisów WWW oraz Aplikacji Internetowych
Specjalista ds. Pozycjonowania Aplikacji Internetowych
Copywriter
Go to the top of the page
+Quote Post
« Następny starszy · Przedszkole · Następny nowszy »
 

Reply to this topicStart new topic
1 Użytkowników czyta ten temat (1 Gości i 0 Anonimowych użytkowników)
0 Zarejestrowanych:

 

Tryb wyświetlania: Standardowy · Przełącz na: Linearny+ · Przełącz na: Drzewo

Śledź ten temat · Wyślij temat na e-mail · Wydrukuj ten temat · Subskrybuj to forum

RSS Wersja Lo-Fi Aktualny czas: 14.08.2025 - 03:54
Powered By IP.Board © 2025  IPS, Inc.
All changes by PHP.pl Administrators
Hosting zapewnia NQ.pl hosting, trac, svn