Comunidad PHPeros

Lenguajes => CSS => Mensaje iniciado por: naveda en 12 de Julio de 2008, 14:21:59 pm

Título: Duda sobre Listas y CSS
Publicado por: naveda en 12 de Julio de 2008, 14:21:59 pm
Hola!

he intentado hacer varias cosas con listas aplicando CSS y he conseguido alguna que otra cosa pero ahora me encuentro en una situación que no consigo solucionar, os explico.

Mi objetivo final es este:

(http://www.phperos.net/foro/Themes/DilberMC/images/88_31_banner.gif)
Opcion 1
(http://www.phperos.net/foro/Themes/DilberMC/images/88_31_banner.gif)
Opcion 2

El codigo HTML es este:
Código: [Seleccionar]
<div id="opciones">
<ul>
<li class="primero">Opcion 1</li>
<li class="segundo">Opcion 2</li>
</ul>
</div>
El problema que me sucede es que yo coloco las imagenes que realmente tienen dimensiones 128x128 como fondo del elemento LI, entonces el texto queda sobreescrito en la imagen y yo realmente deseo que quede bajo la imagen pero por más que lo intento no consigo que quede correctamente bajo la imagen.

¿Alguien podría ayudarme?
He buscado por Google y he encontrado algunos ejemplos pero casi nunca me dan muchas pistas...

Muchas gracias!
Título: Re: Duda sobre Listas y CSS
Publicado por: mOrK en 12 de Julio de 2008, 15:51:03 pm
li.cosa {
   background: url(urlxD.jpg) top no-repeat;
   padding-top: 320px;
   }

Cambia la URL y el parámetro padding-top: por la altura de la imágen (o un poco más para que quede perfecto).

Luego puedes añadirle width y demás...

Saludos!
Título: Re: Duda sobre Listas y CSS
Publicado por: naveda en 13 de Julio de 2008, 21:19:38 pm
Muchas gracias m0rk!
En parte me ha servido para coger la idea de padding porque tal y como me indicas no funciona bien, al final he hecho lo siguiente:

Código: [Seleccionar]
#opciones {
background-color: #99CCFF;
margin: 0 auto;
max-width: 30em;
min-height: 130px;
padding: 15px;
}

#opciones ul {
list-style-type:none; /*con esto quitamos las viñetas*/
display: inline-table;
padding-left: 40px;
}
#opciones li {
display: inline-table;
text-align: center;
padding-left: 40px;
}
#opciones a {
display: block;
padding-top: 130px;
width: 130px;
font-size: 16px;
}
#opciones .primero a {
background: url("URL") top no-repeat;
}

#opciones .segundo a {
background: url("URL") top no-repeat;
}
Ahora el efecto es el que yo quiero conseguir, pero solamente en Firefox, si el usuario es de Internet Explorer las imagenes quedan desplazadas a la derecha y una encima de otra.

Así:

(http://www.phperos.net/foro/Themes/DilberMC/images/88_31_banner.gif)
Opcion 1
(http://www.phperos.net/foro/Themes/DilberMC/images/88_31_banner.gif)
Opcion 2
Y desplazado a la derecha :S

¿Algo que cambiar para que tambien funcione en IE?
CSS es muy útil porque simplifica el codigo HTML pero encontrar las medidas exactas en muchas ocasiones me esta siendo un tanto pesado, me dan ganas hacer todo con tablas por muy primitivo que sea xD

A ver si podeis echarme una mano con esto :P

Muchas gracias!
Título: Re: Duda sobre Listas y CSS
Publicado por: G2K en 13 de Julio de 2008, 21:34:56 pm
CSS ayuda muchisimo correcto naveda! pero ya estamos otra vez con el duelo de navegadores (Mozilla vs. IE)... para algunas cosas uno utiliza unas cosas y otro otras y hay algunas que no són iguales vamos que con Mozilla puedes hacer cosas que en IE no te deja... Por ejemplo en el trabajo que presente a final de curso me paso eso y bueno... tube que recurrir a mirar codigo del SMF XDDD
Título: Re: Duda sobre Listas y CSS
Publicado por: mOrK en 13 de Julio de 2008, 23:48:07 pm
Pues es extraño, a mi me funcionaba  :S

Bueno, he hecho otro con un poco más de tiempo. Previsualizado con Firefox e IE 7 se ve así:
(http://www.subela.es/img_f/2b6a_baners_naveda.png)

CSS:
Código: [Seleccionar]
#naveda {
list-style: none;
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:10px;
color:#FF00FF;
text-align:center;
}
#naveda li {
background: url(phperos.gif) top no-repeat;
padding-top:35px;
width:90px;
margin: 10px;
float:left;
}

HTML:
Código: [Seleccionar]
<ul id="naveda">
<li>Opcion 1</li>
<li><a href="#">Opcion 2</a></li>
</ul>

Pruébalo y ya me dirás! Y si algo no entiendes (tu o cualquiera) preguntad!

Saludos!
Título: Re: Duda sobre Listas y CSS
Publicado por: naveda en 14 de Julio de 2008, 00:28:01 am
Muchas gracias, ya he conseguido hacerlo con IE y Firefox tal y como queria desde un comienzo! :P
El problema era que yo no hacia esto: ul id="naveda" sino que hacia <div id="naveda"><ul>...

Muchisimas gracias :P