Witaj Gościu! ( Zaloguj | Rejestruj )

Forum PHP.pl

 
 Reply to this topicStart new topic
> [CSS][HTML] Zaokrąglone menu na DIV-ach, Psuedoprzeglądarka IE 6 jak zwykle źle wyświetla.
Walian
post 30.01.2010, 18:46:06
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):


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
ats2008
post 31.01.2010, 12:40:53
Post #2





Grupa: Zarejestrowani
Postów: 58
Pomógł: 0
Dołączył: 11.06.2009
Skąd: Lublin

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

Witaj,

Zaintrygowałeś mnie tym problemem.

Na początku powiem, że twój kod jest kompletnie nieczytelny. Nie dziw się, jeśli nikt poza mną nie odpowie... Nawet się w niego nie wczytywałem, tylko zacząłem robić od początku po swojemu.

Po pierwsze: poczytaj sobie ten artykuł o elastycznych szablonach: http://www.kurshtml.boo.pl/css/plynny_szablon,szablon.html. Nie wiem, czy jest sens robienia elastycznego menu... tylko dział info jest elastyczny, ale kwestia gustu...

Oto moje rozwiązanie: jest w jednym pliku (umieść go w katalogu, gdzie masz n.html). Nie jest ono idealne, ale jeszcze do tego wrócę. 

[HTML] pobierz, plaintext 
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-2" />
  5. <title>Untitled Document</title>
  6. <style type="text/css">
  7.  
  8.  
  9. #menu {width:30%;  height:auto; margin:0; padding:0;
  10. 	float:left;}
  11.  
  12. #info {width:68%; height:auto; margin:0; padding:0;
  13. 	float:right;}
  14.  
  15. /*clasy nagłówka*/
  16. .naglowek {overflow:hidden; 
  17. 	background:url(gfx/m.png);
  18. 	background-repeat:repeat-x;
  19. 	 width:100%;}
  20. .l {float:left; width:5%; 
  21. 	height:32px; 
  22. 	background-image:url(gfx/l.png); 
  23. 	background-repeat:no-repeat;
  24. 	background-position:left top; }
  25.  
  26.  
  27.  
  28. .r {float:right; 
  29. 	text-align:center;
  30. 	width:95%; 
  31. 	height:32px; 
  32. 	background-image:url(gfx/r.png); 
  33. 	background-repeat:no-repeat;
  34. 	background-position:right top;}
  35.  
  36. .trescmenu {width:100%; clear:both; text-align:center;}
  37.  
  38.  
  39.  
  40. </style>
  41. </head>
  42.  
  43. <body>
  44.  
  45. <!--=================MENU=================-->
  46. 	<div id="menu">
  47.  
  48. 			<div class="naglowek"><div class="l">l</div><div class="r">Nagłówek</div></div>
  49.  
  50. 		<div class="trescmenu">Treść menu </div>
  51. 	</div>
  52. <!--=================INFO=================-->
  53. 	<div id="info">
  54. 		<div class="naglowek"><div class="l">l</div><div class="r">Nagłówek</div></div>
  55. 		<div class="trescmenu">Treść Info </div>
  56. 	</div>
  57.  
  58. </body>
  59. </html>
[HTML] pobierz, plaintext


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ą), a po drugie, w moim rozwiązaniu tło kontenera div.naglowek jest na całą szerokość, stąd po bokach trzeba umieścić tło nieprzezroczyste.

Szerokość div.r i div.l ustawiłem na 5/95% - ale można jeszcze pokombinować z proporcjami. Jeśli będą za małe, to przy mniejszych rozdzielczościach obetnie ci zaokrątlenie.

Za chwilę napiszę jeszcze jeden post, bo coś lepszego przyszło mi do głowy.

Ogólnie, dzięki za problem, sporo i mnie to nauczyło.

Życzę powodzenia na przyszłość.


Rozwiązanie 2: 

[HTML] pobierz, plaintext 
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-2" />
  5. <title>Untitled Document</title>
  6. <style type="text/css">
  7.  
  8.  
  9. #menu {width:28%;  height:auto; margin:0; padding:0;
  10. 	float:left;
  11. 	padding-left:7px;
  12. 	background: url(gfx/l.png) left top no-repeat;}
  13.  
  14. #info {width:68%; height:auto; margin:0; padding:0;
  15. 	float:right;
  16. 	padding-right:7px;
  17. 	background: url(gfx/r.png) right top no-repeat;}
  18.  
  19. /*clasy nagłówka*/
  20. .around1 {width:100%; padding-left:7px; 
  21. 	background:url(gfx/l.png) top left no-repeat;
  22. 	}
  23.  
  24. .around2 {width:100%; padding-right:7px; 
  25. 	background:url(gfx/r.png) top right no-repeat;}	
  26.  
  27. .naglowek {overflow:hidden; 
  28. 	background:url(gfx/m.png);
  29. 	background-repeat:repeat-x;
  30. 	 width:100%;}
  31. .r {float:right; 
  32. 	text-align:center;
  33. 	width:100%; 
  34. 	height:32px; 
  35. 	}
  36.  
  37. .trescmenu {width:100%; clear:both; text-align:center;}
  38.  
  39.  
  40.  
  41. </style>
  42. </head>
  43.  
  44. <body>
  45.  
  46. <!--=================MENU=================-->
  47. 	<div id="menu">
  48. 		<div class="around2">
  49. 			<div class="naglowek"><div class="r">Menu</div></div>
  50.  
  51. 		</div>
  52. 		<div class="trescmenu">Treść menu </div>
  53. 	</div>
  54. <!--=================INFO=================-->
  55. 	<div id="info">
  56. 		<div class="around1">
  57. 			<div class="naglowek"><div class="r">Info</div></div>
  58. 			<div class="trescmenu">Treść Info </div>
  59. 		</div>
  60. 	</div>
  61.  
  62. </body>
  63. </html>
[HTML] pobierz, plaintext


No, teraz wyszło lepiej, jedyne na co moim zdaniem trzeba zwrócić uwagę, to margines między div#menu i div#info. Tutaj dałem 28/68%, żeby był proporcjonalny.

Pozdrawiam i życzę powodzenia.
Go to the top of the page
+Quote Post
Walian
post 31.01.2010, 13:41:44
Post #3





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
ats2008
post 31.01.2010, 16:02:12
Post #4





Grupa: Zarejestrowani
Postów: 58
Pomógł: 0
Dołączył: 11.06.2009
Skąd: Lublin

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

to jest do obejścia, trzeba dodać jeszcze jednego diva, zdjąć padding 7px z div.menu i div.info i wkleić go z backgroudem w odpowiednie miejsce.

Życzę powodzenia.



jak się już uporasz wyświetl gotowca na zamknięcie wątku, ok? Może się komuś jeszcze przyda.

Pozdrawiam.
Go to the top of the page
+Quote Post
« Następny starszy · Przedszkole · Następny nowszy »
 

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

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

RSS Wersja Lo-Fi Aktualny czas: 14.08.2025 - 14:44
Powered By IP.Board © 2025  IPS, Inc.
All changes by PHP.pl Administrators
Hosting zapewnia NQ.pl hosting, trac, svn