Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: Zagadka w CSS'ie + (X)HTML'u. Problem z ustaleniem stalej szerokosci srodkowego bloku oraz ze scalowalna szerokoscia bocznych bokow.
Forum PHP.pl > Forum > Po stronie przeglądarki
Sokrates
21.08.2007, 19:52:22
Witam,
dostalem takie niby proste zadanko (na pierwszy rzut oka)
ktore niestety okazalo sie dosc trudne dla mnie samego aby je rozwiazac.
Dlatego pisze tu na forum moze ktos bedzie mogl mi pomc,
albo podsunac jakis orginalny pomysl. Przy okazji moze ktos bedzie mial podobny
problem i znajdzie rozwiazanie tu na formum :-).

Takie sa zalorzenie zadania:
Proszę zdefiniować stronę z dołączanym zewnętrznym arkuszem styli CSS
która ma podział strony taki, jak w dołączonej
grafice.,czyli:
- element jasnoniebieski jest wycentrowany - stałej szerokości
- element ciemnoniebieski i pomarańczowy - zmiennej szerokości - ale oba
tej samej by niebieski był wycentrowany. Rozciągają sie od brzegów strony
aż do elementu niebieskiego
- elementy czerwony, zielony fioletowy - dowolne stalej szerokości - ale
suma ich ma być równa szerokości elementu niebieskiego
- wysokości wszystkich elementów mają być sobie równe, za wyjątkiem
elementów czerwonego, zielonego i fioletowego, które są pomniejszone o
wysokość niebieskiego.
- wysokość niebieskiego jest stała
- wysokość elementów ma się dostosowywać do kontentu, tzn jeśli
wypełnienie (np. tekst) w bloku fioletowym jest najdłuższe to wszystkie
pozostałe bloki muszą się do niego dostosować
- strona musi sie dac skalowac
- przegladarki w ktorych ma to dzialac to IE i FireFox

Dodatkowe założenia:
- rozwiazanie powinno być bez zastosowania JavaScript
- DTD powinno być nie niższe niż 1.0 Strict, w ostateczności Transitional
- zadanie powinno być zrealizowane BEZ użycia tabel!

Przyklad koncowego wykonania strony.

Mi udalo sie w sumie wszytstko zrobic w HTMlu 4.01 Strict
mam tylko taki problem ze srodkowa kolumna "jasnoniebieski",
"czerwonego", "zielonego" i "fioletowego" nie sa stalej szerokosci
tylko ichdlugosc jest okreslona w "%" (przez co tez jest skalowalna)
a ma by to stalej nie zmiennej dlugosci, z kolei jak zrobie srodkowa
kolumne stalej dlugosci to nie wiem, jak zrobic dwie boczne kolumny
aby dopasowaly sie do szerokosci okna (zadanie ma byc skalowane)

Wiec podsumowujac, problem jest w tym aby srodkowa kolumna byla stalej szerokosci a
boczne kolumny po prawej i po lewej stronie dopasowywaly sie do szerokosci okna przegladarki
i stykaly sie z brzegami okna przegladarki oraz srodkowego bloku.

Tu znajduje sie moje rozwiazanie problemu.

Jak bedziecie mieli jakies propozycje albo pomysly to dajcie znac....

Pozdrawiam,
Dzieki
goffyy
23.08.2007, 23:22:49
Na poczatek jedna podpowiedz smile.gif

Daj sobie w background np. dla body gifa o wysokosci 1px i tak szerokiego aby Ci sie na kazdej rozdzielczosci ekranu zmiescil i wycentruj go do srodka strony. To zalatwi Ci uciekajace i nie wyrownujace sie wysokosci prostokatow. Jak nadal masz duze problemy to pytaj czego nie wiesz bo nie napisze Ci rozwiazania calego zadania smile.gif
Namrasit
5.08.2009, 18:16:58
Witam!

Odświeżam temat, ponieważ mam problem z podobnym układem.

Chciałbym wykonać szablon wg rysunku poniżej:



Chodzi o układ, w którym środkowa część będzie posiadała stałą szerokość (w tym przykładzie 1000px), a boki (left i right) zmienną szerokość w zależności od szerokości przeglądarki.

Przeglądając przykłady, w których stosowano podobny układ, doszedłem do takiego kodu:

[HTML] pobierz, plaintext 
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
  2.     <html xmlns="http://www.w3.org/1999/xhtml">
  3.     <head>
  4.     <title>3 col layout - Fixed width centre and fluid sides</title>
  5.     <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
  6.     <style type="text/css">
  7.         body{
  8.             background-color: orange;
  9.         }
  10.     *{margin:0;padding:0}
  11.  
  12.     #column1 {
  13.         width: 50%;
  14.         float: left;
  15.         margin-right: -500px;
  16.         background: red;
  17.         height: 1026px;
  18.     }
  19.     #col1inner{
  20.         margin-right: 500px;
  21.     }
  22.     #column2 {
  23.         width: 1000px;
  24.         float: left;
  25.         background: blue;
  26.         position: relative;
  27.         z-index: 10;
  28.         height: 1026px;
  29.     }
  30.     #column3outer {
  31.         width: 50%;
  32.         float: right;
  33.         margin-left: -500px;
  34.         background-color: #aef0cc;
  35.     }
  36.     #column3 {
  37.         margin-left: 500px;
  38.         background: green;
  39.         height: 1026px;
  40.     }
  41.  
  42.     </style>
  43.     </head>
  44.     <body>
  45.         <div id="column1">
  46.             <div id="col1inner">
  47.                 <p>&nbsp;</p>
  48.             </div>
  49.         </div>
  50.         <div id="column2">
  51.             <p>This layout is constructed using 2 floats of 50% each. One is floated left and the other floated right. Each float has a negative margin on the opposite side to the way the float is floated. The negative margin width is half the width that you want for your center column.</p>
  52.             <p>This will allow the floated center column to slide into place with a fixed width.</p>
  53.         </div>
  54.         <div id="column3outer">
  55.             <div id="column3">
  56.                 <p>&nbsp;</p>
  57.             </div>
  58.         </div>
  59.  
  60.     </body>
  61.     </html>
[HTML] pobierz, plaintext


Kod ten działa prawidłowo w FF 3.5 oraz IE8, jednak przy Operze 9.62, pomiędzy centralną a prawą częścią tworzy się 1px przerwa przy zmienianiu rozmiaru okna. Nie wiem jak temu zaradzić.

Za wszelkie sugestie z góry dziękuję i pozdrawiam smile.gif

Dawid.
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.