podział strony na części i elementy Opcje

[kosmic]

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

ktoś pomoże
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

HELP

[Blame]

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.

Ten post edytował Blame 28.11.2009, 21:55:29

[kosmic]

no więc tak....
ogólnie to ciągle walczę z tym "poprawnym" wyświetlaniem.
rozkład div:

[PHP] pobierz, plaintext 
<div id="header">header</div>
    <div id="under_header"></div>
    <div id="content">
        <div id="menus">
            <div id="l_mn">
                <div id="1"></div>
                <div id="A"></div>
            </div>
            <div id="menu">cale menu strony</div>
            <div id="r_mn">
                <div id="2i3"></div>
                <div id="BiC"></div>
            </div>
        </div>
        <div id="conts">
            <div id="cont">tresc naszej strony</div>
            <div id="r_con">
                <div id="4"></div>
                <div id="D"></div>
            </div>
        </div>
    </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ą
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

a może nie robic tego jako tło tylko normalnie dodac obrazek w kodzie tylko czy on sie bedzie na całość kopiował

[Blame]

Zastosuj do nich atrybut min-height wtedy nie będą się całkiem zwijać.

[kosmic]

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

Ten post edytował kosmic 29.11.2009, 15:21:01