Witaj Gościu! ( Zaloguj | Rejestruj )

Forum PHP.pl

 
 Reply to this topicStart new topic
> div problem z ustwieniem paneli
ygbd
post
Post #1





Grupa: Zarejestrowani
Postów: 2
Pomógł: 0
Dołączył: 27.12.2005

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

Usiłuję za pomocą div'ów ustawić położenie poszczególnych elementów strony i niestety ugrzęzłem (IMG:http://forum.php.pl/style_emoticons/default/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 (IMG:http://forum.php.pl/style_emoticons/default/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


(IMG:http://img518.imageshack.us/img518/8370/layoutub3.jpg)
Go to the top of the page
+Quote Post
vallerius
post
Post #2





Grupa: Zarejestrowani
Postów: 10
Pomógł: 0
Dołączył: 2.03.2006
Skąd: Oświęcim

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

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 ;]
Go to the top of the page
+Quote Post
s_w_ir
post
Post #3





Grupa: Zarejestrowani
Postów: 315
Pomógł: 1
Dołączył: 6.08.2003
Skąd: Kielce

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

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.

Ten post edytował s_w_ir 3.10.2006, 21:24:23
Go to the top of the page
+Quote Post
vallerius
post
Post #4





Grupa: Zarejestrowani
Postów: 10
Pomógł: 0
Dołączył: 2.03.2006
Skąd: Oświęcim

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

Ja sie nie kompromituje, ale ucze (IMG:http://forum.php.pl/style_emoticons/default/winksmiley.jpg)
Go to the top of the page
+Quote Post
ygbd
post
Post #5





Grupa: Zarejestrowani
Postów: 2
Pomógł: 0
Dołączył: 27.12.2005

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

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





Grupa: Zarejestrowani
Postów: 315
Pomógł: 1
Dołączył: 6.08.2003
Skąd: Kielce

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

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 (IMG:http://forum.php.pl/style_emoticons/default/smile.gif)
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: 19.12.2025 - 18:43
Powered By IP.Board © 2025  IPS, Inc.
All changes by PHP.pl Administrators
Hosting zapewnia NQ.pl hosting, trac, svn