Witaj Gościu! ( Zaloguj | Rejestruj )

Forum PHP.pl

> CSS POMOCY !, Zaczynam sie zastanawiac dlaczego ludzie nie lubia tabel
clansman5
post 25.05.2007, 22:07:12
Post #1





Grupa: Zarejestrowani
Postów: 21
Pomógł: 0
Dołączył: 23.09.2006

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

Witajcie

Po 5 godzinach walki z CSS oraz proba rozwiazania banalnego przykladowego problemu stracilem cierpliwosc.
Najlepsze jest to, ze nawet gotowe szablony pobierane chociazby stad: CSS Layouts NIE DZIAŁAJĄ.

Moj problem jest nastepujacy:
Chce uzyskac taki uklad:

Z tym że, div2 ma miec pewien min-height natomiast ma sie rozciagac w doł jezeli bedzie w nim np. za duzo tekstu.

Wyniki moich prob sa nastepujace:
1. Gdy pod IE wszystko dziala, to w firefoxie div2 ma wysokosc ustawiona w height natomiast tekst wychodzi poza diva i ciagnie sie poza strona poprzez div3.

2. Gdy zapodam min-height dla div2 wtedy w firefoxie nastepuje przerwa pomiedzy div1 a div2 oraz div2 a div3
ktorej nie sposob zniwelowac za pomoca padding albo margin.

POMOCY
Go to the top of the page
+Quote Post
 
 Start new topic
Odpowiedzi (1 - 17)
barat
post 25.05.2007, 22:16:48
Post #2





Grupa: Zarejestrowani
Postów: 183
Pomógł: 0
Dołączył: 19.05.2007

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

zapewne pod div-em 2 lub pod paragrafem (czy co tam masz) z tekstem zapomniałeś wstawić div'a lub spana (lub inny element ) z atrybutem clear: both smile.gif

Dodatkowo zamiast min-height , po prostu wstaw div'a bez nadanej szerokości (pustego) ale z zadaną wysokością (to pozwoli ominąć to, że IE 6.0 i niżej ignorują parametry min-*) ...

Ucz się CSS - potem to procentuje smile.gif
Go to the top of the page
+Quote Post
clansman5
post 25.05.2007, 22:19:16
Post #3





Grupa: Zarejestrowani
Postów: 21
Pomógł: 0
Dołączył: 23.09.2006

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

ale ja niestosuje float: left albo right
to po co clear questionmark.gif

Z ciekawosci przetestowalem, niestety bez rezultatu. Oto obecna postac kodu:

[HTML] pobierz, plaintext 
  1. <html>
  2.  <head>
  3. <style type="text/css">
  4.  
  5. body
  6. {
  7. 	width: 100%;
  8. 	height: 100%;
  9. 	margin: 0px 0px 0px 0px;
  10. 	padding: 0px 0px 0px 0px;
  11. 	background-color: #FFFFFF;
  12. 	text-align:center;
  13. }
  14.  
  15. #main_div
  16. {
  17. 	width:780px;
  18. 	height: 600px;
  19. 	margin: 0px auto;
  20. 	padding: 0px 0px 0px 0px;
  21. 	overflow: visible;
  22. }
  23.  
  24. #logo {
  25. 	width:780px;
  26. 	height:147px;
  27. 	display: block;
  28. }
  29.  
  30. #menu {
  31. 	width:780px;
  32. 	height:38px;
  33. }
  34.  
  35. #tresc {
  36. 	width:780px;
  37. 	height:369px;
  38. 	overflow: visible;
  39. 	background-image: url(images/pbd_03.jpg);
  40. 	background-repeat: repeat-y;
  41. 	background-position: top left;
  42. 	padding: 0px 0px 0px 0px;
  43. 	margin: 0px 0px 0px 0px 
  44. }
  45.  
  46. #footer1 {
  47. 	width:780px;
  48. 	height:27px;
  49. 	font-family: Arial, Tahoma, Verdana;
  50. 	font-size: 11px;
  51. 	color: #FFFFFF;
  52. 	text-align: left;
  53. 	vertical-align: bottom;
  54. 	padding: 8px 0px 0px 20px;
  55. 	background-image: url(images/pbd_04.jpg);
  56. 	background-repeat: no-repeat;
  57. 	background-position: top left;
  58. }
  59.  
  60. #footer2 {
  61. 	width:780px;
  62. 	height:19px;
  63. 	background-image: url(images/pbd_05.jpg);
  64. 	background-repeat: no-repeat;
  65. 	background-position: top left;	
  66. }
  67. </style>
  68. </head>
  69.  
  70. <body>
  71. <div id="main_div">
  72.  
  73. <div id="logo">
  74. <img src="images/pbd_01.jpg" width="780" height="147" alt="" border="0">
  75. </div>
  76.  
  77. <div id="menu">
  78. <img src="images/pbd_02.jpg" width="780" height="38" alt="" border="0">
  79. </div>
  80.  
  81. <div id="tresc">
  82. 	<p>	dfghdfghdfhg</p>
  83. 	<p>	dfghdfghdfhg</p>
  84. 	<p>	dfghdfghdfhg</p>
  85. 	<p>	dfghdfghdfhg</p>			
  86. 	<p>	dfghdfghdfhg</p>
  87. 	<p>	dfghdfghdfhg</p>
  88. 	<p>	dfghdfghdfhg</p>
  89. 	<p>	dfghdfghdfhg</p>
  90. 	...
  91.        i jeszcze kilkadziesiat paragrafow aby nastapilo przepelnienie.
  92.        ..
  93.  
  94. </div>
  95. 	<span style="clear:both"></span>
  96.  
  97. <div id="footer1">cos tam</div>
  98. <div id="footer2"></div>
  99. <div id="footer3"></div>
  100. </div>
  101. </body>
  102. </html>
[HTML] pobierz, plaintext


Atrybut clear nadawalem rowniez "footer1" <-rowniez bez rezultatu

Ten post edytował clansman5 25.05.2007, 22:27:50
Go to the top of the page
+Quote Post
barat
post 25.05.2007, 23:20:29
Post #4





Grupa: Zarejestrowani
Postów: 183
Pomógł: 0
Dołączył: 19.05.2007

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

Nadałeś Div-owi treść wysokość na sztywno.
IE źle interpretuje CSS i dla niego height i min-height to jedno i to samo, nie uznaje wysokości na sztywno o jak jest w niej więcej tresci to go rozciąga.
FF i Opera uważają, że jeśli coś jest na sztywno to tak ma być i dalej nie rozciąga.
Dla div-ów z treścią zrezygnuj ze sztywnej wysokości (tak samo dla menu tp) ...
Jak mowilem ... zrób
<div id="kontener"><div id="rozpychacz"></div><div id="content></div><div class="clear"></div></div>

=======edit========
Zauważyłem, że w treść masz overflow - wtedy height jest potrzebne smile.gif
==================

Rozpychaczowi daj float i wysokość (wtedy rozepchnie gownego div'a - pisze z głowy, nie wiem czy nie będziesz musiał tez dać mu szerokości na przykład 1px - zapewne tak) contentowi daj float i szerokość,
Teraz div kontener na starcie będzie miał taką wysokość na jaką rozpycha go "rozpychacz" po czym gdy w content będziewięcej tekstu bez problemu się rozciągnie.

Możesz też po prostu wpisać min-height dla opery i FF a dodać warunkowe dla IE zwykłe height smile.gif

Ten post edytował barat 25.05.2007, 23:22:58
Go to the top of the page
+Quote Post
clansman5
post 26.05.2007, 08:59:29
Post #5





Grupa: Zarejestrowani
Postów: 21
Pomógł: 0
Dołączył: 23.09.2006

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

Dobra spoko zaczailem o co Ci chodzi, rozciaga sie ladnie, ale bez sztywno ustalonej wysokosci nie dziala mi background-repeat w #tresc.Tlo pojawia sie tylko do miejsca do ktorego jest tekst w przypadku gdy jest on mniejszy niz wymuszony min-height

Ten post edytował clansman5 26.05.2007, 09:15:08
Go to the top of the page
+Quote Post
barat
post 26.05.2007, 10:12:57
Post #6





Grupa: Zarejestrowani
Postów: 183
Pomógł: 0
Dołączył: 19.05.2007

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

Tlo ustaw nie dla treść tylko dla kontenera w którym znajduje się tek tekst smile.gif
Wtedy będzie obojętne który Div go rozciągał smile.gif

Ten post edytował barat 26.05.2007, 10:29:21
Go to the top of the page
+Quote Post
clansman5
post 26.05.2007, 10:33:43
Post #7





Grupa: Zarejestrowani
Postów: 21
Pomógł: 0
Dołączył: 23.09.2006

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

wlasnie teraz mam mniej wiecej taka sytuacje:

[HTML] pobierz, plaintext 
  1. <div id="kontener">
  2.  
  3.    <div id="tresc">
  4.           <div id="rozpychacz"></div>
  5.    </div>
  6.  
  7.    .....
  8. </div>
[HTML] pobierz, plaintext


Dla kontenera tla ustawic nie moge, mam natomiast ustawione dla "tresc" po wszystkimi poza Firefoxem tlo jest ladnie rozciagniete. W FF dochodzi tylko do pozycji tekstu. Dodam tylko ze

tresc ma nastepujace atrybuty:
[HTML] pobierz, plaintext 
  1. width:780px;
  2. 	height: auto;
  3. 	background-image: url(images/pbd_03.jpg);
  4. 	background-repeat: repeat-y;
  5. 	background-position: top left;
[HTML] pobierz, plaintext
Go to the top of the page
+Quote Post
barat
post 26.05.2007, 10:44:01
Post #8





Grupa: Zarejestrowani
Postów: 183
Pomógł: 0
Dołączył: 19.05.2007

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

height: auto; to chyba niepotrzebne winksmiley.jpg
repeay-y znaczy się powtarzane ma być tylko w poziomie ? To powinno się rozciągnąć aż do konca div'a ... czyli na 780px ...

background-position: top left; to chyba też zbędne bo to tak jest dafault smile.gif

Ten post edytował barat 26.05.2007, 10:44:35
Go to the top of the page
+Quote Post
orideith
post 26.05.2007, 10:45:34
Post #9





Grupa: Zarejestrowani
Postów: 72
Pomógł: 1
Dołączył: 21.07.2006

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

Tu masz hacka na min-height dla badziewia może Ci pomoże.
http://www.cssplay.co.uk/boxes/minheight.html


--------------------
projektowanie stron warszawa ::: projektowanie www ::: projekty www
Go to the top of the page
+Quote Post
clansman5
post 26.05.2007, 10:50:18
Post #10





Grupa: Zarejestrowani
Postów: 21
Pomógł: 0
Dołączył: 23.09.2006

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

Cytat(barat @ 26.05.2007, 10:44:01 ) *
height: auto; to chyba niepotrzebne winksmiley.jpg
repeay-y znaczy się powtarzane ma być tylko w poziomie ? To powinno się rozciągnąć aż do konca div'a ... czyli na 780px ...

background-position: top left; to chyba też zbędne bo to tak jest dafault smile.gif


no wlasnie nie w poziomie, tylko w pionie. Obrazek tla ma wymiary:

780x1

tak wiec jest to pojedyncza powtarzajaca sie linia (gradientu dokladnie mowiac)
Pod IE, OPera dziala, natomiast firefox daje tyle linii tego tla ile jest tekstu. Jak to naprawic ?
Go to the top of the page
+Quote Post
barat
post 26.05.2007, 10:51:44
Post #11





Grupa: Zarejestrowani
Postów: 183
Pomógł: 0
Dołączył: 19.05.2007

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

daj linka do tego szablonu - skończę odkurzać mieszkanie to zobaczę smile.gif
Bo aż mi się wierzyć nie chce smile.gif

dodatkowo:

margin: 0px 0px 0px 0px;
padding: 0px 0px 0px 0px;

w body a potem w tekscie - bez sensu smile.gif

Najlepiej rób tak zwany global reset na początku CSS'a

* {margin: 0; padding 0}

wtedy każdy element który zamieścisz na stronie jest bez żadnych marginesów smile.gif

dodatkowo - nie robimy 0px ... zero jest zawsze zerem - czy to metry, czy to piksele czy cale smile.gif wystarczy ... 0 smile.gif

Ten post edytował barat 26.05.2007, 11:03:06
Go to the top of the page
+Quote Post
clansman5
post 26.05.2007, 11:03:01
Post #12





Grupa: Zarejestrowani
Postów: 21
Pomógł: 0
Dołączył: 23.09.2006

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

Alez prosze cie bardzo i z gory dziekuje za zaangazowanie i za pomoc

PBD
Go to the top of the page
+Quote Post
barat
post 26.05.2007, 11:27:08
Post #13





Grupa: Zarejestrowani
Postów: 183
Pomógł: 0
Dołączył: 19.05.2007

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

To po kolei , jak już mówiłem , global reset, zero to zero itp smile.gif

Skoro dla Div'a logo ustawiłeś stałą wysokość i szerokość to po co TOP wstawiasz jako <img ? nie lepiej w CSS dopisać background-image ?

Tak samo z menu - wstaw jako tło

A teraz rozwiązanie Twojego problemu:

Warstwę z clear: both umieść w warstwie tresc:

[HTML] pobierz, plaintext 
  1. <div id="tresc"><div id="rozpychacz"></div>
  2.  
  3. 	<p>lorem ipsum</p>
  4.  
  5. 	<p>lorem ipsum</p>
  6. 	<p>lorem ipsum</p>
  7. 	<p>lorem ipsum</p>		
  8.  
  9.  
  10. <div id="clear"></div>
  11. 	</div>
[HTML] pobierz, plaintext


i w stylu

div#clear {clear: both;}

Bo obecnie rozpychacz jest wyciągnięty z normalnego biegu strony i jest ustawiony na te 300px z hakiem i "spycha" stopke (która ma atrybut clear) ale nie rozciaga div'a z tekstem bo ten DIV "uważa" że tego rozpychacza tam nie ma smile.gif
Jak wstawpisz ten clear co napisałem to ten ze stopki możesz spokojnie wywalić smile.gif

Ten post edytował barat 26.05.2007, 11:58:10
Go to the top of the page
+Quote Post
clansman5
post 26.05.2007, 12:22:49
Post #14





Grupa: Zarejestrowani
Postów: 21
Pomógł: 0
Dołączył: 23.09.2006

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

wielkie dzieki, pomoglo. Mam jeszcze jeden malutki problem zwiazany z ta metodaa mianowicie:



chodzi o ten maly uskok o 1px spowodowany obecnoscia "rozpychacza". Da sie to jakos zniwelowac czy tez trzeba z tym zyc ?

Mam nadzieje ze jest to widoczne na obrazku
Go to the top of the page
+Quote Post
barat
post 26.05.2007, 12:27:33
Post #15





Grupa: Zarejestrowani
Postów: 183
Pomógł: 0
Dołączył: 19.05.2007

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

hmm cały tekst wstaw w drugi div ... który też będzie miał float smile.gif
Wtedy będą dwa div-y obok siebie (rozpychacz i z treścią) wewnatrz Div'a tresc smile.gif
Wtedy dowolna tresc zawarta w tym DIVie w każdym momencie będzie odsunięta o ten 1px od lewej krawędzi (bo tyle ma rozpychacz).

Tyle kombinowania przez wspamiałe IE nie obsługujące atrybutu min-height ... tongue.gif

Ten post edytował barat 26.05.2007, 12:30:04
Go to the top of the page
+Quote Post
clansman5
post 26.05.2007, 12:34:57
Post #16





Grupa: Zarejestrowani
Postów: 21
Pomógł: 0
Dołączył: 23.09.2006

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

Masakra....
Ogolnie troche mnie to odstrasza w CSS a co by bylo w przypadku jakiegos prawdziwego skomplikowanego ukladu ?

Wielkie dzieki za pomoc
Go to the top of the page
+Quote Post
barat
post 26.05.2007, 13:21:08
Post #17





Grupa: Zarejestrowani
Postów: 183
Pomógł: 0
Dołączył: 19.05.2007

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

to wcale nie jest tak skomplikowane jak myślisz smile.gif
W Twoim przypadku to był banał smile.gif
Trochę posiedzisz z CSS i będziesz się dziwił jak mogłeś uważać tabelki za wygodne smile.gif
Go to the top of the page
+Quote Post
e_kangu
post 18.02.2008, 22:24:24
Post #18





Grupa: Zarejestrowani
Postów: 3
Pomógł: 0
Dołączył: 20.10.2006

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

Odświeżam temat, ale nie chciałem zaczynać nowego.
Ostatnio, w końcu chciałem się przerzucić z tabelek na divy, niby wszystko jest ok, ale problem pojawia się kiedy poszczególne divy mają się "rozciągać"

Widzę, że macie doświadczenie przy takich szablonach, dlatego mam prośbę żeby ktoś napisał jak tabelka:
[HTML] pobierz, plaintext 
  1. <table class="ramka"  border="0" cellspacing="0" cellpadding="0">
  2.   <tr>
  3.     <td class="ra_lg_rog"></td>
  4.     <td class="ra_sg"></td>
  5.     <td class="ra_pg_rog"></td>
  6.   </tr>
  7.   <tr>
  8.     <td class="lb"></td>
  9.     <td class="ra_tresc"> asdasdasd</td>
  10.     <td class="ra_pb"></td>
  11.   </tr>
  12.   <tr>
  13.     <td class="ra_ld_rog"></td>
  14.     <td class="ra_ds"></td>
  15.     <td class="ra_pd_rog"></td>
  16.   </tr>
  17. </table>
[HTML] pobierz, plaintext 

[HTML] pobierz, plaintext 
  1. .ramka {
  2. 	text-align: left;
  3. 	vertical-align: top;
  4. }
  5. .ramka .ra_lg_rog {
  6. 	background-image: url(grafiki/ramki/lg_rog.gif);
  7. 	background-repeat: no-repeat;
  8. 	height: 5px;
  9. 	width: 5px;
  10. }
  11. .ramka .ra_pg_rog {
  12. 	background-image: url(grafiki/ramki/pg_rog.gif);
  13. 	background-repeat: no-repeat;
  14. 	height: 5px;
  15. 	width: 5px;
  16. }
  17. .ramka .lb {
  18. 	background-image: url(grafiki/ramki/lb.gif);
  19. 	background-repeat: repeat-y;
  20. 	width: 5px;
  21. }
  22. .ramka .linia {
  23. 	clear: both;
  24. 	float: none;
  25. }
  26.  
  27. .ramka .ra_tresc {
  28. 	background-color: #B2C4D2;
  29. }
  30.  
  31.  
  32.  
  33. .ramka .ra_sg {
  34. 	background-image: url(grafiki/ramki/sg.gif);
  35. 	background-repeat: repeat-x;
  36. 	height: 5px;
  37. }
  38. .ramka .ra_pb {
  39. 	background-image: url(grafiki/ramki/pb.gif);
  40. 	background-repeat: repeat-y;
  41. 	width: 5px;
  42. }
  43. .ramka .ra_ld_rog {
  44. 	background-image: url(grafiki/ramki/ld_rog.gif);
  45. 	background-repeat: no-repeat;
  46. 	height: 5px;
  47. 	width: 5px;
  48. }
  49. .ramka .ra_ds {
  50. 	background-image: url(grafiki/ramki/sd.gif);
  51. 	background-repeat: repeat-x;
  52. 	height: 5px;
  53. }
  54. .ramka .ra_pd_rog {
  55. 	background-image: url(grafiki/ramki/pd_rog.gif);
  56. 	background-repeat: no-repeat;
  57. 	height: 5px;
  58. 	width: 5px;
  59. }
[HTML] pobierz, plaintext

będzie wyglądać na divach

pewnie jest to dla was prosta rzecz, a najlepiej to zrozumiem jak zobaczę jak powinno wyglądać

jeżeli podaje wszystkie rozmiary divów wszystko jest ok, ale kiedy szerokość i wysokość ma się dostosowywać, lub tylko wysokość nie wygląda to tak jak powinno
Go to the top of the page
+Quote Post
« Następny starszy · CSS · Następny nowszy »
 

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

 

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

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

RSS Wersja Lo-Fi Aktualny czas: 22.06.2025 - 01:08
Powered By IP.Board © 2025  IPS, Inc.
All changes by PHP.pl Administrators
Hosting zapewnia NQ.pl hosting, trac, svn