Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: Nieszczęsne div'y! - POZYCJONOWANIE
Forum PHP.pl > Forum > Po stronie przeglądarki > CSS
patigo
1.12.2005, 15:53:14
taki plik ze stylami i html:
[HTML] pobierz, plaintext 
  1. <html>
  2.  <head>
  3.   <style type="text/css">
  4.     div {border-style: SOLID;border-width: 1;}
  5.     #naglowek {height:150px;}
  6.     #cialo {top:150px;width:auto;}
  7.     #stopka {height:150px;}
  8.     #s {float:left;display:inline;}
  9.   </style>
  10. </head>
  11. <body>
  12.  
  13. <div id="naglowek">nagłówek</div>
  14.  
  15. <div id="cialo"></div>
  16.  
  17. <div id="stopka">
  18.    <div id="s" style="width:200px;">lewa</div>
  19.  
  20.    <div id="s" >Srodek</div>
  21.  
  22.    <div id="s" style="width:200px;">prawa</div>
  23. </div>
  24.  
  25. </body>
  26. </html>
[HTML] pobierz, plaintext

problem polega na tym że chciałbym aby w każdym z 3 głównych div'ów (nagłówek, cilo i stopka) można było umieszczać kolejne divy ale takie które nie wyjda poza obręb tych konkretnych. I tak przykładowo pomiędzy znacznikami div stopka umieściłem kolejne 3 - no i niby wszystko jest ok wyświetlają się jeden po drugim w rzędzie , ale kiedy pomiędzy divem środkowym znajdzie się duża ilość tekstu to div prawy ucieka na dół. A chciałbym aby 2 skrajne divy (lewy i prawy) miały stałą szerokość i pomiędzy nimi znajdował się taki który będzie miał minimum 400px szerokości a maxymalnie tyle żeby wszystkie trzy mieściły się w oknie przeglądarki.
mike
1.12.2005, 15:57:11
Kolejny raz złe forum.

Powiedz mi czym kierowałeś się umieszczając tego posta na php

Przenoszę tam gdzie powinien być (ciekawe czy znajdziesz gdzie tongue.gif )
patigo
1.12.2005, 16:20:54
Znalazłem, tongue.gif ale czemu nie przeniosłeś do CSS tylko do HTML?? skoro chodzi o pozycjonowanie za pomocą styli?? A niczym się nie kierowałem po prostu mam forum php na startowej i tak jakoś odruchowo umieściłem - jak się zorientowałem to było za późno:p
gulldarek
4.12.2005, 15:03:45
Przede wszystkim, widzę, że nie rozumiesz zasady działania id. Id to unikalny identyfikator elementu. Nie możesz więc ustawić go dla trzech elementów. Troche ci zmodyfikowałem ten kod:

[HTML] pobierz, plaintext 
  1. <html>
  2. <head>
  3. <style type="text/css">
  4. div {border: 1px solid AGDZIEKOLOR?!;}
  5. #naglowek {height:150px;}
  6. #cialo {top:150px;width:auto;}
  7. #cialo .lewa {float:left; display:inline; width:200px;}
  8. #cialo .srodek {float:left; display:inline; min-width: 400px; overflow: auto;}
  9. #cialo .prawa {float:left; display:inline; width:200px;}
  10. #stopka {height:150px;}
  11.  
  12. </style>
  13. </head>
  14. <body>
  15.  
  16. <div id="naglowek">nagłówek</div>
  17.  
  18. <div id="cialo"></div>
  19.  
  20. <div id="stopka">
  21. <div class="lewa">lewa</div>
  22.  
  23. <div class="srodek">Srodek</div>
  24.  
  25. <div class="prawa">prawa</div>
  26. </div>
  27.  
  28. </body>
  29. </html>
[HTML] pobierz, plaintext
sniffer
16.02.2006, 22:50:51
czy mi się wydaje, czy podążając za normami w3c ustawianie atrybutu 'width' dla elementów 'inline' traktowane jest jako błąd?
Zajec
16.02.2006, 23:08:35
Cytat(sniffer @ 2006-02-16 22:50:51)
czy mi się wydaje, czy podążając za normami w3c ustawianie atrybutu 'width' dla elementów 'inline' traktowane jest jako błąd?

Błąd - nie. Po prostu przeglądarkom nie wolno tego respektować ;-) Czytaj: oleją takie coś.

Width można ze skutkiem przypisywać elementom blokowym lub o blokowym wnętrzu.
sniffer
17.02.2006, 00:25:39
przynajmnie olewać powinny...

jeśli chodzi o Opere (może inne przeglądarki też) to można przypisać width do elementu z arg. dysplay: inline-block i jeśli się nie myle jest to już w specyfikacji css

pozatym przy okazji mam problmik... mam coś takiego:
[HTML] pobierz, plaintext 
  1. .block {
  2.     width: 300px;
  3.     display: block;
  4. }
  5. .block_r1c1 {
  6.     float: left;
  7.     display: inline;
  8.     width: 56px;
  9.     height: 14px;
  10.     background-image: url('../images/sidebox-top.left.gr.gif');
  11. }
  12. .block_r1c2 {
  13.     display: inline-block;
  14.     width: auto;
  15.     height: 14px;
  16.     background-image: url('../images/sidebox-top.center.gr.gif');
  17. }
  18. .block_r1c3 {
  19.     display: inline;
  20.     float: right;
  21.     width: 8px;
  22.     height: 14px;
  23.     background-image: url('../images/sidebox-top.right.gr.gif');
  24. }
  25.  
  26.  
  27. <div class="block">
  28.   <div class="block_r1c1"></div><div class="block_r1c2"></div><div class="block_r1c3"></div>
  29. </div>
[HTML] pobierz, plaintext

powyższy kod miał działać następująco: istnieją trzy 'kolumny' przy czym boczne mają szerokość stałą, natomiast środkowy dopasowuje się do wolnej szerokości i zajmuje ją całą... niestety tak się nie dzieje, środkowy div nie wiem czemu ma szerokość = 0, może ktoś mi to wytłumaczyć dlaczego? oraz wesprzeć to działającą wersją...
Zajec
17.02.2006, 07:47:30
Wywal to ;-)

.block_r1c2 {
display: inline-block;
width: auto;
height: 14px;
background-image: url('../images/sidebox-top.center.gr.gif');
}
sniffer
17.02.2006, 16:46:11
spoko ale tak miałem na początku i jest to rozwiązanie do bani bo trzeci div (kolumna) przeskakuje do następnego wiersza..... [przynajmniej w mojej Operze9] a chodzi o to żeby wszystko było w tym samym...

jakieś pomysły?
eai
17.02.2006, 18:19:40
Cytat
linia 244 kolumna 1 - Ostrzeżenie: missing </div>
linia 238 kolumna 1 - Ostrzeżenie: missing </div>
linia 234 kolumna 1 - Ostrzeżenie: missing </div>
linia 233 kolumna 1 - Ostrzeżenie: missing </div>
linia 119 kolumna 1 - Ostrzeżenie: missing </div>
linia 117 kolumna 1 - Ostrzeżenie: missing </div>
linia 258 kolumna 51 - Ostrzeżenie: trimming empty <div>

0 błędów krytycznych / 7 ostrzeżenia(ń)
Zajec
17.02.2006, 19:47:42
Cytat(sniffer @ 2006-02-17 16:46:11)
spoko ale tak miałem na początku i jest to rozwiązanie do bani bo trzeci div (kolumna) przeskakuje do następnego wiersza..... [przynajmniej w mojej Operze9] a chodzi o to żeby wszystko było w tym samym...

jakieś pomysły?

[XML] pobierz, plaintext 
  1. <div class="block">
  2. <div class="block_r1c1"></div>
  3. <div class="block_r1c3"></div>
  4. <div class="block_r1c2"></div>
  5. </div>
[XML] pobierz, plaintext
sniffer
18.02.2006, 11:21:42
ok dzięki wielkie, działa jeszcze po małej poprawce jak powinno...

ale gdzie tutaj był błąd? przecież div'y były pozamykane


mam jeszcze jeden problem. Poprzednie div'y robiły jeden z wielu wierszy, jednym z kolejnych wierszy jest:
[HTML] pobierz, plaintext 
  1. .block_r3c1 {
  2.     float: left;
  3.     width: 6px;
  4.     min-height: 1px;
  5.     max-height: 100%;
  6.     height: auto;
  7.     background-image: url('../images/nav-left-cen.gr.gif');
  8. }
  9. .block_r3c2 {
  10.     width: auto;
  11.     height: auto;
  12.     background: #000;
  13. }
  14. .block_r3c3 {
  15.     float: right;
  16.     width: 9px;
  17.     min-height: 1px;
  18.     max-height: 100%;
  19.     height: auto;
  20.     background-image: url('../images/nav-right-cen.gr.gif');
  21. }
  22.  
  23.  
  24. <div class="block">
  25.   <div class="block_r3c1"></div>
  26.   <div class="block_r3c3"></div>
  27.   <div class="block_r3c2"></div>
  28. </div>
[HTML] pobierz, plaintext

drógi div ma zawierać dowolne dane tekstowe, tabele itp niestety 'rozlewa' się on na całą szerokość div'a klasy 'block', a oba boczne mają wysokość równą 1px (tak jak min-height). Chodzi mi tu o osiągnięcie efektu gdy div'y będą robiły kolejne 3 kolumny, wszystkie będą miały identyczną wysokość przy zmiennej wysokości środkowej kolumny. Środkowa kolumna oczywiście nie powinna wyjeżdźać na boczne, Jakieś pomysły?
Zajec
18.02.2006, 18:10:34
Cytat(sniffer @ 2006-02-18 11:21:42)
ale gdzie tutaj był błąd? przecież div'y były pozamykane
W kolejności ich występowania. Tak ciężko rzucić chociaż okiem na to, czym się różni mój kod od twojego poprzedniego?


Cytat(sniffer @ 2006-02-18 11:21:42)
Środkowa kolumna oczywiście nie powinna wyjeżdźać na boczne, Jakieś pomysły?
marginesy boczne środkowej kolumny.
sniffer
18.02.2006, 19:34:29
ok, troche się naszukałem i znalazłem satysfakcjonujące mnie rozwiązanie: http://www.positioniseverything.net/articl...out/equalheight zrobiłem to na podstawie tego... teraz menu wygląda całkiem całkiem bez używania tabel :-)
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.