Witaj Gościu! ( Zaloguj | Rejestruj )

Forum PHP.pl

> [HTML][CSS]menu dla każdej podstrony
imysz
post
Post #1





Grupa: Zarejestrowani
Postów: 54
Pomógł: 0
Dołączył: 16.08.2009

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

Witam. chodzi mi o zrobienie czegoś takiego jak na zdjęciu zarysowałem. W zależności od tego na której podstronie się znajdujemy wtedy bloczek z menu łączy się z dużym blokiem tekstu i podświetlony napis na kolor czerwony. jak widać na załączonym obrazku. I żeby zrobić tak do wszystkich. Jest to możliwe ?

http://www.fotosik.pl/pokaz_obrazek/66f7ef25f8e144c7.html


xhtml
[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" xml:lang="pl" lang="pl">
  3. <head>
  4.  
  5. <title>projekt_02</title>
  6. <meta http-equiv="content-type" content="text/html; charset=UTF-8" />
  7. <meta http-equiv="content-language" content="pl" />
  8. <link rel="stylesheet" href="style.css" type="text/css" />
  9. </head>
  10.  
  11. <body>
  12. <div id="page">
  13.  
  14.    <div id="header">
  15.  
  16.    <form action="" method="post">
  17.    Login:
  18.    <input type="text" name="login" class="form_log" />
  19.    Password:
  20.    <input type="password" name="pass" class="form_log" />
  21.    <input type="submit" value="Zaloguj" />
  22.    </form>
  23.  
  24.    </div>
  25.  
  26.  
  27.  
  28.  
  29.             <div id="wrapper">
  30.             <p>text wrappertext wrapperteext wrapperteext wrapperteext wrappertext wrappertext wrappertext wrappertext wrappertext wrappertext wrappertext wrappertext wrappertext wrapper</p>
  31.  
  32.                   <div id="menu">
  33.  
  34.                      <ul>
  35.                      <li class="first"><a class="first" href="">Home</a></li>
  36.                      <li><a class="Other" href="">Page 1</a></li>
  37.                      <li><a class="Other" href="">Page 2</a></li>
  38.                      <li><a class="Other" href="">Page 3</a></li>
  39.                      <li ><a class="Other" href="">Page 4</a></li>
  40.                      </ul>
  41.  
  42.                   </div>
  43.             </div>
  44.  
  45.  
  46. </div>
  47. </body>
[HTML] pobierz, plaintext



css
[HTML] pobierz, plaintext 
  1. body{
  2. background-color: #E8E8E8
  3. }
  4.  
  5. #header{
  6. 	background-color:white;
  7. 	width:785px;
  8. 	margin:0 auto;
  9. 	margin-top:10px;
  10. 	margin-bottom:20px;
  11. 	padding:8px;
  12. 	border: 1px solid #A9A9A9;
  13.  
  14. 	}
  15.  
  16.  
  17. #wrapper{
  18. 	background-color:white;
  19. 	margin: 0 auto;
  20. 	width:780px;
  21. 	padding:10px;
  22. 	border: 1px solid #A9A9A9;
  23. 	font-size:1.5em;
  24. 	font-family:Curier New;
  25. 	text-align:center;
  26.  
  27. 	}
  28.  
  29. #menu{
  30. 	position:relative;
  31. 	left:-179px;
  32. 	top:14px;	
  33. 	}
  34.  
  35. #menu ul{
  36. 	width:130px;
  37. 	font-size:15px;
  38. 	position:absolute;	
  39. 	margin-top:15px;
  40.  
  41. 	}
  42.  
  43. #menu li  {
  44. 	display: block;
  45. 	list-style: none;
  46.  
  47. 	}
  48.  
  49. #menu a  {
  50. 	display: block;
  51. 	text-decoration:none;
  52. 	padding:10px 10px 10px 10px;
  53. 	border:1px solid #a9a9a9;
  54. 	text-align:left;
  55. 	border-right: 1px solid white;
  56. 	font-weight:bold;
  57. 	font-size:12px;
  58. 	font-family:"Lucida Grande", Arial, Helvetica, Verdana, sans-serif;
  59.  
  60.  
  61. 	}
  62.  
  63. #menu ul a:hover{
  64. 	color:#D51007;
  65. 	background:white;
  66. 	font-weight:bolder;
  67. 	}
  68. .first{
  69. 	margin-right:20px;
  70. 	width:110px;
  71. 	background-color:white;
  72. 	color:#D51007;
  73. 	border-bottom:0px solid white;
  74.  
  75. 	}
  76. .Other{
  77. 	background-image: url('media/menubg.png') ;
  78. 	color:gray;
  79. 	}
  80. .form_log{
  81. 		background-image:url('media/formbg.gif');
  82. 	}
[HTML] pobierz, plaintext
Go to the top of the page
+Quote Post
 
 Start new topic
Odpowiedzi
owned
post
Post #2





Grupa: Zarejestrowani
Postów: 88
Pomógł: 1
Dołączył: 27.12.2007

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

No właśnie. To by musiało wyglądać mniej więcej tak, że jest jeden plik index.php do którego includujesz tresc podstrong np about.php, contact.php itp. Do każdego href linka musisz dodać na końcu np ?id=about a w index.php linijke
[PHP] pobierz, plaintext 
  1. $id = $_GET['id'];
[PHP] pobierz, plaintext

potem za pomocą instrukcji warunkowych np stwitch sprawdzasz id:
[HTML] pobierz, plaintext 
  1. <div id="onas" 
  2. <?php
  3. switch $id {
  4. case 'about':
  5.  echo "class='selected'";
  6.  break;
  7. default:
  8.  echo "class='normal'";
  9.  break;
  10. }
  11. ?>
  12. >
  13. tekst
  14. </div>
[HTML] pobierz, plaintext


Oczywiście to jest dosyć prymitywny przykład ale myślę że wpadniesz dalej na to jak zrobić uniwersalny skrypt (IMG:style_emoticons/default/smile.gif)
Go to the top of the page
+Quote Post

Posty w temacie
- imysz   [HTML][CSS]menu dla każdej podstrony   10.09.2009, 21:35:12
- - Burned   W zależności od wybranej strony określasz dla link...   10.09.2009, 23:05:06
- - owned   Żeby to w miarę zautomatyzować utwórz sobie tablic...   10.09.2009, 23:58:22
- - imysz   okej, już zrobiłem to że tak powiem 'ręcznie...   11.09.2009, 12:13:10
|- - Burned   Cytat(imysz @ 11.09.2009, 13:13:10 ) ...   11.09.2009, 13:33:14
- - owned   No właśnie. To by musiało wyglądać mniej więcej ta...   11.09.2009, 14:10:07
- - imysz   [PHP] pobierz, plaintext <?php$menu = array...   22.10.2009, 17:14:14

« 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: 16.10.2025 - 01:20
Powered By IP.Board © 2025  IPS, Inc.
All changes by PHP.pl Administrators
Hosting zapewnia NQ.pl hosting, trac, svn