Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: div+css
Forum PHP.pl > Forum > Po stronie przeglądarki > CSS
BDCC
5.05.2006, 19:07:23
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 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....
Zajec
6.05.2006, 09:06:58
Wcisnąć tam img z float:right :-) Poza tym jeśli już zadeklarowałeś domyślne wartości margin i padding na 0 (poprzez * { }) to nie musisz ich ponownie zerować dla poszczególnych bloków.

http://zajec.net/test/pokemony

[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. <base href="http://www.pokemony.com/hack/" />
  7. <style type="text/css">
  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. }
  20.  
  21. h1 {
  22.        color: #FFFFFF;
  23.        font-size: 20px;
  24.        font-weight: bold;
  25.        text-decoration: none;
  26.        text-align: center;
  27.        font-face: Times New Roman;
  28. }
  29.  
  30. a {
  31.        color: #FFFFFF;
  32.        text-decoration: none;
  33. }
  34.  
  35. a:hover {
  36.        color: #FFFFFF;
  37.        text-decoration: none;
  38.        font-weight: bold;
  39. }
  40.  
  41. th {
  42.        background: #000000;
  43.        color: #FFFFFF;
  44. }
  45.  
  46. #glowny {
  47.        margin: 0 auto;
  48.        background: #4B4B4B;
  49.        width: 777px;
  50. }
  51.  
  52. #top {
  53.        background: url(layout/logo.jpg) no-repeat top;
  54.        width: 777px;
  55.        height: 78px;
  56. }
  57.  
  58. #pasek {
  59.        background: url(layout/top_tlo.gif) repeat-x top;
  60.        font-weight: bold;
  61.        width: 777px;
  62.        height: 78px;
  63.        text-align: center;
  64. }
  65.  
  66. #pasek a:hover {
  67.        text-decoration: underline;
  68. }
  69.  
  70. #lewe {
  71.        width: 150px;
  72.        background-color: green;
  73.        float: left;
  74. }
  75.  
  76. #srodek {
  77.        width: 400px;
  78.        background-color: grey;
  79.        float: left;
  80. }
  81.  
  82. #prawe {
  83.        width: 150px;
  84.        background-color: green;
  85.        float: right;
  86. }
  87.  
  88. #stopka {
  89.        width: 777px;
  90.        height: 20px;
  91.        background-color: pink;
  92.        clear: both;
  93. }
  94. </style>
  95.  
  96. <body><div id="glowny>
  97.  
  98. <div id="top"></div>
  99.  
  100. <div id="pasek">
  101.       <a href="/hack/index.php">Strona główna</a> | 
  102.       <a href="http://firefoks.be/anime/">Forum Dyskusyjne</a>
  103.       <img src="layout/deo.jpg" style="float: right;" />
  104. </div>
  105.  
  106. <div id="lewe">
  107.       Menu lewe
  108. </div>
  109.  
  110. <div id="srodek">
  111.       Srodek
  112. </div>
  113.  
  114. <div id="prawe">
  115.       Menu prawe
  116. </div>
  117.  
  118. <div id="stopka">
  119.       Stopka
  120. </div>
  121.  
  122. </div></body>
  123. </html>
[HTML] pobierz, plaintext

Pamiętaj, żeby IE nie serwować kodu
Kod
<?xml version="1.0" encoding="ISO-8859-2"?>
BDCC
16.05.2006, 17:21:16
Teraz mam trochę inny problem. Chodzi o menu.. Zauważyłem, że składa się on z odzielnych grafik w tabelkach co w divie wydaje się niemożliwe... Może ktoś mi pomóc?
mike
16.05.2006, 17:27:24
Menu tutaj to prosta sprawa.
Dajesz tak.
[HTML] pobierz, plaintext 
  1. <div class="menu">
  2.   <h4>Pomoce</h4>
  3.   <ul>
  4.     <li>Tutoriale</li>
  5.     <li>Pokemon Hex</li>
  6.     <li>Item Hex</li>
  7.     <li>Tilesety</li>
  8.     <li>Tabele</li>
  9.   </ul>
  10.   <img src="" alt="bootom" />
  11. </div>
[HTML] pobierz, plaintext

Dla <h2> dajesz tło a teks centrujesz.
Dla <ul> dajesz powtarzalne tło, tło repeat-y
I na końcu dajesz obrazek, który zakończy wszystko ładnie.
Zajec
16.05.2006, 18:19:13
Gdybyś podawał link do wersji nad którą aktualnie pracujesz, byłoby nam też łatwiej ;-)

Przynajmniej mi by się pewnie udało kilka rzeczy do poprawki wyłapać.
BDCC
17.05.2006, 22:31:15
Orginał: http://www.pokemony.com/hack/
Obrazki: http://www.pokemony.com/hack/layout
Wersja nad którą pracuje: http://xdcc.i-rpg.org/bdcc/hack

Proszę o pomysł jakiś ... W operze menu się krzaczy trochę...

W menu po dole widać mały pasek tła... A przed tytułem menu i menu jest dostęp
Zajec
17.05.2006, 22:58:15
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.
mike
17.05.2006, 23:03:01
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.
BDCC
1.06.2006, 12:01:37
@Zając zrobiłem tak, ale są dostępy w Operze miedzy tytułem menu, a menu...
Zajec
1.06.2006, 15:01:28
Cytat(BDCC @ 1.06.2006, 13:01 ) *
@Zając zrobiłem tak, ale są dostępy w Operze miedzy tytułem menu, a menu...
Eh, a myślałem, że napisałem wystarczająco prostym i obrazowym językiem. Nie zastosowałeś żadnej podanej przeze mnie modyfikacji!

Popatrz na ten kod:
Kod
#tyt {
        background: url(layout/menu_title.gif);
        width: 137px;
        height: 26px;
        text-align: center;
        font-weight: bold;
        padding-top: 4px;
        border: 0px;
}


Wysokość elementu = height + padding-top + padding-bottom = 26px + 4px + 0px = 30px

A Twój obrazek http://xdcc.i-rpg.org/bdcc/hack/layout/menu_title.gif ma tylko 26px wysokości.

Zamień height: 26px; na height: 22px; i wtedy wysokość elementu wyjdzie Ci na właściwe 26px.

I zastosuj może moje pozostałe rady.




Cytat(mike_mech @ 18.05.2006, 00:03 ) *
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.
Nie, nie, nie. Zbędne kombinowanie.

Wystarczy IE serwować w pierwszej linijce DOCTYPE strict i będzie ładnie działać.
BDCC
17.06.2006, 18:32:29
http://xdcc.i-rpg.org/bdcc/hack/nowy2.html

Na końcu menu zostaje pasek...
mike
17.06.2006, 20:25:07
Cytat(Zajec @ 1.06.2006, 16:01 ) *
Cytat(mike_mech @ 18.05.2006, 00:03 ) *

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.

Nie, nie, nie. Zbędne kombinowanie.

Wystarczy IE serwować w pierwszej linijce DOCTYPE strict i będzie ładnie działać.

Chyba raczej niezbędne tongue.gif
Przecież nie przeskoczysz faktu, że poprawny dokument XHTML powienien być wysłany jako XML.
[HTML] pobierz, plaintext 
  1. <?xml version="1.0" encoding="utf-8"?>
  2. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
  3.  
  4. <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="pl" >
  5. <?!-- dalsza cz&#281;&#347;&#263; -->
[HTML] pobierz, plaintext


Conditional Comments są niestety jedynym uniwersalnym rozwiązaniem.
Zajec
21.06.2006, 09:10:35
Cytat(mike_mech @ 17.06.2006, 21:25 ) *
Chyba raczej niezbędne tongue.gif
Przecież nie przeskoczysz faktu, że poprawny dokument XHTML powienien być wysłany jako XML.

Owszem. Więc poprawny dokument XHTML wysyłamy tylko tym przeglądarkom, które chwalą się obsługą XHTMLa.


[PHP] pobierz, plaintext 
  1. <?php
  2. if (stristr($_SERVER[HTTP_ACCEPT], "application/xhtml+xml"))
  3. {
  4. header("Content-Type: application/xhtml+xml; charset=utf-8");
  5. echo '<?xml version="1.0" encoding="utf-8"?>'."rn";
  6. echo '<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"'."rn";
  7. echo '"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">'."rn";
  8. }
  9. else
  10. {
  11. header("Content-Type: text/html; charset=utf-8");
  12. echo '<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"'."rn";
  13. echo '"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">'."rn";
  14. }
  15. ?>
[PHP] pobierz, plaintext
mike
21.06.2006, 09:25:17
~Zajec zakładasz użycie innej technologii.
Nie każdy domument XHTML jest generowany przez php lub inny język server-side.
A poza tym ten skrypt mozna oszukać wiec jest zawodny.
Moim zdaniem akurat w tym przypadku lepiej leczyć niż zapobiegać smile.gif

Co nie zmienia faktu że w zasadzie obaj mamy rację smile.gif
BDCC
23.06.2006, 21:57:44
Odrazu lepiej smile.gif Tylko chyba skrypt jest troche zły, bo wywalau góry to:
http://xdcc.i-rpg.org/bdcc/hack/nowy3.html
Pod badzIEwIEm nic wyglądem się nie zmieniło...
Vogel
23.06.2006, 22:40:04
jizas. wklejasz kod php do HTMLa? to nie bedize dzialac (chyba ze serwer skonfigurujesz by i html'e byly mielone przez php).

zmien rozszerzenie z .html na .php
BDCC
24.06.2006, 10:04:31
http://xdcc.i-rpg.org/bdcc/hack/nowy3.php <- lol
Vogel
24.06.2006, 10:39:21
nie "lol" tylko nie potrafisz zlozyc porawnego xHTMLa zerknij ile masz błędów.
BDCC
17.07.2006, 18:19:51
http://xdcc.i-rpg.org/bdcc/hack/nowy3.php <- błędy poprawiłem a CSS'a nadal nie chce czytać

@Zajec <- ten skrypt php właśnie tak robi...
Zajec
17.07.2006, 22:30:00
Cytat(BDCC @ 17.07.2006, 19:19 ) *
http://xdcc.i-rpg.org/bdcc/hack/nowy3.php <- błędy poprawiłem a CSS'a nadal nie chce czytać

Wyrzuć te swoje
Kod
<!--
-->
które są niepoprawne w XHTML. Z ich powodu strona nie wyświetla mi się w Operze.
BDCC
18.07.2006, 08:22:26
http://xdcc.i-rpg.org/bdcc/hack/nowy3.php <- wyrzuciłem

By ktoś pomógł z tym menu? Bo nie moge rozgryść jak zrobić styl, żeby badzIEwie go jakoś zgodnie z zamiarem przecztało ...
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.