problemas con el menu

inkfusion · #1 (**permalink**) 12/05/2011, 03:46

HOla a todos, me acabo de hacer una web www.inkfusion.es , os la pongo para que veais el menu en funcionamiento..
y tngo un problema con el menu, no consigo que quede marcado (en este caso seria de color amarillo) en las diferentes secciones, he probado con php, con el css, con java...pero nada...con css para mi caso creo que vendria mejor verdad??

este es el codigo:

Código:

<div id="menu">
            
                <ul id="botones">
            
            	<li><a href="index.html"><b>HOME</b></a></li>
                <li><a href="wallpaints.html"><b>WALLPAINT</b></a></li>
                <li><a href="illustration.html"><b>ILLUSTRATION</b></a></li>
                <li><a href="graphicdesign.html"><b>GRAPHIC DESIGN</b></a></li>
                <li><a href="photography.html"><b>PHOTOGRAPHY</b></a></li>
                <li><a href="trunk.html"><b>TRUNK</b></a></li>
</div>

y el css

Código HTML:

        #menu{
	background-color:#FFFFFF;
	width:215px;
	height:300px;
	float:left;
	font-family:Arial, Helvetica, sans-serif;
	}
	
	#botones{
	list-style:none;
	margin:0px;
	padding:9px 0;
	margin-left:10px;
	}
	
	#botones li a {
	display:block;
	width:180px;
	padding:4px 0;
	text-decoration:none;
	text-align:center;
	font-size:15px;
	color:#FFFFFF;
	background-color:#000000;
	margin:7px;
	}

	#botones li a:hover {
	color:#000000;
	background-color:#FFFF00;

	}

gracias de antemano, un saludo

yonaida · #2 (**permalink**) 12/05/2011, 06:28

la forma mas sencilla es aplicar una clase al boton que quieras en cada hoja, al menos asi hago yo, siempre que se pueda.

Código:

       #menu  li.selected
        {color: #FFFF00; }
	
      
                <li class='selected'><a href="index.html"><b>HOME</b></a></li>
                <li><a href="wallpaints.html"><b>WALLPAINT</b></a></li>
                <li><a href="illustration.html"><b>ILLUSTRATION</b></a></li>
                <li><a href="graphicdesign.html"><b>GRAPHIC DESIGN</b></a></li>
                <li><a href="photography.html"><b>PHOTOGRAPHY</b></a></li>
                <li><a href="trunk.html"><b>TRUNK</b></a></li>

le pones la clase selected en cada pagina a la pestaña del menu que corresponda.

salu2

inkfusion · #3 (**permalink**) 12/05/2011, 07:32

De lujo, me has kitado dolores de cabeza...aunque como me lo ponias tu no me funcionaba... al final lo que he exo ha sido darle al body de cada pagina un "id" y acada boton un selected diferente y asi parece ke tira bien. no se si será una buena forma o si hay otras mejores o mas rapidas, pero weno, funciona.

Código HTML:

<body id="home">

Código HTML:

<li><a href="index.html" class='selected1'><b>HOME</b></a></li>

Código HTML:

body#home a.selected1{
background-color:#FFFF00;
color:#000000;}

Gracias yonaida ;) no tenia ni idea de la clase selected! un saludo

yonaida · #4 (**permalink**) 12/05/2011, 07:35

caray si es verdad me comi esa parte o.O
esto de forear en el trabajo tiene sus complicaciones, pero ya has visto la luz. jejeje
suerte, por cierto muy xula la pagina.

inkfusion · #5 (**permalink**) 12/05/2011, 07:41

si...llevaba toda la mañana probando javascript. php, css...ya ves..cosas de novatillos...y ahora con el selected ese..ya ves en dos min....xd

gracias guapa ;)

newnoi · #6 (**permalink**) 13/05/2011, 03:39

He probado esta solucion pero no me funciona completamente.
Aplicada esta solucion en mi pagina index me funciona, pero cuando la aplico a las demas no.
A las otras paginas hago
<body id="home2"> y sucesivamente numeros consecutivos igual que con selected que le doy numeros consecutivos uno por cada pagina.

coloco esto dentro el head de cada pagina
body#home2 a.selected2{
background-color:#FFFF00;
color:#000000;}

en el menu coloco
<li><a href="http://www.forosdelweb.com/f53/cosas/cosas.html" class='selected2'><b>cosas</b></a></li>

podeis indicarme donde cometo el error,para que no me funcione en las paginas que no son el index
gracias por la ayuda

newnoi · #7 (**permalink**) 13/05/2011, 03:42

me ha salido mal al copiar la entrada del menu
<li><a href="http://www.forosdelweb.com/f53/cosas/cosas.html" class='selected2'>cosas</a></li>

newnoi · #8 (**permalink**) 13/05/2011, 03:46

vuelvo a intentar que me escriba el menu correctamente
<li><a href="http://www.forosdelweb.com/f53/cosas/cosas.html" class='selected2'>cosas</a></li>

yonaida · #9 (**permalink**) 13/05/2011, 03:56

body#item1 a.selected1, body#item2 a.selected2, body#item3 a.selected3,
body#item4 a.selected4, body#item5 a.selected5, body#item6 a.selected6,
body#item7 a.selected7, body#item8 a.selected8
{
background-color:#FFFF00;
color:#000000;}

obviamente si tienes la pagina item1 tu selected ha de ser selected1 y asi sucesivamente. esto lo tienes que colocar en tu pagina CSS no en el head de cada pagina. suponiendo que la tienes.

Saludos y comenta que tal vas.