Problema con sangria en CSS

[Nova]

Hola a todos,
Bueno tengo una lista y tiene una imagen personalizada (list-style-image) el cual funciona como menu y mi pregunta es como puedo poner a esta lista con sangria para todas las lineas...
Explico mejor en la imagen...

gracias de antemano por la ayuda.

[cristian_cena]

si por ejemplo tienes tu texo dentro de un elemento de línea ...

<span id="linea_a_bloque">arquitectura y construcción</span>

dale en los estilos...

#linea_a_bloque {display:block;}

y luego controlas el aspecto con margin y padding.

Cualquier cosa postea tu código, saludos!

[Nova]

Que raro cuando puse el codigo que me recomendaste el icono ( personalizado ) desaparece.

Código CSS:

#texts-menu li {
    list-style-type: none;
    margin:1px 10px; 
    list-style-image:url(images/check_off.png);
    list-style-position: inside;    
    border-bottom: 1px dashed #C6EC77;
    margin-top:10px;
    display:block;
 
}
 

Que pasa???

[cristian_cena]

Postea completo y tal cual tienes tu codigo html y css, y lo vemos.

[Nova]

ok ahi va.

Código CSS:

@charset "utf-8";
/* CSS Document */
 
*{padding: 0; margin: 0 auto;}
body{
font: small /1.3 Verdana, 'Liberation Sans', FreeSans, sans-serif;
 
margin: 0 auto;
 
background-color: #ddf4c6;  
}
 
a:link , a:visited {
color: #444; text-decoration: none;
} 
 
a:hover {
background-color: #AEE63C; 
color: #ffffff; 
} 
 
 
 
#fondobtns{
    background: url(images/bsigue.gif) no-repeat;
    margin: 0 0 0 0;
    padding: 0 0 0 0;
    height:119px;
}
#bannerflash img{
    margin: -5px 0 0 -3px;
/*  margin-top: -10px;*/
}
#redes_sociales img {
    padding:9px 0 0 0;
 
}
#txtsiguenos img{
    margin: 5px 0 0 8px;
}
#txtsuscribir img{
    margin: 2px 0 0 10px;
}
#txtsuscribir input{
/*  margin: 0 0 0 5px;*/
    
}
#txttwitter img{
    margin: 0 0 0 -10px;
}
#txtrss img{
    margin: 0 0 0 -10px;
}
#suscrip {
    color: #FFFFFF;
    background-color: #666666;
    border: medium dotted #666666;
}
#Suscripcion {
    padding:9px 0 0 0;
}
#titu-catego img{
    padding:15px 0 0 0;
}
#config_zona_botones{
    margin:0;
/*  padding:14px 0 4px 13px;*/
}
#barra_cuerpo{
/*  margin: -1px;*/
/*  padding:-10px -100px -10px -10px;*/
}
#columna_categorias{
    background:#A5E124;
    margin:auto;
/*  padding:-10px 100px 100px px;*/
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;/*
    border-radius: 5px;
    behavior: url(border-radius.htc);*/
 
}
#barra_contenido{
    background:url(images/bskina.gif) no-repeat;
    overflow: auto;
    margin: 0 0 0 -1px;
    overflow:hidden;
    color: #444;
}
#barra_publicidad{
    background:#BDCCB3;
}
#pie-contenido{
    padding: 10px 0 0 0;
    background:url(images/pie.gif) no-repeat;
    text-align:center;
    font: xx-small /1 Verdana, sans-serif;
    margin: 10px auto;
}
 
#texts-menu li {
    list-style-type: none;
    margin:1px 10px;
    list-style-image:url(images/check_off.png);
    list-style-position: inside;    
    border-bottom: 1px dashed #C6EC77;
    margin-top:10px;
    display:block;
 
}
 
.piebarra img{
background: url(images/b-barra.png) no-repeat transparent;
margin:0 auto;
}
#demo{
    float:right;
}
hr {
    border:0 #ccc solid;
    border-top-width:1px;
    clear:both;
    height:0
}
h1 {
    font-size:25px
}
h2 {
    font-size:23px
}
h3 {
    font-size:21px
}
h4 {
    font-size:19px
}
h5 {
    font-size:17px
}
h6 {
    font-size:15px
}
ol {
    list-style:decimal
}
ul {
    list-style:square
}
li {
    margin-left:30px;
    font-size:13px;
    
}
p {
    font: small /1.3 Verdana, 'Liberation Sans', FreeSans, sans-serif;
}
p, dl, hr, h1, h2, h3, h4, h5, h6, ol, ul, pre, table, address, fieldset {
    margin-bottom:20px
}
 

[alexk]

usa background y no "list-style-image" y dale padding-left para dar separacion entre la imagen y tu texto...

[Nova]

pero a ese image le estoy cambiando de "imagen" cada vez que se pasa el mouse por encima....
segun lo que me dices nose como hacer ese efecto....
otra opcion???

[Carlangueitor]

A ver si esto te sirve:

Código CSS:

#texts-menu li {
    list-style-type: none;
    margin:1px 10px; 
    list-style-image:url(images/check_off.png);
    list-style-position: outside;    
    border-bottom: 1px dashed #C6EC77;
    margin-top:10px;
    display:block;
 
}
 

Saludos

[alexk]

pero a ese image le estoy cambiando de "imagen" cada vez que se pasa el mouse por encima....

nose puede? :hover :S

[Nova]

si se puede, aqui el codigo y funcionando a 100% ( bueno es una mescla de css y javas).

Código Javascript:

<script type="text/javascript">      
        function CambiaIcoMenu() { 
          obj=document.getElementById('texts-menu'); 
          for (i=0;ele=obj.getElementsByTagName('li')[i];i++) { 
            ele.onmouseover = function() {this.style.listStyleImage = "url('images/check_on.png')" } 
            ele.onmouseout = function() {this.style.listStyleImage = "" } 
          } 
        }
 

Por eso de que si puediera haber otra solución.

por cierto cuando pongo "display:block;" en mi css el image de mi lista desaparece.... :(

Gracias

[alexk]

lo ideal creo yo

Código CSS:

#texts-menu li a{background:url(imagen.jpg); padding-left:??px;}
/*padding-left:??px agrega los pixeles segun el tamaño de la imagen y un poquito de margen para esta*/
#texts-menu li a:hover{background:url(imagen.jpg);}
 

PD: lo pongo en "a" para que el :hover funcione en IE6... si no lleva enlace tendrias que aplicar una libreria para el :hover en ie6 basta con buscar en este foro chao!...