Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: [CSS][HTML] Zaokrąglone menu na DIV-ach
Forum PHP.pl > Forum > Przedszkole
Walian
30.01.2010, 18:46:06
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
ats2008
31.01.2010, 12:40:53
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.
Walian
31.01.2010, 13:41:44
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).
ats2008
31.01.2010, 16:02:12
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.
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.