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
Zajec
post
Post #2





Grupa: Zarejestrowani
Postów: 1 086
Pomógł: 8
Dołączył: 10.12.2003

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

Teraz znacznie lepiej, zaraz to elegancko przerobimy :-)

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;

2) Ten element "POMOCE" jest nagłówkiem menu. Więc użyj znacznika nagłówka: zamień
<div id="tyt">Pomoce</div>
na
<h2>Pomoce</h2>
a następnie
#tyt {
na
#lewe h2 {

Dodatkowo, jeśli nie chcesz mieć wykropkowania dla listy, dopisz
#lewe ul { list-style-type: none; }


Dodano:
3) masz taki fragment:
Kod
<img src="layout/dol.PNG" alt="bootom" />
W "alt" należy umieszczać tekst zastępczy obrazka. Ponieważ obazek-wykończenie nie niesie żadenj informacji, parametr alt znależy zostawić pusty.

Ten post edytował Zajec 17.05.2006, 23:00:25
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 - 03:21
Powered By IP.Board © 2025  IPS, Inc.
All changes by PHP.pl Administrators
Hosting zapewnia NQ.pl hosting, trac, svn