Witaj Gościu! ( Zaloguj | Rejestruj )

Forum PHP.pl

> div+css
BDCC
post
Post #1





Grupa: Zarejestrowani
Postów: 25
Pomógł: 0
Dołączył: 27.01.2006

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

Mam problem... Poprawiam stronę kolegi, która w każdej przeglądarce inaczej się wświetla... Jego strona była w tabelkach, ja w myśl o nowoczesności używam diva (IMG:http://forum.php.pl/style_emoticons/default/tongue.gif) Jest pewien problem... Oto link do tego layu: lo.gif' target='_blank pod tym. Ja zrobiłem coś takiego:
[HTML] pobierz, plaintext 
  1. <?xml version="1.0" encoding="ISO-8859-2"?>
  2. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
  3. "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
  4. <html xmlns="http://www.w3.org/1999/xhtml">
  5. <head>
  6. <style type="text/css">
  7. <!--
  8. * {
  9.         margin: 0;
  10.         padding: 0;
  11.         border: 0;
  12. }
  13.  
  14. body {
  15.         font: 12px Helvetica, Tahoma, Arial, sans-serif;
  16.         font-weight: normal;
  17.         color: #FFFFFF;
  18.         background: #4B4B4B;
  19.         margin: 0px auto;
  20.         padding: 0px;
  21.         text-align: center;
  22. }
  23.  
  24. h1 {
  25.         color: #FFFFFF;
  26.         font-size: 20px;
  27.         font-weight: bold;
  28.         text-decoration: none;
  29.         text-align: center;
  30.         font-face: Times New Roman;
  31. }
  32.  
  33. a {
  34.         color: #FFFFFF;
  35.         text-decoration: none;
  36. }
  37.  
  38. a:hover {
  39.         color: #FFFFFF;
  40.         text-decoration: none;
  41.         font-weight: bold;
  42. }
  43.  
  44. th {
  45.         background: #000000;
  46.         color: #FFFFFF;
  47. }
  48.  
  49. #glowny {
  50.         text-align: center;
  51.         background: #4B4B4B;
  52.         padding: 0px;
  53.         width: 777px;
  54. }
  55.  
  56. #top {
  57.         background: url(layout/logo.jpg) no-repeat top;
  58.         padding: 0px;
  59.         width: 777px;
  60.         height: 78px;
  61. }
  62.  
  63. #pasek {
  64.         background: url(layout/top_tlo.gif) repeat-x top;
  65.         padding: 10px;
  66.         font-weight: bold;
  67.         padding-top: 0px;
  68.         width: 777px;
  69.         height: 78px;
  70.         vertical-align: top;
  71.         text-align: left;
  72. }
  73.  
  74. #pasek a:hover {
  75.         text-decoration: underline;
  76. }
  77.  
  78. #lewe {
  79.         width: 150px;
  80.         background-color: green;
  81.         float: left;
  82. }
  83.  
  84. #srodek {
  85.         width: 400px;
  86.         background-color: grey;
  87.         float: left;
  88. }
  89.  
  90. #prawe {
  91.         width: 150px;
  92.         background-color: green;
  93.         float: right;
  94. }
  95.  
  96. #stopka {
  97.         width: 777px;
  98.         height: 20px;
  99.         background-color: pink;
  100.         clear: both;
  101. }
  102.  
  103. #deo {
  104.         background: url(layout/deo.jpg) no-repeat top right;
  105.         padding: 0px;
  106.         width: 111px;
  107.         height: 68px;
  108.         position: relative;
  109.         left: 656 px;
  110.             top: 190 px;
  111. }
  112. #deoz {
  113.         padding: 0px;
  114.         width: 777px;
  115.          position: relative;
  116.        
  117.             
  118. -->
  119. </style>
  120.  
  121. <body>
  122. <div id="glowny">
  123. <div id="top"></div>
  124. <div id="pasek"></div>
  125. <div id="deo">a</div>
  126. <div id="lewe">Menu lewe</div>
  127. <div id="srodek">Srodek</div>
  128. <div id="prawe">Menu prawe</div>
  129. <div id="stopka">Stopka</div>
  130. </div>
  131. </body>
  132. </html>
[HTML] pobierz, plaintext


Co zrobić, aby było tak samo w divie? Próbowałem różnych metod i żadna nie pomaga....

Ten post edytował BDCC 5.05.2006, 20:27:09
Go to the top of the page
+Quote Post
 
 Start new topic
Odpowiedzi
mike
post
Post #2





Grupa: Przyjaciele php.pl
Postów: 7 494
Pomógł: 302
Dołączył: 31.03.2004

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

Cytat(Zajec @ 2006-05-17 23:58:15)
1) Zapominasz, że w XHTML strict paddingi wliczają się do wysokości i szerokości. Tak więc:
całkowita wysokość = height + górny padding + dolny padding
całkowita szerokość = width + lewy padding + prawy padding
Jeśli więc dopisałeś padding-top: 4px i chcesz, żeby element nadał miał 26px wysokości - odejmij od tego 26 cztery piksele. Rezultat:
padding-top: 4px;
height: 22px;

Ja jeszcze dodam, że tak się dzieje w przeglądarkach.
W innych dziwnych aplikacjach typu bardzIEwIE interpretowane jest to wbrew standardom.

W IE nie będziesz musiał zmiejszać długości, bo IE traktuje padding jakby był na zewnątrz.

Przydadzą Ci się tutaj Conditional Comments dla wprowadzenia innych styli dla bardzIEwia.
Go to the top of the page
+Quote Post

Posty w temacie
- BDCC   div+css   5.05.2006, 19:07:23
- - Zajec   Wcisnąć tam img z float:right :-) Poza tym jeśli j...   6.05.2006, 09:06:58
- - BDCC   Teraz mam trochę inny problem. Chodzi o menu.. Zau...   16.05.2006, 17:21:16
- - mike_mech   Menu tutaj to prosta sprawa. Dajesz tak. [HTML] po...   16.05.2006, 17:27:24
- - Zajec   Gdybyś podawał link do wersji nad którą aktualnie ...   16.05.2006, 18:19:13
- - BDCC   Orginał: http://www.pokemony.com/hack/ Obrazki: ht...   17.05.2006, 22:31:15
- - Zajec   Teraz znacznie lepiej, zaraz to elegancko przerobi...   17.05.2006, 22:58:15
- - mike_mech   Cytat(Zajec @ 2006-05-17 23:58:15)1) Zapomina...   17.05.2006, 23:03:01
- - BDCC   @Zając zrobiłem tak, ale są dostępy w Operze miedz...   1.06.2006, 12:01:37
|- - Zajec   Cytat(BDCC @ 1.06.2006, 13:01 ) @Zając zr...   1.06.2006, 15:01:28
|- - mike_mech   Cytat(Zajec @ 1.06.2006, 16:01 ) Cytat(mi...   17.06.2006, 20:25:07
|- - Zajec   Cytat(mike_mech @ 17.06.2006, 21:25 ) Chy...   21.06.2006, 09:10:35
- - BDCC   http://xdcc.i-rpg.org/bdcc/hack/nowy2.html Na koń...   17.06.2006, 18:32:29
- - mike_mech   ~Zajec zakładasz użycie innej technologi...   21.06.2006, 09:25:17
- - BDCC   Odrazu lepiej Tylko chyba skrypt jest troche z...   23.06.2006, 21:57:44
- - Vogel   jizas. wklejasz kod php do HTMLa? to nie bedize dz...   23.06.2006, 22:40:04
- - BDCC   http://xdcc.i-rpg.org/bdcc/hack/nowy3.php <- lo...   24.06.2006, 10:04:31
- - Vogel   nie "lol" tylko nie potrafisz zlozyc por...   24.06.2006, 10:39:21
- - BDCC   http://xdcc.i-rpg.org/bdcc/hack/nowy3.php <- b...   17.07.2006, 18:19:51
|- - Zajec   Cytat(BDCC @ 17.07.2006, 19:19 ) http://x...   17.07.2006, 22:30:00
- - BDCC   http://xdcc.i-rpg.org/bdcc/hack/nowy3.php <- wy...   18.07.2006, 08:22:26

« 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: Przełącz na: Standardowy · Przełącz na: Linearny+ · Drzewo

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

RSS Aktualny czas: 6.10.2025 - 22:47
Powered By IP.Board © 2025  IPS, Inc.
All changes by PHP.pl Administrators
Hosting zapewnia NQ.pl hosting, trac, svn