Espacio entre parrafos en las listas (viñetas)

[ACALU]

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.

[Anarninquë]

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!

[ACALU]

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.

[Anarninquë]

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) ;)

[ACALU]

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.

[American2010]

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...

[Anarninquë]

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!

[ACALU]

@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.

[ACALU]

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.

[ACALU]

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.

[ACALU]

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.

[AlvaroG]

Moviendo al foro de CSS desde Wordpress

[kseso?]

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:

.feedback ul li {margin-bottom: Xpx}

Un saludo

[ACALU]

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

[Mikmoro]

Prueba con:

.post ul {padding-bottom: 15px;}

[kseso?]

pues si por alguna razón tiene preferencia el .post ul li sobre .feedback ul li
añade a este último '!important'

.feedback ul li {margin-bottom: 15px!important;}

Edito: el tipo de la foto me tiene manía

[ACALU]

¡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.

[Mikmoro]

EDITO: si te va bien es igual.