Foros del Web - Ver Mensaje Individual

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