Witaj Gościu! ( Zaloguj | Rejestruj )

Forum PHP.pl

 
 Reply to this topicStart new topic
> [css] Problem z pływaniem ?
Jarod
post 18.08.2006, 18:05:15
Post #1





Grupa: Zarejestrowani
Postów: 1 190
Pomógł: 27
Dołączył: 23.04.2005

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

Na poniższych obrazkach widać co jest nie tak. Pod IE niebieski nagłówek nie dochodzi do końca kontenera. Nie wiem co zrobić. Kiedyś ten problem rozwiązywałem tak, że: czerwony nagłówek pływał do lewej, niebieski nagłówek pływał do prawej a pomiędzy nimi wstawiałem jeszcze tło. Ale przecież chodzi o to, żeby kod był przejrzysty. Poniżej zamieszczam kod. Proszę doradźcie jak to ugryżć:

HTML:
[HTML] pobierz, plaintext 
  1. <body>
  2.       <div id="naglowek">
  3.           <div class="naglowek1">Nagłówek 1</div>
  4.           <div class="naglowek2">Nagłówek 2</div>
  5.       </div>
  6.       <div id="kontener">
  7. 		  <div class="lewypasek"></div><div class="prawypasek"></div>
  8. 		  <div class="lewakolumna"></div>
  9. 		  <div class="prawakolumna"></div>
  10.           <div id="stopka"></div>
  11. 	  </div>
  12.   </body>
[HTML] pobierz, plaintext


CSS:
[HTML] pobierz, plaintext 
  1. * {
  2.     margin: 0 auto;
  3.     padding: 0;
  4. }
  5. div#naglowek {
  6. 	               width: 778px;
  7. 		       overflow: auto;
  8. }
  9. .naglowek1 {
  10.                   width: 388px;
  11.                   height: 80px;
  12.                   color: black;           
  13.                   background-color: red;
  14.                   float: left;
  15. }
  16. .naglowek2 {
  17.                   width: 389px;
  18.                   height: 80px;
  19.                   color: black;           
  20.                   background-color: blue;
  21.                   float: left;
  22. }
  23. div#kontener {
  24.                      width: 775px !important;
  25.                      width: 777px;
  26.                      color: black;
  27. 	             background-color: green;
  28. 		     border: 1px black solid;
  29. 		     overflow: auto;
  30. }
  31. .lewypasek {
  32.                   width: 202px;
  33.                   height: 10px;
  34.                   background-color: pink;
  35.                   float: left;
  36. }
  37. .prawypasek {
  38.                     margin-left: 3px;
  39.                     width: 570px;
  40.                     height: 10px;
  41.                     background-color: pink;
  42.                     float: left;
  43. }
  44. .lewakolumna {
  45.                       width: 201px;
  46.                       height: 400px;
  47.                       color: black;
  48.                       background-color: yellow;
  49.                       border-right: 1px blue dotted;
  50.                       clear: both;
  51.                       float: left;
  52. }
  53. .prawakolumna {
  54.                         margin: 20px !important;
  55.                         margin: 20px 0 20px 20px;
  56.                         padding: 20px 10px;
  57. 			width: 511px !important;
  58.                         width: 515px;
  59.                         height: 250px;
  60.                         color: black;
  61. 		        background-color: yellow;
  62.                         border: 1px black solid;
  63.                         float: left;
  64. }
  65. #stopka {
  66.               width: 775px !important;
  67.               width: 777px;
  68.               height: 20px;
  69.               color: black;
  70.               background-color: blue;
  71.               clear: both;
  72. }
[HTML] pobierz, plaintext



I obrazki dla zaprezentowania:

--> FF

--> IE

Problem rozwiązany ale częściowo. Częściowo, ponieważ ktoś kiedyś twierdził na tym forum, że da się stworzyć stronę, która będzie wyglądała tak samo pod IE bez używania
Kod
!important
i powielania kodu.

Mi do tej pory coś takiego się nie udało. Czy jest możliwość poniższy kod cssa zamienić tak aby nie używać podwójnych definicji marginesów, szerokości czy wysokości, żeby uzyskać ten sam wygląd pod Mozillą i IE? Bo walidatory się o to żucają. Jestem ciekawy propozycji.

Kod za pomocą, którego udało mi się uzyskać pożądany efekt.
CSS:
[HTML] pobierz, plaintext 
  1. * {
  2.    margin: 0 auto;
  3.    padding: 0;
  4. }
  5. div#naglowek {
  6. 			  width: 777px;
  7. 			  overflow: auto;
  8. }
  9. .naglowek1 {
  10.             width: 390px;
  11.             height: 80px;
  12.             color: black;           
  13.             background-color: red;
  14.             float: left;
  15. }
  16. .naglowek2 {
  17.             width: 387px;
  18.             height: 80px;
  19.             color: black;           
  20.             background-color: blue;
  21.             float: left;
  22. }
  23. div#kontener {
  24.               width: 775px;
  25.               color: black;
  26. 	          background-color: green;
  27. 			  border: 1px black solid;
  28. 			  overflow: auto;
  29. }
  30. .lewypasek {
  31.             width: 202px;
  32.             height: 10px;
  33.             background-color: pink;
  34.             float: left;
  35. }
  36. .prawypasek {
  37.              margin-left: 3px;
  38.              width: 570px;
  39.              height: 10px;
  40.              background-color: pink;
  41.              float: left;
  42. }
  43. .lewakolumna {
  44.               width: 201px;
  45.               height: 400px;
  46.               color: black;
  47.               background-color: yellow;
  48.               border-right: 1px blue dotted;
  49.               clear: both;
  50.               float: left;
  51. }
  52. .prawakolumna {
  53.                margin: 20px !important;
  54.                margin: 20px 0 20px 20px;
  55.                padding: 20px 10px;
  56. 			   width: 511px !important;
  57. 			   width: 515px;
  58. 			   height: 250px;
  59.                color: black;
  60. 			   background-color: yellow;
  61.                border: 1px black solid;
  62.                float: left;
  63. }
  64. #stopka {
  65.          width: 775px;
  66.          height: 20px;
  67.          color: black;
  68.          background-color: blue;
  69.          clear: both;
  70. }
[HTML] pobierz, plaintext


--------------------
”Godzina nauki w życiu nowoczesnego apostoła jest godziną modlitwy.”
(św. Josemaría Escrivá, Droga, 335)
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: 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 Wersja Lo-Fi Aktualny czas: 23.06.2025 - 14:51
Powered By IP.Board © 2025  IPS, Inc.
All changes by PHP.pl Administrators
Hosting zapewnia NQ.pl hosting, trac, svn