Witaj Gościu! ( Zaloguj | Rejestruj )

Forum PHP.pl

 
 Reply to this topicStart new topic
> Nieszczęsne div'y! - POZYCJONOWANIE
patigo
post
Post #1





Grupa: Zarejestrowani
Postów: 132
Pomógł: 0
Dołączył: 4.02.2005

Ostrzeżenie: (0%)
-----

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.
Go to the top of the page
+Quote Post
mike
post
Post #2





Grupa: Przyjaciele php.pl
Postów: 7 494
Pomógł: 302
Dołączył: 31.03.2004

Ostrzeżenie: (0%)
-----

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 (IMG:http://forum.php.pl/style_emoticons/default/tongue.gif) )
Go to the top of the page
+Quote Post
patigo
post
Post #3





Grupa: Zarejestrowani
Postów: 132
Pomógł: 0
Dołączył: 4.02.2005

Ostrzeżenie: (0%)
-----

Znalazłem, (IMG:http://forum.php.pl/style_emoticons/default/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
Go to the top of the page
+Quote Post
gulldarek
post
Post #4





Grupa: Zarejestrowani
Postów: 156
Pomógł: 15
Dołączył: 13.09.2003
Skąd: London

Ostrzeżenie: (0%)
-----

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


Ten post edytował gulldarek 4.12.2005, 15:04:22
Go to the top of the page
+Quote Post
sniffer
post
Post #5





Grupa: Zarejestrowani
Postów: 18
Pomógł: 0
Dołączył: 24.01.2003
Skąd: POland

Ostrzeżenie: (0%)
-----

czy mi się wydaje, czy podążając za normami w3c ustawianie atrybutu 'width' dla elementów 'inline' traktowane jest jako błąd?
Go to the top of the page
+Quote Post
Zajec
post
Post #6





Grupa: Zarejestrowani
Postów: 1 086
Pomógł: 8
Dołączył: 10.12.2003

Ostrzeżenie: (0%)
-----

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.
Go to the top of the page
+Quote Post
sniffer
post
Post #7





Grupa: Zarejestrowani
Postów: 18
Pomógł: 0
Dołączył: 24.01.2003
Skąd: POland

Ostrzeżenie: (0%)
-----

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ą...
Go to the top of the page
+Quote Post
Zajec
post
Post #8





Grupa: Zarejestrowani
Postów: 1 086
Pomógł: 8
Dołączył: 10.12.2003

Ostrzeżenie: (0%)
-----

Wywal to ;-)

.block_r1c2 {
display: inline-block;
width: auto;
height: 14px;
background-image: url('../images/sidebox-top.center.gr.gif');
}
Go to the top of the page
+Quote Post
sniffer
post
Post #9





Grupa: Zarejestrowani
Postów: 18
Pomógł: 0
Dołączył: 24.01.2003
Skąd: POland

Ostrzeżenie: (0%)
-----

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?
Go to the top of the page
+Quote Post
eai
post
Post #10





Grupa: Zarejestrowani
Postów: 367
Pomógł: 10
Dołączył: 20.05.2005

Ostrzeżenie: (0%)
-----

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(ń)
Go to the top of the page
+Quote Post
Zajec
post
Post #11





Grupa: Zarejestrowani
Postów: 1 086
Pomógł: 8
Dołączył: 10.12.2003

Ostrzeżenie: (0%)
-----

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
Go to the top of the page
+Quote Post
sniffer
post
Post #12





Grupa: Zarejestrowani
Postów: 18
Pomógł: 0
Dołączył: 24.01.2003
Skąd: POland

Ostrzeżenie: (0%)
-----

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?

Ten post edytował sniffer 18.02.2006, 14:02:43
Go to the top of the page
+Quote Post
Zajec
post
Post #13





Grupa: Zarejestrowani
Postów: 1 086
Pomógł: 8
Dołączył: 10.12.2003

Ostrzeżenie: (0%)
-----

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.

Ten post edytował Zajec 18.02.2006, 18:11:06
Go to the top of the page
+Quote Post
sniffer
post
Post #14





Grupa: Zarejestrowani
Postów: 18
Pomógł: 0
Dołączył: 24.01.2003
Skąd: POland

Ostrzeżenie: (0%)
-----

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 :-)
Go to the top of the page
+Quote Post
« Następny starszy · CSS · Następny nowszy »
 

Reply to this topicStart new topic
2 Użytkowników czyta ten temat (2 Gości i 0 Anonimowych użytkowników)
0 Zarejestrowanych:

 

Tryb wyświetlania: Standardowy · Przełącz na: Linearny+ · Przełącz na: Drzewo

Śledź ten temat · Wyślij temat na e-mail · Wydrukuj ten temat · Subskrybuj to forum

RSS Aktualny czas: 24.08.2025 - 11:29
Powered By IP.Board © 2025  IPS, Inc.
All changes by PHP.pl Administrators
Hosting zapewnia NQ.pl hosting, trac, svn