Problema con menu, botones que no se quedan seleccionados

[Juangu]

Hola gente...

Me estoy iniciando en el mundo de las paginas web. Ahora mismo le estoy haciendo a un amigo una web para su empresa, he cogido el boceto de una plantilla que la vi bastante bien y comence a hacer los cambios oportunos.

El caso es que uno de los cambios que hice fue aumentar el menu, de 5 botones que tenia lo pase a 6, unicamente desde el codigo html de cada una de las paginas lo cambie, os pongo el antes y el despues.

</div>
<div id="menu">
<h2>Navigation Menu</h2>
<ul>
<li class="active"><a href="index.html">Homepage</a></li>
<li><a href="aboutus.html">About</a></li>
<li><a href="products.html">Products</a></li>
<li><a href="services.html">Services</a></li>
<li><a href="contact.html">Contact</a></li>
</ul>
</div>

y con el cambio quedo asi:

<div id="menu">
<h2>Navigation Menu</h2>
<ul>
<li class="active"><a href="index.html">Empresa</a></li>
<li><a href="servicios.html">Servicios</a></li>
<li><a href="noticias.html">Noticias</a></li>
<li><a href="obras.html">Obras</a></li>
<li><a href="contactar.html">Contactar</a></li>
<li><a href="enlaces.html">Enlaces</a></li>
</ul>
</div>

Como veis cambie el nombre a los archivos HTML y añadi una seccion mas.

El caso es que antes cuando pinchaba en un boton del menu se quedaba en negro y tras hacer el cambio ahora se queda pulsado siempre el boton Empresa, aunque me vaya al boton obras por ejemplo, os pongo una imagen.



Como podeis ver en la barra de direcciones esta seleccionada obras, pero en el menu siempre se queda en la opcion Empresa.

Nose por donde tirar, ya que no tengo mucha idea de CSS, por eso me pongo en contacto con vosotros, a ver si me podeis ayudar.

Saludos

[IsaBelM]

arreglo al código que muestras es imposible que antes funcionase. por ende ahora tampoco. el problema no es que le hayas añadido mas opciones, el problema es que esto se hace del lado del servidor. pide que te muevan el tema el foro correspondiente

[Juangu]

Iniciado por IsaBelM

arreglo al código que muestras es imposible que antes funcionase. por ende ahora tampoco. el problema no es que le hayas añadido mas opciones, el problema es que esto se hace del lado del servidor. pide que te muevan el tema el foro correspondiente

Perdona, pero no entiendo muy bien lo que quieres decir

Antes de hacer los cambios si funcionaba bien, se quedaba el boton que pulsabas seleccionado, pero ahora no hay manera.

pongo el codigo CSS por si podeis llegar a ver si hay algun problema, yo por mas vueltas que le doy no lo encuentro.

body {
margin: 20px;
padding: 0;
background: #111111;
font: normal small Arial, Helvetica, sans-serif;
color: #6F4503;
}

h1, h2, h3, h4, h5, h6 {
margin: 0;
padding: 0;
text-transform: uppercase;
color: #9E6813;
}

h1, h2, h3 {
}

h4, h5, h6 {
}

p, ul, ol, blockquote {
margin-top: 0;
}

a {
color: #6F4503;
text-decoration: none;
}

a:hover {
text-decoration: none;
}

img {
border: none;
}

/* Header */

#logo {
width: 780px;
height: 75px;
margin: 0 auto;
padding: 35px 0 0 0;
background: #FFEE8F url(images/bigbg.gif) repeat-x;
border: 5px solid #FFFFFF;
border-bottom: none;
}

#logo h1 {
text-align: center;
font-size: 3em;
}

#logo h2 {
text-align: center;
font-size: 1.4em;
}

#logo a {
text-decoration: none;
color: #9E6813;
}

/* Menu */

#menu {
width: 780px;
height: 36px;
margin: 0 auto;
padding: 0;
background: #AE0001;
border: 5px solid #FFFFFF;
border-top: 1px solid #FFFFFF;
border-bottom: 1px solid #FFFFFF;;
}

#menu h2 {
display: none;
}

#menu ul {
margin: 0;
padding: 0;
list-style: none;
}

#menu li {
display: inline;
}

#menu a {
display: block;
float: left;
width: 98px;
height: 26px;
padding-top: 10px;
text-align: center;
text-decoration: none;
color: #CCCCCC;
}

#menu a:hover, #menu .active a {
background: #000000;
color: #FFFFFF;
}

/* Splash */

#image {
width: 780px;
margin: 0 auto;
background: #FFFFFF;
border-left: 5px solid #FFFFFF;
border-right: 5px solid #FFFFFF;
}

/* Content */

#body {
width: 780px;
margin: 0 auto;
background: #FFFFFF;
border: 5px solid #FFFFFF;
}

#body .title {
padding: 10px 20px;
background: #FFEE8E url(images/smallbg.gif) repeat-x left bottom;
font-size: 1em;
}

#body .story {
padding: 20px;
border: 2px solid #FFEE8E;
}

/* bot*/

#bot {
width: 760px;
margin: 0 auto;
padding: 10px 10px;
background: #AE0001;
border: 5px solid #FFFFFF;
border-top: none;
}

#bot p {
margin: 0;
padding: 0;
text-align: center;
font-size: x-small;
color: #CCCCCC;
}

#bot a {
color: #CCCCCC;
}

[IsaBelM]

fíjate que mis palabras fueron

Iniciado por IsaBelM

arreglo al código que muestras es imposible que antes funcionase. por ende ahora tampoco. el problema no es que le hayas añadido mas opciones, el problema es que esto se hace del lado del servidor. pide que te muevan el tema el foro correspondiente

ahora, puedes hacerlo del lado del cliente, como intentas, con lo que es bastante poco dinámico aunque uses SSI (side server include). como se haría??

index.html (tal y como lo tienes ahora)

<ul>
<li class="active"><a href="index.html">Empresa</a></li>
<li><a href="servicios.html">Servicios</a></li>
<li><a href="noticias.html">Noticias</a></li>
<li><a href="obras.html">Obras</a></li>
<li><a href="contactar.html">Contactar</a></li>
<li><a href="enlaces.html">Enlaces</a></li>
</ul>

servicios.html

<ul>
<li><a href="index.html">Empresa</a></li>
<li class="active"><a href="servicios.html">Servicios</a></li>
<li><a href="noticias.html">Noticias</a></li>
<li><a href="obras.html">Obras</a></li>
<li><a href="contactar.html">Contactar</a></li>
<li><a href="enlaces.html">Enlaces</a></li>
</ul>

es decir, cambiar el class de elemento con respecto a la sección en la que se esté


como se haría del lado del servidor?? con un include y un código tal que así para todas las páginas

<li><a href="index.html"<?php echo $seccion=="index"?" class=\"active\"":"";?>>Empresa</a></li>
<li><a href="servicios.html"<?php echo $seccion=="servicios"?" class=\"active\"":"";?>>Servicios</a></li>
<li><a href="noticias.html"<?php echo $seccion=="noticias"?" class=\"active\"":"";?>>Noticias</a></li>
<li><a href="obras.html"<?php echo $seccion=="obras"?" class=\"active\"":"";?>>Obras</a></li>
<li><a href="contactar.html"<?php echo $seccion=="contactar"?" class=\"active\"":"";?>>Contactar</a></li>
<li><a href="enlaces.html"<?php echo $seccion=="enlaces"?" class=\"active\"":"";?>>Enlaces</a></li>

y esto otro en la página index

<?php
$seccion = "index"
?>

en la página servicios

<?php
$seccion = "servicios"
?>

y así sucesivamente

[Juangu]

Muchas gracias IsabelM, me ha funcionado de narices.
Ya entiendo porque me decias que no me funcionaria ni antes ni ahora, el problema era que no ponia el class como activo en cada una de las paginas.

Muchas gracias, te debo una.

Saludos