Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: CSS POMOCY !
Forum PHP.pl > Forum > Po stronie przeglądarki > CSS
clansman5
25.05.2007, 22:07:12
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
barat
25.05.2007, 22:16:48
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
clansman5
25.05.2007, 22:19:16
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
barat
25.05.2007, 23:20:29
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
clansman5
26.05.2007, 08:59:29
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
barat
26.05.2007, 10:12:57
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
clansman5
26.05.2007, 10:33:43
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
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
orideith
26.05.2007, 10:45:34
Tu masz hacka na min-height dla badziewia może Ci pomoże.
http://www.cssplay.co.uk/boxes/minheight.html
clansman5
26.05.2007, 10:50:18
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 ?
barat
26.05.2007, 10:51:44
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
clansman5
26.05.2007, 11:03:01
Alez prosze cie bardzo i z gory dziekuje za zaangazowanie i za pomoc

PBD
barat
26.05.2007, 11:27:08
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
clansman5
26.05.2007, 12:22:49
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
barat
26.05.2007, 12:27:33
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
clansman5
26.05.2007, 12:34:57
Masakra....
Ogolnie troche mnie to odstrasza w CSS a co by bylo w przypadku jakiegos prawdziwego skomplikowanego ukladu ?

Wielkie dzieki za pomoc
barat
26.05.2007, 13:21:08
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
e_kangu
18.02.2008, 22:24:24
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
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.