[CSS] Wiele divów wewnątrz siebie

[Homzik]

Witam,

Mam problem z ułożeniem wielu warstw jedna wewnątrz drugiej. To co jest proste na tabelkach, na divach sprawia mi spory problem, a z kilku przyczyn warstwy sprawdziłyby się u mnie lepiej. Aby lepiej zobrazować problem, przygotowałem prosty obrazek:

Z góry dziękuję za pomoc doraźną (marchewkę) lub wskazanie dobrego kija tak, abym mógł się sam nauczyć, choć sam jakoś nie trafiłem na żaden wartościowy tutorial.

[slawek22]

Robisz 3 divy float: left;

To są kolumny

W tych 3 DIV-ach robisz sobie te prostokąty, już bez float.

[Homzik]

Dziękuję za pomoc, nie pisałem wczoraj bo wziąłem się za robotę, a dodatkowo pokomplikowałem ją o jeszcze jedną warstwę zagnieżdżoną w innej.

Niestety, mam kilka problemów:

- w Chrome warstwa rectangle pojawia się w jakimś dziwnym miejscu, zamiast pojawiać się między newsami czyli między dwoma warstwami newsframe

- przy szerokości strony np. 1024 pikseli, warstwa rightbox spada na doł w losowe miejsce - co zrobić aby zawsze była wyświetlana obok warstwy centerbox? Chodzi mi o to, aby strona wyświetlała się poprawnie przy szerokości 1000 pikseli (na tabelkach tak było i wszystko ładnie się skalowało)

- przy minimalizacji strony (znowu np. 1000 pikseli szerokości) w Chrome warstwa footer zmienia swoje położenie - dlaczego tak się dzieje?

Całość w praktyce można znaleźć pod adresem: https://yyy.pl/test/ (na tabelkową górę strony oraz badziewne logo prosze nie zwracać uwagi )

Z góry dziękuję za okazane wsparcie.

[motorider]

Do #rectangle dopisz clear: both;

W #rightbox zmień width: 170px na zapis w procentach, u mnie 11% działa dobrze.

[Homzik]

Dzięki, zmieniłem co nieco i działa

Mam natomiast jeszcze kilka pytań:

- jak zrobić, aby warstwa rectangle była centrowana automatycznie względem leftbox? margin-left: auto i margin-right: auto nie działają, a wartość procentowa wygląda źle przy skalowaniu strony - obrazek zmienia swoje położenie

- przy skalowaniu strony, warstwa footer zaczyna się nie tam gdzie powinna - literka "O" ucieka do góry, why?

- 3 główne warstwy są obecnie zrobione tak: 50%, 33%, 16% co przy szerokości 1000 pikseli daje odpowiednio: 500/330/160 pikseli. Czy da się jakimś cudem zrobić tak, aby przy wyższych rozdzielczościach trzecia warstwa zawsze miała 160 pikseli, ale warstwy lewa i środkowa zawsze wypełniały resztę ekranu?

Wszystko chyba działałoby, gdyby warstwa 160 pikseli miałaby być po lewej stronie, a nie po prawej, wówczas działałaby reguła: 160 pikseli, 50% reszty, 33% reszty i strona byłaby szeroka na 100% - chyba że się mylę?

Jak jednak zrobić, aby przy każdej rozdzielczości warstwa lewa miała 50% szerokości, warstwa środkowa - 33%, warstwa prawa - 160 pikseli i żeby dookoła nie było pustego miejsca, a strona zajmowała całą szerokość?

Trochę zagmatwane to pytanie, ale mam nadzieję, że wiadomo o co chodzi

[motorider]

Nad centrowaniem rectangle muszę pomyśleć, powinno działać z margin: auto, ale coś jest nie tak.

Zawartość stopki umieść w <p> O nas | Redakcja | Współpraca | Partnerzy | Reklama | Kontakt </p>

Dla rightbox dopisz max-width: 160px; ale problem będzie pod ie6

[HardyTwardy]

- jak zrobić, aby warstwa rectangle była centrowana automatycznie względem leftbox? margin-left: auto i margin-right: auto nie działają, a wartość procentowa wygląda źle przy skalowaniu strony - obrazek zmienia swoje położenie

#leftbox {text-align:center;}

#rectangel {margin: auto;text-align:left;}

- przy skalowaniu strony, warstwa footer zaczyna się nie tam gdzie powinna - literka "O" ucieka do góry, why?

bo zostaje mu troche miejsca i moze sobie poplywac z boku, przelam to na hama:

<div style="clear:both;">

- 3 główne warstwy są obecnie zrobione tak: 50%, 33%, 16% co przy szerokości 1000 pikseli daje odpowiednio: 500/330/160 pikseli. Czy da się jakimś cudem zrobić tak, aby przy wyższych rozdzielczościach trzecia warstwa zawsze miała 160 pikseli, ale warstwy lewa i środkowa zawsze wypełniały resztę ekranu?

Pokombinuj z min-width i max-width, na allegro box z treścią aukcji jest w ten sposób zrobiony.

[Homzik]

dzieki chlopaki, ale centrowanie rectangle dalej nie dziala

co do footera to wiem, ze moge wszystko zrobic z <p> czy <br>, tak samo zreszta z rectangle, ale chcialbym wykombinowac inaczej

dzieki wskazowkom barblaska poprawilem footera, ale teraz nie wiem dlaczego funkcja margin-top dziala zle i przy szerokosci 1200 pikseli odstep/margines jest duzy, ale przy 1000 pikseli nie ma go wcale i warstwa footer przylega do innej

z min-width i max-width sie pobawie, tylko czy w ramach jednej warstwy mozna wykorzystac wszystkie 3 parametry (width, min-width, max-width) czy lepiej nie? archaicznym ie6 sie nie przejmuje

[HardyTwardy]

Ostylowałes na nowo footer po cler: both? ustaw mu margin i powinno byc ok. Dość powszechna techniką jest wstawianie pustego diva cler:both miedzy wlasie takie dwa divy.

<div id="gora">fsdf</div>

<div style="clear:both></div>

<div id="dol">dsfdsf</div>

Osobiście nie robiłem wiec praktycznego przykładu nie podam, ale mozna ustawić max i min width jednocześnie.

[Homzik]

sorki, ale nie za bardzo wiem w jaki sposob mialbym to zrobic oraz po co

[HardyTwardy]

a wstawiałeś tego pustego diva o którym pisałem wyżej?

BTW masz zejbista domenkę

co do centrowania:

chcesz, wycentrować akrualności i recenzje?

[Homzik]

sorki, nie zauważyłem że edytowałeś swój post - z pustym divem jest ok

chciałbym wycentrować rectangle'a oraz warstwę width tak, aby te 3 główne kolumny niezależnie od rozdzielczości pojawiały się na środku ekranu

chyba, że trzeba jakoś pozbyć się z warstwy width atrybutu height?

lepsza byłaby domenka xxx.pl, yyy.pl kupiłem dawno temu na Allegro, jakiś czas temu mogłem sprzedać za niezłe pieniądze, ale tego nie zrobiłem, a może trzeba było

[motorider]

Dla rectangle, żeby zadziałał margin: auto; musisz dopisać width: 300px;

Podejrzyj (za pomocą firebug) jak zrobiony jest komputronik.pl, jest wyśrodkowany, tak jak chcesz zrobić.

[Homzik]

Dzięki, tylko jak wtedy ustawić margin-top i margin-bottom? ustawiać na innych elementach lub poprzez <p> czy <br>?

Tyle, że 3 główne kolumny w dalszym ciągu wyświetlają się w stosunku 50%/32%/170px i przy wyższych rozdzielczościach po prawej stronie zostanie dużo wolnego miejsca.

Czy macie może zatem jakiś konkretny sposób jak zrobić, aby nie było wolnego miejsca lub chociaż jak wycentrować te wszystkie 3 kolumny (czy też warstwę width), aby przy wyższych rozdzielczościach było tyle samo wolnego miejsca po lewej i po prawej stronie?

[HardyTwardy]

wpakuj je w jeszcze jednego diva i jego centruj w ten sposób jak pisałem w swoim pierwszym poście w Twoim topiku.

<div id="kontener">
  <div id="all-center">
 <div id="center1">
dkjs
  </div>
  <div id="center2">
kjdsfh
  </div>
  <div id="ceterX">
idt.
  </div>
  </div>
</div>

#kontener {text-align:center;
width:100%; /*lub ileś tam % czy pikseli*/
}
#all-center {margin: 10px auto 10px auto;}

tekst będzie oczywiście tez centrowany do środka, ale możesz go na powrót ustawić text-align: left; w następnych, czy nawet w tym samym divie.

kontener może być oczywiście tez body, ale to chyba wystarczy by naprowadzić Ciebie na trop.