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 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
2 Stron V   1 2 >  
 Start new topic
Odpowiedzi (1 - 19)
Zajec
post
Post #2





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

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

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"?>
Go to the top of the page
+Quote Post
BDCC
post
Post #3





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

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

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?
Go to the top of the page
+Quote Post
mike
post
Post #4





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

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

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





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

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

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





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

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

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

Ten post edytował BDCC 17.05.2006, 22:34:19
Go to the top of the page
+Quote Post
Zajec
post
Post #7





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
mike
post
Post #8





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
BDCC
post
Post #9





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

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

@Zając zrobiłem tak, ale są dostępy w Operze miedzy tytułem menu, a menu...
Go to the top of the page
+Quote Post
Zajec
post
Post #10





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

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

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





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

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

http://xdcc.i-rpg.org/bdcc/hack/nowy2.html

Na końcu menu zostaje pasek...
Go to the top of the page
+Quote Post
mike
post
Post #12





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

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

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





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

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

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


Ten post edytował Zajec 21.06.2006, 09:12:11
Go to the top of the page
+Quote Post
mike
post
Post #14





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

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

~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
Go to the top of the page
+Quote Post
BDCC
post
Post #15





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

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

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...

Ten post edytował BDCC 23.06.2006, 22:13:57
Go to the top of the page
+Quote Post
Vogel
post
Post #16





Grupa: Zarejestrowani
Postów: 402
Pomógł: 0
Dołączył: 20.01.2003

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

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


--------------------
· vogel.art.pl · Regular Expression Studio · Goniec - Rowerowe Usługi Kurierskie ·
Go to the top of the page
+Quote Post
BDCC
post
Post #17





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

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

http://xdcc.i-rpg.org/bdcc/hack/nowy3.php <- lol
Go to the top of the page
+Quote Post
Vogel
post
Post #18





Grupa: Zarejestrowani
Postów: 402
Pomógł: 0
Dołączył: 20.01.2003

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

nie "lol" tylko nie potrafisz zlozyc porawnego xHTMLa zerknij ile masz błędów.


--------------------
· vogel.art.pl · Regular Expression Studio · Goniec - Rowerowe Usługi Kurierskie ·
Go to the top of the page
+Quote Post
BDCC
post
Post #19





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

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

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...

Ten post edytował BDCC 17.07.2006, 18:42:29
Go to the top of the page
+Quote Post
Zajec
post
Post #20





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

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

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.

Ten post edytował Zajec 17.07.2006, 22:30:23
Go to the top of the page
+Quote Post
« Następny starszy · CSS · Następny nowszy »
 

2 Stron V   1 2 >
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: Przełącz na: Standardowy · Linearny+ · Przełącz na: Drzewo

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

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