Foros del Web » Creando para Internet » CSS »

[CSS] Problemas con UL, LI y otros

Estas en el tema de [CSS] Problemas con UL, LI y otros en el foro de CSS en Foros del Web. Hola Tengo un problema que me tiene shato El asunto es que quiero hacer un menú dentro de un layer con <ul> y <li>... de ...
  #1 (permalink)  
Antiguo 16/09/2005, 16:12
 
Fecha de Ingreso: octubre-2004
Mensajes: 143
Antigüedad: 13 años, 1 mes
Puntos: 0
[CSS] Problemas con UL, LI y otros

Hola

Tengo un problema que me tiene shato

El asunto es que quiero hacer un menú dentro de un layer con <ul> y <li>... de manera de que con la Hoja de estilo, definir el color y la imagen del lado izquierdo..

El cuento es que en Firefox el texto comienza de la mitad de la capa, siedno que en IExplorer anda bien... o sea para que se entienda.. en IExplorer se ve así

Código:
Menú
  + Inicio
  + Imagenes
  + Contacto
  + Otros
Pero en el Firefox

Código:
Menú
      + Inicio
      + Imagenes
      + Contacto
      + Otros
Les muestro el codigo

Código:
   <div id="menu_principal">
      <h1>Principal</h1>
         <ul>
            <LI><a href="" > Inf. General</a></LI>
            <li><a href="">Investigaci&oacute;n</a></li>
            <li><a href="">Extensi&oacute;n</a></li>
            <li><a href="">Servicios</a></li>
         </ul>
      <br>
   </div>
y la hoja de estilo
Código:
#menu_principal
{
   width:135;
   float:left;
   padding: 5px 0px 5px 5px ;
}

#menu_principal h1
{
   font: normal bold 12px Georgia;
   color: #663300;
   text-align:center;
}
#menu_principal ul
{
   margin: 5px 0px 5px 10px;
   border-bottom: 1px dashed #DADADA;
   padding-bottom: 6px;
   
}
#menu_principal li
{
   background: url(icono_link.gif) no-repeat 0px 4px;
   color: #687E60;
   text-decoration: none;
   padding: 0px 0px 0px 0px;
   display: block;
}
#menu_principal a
{
  margin-left:15px;
}
Alguna ayuda, ya que acabo de empezar con el CSS, antes a pura tabla

Gracias !!!
  #2 (permalink)  
Antiguo 16/09/2005, 16:30
 
Fecha de Ingreso: marzo-2004
Ubicación: Córdoba
Mensajes: 239
Antigüedad: 13 años, 9 meses
Puntos: 0
Prueba poniendo los estilos del UL y el Li de esta manera:

Código HTML:
ul
{
  /* margin: 0px 0px 5px 0px;*/
   border-bottom: 1px dashed #DADADA;
   padding-bottom: 6px;
   padding-left:10px;
   margin-left:10px;
}

li
{
   background: url(icono_link.gif) no-repeat 0px 4px;
   color: #687E60;
   text-decoration: none;
   padding: 0px 0px 0px 0px;
  /*display: block;*/
}
Fijate que anule el margin del Ul y le aplique padding-left , y margin-left con los mismos valores.
Tambien te anule el display:block; esto para que se vean los discos en mozilla.

Prueba como queda ahora!

saludos
__________________
Un gran desarrollador de soluciones webs -
-----------------------------
  #3 (permalink)  
Antiguo 16/09/2005, 17:13
 
Fecha de Ingreso: octubre-2004
Mensajes: 143
Antigüedad: 13 años, 1 mes
Puntos: 0
Gracias por la ayuda , pero no paso mucho.. o sea se corrio en firefox a la izquierda, pero lo que se movio es mínimo.. en Firefox sigue viendose mal, pero en IExplorer sigue viendose bien...
  #4 (permalink)  
Antiguo 16/09/2005, 17:18
 
Fecha de Ingreso: octubre-2004
Mensajes: 143
Antigüedad: 13 años, 1 mes
Puntos: 0
Hola

Para que se note la pana,. puse unas imagenes

El firefox


El Iexplorer


Saludos
  #5 (permalink)  
Antiguo 16/09/2005, 18:23
Avatar de RoQ
RoQ
 
Fecha de Ingreso: abril-2005
Mensajes: 771
Antigüedad: 12 años, 7 meses
Puntos: 0
prueba quitandole el margin-left al elemento a
  #6 (permalink)  
Antiguo 16/09/2005, 23:59
 
Fecha de Ingreso: octubre-2004
Mensajes: 143
Antigüedad: 13 años, 1 mes
Puntos: 0
Sin el margin-left al elemento a obtenemos lo siguiente
firefox


iexplorer


Mas sugerencias ???
  #7 (permalink)  
Antiguo 17/09/2005, 12:59
 
Fecha de Ingreso: diciembre-2004
Ubicación: Cordoba - Argentina
Mensajes: 503
Antigüedad: 13 años
Puntos: 1
Una pregunta, para que sirve <ul>¿

Saludos.
  #8 (permalink)  
Antiguo 17/09/2005, 13:21
 
Fecha de Ingreso: octubre-2004
Mensajes: 143
Antigüedad: 13 años, 1 mes
Puntos: 0
UL es un tag HTML para hacer listas, y el LI es para un elemento dentro de la listas

La idea es que uso el UL y el LI porque tengo una lista de direcciones, y lo correcto (IMHO) es que se use una lista para enumerar estos ...

Ahora el drama es por que diantres se ve distinto en firefox y iexplorer, siendo que he probado otras páginas que pululan por la red (de donde (complete con uno de estos : robé, copié, pedí prestado) el ejemplo) y se ven exactamente iguales enm ambos browser...

un ejemplo

http://www.buayacorp.com/

Saludos
  #9 (permalink)  
Antiguo 17/09/2005, 16:45
Avatar de RoQ
RoQ
 
Fecha de Ingreso: abril-2005
Mensajes: 771
Antigüedad: 12 años, 7 meses
Puntos: 0
te queda de esa manera porque usas una imagen de background para el icono de la lista, las listas pueden usa images que tu tengas a modo de icono sin usar el bg, te recomiendo que leas acerca de los estilos paa listas
http://www.ignside.net/man/css/listas.php
  #10 (permalink)  
Antiguo 17/09/2005, 18:02
Avatar de KnowDemon  
Fecha de Ingreso: julio-2004
Ubicación: Ciudad de México
Mensajes: 544
Antigüedad: 13 años, 5 meses
Puntos: 2
Tu problema puede radicar en la distinta forma en que IE y Firefox generan el margen de los elementos de lista. Mientras uno da un "padding" en el ul, el otro usa margenes de los li (si no me equivoco)

Prueba definiendo el padding y margin de los ul y los li en su totalidad. Es decir, no solo definas el "margen izquierdo" o el "padding derecho". Defínelos todos (arriba, abajo, izquierda y derecha). Es muy probable que los valores no definidos sean diferentes en ambos navegadores.

También es probable que si el ejemplo lo copiaste igual de algún otro lado donde funcionaba bien, es que tus listas hereden reglas de estilo que en el ejemplo original no estan o visceversa.
__________________
Mi pequeño espacio en la web: VisiónE
"El cosmos es todo lo que es, todo lo que fue, y todo lo que será alguna vez."

Última edición por KnowDemon; 17/09/2005 a las 18:10
  #11 (permalink)  
Antiguo 18/09/2005, 15:14
Avatar de braulito  
Fecha de Ingreso: abril-2004
Ubicación: Cusco - Perú
Mensajes: 597
Antigüedad: 13 años, 7 meses
Puntos: 8
Prueba con éste código:
Código:
        #menu_principal ul {
		list-style-type: none;
		padding: auto 15px; /* Juega con esto */
	}
	
	#menu_principal li {
		list-style-image: url('icono_link.gif');
	}
Algunos consejos:
  • Si estás usando XHTML y CSS, tienes que escribir todas las etiquetas en minúscula y cerrar todas las etiquetas (por ahi vi un <LI> y un <br>, debería ser <li> y <br />).
  • En #menuprincipal defines width:135 pero no le das las unidades, siempre tienes que darle unidades, en este caso estás usando píxeles y sería width:135px;
  • Para poner una imagen en las listas no es necesario darle background: blabla, sino usar la propiedad list-style-image: url('tuimagen').
  • Si en buayacorp.com lo hice con background, el background está en el link y no en la lista, es para hacer el efecto de movimiento cuando pasas el mouse.
__________________
Braulio Soncco
braulio at buayacorp dot com
Buayacorp - Programación y Diseño
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 17:25.