Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: div problem z ustwieniem paneli
Forum PHP.pl > Forum > Po stronie przeglądarki > CSS
ygbd
3.10.2006, 20:27:32
Usiłuję za pomocą div'ów ustawić położenie poszczególnych elementów strony i niestety ugrzęzłem sad.gif.
Stopka i nagłówek wydaje sie ok we wszytkich przeglądarkach, lewy panel gdzie znajduje się menu także.
Natomiat problem jest z prawym panelem, w którym będzie znajdowała się treść strony.
W IE chyba działa tak jak powinno być, natomiast w Firefox'ie i Operze prawy panel ucieka pod lewy (wygląda to jakbym miał dwie stopki). Poniżej kod css i html, oraz rysunek poglądowy dla tych którzy nie zrozumieli mojego opisu winksmiley.jpg.
Sprawa dla osób obeznanych z div'ami jest chyba banalnie prosta, ale ja nie mogę załapać, gdzie tkwi błąd.

[HTML] pobierz, plaintext 
  1. body { /*
  2. text-align: center; 
  3. */
  4. margin: 0; 
  5. padding: 0; 
  6. background: white; 
  7. font-family: Tahoma, Verdana, Arial, Helvetica; 
  8. font-size: 13px; 
  9. } 
  10.  
  11. div#glowny { 
  12. text-align: left; 
  13. width: 100%; 
  14. margin: 0; 
  15. padding: 0; 
  16. } 
  17.  
  18. div#menu { /* lewy panel */
  19. border-right: 1px solid black; 
  20. float:left;
  21. /*
  22. width:99%;
  23. */
  24. width:170px;
  25.  
  26. height:525px;
  27. } 
  28.  
  29. div#panel_tresci { 
  30. text-align: left;
  31. border: 2px solid red; 
  32. float:left;
  33.  
  34. padding-left: 10px;
  35. padding-right: 10px;
  36. padding-top: 10px;
  37. padding-bottom: 10px;
  38. } 
  39.  
  40. div#menu_wewnetrzne_linki { /* menu wewnętrzne */
  41. margin-left: 10px;
  42. margin-top: 0px;
  43. border: 1px solid black; 
  44. width:148px;
  45. height:66px;
  46. }
  47.  
  48. div#naglowek {  /* nagłówek */
  49. width: 100%; 
  50. text-align: center; 
  51. height: 21px; 
  52. font-weight: bold;
  53. background: green; 
  54. color: #F5F5F5; 
  55. clear: both; 
  56. } 
  57.  
  58. div#stopka{ /* stopka */
  59. width: 100%; 
  60. text-align: center; 
  61. height: 21px; 
  62. font-weight: bold;
  63. background: green; 
  64. color: #F5F5F5; 
  65. clear: both; 
  66. }
[HTML] pobierz, plaintext 


[HTML] pobierz, plaintext 
  1. <html xmlns="http://www.w3.org/1999/xhtml"> 
  2. <head> 
  3. <title>Mój pierwszy layout</title> 
  4. <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-2" /> 
  5.  
  6. <link rel="stylesheet" type="text/css" media="all" href="style.css" /> 
  7. </head> 
  8.  
  9. <body> 
  10. <div id="glowny"> 
  11. 	<div id="naglowek">
  12. 		Naglowek
  13. 	</div> 
  14.  
  15.  
  16.  
  17. 	<div id="menu"> 
  18.  
  19. 		<div id="menu_wewnetrzne_linki"> 
  20. 			 •  <a href="http://temp/1link.html">Pierwszy link</a><br>
  21. 			 •  <a href="http://temp/1link.html">Drugi link</a><br>
  22. 			 •  <a href="http://temp/1link.html">Trzeci link</a>
  23. 		</div> 
  24. 		<br>
  25.  
  26. 	</div> 
  27.  
  28. 	<div id="panel_tresci"> 
  29. 		Turecki samolot pasażerski, który nad Grecją nadał sygnał alarmowy o porwaniu, wylądował we wtorek we włoskim mieście Brindisi.
  30. Samolot leciał z Tirany do Stambułu ze 107 osobami na pokładzie.
  31. 	</div> 
  32.  
  33.  
  34.  
  35. 	<div id="stopka">
  36. 		Stopka
  37. 	</div> 
  38.  
  39.  
  40. </div> 	
  41.  
  42.  
  43. </body> 
  44. </html>
[HTML] pobierz, plaintext


vallerius
3.10.2006, 20:54:15
Moim zdaniem nie osiągniesz zamierzonego celu posługując się div'em, gdyż div jest 'blokiem' zawartosci, tzn ze po jego zakończeniu przechodzisz do nowej linii, można by użyć span, ale nie wiem czy się uda to zrobić tak jak jest to zamierzone.
Najlepiej moim zdaniem użyć tabeli ;]
s_w_ir
3.10.2006, 21:09:58
vallerius Ty się nie kompromituj...
ygbd robisz tak:
Kod
div#menu { /* lewy panel */
border-right: 1px solid black;
float:left;
/*
width:99%;
*/
width:20%;
height:525px;
}

div#panel_tresci {
text-align: left;
width: 79%;
border: 2px solid red;
float:left;
}

Jeśli koniecznie chcesz te paddingi to musisz w tym divie 79% zrobić jeszcze jednego diva i w nim już bez problemu możesz nadawć paddinigi.
Strony rób zawsze najpierw pod FF i opere , później pod IE.



edit to vallerius:
To było by miło gdybyś ucząc się przekazywał innym tą wiedzę której jesteś pewien. Pozdrawiam.
vallerius
3.10.2006, 21:16:06
Ja sie nie kompromituje, ale ucze winksmiley.jpg
ygbd
3.10.2006, 22:03:31
dzięki, niby tak robiłem, ale chyba jakiś jestem pokręcony, bo po ustawianiu szerokości paneli procentowo nie działało tak jak trzeba.
A gdybym chciał ustawić lewy panel na "sztywno", a prawy miałby być dynamiczny, bo musiałbym je wstawić w trzeci.
s_w_ir
3.10.2006, 22:07:20
Osobiście nie znam metody która łączy sztywność z płynnością, tzn. np.: px i procenty. W CSSie nie ma odpowiednika width="*", a przynajmniej nic mi o nim nie wiadomo. Jeśli stworzysz płynny layout to będzie on Bardziej nie zawodny, więc nie ma tego złego smile.gif
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.