• Najnowsze pytania
  • Bez odpowiedzi
  • Zadaj pytanie
  • Kategorie
  • Tagi
  • Zdobyte punkty
  • Ekipa ninja
  • IRC
  • FAQ
  • Regulamin
  • Książki warte uwagi

Menu html/css aktywne - problem.

42 Warsaw Coding Academy
–1 głos
1,327 wizyt
pytanie zadane 29 kwietnia 2015 w HTML i CSS przez Piotr Stręk Nowicjusz (220 p.)
edycja 23 maja 2015 przez Piotr Stręk

Witam, po zrobieniu menu, mam problem z przyciskami tzn, nie wiem co zrobić by po kliknięciu przycisku w menu i przejściu do innej stronny przycisk został na pozycji podświetlonej. Czytałem różne tematy i znalazłem:

http://forum.webhelp.pl/poczatkujacy-webmaster/css-i-aktywne-menu-t215883.html

dał by radę ten sposób, ale musiałbym wklejać menu do każdej strony, i jeżeli zaszła by potrzeba zmian w menu musiałbym każdą stronę edytować, dlatego menu mam w osobnym pliku.

 

moje pliki:

style: http://gildia-oriental.keed.pl/web/style.css

style nav: http://gildia-oriental.keed.pl/web/style_nav.css

 

było: wzór strony 7.html:

<?php include('headline.html'); ?> 

	<title>about us</title>

<style type="text/css">
		 
body {
		background-image: url("../background/o20.jpg");		<!-- 1280x1024 obrazek wymiary -->
		background-repeat: no-repeat;
		background-attachment: fixed;
	}
</style>

</head>

<body>

	<div id="container">
	
		<div id="logo">
			<?php include('logo.html'); ?>
		</div>
	
		<div id="nav">
			<?php include('nav.html'); ?>
		</div>
		
		<div id="ad">
			<?php include('ad.html'); ?>
		</div>
		
		<div id="content">
			
<center>

				<table border="0" align="center" >
					<tr>
					<td align="Center" valign="top" ><img width="800" src="../other/o3c.png"><br>	<!-- 927x193 obrazek wymiary -->
					
						<table border="0" align="center">
						<tr>
						<td width="170" height="190"  align="right" valign="bottom"><img src="../other/r0.gif"></td>	<!-- 155x125 obrazek wymiary  -->
						<td align="center" valign="bottom"><img src="../other/r2.gif"></td>	<!-- 379x330 obrazek wymiary  -->
						<td width="200" height="190" align="left" valign="middle" ><img src="../other/r1.gif"></td>	<!-- 155x162 obrazek wymiary -->
						</tr>
						</table>

					</tr>
				</table>

</center>

		</div>
		
		<div id="footer">
			<?php include('footer.html'); ?>
		</div>
	
	</div>

</body>
</html>

 

jest wzór strony 7.php:

<?php include('headline.php'); ?> 

	<title>about us</title>

</head>

<body class="background_o20">

	<div id="container">
	
		<div id="logo">
			<?php include('logo.php'); ?>
		</div>
	
		<div id="nav">
				    <?php $webpage="7"; ?> 
					<?php include 'nav.php'; ?>
		</div>
		
		<div id="ad">
			<?php include('ad.php'); ?>
		</div>
		
		<div id="content">
			
				<table border="0" align="center" >
					<tr>
					<td align="Center" valign="top" ><img src="../../other/o3c_b.png"><br />	<!-- 780x162 obrazek wymiary -->
					
						<table border="0" align="center">
						<tr>
						<td width="170" height="190"  align="right" valign="bottom"><img src="../../other/r0.gif"></td>	<!-- 155x125 obrazek wymiary  -->
						<td align="center" valign="bottom"><img src="../../other/r2.gif"></td>	<!-- 379x330 obrazek wymiary  -->
						<td width="200" height="190" align="left" valign="middle" ><img src="../../other/r1.gif"></td>	<!-- 155x162 obrazek wymiary -->
						</tr>
						</table>

					</tr>
				</table>

		</div>
		
		<div style="clear:both;"></div>
		
		<div id="footer">
			<?php include('footer.php'); ?>
		</div>
	
	</div>

</body>
</html>

 

headline: http://gildia-oriental.keed.pl/web/headline.php

<!DOCTYPE HTML> 
<html lang="pl">
<head>
	<meta charset="utf-8" />
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />

	<link href="../web/style.css" rel="stylesheet" type="text/css" />	
	<link href="../web/style_nav.css" rel="stylesheet" type="text/css" />	
	<link href="../../other/oriental.ico" rel="Shortcut icon"/>
	
	<meta name="description" content="Strona gildii 'ORIENTAL'" />
	<meta name="keywords" content="Strona, domowa, ORIENTAL, pl.gladiatus.gameforge.com" />
    <meta name="author" content="Piotr1Wielki & Zawiszanka" />	

 

Proszę o pomoc w rozwiązaniu tego problemu.

5 odpowiedzi

0 głosów
odpowiedź 29 kwietnia 2015 przez Artix Bywalec (2,110 p.)
2 sposoby
1 dodac klase "Active" albo cos takiego ktora sytuluje menu i dodawac ja poprostu w odpowiedniej stronie na odpowiednim miejscu
2 Javascript ale to raczej zbyt zagmatwane dla tego kodu
0 głosów
odpowiedź 30 kwietnia 2015 przez Mizukage Pasjonat (21,750 p.)
Dodajesz klase do kazdego linku na danej stronie np. active

 

Ps. Nie styluje sie w dokumencie HTML od tego jest CSS
komentarz 11 maja 2015 przez Mizukage Pasjonat (21,750 p.)
Ciekawe za co -1
komentarz 23 maja 2015 przez Piotr Stręk Nowicjusz (220 p.)

Chodziło ci o tło strony:

czyli:

<style type="text/css">
          
body {
        background-image: url("../background/o20.jpg");     <!-- 1280x1024 obrazek wymiary -->
        background-repeat: no-repeat;
        background-attachment: fixed;
    }
</style>

 

teraz jest:

<body class="background_o20">

lepiej ?

komentarz 24 maja 2015 przez Hubert Murawski Stary wyjadacz (11,990 p.)
"<body class="background_o20">" ? na górze css'a dajesz po prostu body{ } i stylujesz
komentarz 24 maja 2015 przez Mizukage Pasjonat (21,750 p.)
Raczej ID a nie klasa i dlaczego body ma miec jakas klase czy id.....
komentarz 24 maja 2015 przez Piotr Stręk Nowicjusz (220 p.)

na stronie php mam:

</head>

<body class="background_o20">

	<div id="container">

 

a w css

.background_o4	{ 	background-image: url("../../background/o4.jpg"); background-repeat: no-repeat; background-attachment: fixed; } /*from http://www.tapeciarnia.pl/*/
.background_o5 	{	background-image: url("../../background/o5.jpg"); background-repeat: no-repeat; background-attachment: fixed; } /*from http://www.tapeciarnia.pl/*/
.background_o6 	{	background-image: url("../../background/o6.jpg"); background-repeat: no-repeat; background-attachment: fixed; } /*from http://www.tapeciarnia.pl/*/
.background_o7 	{	background-image: url("../../background/o7.jpg"); background-repeat: no-repeat; background-attachment: fixed; } /*from http://www.tapeciarnia.pl/*/
.background_o8 	{	background-image: url("../../background/o8.jpg"); background-repeat: no-repeat; background-attachment: fixed; } /*from http://www.tapeciarnia.pl/*/
.background_o9 	{	background-image: url("../../background/o9.jpg"); background-repeat: no-repeat; background-attachment: fixed; } /*from http://www.tapeciarnia.pl/*/
.background_o10 {	background-image: url("../../background/o10.jpg"); background-repeat: no-repeat; background-attachment: fixed; } /*from http://www.tapeciarnia.pl/*/
.background_o11 {	background-image: url("../../background/o11.jpg"); background-repeat: no-repeat; background-attachment: fixed; } /*from http://www.tapeciarnia.pl/*/
.background_o12 {	background-image: url("../../background/o12.jpg"); background-repeat: no-repeat; background-attachment: fixed; } /*from http://www.tapeciarnia.pl/*/
.background_o13 {	background-image: url("../../background/o13.jpg"); background-repeat: no-repeat; background-attachment: fixed; } /*from http://www.tapeciarnia.pl/*/
.background_o14 {	background-image: url("../../background/o14.jpg"); background-repeat: no-repeat; background-attachment: fixed; } /*from http://www.tapeciarnia.pl/*/
.background_o15 {	background-image: url("../../background/o15.jpg"); background-repeat: no-repeat; background-attachment: fixed; } /*from http://www.tapeciarnia.pl/*/
.background_o16 {	background-image: url("../../background/o16.jpg"); background-repeat: no-repeat; background-attachment: fixed; } /*from http://www.tapeciarnia.pl/*/
.background_o17 {	background-image: url("../../background/o17.jpg"); background-repeat: no-repeat; background-attachment: fixed; } /*from http://www.tapeciarnia.pl/*/
.background_o18 {	background-image: url("../../background/o18.jpg"); background-repeat: no-repeat; background-attachment: fixed; } /*from http://www.tapeciarnia.pl/*/
.background_o19 {	background-image: url("../../background/o19.jpg"); background-repeat: no-repeat; background-attachment: fixed; } /*from http://www.tapeciarnia.pl/*/
.background_o20 {	background-image: url("../../background/o20.jpg"); background-repeat: no-repeat; background-attachment: fixed; } /*from http://www.tapeciarnia.pl/*/
.background_o21 {	background-image: url("../../background/o21.jpg"); background-repeat: no-repeat; background-attachment: fixed; } /*from http://www.tapeciarnia.pl/*/
.background_o22 {	background-image: url("../../background/o22.jpg"); background-repeat: no-repeat; background-attachment: fixed; } /*from http://www.tapeciarnia.pl/*/
.background_o23 {	background-image: url("../../background/o23.jpg"); background-repeat: no-repeat; background-attachment: fixed; } /*from http://www.tapeciarnia.pl/*/

 

class/id gdyż jedno tło uzyję więcej niż raz w stronie, a z poradników na yt pana Mirosław Zelent, zrozumiałem że id - jeśli mam coś raz uzyć na stronie a class - jeśli coś wiele razy użyje. To w moim wypadku powinienem dać id czy class ?

 

ps:

większość kodów zródła stron podałem tutaj:

http://www.forumweb.pl/poczatkujacy-webmaster/menu-html-css-aktywne-problem/495304#495304

[kod style.css na samym początku style_nav pod nim] ,,,

0 głosów
odpowiedź 23 maja 2015 przez Piotr Stręk Nowicjusz (220 p.)
z powodu iż nie mogę wklejić całego kody, wklejiłem całe kody plików tutaj:

http://www.forumweb.pl/poczatkujacy-webmaster/menu-html-css-aktywne-problem/496787#496787
–1 głos
odpowiedź 29 kwietnia 2015 przez Piotr Stręk Nowicjusz (220 p.)
przywrócone 23 maja 2015 przez Piotr Stręk

znalazłem też coś takiego:

http://forum.webhelp.pl/poczatkujacy-webmaster/menu-obrazkowe-na-a-href-ze-stanem-aktywnym-t216799.html

 

ale chyba nie będzie działać to na html. ...

–1 głos
odpowiedź 11 maja 2015 przez Kropka1 Użytkownik (520 p.)
Możesz spróbować też na:

http://kenis.pl/kurs,html5-i-css3-pierwsza-strona-internetowa,3115

powinno pomóc

Podobne pytania

+6 głosów
2 odpowiedzi 2,667 wizyt
0 głosów
2 odpowiedzi 694 wizyt
pytanie zadane 16 maja 2015 w HTML i CSS przez adamek0123 Obywatel (1,530 p.)
0 głosów
5 odpowiedzi 1,154 wizyt
pytanie zadane 3 lutego 2017 w HTML i CSS przez czujek22 Dyskutant (7,670 p.)

93,379 zapytań

142,380 odpowiedzi

322,533 komentarzy

62,734 pasjonatów

Motyw:

Akcja Pajacyk

Pajacyk od wielu lat dożywia dzieci. Pomóż klikając w zielony brzuszek na stronie. Dziękujemy! ♡

Oto polecana książka warta uwagi.
Pełną listę książek znajdziesz tutaj

VMware Cloud PRO - przenieś swoją infrastrukturę IT do chmury
...