Puntos que molestan

[lfsow]

Hola amigos, verás, estoy haciendo una página web, y he hecho un menú, y debajo, otro. Esto lo he hecho con CSS y con HTML, pero no entiendo porqué salen estos puntos:



El código CSS para estos 2 menús es:

Código:

/* Breadcrumb
-------------------------------------------------------------- */

.breadcrumb {
	background:url(../images/top_bar.png) left top no-repeat;
	width:920px;
	height:49px;
	padding:0px 20px;
	margin-bottom:20px;
	float:left;
}

.breadcrumb h3 {
	float:left;
	color:#e5e5e5;
	padding-top:15px;
}

.breadcrumb ul {
	float:right;
}

.breadcrumb li {
	display:inline;
}

.breadcrumb li a {
	display:block;
	float:left;
	padding:0px 2px;
	line-height:49px;
	font-size:11px;
	color:#e5e5e5;
}


.left_menu {
	width:170px;
	float:left;
}

.left_menu li a {
	font-size:18px;
	color:#231f20;
	padding:15px 20px 15px 20px;
	float:left;
	display:block;
	width:100%;
}

.left_menu li a:hover, .left_menu li a.selected {
	background:url(../images/bullet_selected.jpg) right center no-repeat;
}

.left_menu .blog li a:hover, .left_menu .blog li a.selected {
	background:transparent url(../images/divider.gif) repeat-x scroll left bottom;
}

.center_content {
	float:right;
	width:680px;
}

/* Breadcrumb 2
-------------------------------------------------------------- */

.breadcrumb2 {
	background:url(../images/barra.png) left top no-repeat;
	width:170px;
	height:49px;
	padding:0px 20px;
	margin-bottom:5px;
	float:left;
}

.breadcrumb2 h3 {
	float:left;
	color:#e5e5e5;
	padding-top:17px;
}

.breadcrumb2 ul {
	float:right;
}

.breadcrumb2 li {
	display:inline;
}

.breadcrumb2 li a {
	display:block;
	float:left;
	padding:0px 2px;
	line-height:4px;
	font-size:11px;
	color:#e5e5e5;
}


.left_menu {
	width:170px;
	float:left;
}

.left_menu li a {
	font-size:18px;
	color:#231f20;
	padding:15px 20px 15px 20px;
	float:left;
	display:block;
	width:100%;
}

.left_menu li a:hover, .left_menu li a.selected {
	background:url(../images/bullet_selected.jpg) right center no-repeat;
}

.left_menu .blog li a:hover, .left_menu .blog li a.selected {
	background:transparent url(../images/divider.gif) repeat-x scroll left bottom;
}

.center_content {
	float:right;
	width:680px;
}

Y el HTML:

Código:

 <div class="left_menu">
        	<ul>
            	<li><a class="selected" href="#dweb">Web</a></li>
                <li><a href="#folletos">Folletos/Carteles</a></li>
                <li><a href="#logos">Logos</a></li>
                <li><a href="#publicidad">Publicidad</a></li>
            </ul>
		
		
		<div class="breadcrumb2">
        	
            <h3>Complementos</h3>
		</div>
               <li><a href="#web">Mantenimiento</a></li>
               <li><a href="#olletos">Publicidad</a></li>
               <li><a href="#loos">Otros</a></li>
        </div>

Gracias de antemano y espero ayuda.

[kakywaty]

Prueba en el css a poner:

Código CSS:

.breadcrumb2 li {
    display:inline;
        list-style: none;
}
 

[kakywaty]

Y en todos los elementos que quieras que no aparezcan los puntos.

Al utilizar la etiqueta "li", por defecto y al ser una lista te crea esos puntos.

En el css puedes aplicar la propiedad: valor, "list-style:none" para quitarlos.

Espero que se te arregle el asunto.

[lfsow]

Lo siento mucho, y gracias por vuestra ayuda, pero sigue sin funcionarme, sigue totalmente gual.

[charlyalegret]

Y que pasa si vuelves a encerrar en las etiquetas <ul> </ul> la lista que viene después de complementos?

[lfsow]

Eso ya lo he arreglado, gracias, pero el problema que se rpesenta despues de sacar los puntos es este:

http://www.forosdelweb.com/f53/menu-sin-espacios-956043/



saludos