Foros del Web » Creando para Internet » CSS »

Problema con las hojas de estilo

Estas en el tema de Problema con las hojas de estilo en el foro de CSS en Foros del Web. 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 ...
  #1 (permalink)  
Antiguo 19/11/2009, 11:15
Avatar de Soul666  
Fecha de Ingreso: octubre-2008
Ubicación: En mi casa donde mas XD
Mensajes: 59
Antigüedad: 9 años, 1 mes
Puntos: 0
Problema con las hojas de estilo

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">
<!--
body {
background-image: url(../Neosystem estilo css/img01.gif);
background-repeat: repeat;
background-image: url(Imagenes/img01.gif);
}
.Estilo1 {color: #FFFFFF}
-->
</style>
<link href="css/Miestilo.css" rel="stylesheet" type="text/css" />
<link href="css/menucss.css" rel="stylesheet" type="text/css" />
</head>
<body>
<!-- comienza y cierra el banner --><div id="banner"><img src="imagenes/banner.jpg" /></div>
<div id="estructura" align="center">

<!--<div id="menutop"></div> --> <!-- USAR EN CASO DE PONER UN MENU TOP XD -->
<p><div id="menuizquierda">
<div id="menu">
<ul>
<li class="nivel1 primera"><a href="index.html" class="nivel1">Inicio</a>
<!--[if lte IE 6]><a href="#" class="nivel1ie">Opci&oacute;n 1<table class="falsa"><tr><td><![endif]-->
<ul>
</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
<li class="nivel1"><a href="#" class="nivel1">Planes de Estudio</a>
<!--[if lte IE 6]><a href="#" class="nivel1ie">Opci&oacute;n 2<table class="falsa"><tr><td><![endif]-->
<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>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
<li class="nivel1"><a href="#" class="nivel1">Institucional</a>
<!--[if lte IE 6]><a href="#" class="nivel1ie">Opci&oacute;n 3<table class="falsa"><tr><td><![endif]-->
<ul>
<li class="primera"><a href="institucional/historia.html">Rese&ntilde;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>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
<li class="nivel1"><a href="#" class="nivel1">Alumnos</a>
<!--[if lte IE 6]><a href="#" class="nivel1ie">Opci&oacute;n 4<table class="falsa"><tr><td><![endif]-->
<ul>
</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
<li class="nivel1"><a href="docentes/profesores.html" class="nivel1">Personal Docente</a>
<!--[if lte IE 6]><a href="#" class="nivel1ie">Opci&oacute;n 5<table class="falsa"><tr><td><![endif]-->
<ul>

</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
<li class="nivel1"><a href="#" class="nivel1">Novedades/Cartelera</a>
<!--[if lte IE 6]><a href="#" class="nivel1ie">Opci&oacute;n 5<table class="falsa"><tr><td><![endif]-->
<ul>
</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
<li class="nivel1"><a href="#" class="nivel1">Talleres</a>
<!--[if lte IE 6]><a href="#" class="nivel1ie">Opci&oacute;n 5<table class="falsa"><tr><td><![endif]-->
<ul>
</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
<li class="nivel1"><a href="#" class="nivel1">Deportes</a>
<!--[if lte IE 6]><a href="#" class="nivel1ie">Opci&oacute;n 5<table class="falsa"><tr><td><![endif]-->
<ul>
<li class="primera"><a href="deportes/voleyball.html">Voleyball</a></li>
</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</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>
<!-- cierra div de estructura--> </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
  #2 (permalink)  
Antiguo 20/11/2009, 08:16
Avatar de prava  
Fecha de Ingreso: julio-2008
Ubicación: Montevideo, Uruguay
Mensajes: 42
Antigüedad: 9 años, 4 meses
Puntos: 0
Respuesta: Problema con las hojas de estilo

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
  #3 (permalink)  
Antiguo 20/11/2009, 13:16
Avatar de Soul666  
Fecha de Ingreso: octubre-2008
Ubicación: En mi casa donde mas XD
Mensajes: 59
Antigüedad: 9 años, 1 mes
Puntos: 0
Respuesta: Problema con las hojas de estilo

Cita:
Iniciado por prava Ver Mensaje
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.
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 04:56.