Witaj Gościu! ( Zaloguj | Rejestruj )

Forum PHP.pl

> [CSS][HTML] Zaokrąglone menu na DIV-ach, Psuedoprzeglądarka IE 6 jak zwykle źle wyświetla.
Walian
post
Post #1





Grupa: Zarejestrowani
Postów: 124
Pomógł: 1
Dołączył: 13.07.2009

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

Próbuję utworzyć menu, które posiadałoby belkę tytułową pokrytą teksturą gradientową (3 pliki) z zaokrąglonymi rogami. Chciałbym to zrobić na DIV-ach ale męczę to cały dzień i nie potrafię dostosować tego tak by działało w IE 6. Udało mi się to zrobić częściowo stosując jedną tabelę, a w pełni poprawnie dopiero stosując dwie.

Chcę to wszystko zrobić tak by:
  • Szerokość całego menu była zależna od szerokości kontenera, w którym się znajduje.
  • Menu ustala marginesy (chyba wiadomo po co).
  • Teksturowanie belki ma polegać na trzech plikach graficznych:
    • l.png ma rozmiar 7 x 32 i jest lewym narożnikiem belki.
    • m.png ma rozmiar 1 x 32 i jest rozciągane horyzontalnie.
    • r.png ma rozmiar 7 x 32 i jest prawym narożnikiem belki.


Wiem, że mogę użyć jednego pliku graficznego do takiego menu, ale wtedy, gdy będę chciał zmienić rozmiar to będę musiał tworzyć nowy plik graficzny.
Wygląd mojej strony ma wyglądać tak, że po lewej będą takie menusy, po prawej i na środku, z tymże te na środku oczywiście będą większe - w nich będą artykuły, recenzje i takie tam.
Tak więc muszą się one bezproblemowo rozciągać automatycznie w poziomie zależnie od kontenera, w którym je umieszczę.

Oto moje wypociny:
Plik html (menu na divach, na tabeli, i na dwóch tabelach):
[HTML] pobierz, plaintext 
  1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
  2. "http://www.w3.org/TR/html4/strict.dtd">
  3. <html>
  4. <head>
  5. <title>Test</title>
  6. <meta name="robots" content="noindex, nofollow">
  7. <meta http-equiv="Content-type" content="text/html; charset=utf-8">
  8. <meta http-equiv="Content-Language" content="pl">
  9. <link rel="stylesheet" href="n.css" type="text/css">
  10. </head>
  11. <body>
  12.    <div class="menu">
  13.       <div class="h">
  14.          <div class="l"></div><div class="m">Tytuł</div><div class="r"></div>
  15.       </div>
  16.       <div class="c">
  17.          <a href="" title="">Treść</a><br>
  18.          <a href="" title="">Treść</a><br>
  19.          <a href="" title="">Treść Treść</a>
  20.       </div>
  21.    </div>
  22.  
  23.    <table cellspacing="0" cellpadding="0" class="menu">
  24.       <tr>
  25.          <td class="l"></td><td class="m">Tytuł</td><td class="r"></td>
  26.             <!-- Jeśli tytuł będzie dłuższy, to IE 6 wyświetli to poprawnie... -->
  27.       </tr>
  28.       <tr>
  29.          <td colspan="3" class="c">
  30.             <a href="" title="">Treść</a><br>
  31.             <a href="" title="">Treść</a><br>
  32.             <a href="" title="">Treść Treść</a>
  33.             <!-- Jeśli treść będzie krótsza, to IE 6 wyświetli to poprawnie... -->
  34.          </td>
  35.       </tr>
  36.    </table>
  37.  
  38.    <table cellspacing="0" cellpadding="0" class="menu">
  39.       <tr>
  40.          <td>
  41.             <table cellspacing="0" cellpadding="0" style="width: 100%">
  42.                <tr>
  43.                   <td class="l"></td><td class="m">Tytuł</td><td class="r"></td>
  44.                </tr>
  45.             </table>
  46.          </td>
  47.       </tr>
  48.       <tr>
  49.          <td class="c">
  50.             <a href="" title="">Treść</a><br>
  51.             <a href="" title="">Treść</a><br>
  52.             <a href="" title="">Treść Treść</a>
  53.          </td>
  54.       </tr>
  55.    </table>
  56. </body>
  57. </html>
[HTML] pobierz, plaintext


Arkusz stylów:
[HTML] pobierz, plaintext 
  1. body
  2. {
  3. 	margin: 0;
  4. 	background-color: #fff;
  5. 	font-family: Verdana, Tahoma;
  6. 	font-size: 11px;
  7. 	color: #000;
  8. }
  9. a:link, a:active {color: #000; text-decoration: none}
  10. a:visited {color: #194b66; text-decoration: none}
  11. a:hover {color: #1e5c7d; text-decoration: underline}
  12.  
  13. /* DIV-y */
  14. div.menu {width: 100%}
  15. div.menu div.h {width: 100%; height: 32px}
  16. div.menu div.h div.l
  17. {
  18. 	float: left;
  19. 	width: 7px;
  20. 	height: 32px;
  21. 	background: red url('gfx/l.png') top left no-repeat;
  22. }
  23. div.menu div.h div.m
  24. {
  25. 	float: left;
  26. 	height: 32px;
  27. 	width: 100%;
  28. 	background: url('gfx/m.png') top left repeat-x;
  29. 	line-height: 32px;
  30. 	text-align: left;
  31. 	color: #fff;
  32. 	font-weight: bold;
  33. }
  34. div.menu div.h div.r
  35. {
  36. 	float: left;
  37. 	width: 7px;
  38. 	height: 32px;
  39. 	background: url('gfx/r.png') top left no-repeat;
  40. }
  41. div.menu div.c
  42. {
  43. 	background-color: #f0f9ff;
  44. }
  45.  
  46. /* Tabele */
  47. table.menu {width: 175px}
  48. table.menu td.l
  49. {
  50. 	width: 7px;
  51. 	background: red url('gfx/l.png') top left no-repeat;
  52. }
  53. table.menu td.m
  54. {
  55. 	height: 32px;
  56. 	background: url('gfx/m.png') top left repeat-x;
  57. 	line-height: 32px;
  58. 	text-align: left;
  59. 	color: #fff;
  60. 	font-weight: bold;
  61. }
  62. table.menu td.r
  63. {
  64. 	width: 7px;
  65. 	background: url('gfx/r.png') top left no-repeat;
  66. }
  67. table.menu td.c
  68. {
  69. 	background-color: #f0f9ff;
  70. 	border: 1px solid #065fa1;
  71. }
[HTML] pobierz, plaintext


Screen jak to wygląda w IE 6 (WinXP SP3):
(IMG:http://zapodaj.net/images/2c6da43d136d.png)

Wszystkie pliki:
http://www.sendspace.com/file/4hzrs9

Ten post edytował Walian 31.01.2010, 15:53:05
Go to the top of the page
+Quote Post
 
 Start new topic
Odpowiedzi
Walian
post
Post #2





Grupa: Zarejestrowani
Postów: 124
Pomógł: 1
Dołączył: 13.07.2009

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

Dzięki za odpowiedź.

Cytat("ats2008")
W tym rozwiązaniu zwróć uwagę na pliki l.png i r.png. One nie powinny mieć przezroczystości, tylko zaokrąglenie w kolorze tła. Po pierwsze dlatego, że IE nie obsługuje przezroczystości .png (dlatego lepiej we wszystkich plikach użyć gifa z przezroczystością) (...)

Tak, zauważyłem to wcześniej i albo użyję gifów, albo png bez kanału alfa, na razie olać to.

Pierwszy sposób:
W IE 6 wyświetla się poprawnie.
W Operze i Firefox-ie nie ma zaokrąglonych rogów (ten środkowy obrazek pokrywa całą belkę) i tekst dziwnie się rozjechał na belce.

Drugi sposób:
Tu już bliżej rozwiązania problemu, aczkolwiek nie można ustalić poprawnie bordera dla treści.
Wszystkie trzy przeglądarki wyświetlają kod bardzo podobnie (Opera i Firefox identycznie).
Go to the top of the page
+Quote Post

Posty w temacie
- Walian   [CSS][HTML] Zaokrąglone menu na DIV-ach   30.01.2010, 18:46:06
- - ats2008   Witaj, Zaintrygowałeś mnie tym problemem. Na p...   31.01.2010, 12:40:53
- - Walian   Dzięki za odpowiedź. Cytat("ats2008")W ...   31.01.2010, 13:41:44
- - ats2008   to jest do obejścia, trzeba dodać jeszcze jednego ...   31.01.2010, 16:02:12

« Następny starszy · Przedszkole · 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: 18.10.2025 - 09:20
Powered By IP.Board © 2025  IPS, Inc.
All changes by PHP.pl Administrators
Hosting zapewnia NQ.pl hosting, trac, svn