Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: podział strony na części i elementy
Forum PHP.pl > Forum > Po stronie przeglądarki
kosmic
28.11.2009, 19:18:45
Witam....

zrobiłem sobie jakąś stronę (grafikę) w photochop-ie no i wiadomo że teraz musze ją odpowiednio pociąć itp...
ale teraz mam problem z css i podziałem tego na elementy tak aby działało i wyświetlało tak jak chce (jak powinno)
poniżej zdjęcie...


i teraz tak... to co nagłoówek i stopka i inne to wiadomo część stała i to jakoś nie sprawia mi problemu...
tylko teraz tak, 1,2,3,4 to grafiki które mają być na stałe, czyli z ze stałym wymiarem,
A, B, C, D - to grafika która ma się zmniejszać lub zwiekszać w zależności od treści strony i menu..

no i właśnie treść i menu mają się zwiekszać i zmniejszać w zależności od treści..
a co najważniejsze to wysokość grafik A B C D ma być uzależnione od ilości treści..

no i tu mam problem bo nie wiem jak to ułożyć by tak właśnie działało sad.gif

ktoś pomoże questionmark.gif
chodzi mi o takie rozstawienie i takie działanie poszczególnych div-ów które w zależności od treści A B C D będzie się zmieniało a 1 2 3 4 będzie zawsze takie same sad.gif

HELP
Blame
28.11.2009, 21:55:17
Nie jestem jakimś specjalistą od CSS ale ja bym to zrobił tak(pomijam stałe elementy!):
1. Wszystkie bloki oprócz nagłówka, inne i stopka dajemy do div'a o ustalonej szerokości i height na 100%.
2. Div'a 1, 2, menu, A, B dał bym do jednego div'a ze stałym width i height na 100% przy czym bloki 1 i 2 mają stałe wymiary a A, B i menu mają stałą szerokość a height na 100%. 1, 2, A i B posiadają float.
3. Z 3, 4, C, D i treść robimy tak samo.

Teraz dzięki temu że daliśmy to wszystko do wspólnego bloku to wszystkie div'y z atrybutem height:100% będą miały taką samą szerokość. Potem już tylko clear:both na inn i stopka i powinno działać. Mam nadzieję że nie zagmatwałem za bardzo.
kosmic
29.11.2009, 12:46:18
no więc tak....
ogólnie to ciągle walczę z tym "poprawnym" wyświetlaniem.
rozkład div:
[PHP] pobierz, plaintext 
  1. <div id="header">header</div>
  2.     <div id="under_header"></div>
  3.     <div id="content">
  4.         <div id="menus">
  5.             <div id="l_mn">
  6.                 <div id="1"></div>
  7.                 <div id="A"></div>
  8.             </div>
  9.             <div id="menu">cale menu strony</div>
  10.             <div id="r_mn">
  11.                 <div id="2i3"></div>
  12.                 <div id="BiC"></div>
  13.             </div>
  14.         </div>
  15.         <div id="conts">
  16.             <div id="cont">tresc naszej strony</div>
  17.             <div id="r_con">
  18.                 <div id="4"></div>
  19.                 <div id="D"></div>
  20.             </div>
  21.         </div>
  22.     </div>
[PHP] pobierz, plaintext

css do tego:
Kod
#content { clear: both; margin: 0 auto; padding: 0; background: none; font-size: 0.9em; text-align: center; color: #ffff00; width: 1000px; height: 100%; }
  
   #menus { float: left; margin: 0; padding: 0; background: none; width: 334px; height: 100%; }
   #l_mn { float: left; margin: 0; padding: 0; width: 28px; background: #c9c9c9; }
   #1 { float: left; padding: 0; width: 28px; height: 265px; background: url(images/l_mn_a.jpg) top center; }
   #A { float: left; padding: 0; width: 28px; height: 100%; background: url(images/l_mn_b.jpg) top center; }
   #menu { float: left; padding: 0; width: 259px; height: 100%; background: #ffffff; }
   #r_mn { float: left; margin: 0; padding: 0; width: 47px; background: #c9c9c9; }
   #2i3 { float: right; padding: 0; width: 47px; height: 265px; background: url(images/p_mn_a.jpg) top center; }
   #BiC { float: right; padding: 0; width: 47px; height: 100%; background: url(images/p_mn_b.jpg) top center; }
  
   #conts { float: right; margin: 0; padding: 0; background: none; width: 666px; height: 100%; }
   #cont { float: left; margin: 0; padding: 0; width: 639px; height: 100%; background: #ffffff; }
   #r_con { float: right; margin: 0; padding: 0; width: 27px; height: 100px; background: #999999; }
   #4 { float: left; margin: 0; padding: 0; width: 27px; height: 265px; background: url(images/p_con_a.jpg) top center; }
   #D { float: left; margin: 0; padding: 0; width: 27px; height: 100%; background: url(images/p_con_b.jpg) top center; }


jak widać zamiast 2 i 3 oraz B i D jest jeden element...
no o ile wsio jest poukładane jak trzeba i na stronie wygląda jak powinno (prawie) o tyle jest problem z wysokością tych właśnie div-ów dolnych: A BiC D: czyli jest 100% ale one sie nie wyświetlają sad.gif
po prostu brakuje mi tych elementów... po prostu w tle ich jest tło które jest ważne bo w zalezności od wysokości menu ma wypełniac luke między np. elementem 1 a stopką... iyp sad.gif

a może nie robic tego jako tło tylko normalnie dodac obrazek w kodzie questionmark.gif tylko czy on sie bedzie na całość kopiował questionmark.gif
Blame
29.11.2009, 13:27:58
Zastosuj do nich atrybut min-height wtedy nie będą się całkiem zwijać.
kosmic
29.11.2009, 15:17:52
dodam jeszcze ze elementy A BiC D to ma byc tylko grafika, bez zadnych danych... tylko element wizualny laczacy stopke z naglowkiem

hmmmm ale tak naprawde nie wiadomo jaka bedzie minimalna wysokosc poniewaz kazda strona ma inna tresc i inna bedzie jej wysokosc
a no i jak bedzie dluga strona to zas nie beda dalej widoczne te elementy
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.