Problema con las hojas de estilo

Soul666 · #1 (**permalink**) 19/11/2009, 11:15

Bueno mi problema es que en mi pagina web yo quiero poner el menu css y una galeria css pero el problema es que estan echas con ul y cuando adjunto las hojas de estilo el css de menu toma las propiedades del css de la galeria y se ve re feo :S.

El codigo del la galeria css es:

Cita:

ul {
padding:10px;
margin:0px;
width:500px;
background:#ffcc00;
height: 400px;
}
li {
list-style-type:none;
width:525px;
padding:5px;
}

a img.min {border:1px solid #fff;}
a span {visibility:hidden;color:white;text-align:center;font:bold 14px "Trebuchet MS",arial;position:absolute;top:65px;left:120px;vi sibility:hidden;border:5px solid #fff;z-index:10;}

a:hover img.min {z-index:100;border:1px solid red;}
a:hover {display:inline;z-index:100;} /* Hace que funcione en IE6*/
a:hover span {visibility:visible;border:5px solid #fff;background:#000000;z-index:100;}
a:hover span img {visibility:visible;z-index:100;}

a:focus span , a:active span {visibility:visible;z-index:10;background:#000000;}
a img.fotos {border:1px solid white;margin:5px;}

El codigo del menu css es:

Cita:

* { margin: 0px;
padding: 0px; outline: 0;
}
#menu {
text-align: center;
font-size: 12px;
width: 180px;
margin: 0px;
margin-top: 0px;
}
#menu ul { list-style-type: none;
}
#menu ul li.nivel1 {
width: 162px;
}
#menu ul li.primera { border-top: solid 1px #FFF;
}
#menu ul li a {
display: block;
text-decoration: none;
color: #fff;
border: solid 1px #fff;
border-top: none;
padding: 8px;
position: relative;

background-image: url(../Web cole/recuadro.jpg);
background-image: url(../Imagenes/recuadro.jpg);
}
#menu ul li:hover {position: relative;
background-color: #6CC;
color: #000;
}
#menu ul li a:hover, #menu ul li:hover a.nivel1 {background-color: #6CC;
color: #000;
position: relative;
}
#menu ul li a.nivel1 {display: block!important;display: none;
position: relative;
}
#menu ul li ul {display: none;
}
#menu ul li a:hover ul, #menu ul li:hover ul {display: block;
position: absolute;left: 161px;top:-1px!important;top: -31px;
}
#menu ul li ul li a {width: 160px;
background-color: #6CC;
color: #000;
}
#menu ul li ul li a:hover {position: relative;
background-color: #399;
color: #FFF;
}
table.falsa {border-collapse:collapse;
border:0px;
float: left;
position: relative;
}

El html es el siguiente:

Cita:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>C.T.P Olga B. de Arco</title>
<style type="text/css">

</style>
<link href="css/Miestilo.css" rel="stylesheet" type="text/css" />
<link href="css/menucss.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="banner"><img src="imagenes/banner.jpg" /></div>
<div id="estructura" align="center">

 
<p><div id="menuizquierda">
<div id="menu">
<ul>
<li class="nivel1 primera"><a href="index.html" class="nivel1">Inicio</a>

<ul>
</ul>

</li>
<li class="nivel1"><a href="#" class="nivel1">Planes de Estudio</a>

<ul>
<li class="primera"><a href="plan_de_estudio/economia.html">Economia</a></li>
<li><a href="plan_de_estudio/electronica.html">Electronica</a></li>
<li><a href="plan_de_estudio/electromecanica.html">Electromecanica</a></li>
<li><a href="plan_de_estudio/construcciones.html">Construcciones</a></li>
<li><a href="plan_de_estudio/informatica.html">Informatica</a></li>
</ul>

</li>
<li class="nivel1"><a href="#" class="nivel1">Institucional</a>

<ul>
<li class="primera"><a href="institucional/historia.html">Reseña Historica</a></li>
<li><a href="gftaller/fototaller.html">Galeria de Fotos</a></li>
<li><a href="#">Organigrama</a></li>
<li><a href="#">Infraestructura</a></li>
</ul>

</li>
<li class="nivel1"><a href="#" class="nivel1">Alumnos</a>

<ul>
</ul>

</li>
<li class="nivel1"><a href="docentes/profesores.html" class="nivel1">Personal Docente</a>

<ul>

</ul>

</li>
<li class="nivel1"><a href="#" class="nivel1">Novedades/Cartelera</a>

<ul>
</ul>

</li>
<li class="nivel1"><a href="#" class="nivel1">Talleres</a>

<ul>
</ul>

</li>
<li class="nivel1"><a href="#" class="nivel1">Deportes</a>

<ul>
<li class="primera"><a href="deportes/voleyball.html">Voleyball</a></li>
</ul>

</li>
</ul>
</div>
</div>
</p>
<div class="Estilo1" id="cuerpo">
<p>Colegio poronga </p>
<div align="center">Mas vale q se vea bien la reputa madre!!!! </div>
</div>
 </div>
<div id="abajo"> </div>
</body>
</html>

Yo creo que el problema es que tanto el menu como la galeria echas en css estan echas por lista (ul / li). Yo quiero saber si hay alguna forma para que el css del menu css no tome las propiedades de la galeria css.

Dejo una captura de pantalla de como se ve con el menu css sin la galeria css:

http://img.tomatone.net/big/sincssg.jpg

Aca otra captura de pantalla adjuntando la hoja de estilo del menu y galeria

http://img.tomatone.net/big/concssg.jpg

prava · #2 (**permalink**) 20/11/2009, 08:16

Hola, yo diría que para que los estilos de la galería no te afecten a menú, tendriaas que agregar un id al div de la galería tipo <div id="galeria">... y antes de cada estilo de galería agregas #galería. Algo así:

Cita:

#galeria ul
#galeria li

Esto haría que estos estilos solo afecten a los ul o li que se encuentren dentro del div id "galeria" y no afectarán a ningun otro ul o li del sitio.

Espero haberte sido de ayuda

Soul666 · #3 (**permalink**) 20/11/2009, 13:16

Cita:

Iniciado por prava

Hola, yo diría que para que los estilos de la galería no te afecten a menú, tendriaas que agregar un id al div de la galería tipo <div id="galeria">... y antes de cada estilo de galería agregas #galería. Algo así:

Esto haría que estos estilos solo afecten a los ul o li que se encuentren dentro del div id "galeria" y no afectarán a ningun otro ul o li del sitio.

Espero haberte sido de ayuda

Muchas gracias amigo luego de pensar me di cuenta de eso XD. Muchas gracias lo pude solucionar ya.