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

Menu html/css aktywne - problem.

Object Storage Arubacloud
–1 głos
1,138 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,350 wizyt
0 głosów
2 odpowiedzi 360 wizyt
pytanie zadane 16 maja 2015 w HTML i CSS przez adamek0123 Obywatel (1,530 p.)
0 głosów
5 odpowiedzi 996 wizyt
pytanie zadane 3 lutego 2017 w HTML i CSS przez czujek22 Dyskutant (7,670 p.)

92,573 zapytań

141,423 odpowiedzi

319,645 komentarzy

61,959 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.

Akademia Sekuraka

Kolejna edycja największej imprezy hakerskiej w Polsce, czyli Mega Sekurak Hacking Party odbędzie się już 20 maja 2024r. Z tej okazji mamy dla Was kod: pasjamshp - jeżeli wpiszecie go w koszyku, to wówczas otrzymacie 40% zniżki na bilet w wersji standard!

Więcej informacji na temat imprezy znajdziecie tutaj. Dziękujemy ekipie Sekuraka za taką fajną zniżkę dla wszystkich Pasjonatów!

Akademia Sekuraka

Niedawno wystartował dodruk tej świetnej, rozchwytywanej książki (około 940 stron). Mamy dla Was kod: pasja (wpiszcie go w koszyku), dzięki któremu otrzymujemy 10% zniżki - dziękujemy zaprzyjaźnionej ekipie Sekuraka za taki bonus dla Pasjonatów! Książka to pierwszy tom z serii o ITsec, który łagodnie wprowadzi w świat bezpieczeństwa IT każdą osobę - warto, polecamy!

...