Foros del Web » Diseño web » CSS »

Espacio entre parrafos en las listas (viñetas)

Estas en el tema de Espacio entre parrafos en las listas (viñetas) en el foro de CSS en Foros del Web. Hola, Cuando intento poner una lista (viñetas) en un post de mi blog salen todos los parrafos juntos, sin ningun espacio entre ellos. En el ...
  #1 (permalink)  
Antiguo 16/06/2009, 13:17
Avatar de ACALU  
Fecha de Ingreso: marzo-2008
Ubicación: Malaga
Mensajes: 106
Antigüedad: 6 años, 7 meses
Puntos: 0
Espacio entre parrafos en las listas (viñetas)

Hola,

Cuando intento poner una lista (viñetas) en un post de mi blog salen todos los parrafos juntos, sin ningun espacio entre ellos.

En el archivo style.css he visto este codigo:

Código:
#wrapper ul {
	list-style: square inside;
	}
Y le he añadido:

Código:
margin-bottom: 15px;
Pero no se ha solucionado. ¿Como lo puedo hacer?

Un saludo.
  #2 (permalink)  
Antiguo 16/06/2009, 15:58
Avatar de Anarninquë
Colaborador
 
Fecha de Ingreso: julio-2005
Ubicación: MVD | Uruguay
Mensajes: 1.096
Antigüedad: 9 años, 3 meses
Puntos: 28
Respuesta: Espacio entre parrafos en las listas (viñetas)

Prueba con esto:

Código HTML:
#wrapper ul li{margin-bottom:15px;}
El margin debes darlo entre item e item de la lista, no al final de la lista completa (a lo que equivaldría darle margin-bottom al elemento ul.


Prueba y me cuentas, ojalá sirva
Saludos!
__________________
Marcelo Ferreiro - Desarrollador Web
Mi Web - Pixelar.me
  #3 (permalink)  
Antiguo 16/06/2009, 16:03
Avatar de ACALU  
Fecha de Ingreso: marzo-2008
Ubicación: Malaga
Mensajes: 106
Antigüedad: 6 años, 7 meses
Puntos: 0
Respuesta: Espacio entre parrafos en las listas (viñetas)

Esto es lo que he puesto (con el "li" que has indicado antes), pero no sale.
Código:
#wrapper ul li{
	list-style: square inside;
       margin-bottom: 15px;
	}
Un saludo.
  #4 (permalink)  
Antiguo 16/06/2009, 16:09
Avatar de Anarninquë
Colaborador
 
Fecha de Ingreso: julio-2005
Ubicación: MVD | Uruguay
Mensajes: 1.096
Antigüedad: 9 años, 3 meses
Puntos: 28
Respuesta: Espacio entre parrafos en las listas (viñetas)

Puedes pasar el link de la web (o pegar el html y css) en cuestión? (ya que se hace más sencillo pudiendo ver el caso concreto) ;)
__________________
Marcelo Ferreiro - Desarrollador Web
Mi Web - Pixelar.me
  #5 (permalink)  
Antiguo 17/06/2009, 07:26
Avatar de ACALU  
Fecha de Ingreso: marzo-2008
Ubicación: Malaga
Mensajes: 106
Antigüedad: 6 años, 7 meses
Puntos: 0
Respuesta: Espacio entre parrafos en las listas (viñetas)

La direccion del blog es: acalu.es

El trozo del archivo style.css donde he identificado 2 codigos (en color azul) con lista es este:

Código:
/* Header, Topbar and Navbar */

#header h1 {
	font-size: 45px;
	font-weight: bold;
	font-family: georgia;
	text-transform: uppercase;
	margin-bottom: 18px;
	padding: 10px;
	text-align: right;
	border-bottom: 1px solid #000;
	}
		
#header a, #header a:hover {
	color: #010101;
	text-decoration: none;
	}

#topbarmax {
	background: #000;
	}

#topbar span {
	margin-right: 10px;
	}

#topbar .icon{
	background: #000 url(images/feedicon.png) right no-repeat;
	margin-right: 5px;
	color: #3898F8;
	padding: 2px 18px 2px 0;
	}

#navbar {
	clear: both;
	margin: 6px 0 20px 0;
	max-width: 100%;
	min-width: 900px;
	position: relative;
	}

#navbar li a{
	font-size: 16pt;
	font-weight: bold;
	margin: 7px 0;
	padding: 0 3px 3px 3px;
	font-family: "Arial Narrow", Arial, Tahoma;
	text-transform: uppercase;
	}

#navbar li a:hover{
	text-transform: uppercase;
	padding-top: 6px;
	border-top: 3px solid #fff;
	background: #000;
	color: #fff;
	}

#navbar li {
	list-style-type: none;
	display: inline;
	margin-left: 3px;
	padding: 0 5px;
	}


/* Content */

#wrapper p, #wrapper ul, #wrapper ol {
	line-height: 1.5em;
	}
			
#wrapper ul li{
	list-style: square inside;
        margin-bottom: 15px;
	}

#wrapper h1{
	font-size: 36pt;
	font-weight: bold;
	padding: 10px 0 15px 0;
	letter-spacing: -1.5px;
	font-family: "Arial Narrow", Arial, Tahoma;
	line-height: 34px;
	color: #0F0F0F;
	}

#wrapper h2{
	font-size: 24pt;
	font-weight: bold;
	padding: 10px 0 15px 0;
	letter-spacing: -1px;
	font-family: "Arial Narrow", Arial, Tahoma;
	line-height: 34px;
	color: #0F0F0F;
	}

#wrapper p {
	margin-bottom: 10px;
	}

.post ol li {
	margin: 0 0 5px 25px;
	}

#wrapper small {
	font-size: 8px;
	font-family: Tahoma;
	}
El margin-bottom: 15px; como dije, lo añadi yo.

Un saludo y muchas gracias.
  #6 (permalink)  
Antiguo 17/06/2009, 07:38
 
Fecha de Ingreso: abril-2003
Mensajes: 1.126
Antigüedad: 11 años, 6 meses
Puntos: 34
Respuesta: Espacio entre parrafos en las listas (viñetas)

Te referis a la parte de abajo de todo a la derecha de tu web?

Al Post-it?

Si te referis a eso, fijate que no están en una lista, sino que estan sueltos con un salto de linea entre uno y otro...

Ejemplo: El blogroll lo tenes así

Código HTML:
<h3>Blogroll</h3>

		<div id="blogroll">
		<ul>
		<li><a href="http://juananguerrero.lacoctelera.net/" rel="" onclick="javascript:pageTracker._trackPageview('/outbound/blogroll/juananguerrero.lacoctelera.net');">Bichos y Fotos</a></li> 
Mientras que el post-it es:

Código HTML:
<div id="infocolumn">

<h3>Post-It</h3>

<a href="http://acalu.es/consejos-sobre-fotografia/">Consejos sobre fotografia</a>
<br />

<a href="http://acalu.wordpress.com/2008/12/29/mi-flujo-de-trabajo/">Mi flujo de trabajo</a>
<br /> 
Poné el post-it así

Código HTML:
 <div id="infocolumn">

		<h3>Post-It</h3>
<ul>

<li><a href="http://acalu.es/consejos-sobre-fotografia/">Consejos sobre fotografia</a></li>

<li><a href="http://acalu.wordpress.com/2008/12/29/mi-flujo-de-trabajo/">Mi flujo de trabajo</a></li>
</ul> 
Y definis el #infocolumn ul li con tus valores...
__________________
elGastronomo
  #7 (permalink)  
Antiguo 17/06/2009, 07:41
Avatar de Anarninquë
Colaborador
 
Fecha de Ingreso: julio-2005
Ubicación: MVD | Uruguay
Mensajes: 1.096
Antigüedad: 9 años, 3 meses
Puntos: 28
Respuesta: Espacio entre parrafos en las listas (viñetas)

Si te referís al postit, has como te comentó el amigo American2010, si te refieres a las "listas" dentro de los contenidos:

<p>- Evita las prisas.</p>
<p>- Haz muchas fotos (...)</p>
<p>- Observa fotos (...)</p>
<p>- Busca informacion (...)</p>

Debo decirte que eso no son listas, sino una "simulación" utilizando párrafos, en ese caso puedes cambiarlo para usar <ul><li></li></ul> que sería lo más adecuado, o sino definir el margin-top/margin-bottom para los párrafos ;)

Saludos!
__________________
Marcelo Ferreiro - Desarrollador Web
Mi Web - Pixelar.me
  #8 (permalink)  
Antiguo 17/06/2009, 09:19
Avatar de ACALU  
Fecha de Ingreso: marzo-2008
Ubicación: Malaga
Mensajes: 106
Antigüedad: 6 años, 7 meses
Puntos: 0
Respuesta: Espacio entre parrafos en las listas (viñetas)

@American2010: No me referia a eso, pero muchas gracias por comentarme como arreglar lo del post-it, que era un tema pendiente que queria arreglar. Ya lo he hecho

@Anarninquë: Me referia a las listas dentro del contenido, que no lo he puesto todavia en ningun post porque no me sale ningun espacio entre la numeracion (viñetas) y no me gustaba como quedaba. Si consigo arreglarlo cambiaria el post, que es lo suyo.

En el css, en la parte que comente, le he añadido el margin-bottom, pero no hace nada. Y cuando estoy redactando el post señalo que son viñetas, miro el html y compruebo que estan entre <ul><li></li></ul>, pero nada

Un saludo.
  #9 (permalink)  
Antiguo 17/06/2009, 10:53
Avatar de ACALU  
Fecha de Ingreso: marzo-2008
Ubicación: Malaga
Mensajes: 106
Antigüedad: 6 años, 7 meses
Puntos: 0
Respuesta: Espacio entre parrafos en las listas (viñetas)

Remirando mas detenidamente el css he encontrado la parte de codigo donde creo que debe de ir el trozo de codigo para el espacio entre los parrafos de las listas:

Código:
#wrapper p {
	margin-bottom: 10px;
	}

.post ol li {
	margin: 0 0 5px 25px;
	}
He probado a cambiar esos dos 0 por 15 px, pero nada, y ha poner debajo de ello margin-bottom: 15px; pero tampoco.

Un saludo.
  #10 (permalink)  
Antiguo 17/06/2009, 11:05
Avatar de ACALU  
Fecha de Ingreso: marzo-2008
Ubicación: Malaga
Mensajes: 106
Antigüedad: 6 años, 7 meses
Puntos: 0
Respuesta: Espacio entre parrafos en las listas (viñetas)

Bueno, ya lo he solucionado (de algo me sirve ser cabezona ).

He cambiado el .post ol li por .post ul li, este es el codigo:

Código:
#wrapper p {
	margin-bottom: 10px;
	}

.post ul li {
        list-style: square;	
        margin: 0 0 5px 25px;
        margin-bottom: 15px;
	}
Un saludo.
  #11 (permalink)  
Antiguo 17/06/2009, 12:07
Avatar de ACALU  
Fecha de Ingreso: marzo-2008
Ubicación: Malaga
Mensajes: 106
Antigüedad: 6 años, 7 meses
Puntos: 0
Respuesta: Espacio entre parrafos en las listas (viñetas)

Me habia emocinado demasiado rapido (y ademas esto parece ya un monologo mio)... Haciendo el cambio anterior tambien modifico el espacio entre lineas que tiene la lista de cada pie de post.

Vuelta a empezar.
  #12 (permalink)  
Antiguo 17/06/2009, 13:16
Avatar de AlvaroG
/bin/env python
 
Fecha de Ingreso: julio-2005
Ubicación: Canelones, Uruguay
Mensajes: 7.643
Antigüedad: 9 años, 3 meses
Puntos: 590
Respuesta: Espacio entre parrafos en las listas (viñetas)

Moviendo al foro de CSS desde Wordpress
__________________
blog ElCodiguero
  #13 (permalink)  
Antiguo 17/06/2009, 13:34
Colaborador
 
Fecha de Ingreso: junio-2007
Mensajes: 5.810
Antigüedad: 7 años, 4 meses
Puntos: 537
Respuesta: Espacio entre parrafos en las listas (viñetas)

claro, porque las dos listas las controla el selector post ul li(style.css línea 244)
Crea un nuevo para la lista del pie del comentario:
Cita:
.feedback ul li {margin-bottom: Xpx}
Un saludo
__________________
Por una web con mucho estilo
+++ CUENTA ABANDONADA. ¿la quieres? +++
  #14 (permalink)  
Antiguo 17/06/2009, 15:40
Avatar de ACALU  
Fecha de Ingreso: marzo-2008
Ubicación: Malaga
Mensajes: 106
Antigüedad: 6 años, 7 meses
Puntos: 0
Respuesta: Espacio entre parrafos en las listas (viñetas)

En el style.css ya tenia un .feedback:

Código:
.feedback li{
	list-style-type: square;
	margin-left: 15px;
	line-height: 14px;
	}
He probado a añadir otro .feedback nuevo con el ul, y añadiendole el margin-bottom: 15px; asi:

Código:
.feedback ul li{
	list-style-type: square;
        margin-bottom: 15px;
	}
Y tambien a añadir directamente el margin-bottom al primero, y añadirle el ul, pero nada
  #15 (permalink)  
Antiguo 17/06/2009, 15:51
Avatar de Mikmoro
Colaborador
 
Fecha de Ingreso: octubre-2006
Ubicación: K-pax
Mensajes: 7.243
Antigüedad: 8 años
Puntos: 278
Respuesta: Espacio entre parrafos en las listas (viñetas)

Prueba con:

.post ul {padding-bottom: 15px;}
  #16 (permalink)  
Antiguo 17/06/2009, 15:51
Colaborador
 
Fecha de Ingreso: junio-2007
Mensajes: 5.810
Antigüedad: 7 años, 4 meses
Puntos: 537
Respuesta: Espacio entre parrafos en las listas (viñetas)

pues si por alguna razón tiene preferencia el .post ul li sobre .feedback ul li
añade a este último '!important'
Cita:
.feedback ul li {margin-bottom: 15px!important;}
Edito: el tipo de la foto me tiene manía
__________________
Por una web con mucho estilo
+++ CUENTA ABANDONADA. ¿la quieres? +++

Última edición por kseso?; 17/06/2009 a las 16:01
  #17 (permalink)  
Antiguo 17/06/2009, 16:12
Avatar de ACALU  
Fecha de Ingreso: marzo-2008
Ubicación: Malaga
Mensajes: 106
Antigüedad: 6 años, 7 meses
Puntos: 0
Respuesta: Espacio entre parrafos en las listas (viñetas)

¡Muchas gracias kseso!

Con eso lo he solucionado. Estos son los codigos finales:

Código:
.post ul li {
	margin: 0 0 5px 25px;
        margin-bottom: 10px;
	}
Código:
.feedback li{
	list-style-type: disc;
	margin-left: 15px;
	line-height: 14px;
        margin-bottom: 0px!important;
        }
Un saludo.
  #18 (permalink)  
Antiguo 17/06/2009, 16:14
Avatar de Mikmoro
Colaborador
 
Fecha de Ingreso: octubre-2006
Ubicación: K-pax
Mensajes: 7.243
Antigüedad: 8 años
Puntos: 278
Respuesta: Espacio entre parrafos en las listas (viñetas)

EDITO: si te va bien es igual.
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 18:37.
SEO by vBSEO 3.3.2