Foros del Web » Creando para Internet » CSS »

Problema con sangria en CSS

Estas en el tema de Problema con sangria en CSS en el foro de CSS en Foros del Web. 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 ...
  #1 (permalink)  
Antiguo 19/01/2010, 11:37
Avatar de Nova  
Fecha de Ingreso: enero-2003
Ubicación: Hyo
Mensajes: 832
Antigüedad: 14 años, 10 meses
Puntos: 1
Problema con sangria en CSS

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.
__________________
http://about.me/jemano
  #2 (permalink)  
Antiguo 19/01/2010, 11:42
Avatar de cristian_cena
Colaborador
 
Fecha de Ingreso: junio-2009
Mensajes: 2.244
Antigüedad: 8 años, 5 meses
Puntos: 269
Respuesta: Problema con sangria en CSS

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!
  #3 (permalink)  
Antiguo 19/01/2010, 11:53
Avatar de Nova  
Fecha de Ingreso: enero-2003
Ubicación: Hyo
Mensajes: 832
Antigüedad: 14 años, 10 meses
Puntos: 1
Respuesta: Problema con sangria en CSS

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

Código CSS:
Ver original
  1. #texts-menu li {
  2.     list-style-type: none;
  3.     margin:1px 10px;
  4.     list-style-image:url(images/check_off.png);
  5.     list-style-position: inside;    
  6.     border-bottom: 1px dashed #C6EC77;
  7.     margin-top:10px;
  8.     display:block;
  9.  
  10. }

Que pasa???
__________________
http://about.me/jemano
  #4 (permalink)  
Antiguo 19/01/2010, 12:05
Avatar de cristian_cena
Colaborador
 
Fecha de Ingreso: junio-2009
Mensajes: 2.244
Antigüedad: 8 años, 5 meses
Puntos: 269
Respuesta: Problema con sangria en CSS

Postea completo y tal cual tienes tu codigo html y css, y lo vemos.
  #5 (permalink)  
Antiguo 19/01/2010, 12:07
Avatar de Nova  
Fecha de Ingreso: enero-2003
Ubicación: Hyo
Mensajes: 832
Antigüedad: 14 años, 10 meses
Puntos: 1
Respuesta: Problema con sangria en CSS

ok ahi va.
Código CSS:
Ver original
  1. @charset "utf-8";
  2. /* CSS Document */
  3.  
  4. *{padding: 0; margin: 0 auto;}
  5. body{
  6. font: small /1.3 Verdana, 'Liberation Sans', FreeSans, sans-serif;
  7.  
  8. margin: 0 auto;
  9.  
  10. background-color: #ddf4c6; 
  11. }
  12.  
  13. a:link , a:visited {
  14. color: #444; text-decoration: none;
  15. }
  16.  
  17. a:hover {
  18. background-color: #AEE63C;
  19. color: #ffffff;
  20. }
  21.  
  22.  
  23.  
  24. #fondobtns{
  25.     background: url(images/bsigue.gif) no-repeat;
  26.     margin: 0 0 0 0;
  27.     padding: 0 0 0 0;
  28.     height:119px;
  29. }
  30. #bannerflash img{
  31.     margin: -5px 0 0 -3px;
  32. /*  margin-top: -10px;*/
  33. }
  34. #redes_sociales img {
  35.     padding:9px 0 0 0;
  36.  
  37. }
  38. #txtsiguenos img{
  39.     margin: 5px 0 0 8px;
  40. }
  41. #txtsuscribir img{
  42.     margin: 2px 0 0 10px;
  43. }
  44. #txtsuscribir input{
  45. /*  margin: 0 0 0 5px;*/
  46.    
  47. }
  48. #txttwitter img{
  49.     margin: 0 0 0 -10px;
  50. }
  51. #txtrss img{
  52.     margin: 0 0 0 -10px;
  53. }
  54. #suscrip {
  55.     color: #FFFFFF;
  56.     background-color: #666666;
  57.     border: medium dotted #666666;
  58. }
  59. #Suscripcion {
  60.     padding:9px 0 0 0;
  61. }
  62. #titu-catego img{
  63.     padding:15px 0 0 0;
  64. }
  65. #config_zona_botones{
  66.     margin:0;
  67. /*  padding:14px 0 4px 13px;*/
  68. }
  69. #barra_cuerpo{
  70. /*  margin: -1px;*/
  71. /*  padding:-10px -100px -10px -10px;*/
  72. }
  73. #columna_categorias{
  74.     background:#A5E124;
  75.     margin:auto;
  76. /*  padding:-10px 100px 100px px;*/
  77.     -moz-border-radius: 5px;
  78.     -webkit-border-radius: 5px;/*
  79.     border-radius: 5px;
  80.     behavior: url(border-radius.htc);*/
  81.  
  82. }
  83. #barra_contenido{
  84.     background:url(images/bskina.gif) no-repeat;
  85.     overflow: auto;
  86.     margin: 0 0 0 -1px;
  87.     overflow:hidden;
  88.     color: #444;
  89. }
  90. #barra_publicidad{
  91.     background:#BDCCB3;
  92. }
  93. #pie-contenido{
  94.     padding: 10px 0 0 0;
  95.     background:url(images/pie.gif) no-repeat;
  96.     text-align:center;
  97.     font: xx-small /1 Verdana, sans-serif;
  98.     margin: 10px auto;
  99. }
  100.  
  101. #texts-menu li {
  102.     list-style-type: none;
  103.     margin:1px 10px;
  104.     list-style-image:url(images/check_off.png);
  105.     list-style-position: inside;    
  106.     border-bottom: 1px dashed #C6EC77;
  107.     margin-top:10px;
  108.     display:block;
  109.  
  110. }
  111.  
  112. .piebarra img{
  113. background: url(images/b-barra.png) no-repeat transparent;
  114. margin:0 auto;
  115. }
  116. #demo{
  117.     float:right;
  118. }
  119. hr {
  120.     border:0 #ccc solid;
  121.     border-top-width:1px;
  122.     clear:both;
  123.     height:0
  124. }
  125. h1 {
  126.     font-size:25px
  127. }
  128. h2 {
  129.     font-size:23px
  130. }
  131. h3 {
  132.     font-size:21px
  133. }
  134. h4 {
  135.     font-size:19px
  136. }
  137. h5 {
  138.     font-size:17px
  139. }
  140. h6 {
  141.     font-size:15px
  142. }
  143. ol {
  144.     list-style:decimal
  145. }
  146. ul {
  147.     list-style:square
  148. }
  149. li {
  150.     margin-left:30px;
  151.     font-size:13px;
  152.    
  153. }
  154. p {
  155.     font: small /1.3 Verdana, 'Liberation Sans', FreeSans, sans-serif;
  156. }
  157. p, dl, hr, h1, h2, h3, h4, h5, h6, ol, ul, pre, table, address, fieldset {
  158.     margin-bottom:20px
  159. }
__________________
http://about.me/jemano
  #6 (permalink)  
Antiguo 19/01/2010, 12:08
Avatar de alexk
Colaborador
 
Fecha de Ingreso: julio-2009
Ubicación: De vuelta al trono
Mensajes: 1.697
Antigüedad: 8 años, 5 meses
Puntos: 137
Respuesta: Problema con sangria en CSS

usa background y no "list-style-image" y dale padding-left para dar separacion entre la imagen y tu texto...
  #7 (permalink)  
Antiguo 19/01/2010, 12:20
Avatar de Nova  
Fecha de Ingreso: enero-2003
Ubicación: Hyo
Mensajes: 832
Antigüedad: 14 años, 10 meses
Puntos: 1
Respuesta: Problema con sangria en CSS

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???
__________________
http://about.me/jemano
  #8 (permalink)  
Antiguo 19/01/2010, 12:28
Avatar de Carlangueitor
Moderador ლ(ಠ益ಠლ)
 
Fecha de Ingreso: marzo-2008
Ubicación: México
Mensajes: 9.968
Antigüedad: 9 años, 8 meses
Puntos: 1314
Respuesta: Problema con sangria en CSS

A ver si esto te sirve:
Código CSS:
Ver original
  1. #texts-menu li {
  2.     list-style-type: none;
  3.     margin:1px 10px;
  4.     list-style-image:url(images/check_off.png);
  5.     list-style-position: outside;    
  6.     border-bottom: 1px dashed #C6EC77;
  7.     margin-top:10px;
  8.     display:block;
  9.  
  10. }

Saludos
__________________
Grupo Telegram Docker en Español
  #9 (permalink)  
Antiguo 19/01/2010, 12:50
Avatar de alexk
Colaborador
 
Fecha de Ingreso: julio-2009
Ubicación: De vuelta al trono
Mensajes: 1.697
Antigüedad: 8 años, 5 meses
Puntos: 137
Respuesta: Problema con sangria en CSS

Cita:
pero a ese image le estoy cambiando de "imagen" cada vez que se pasa el mouse por encima....
nose puede? :hover :S
  #10 (permalink)  
Antiguo 19/01/2010, 15:41
Avatar de Nova  
Fecha de Ingreso: enero-2003
Ubicación: Hyo
Mensajes: 832
Antigüedad: 14 años, 10 meses
Puntos: 1
Respuesta: Problema con sangria en CSS

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


Código Javascript:
Ver original
  1. <script type="text/javascript">      
  2.         function CambiaIcoMenu() {
  3.           obj=document.getElementById('texts-menu');
  4.           for (i=0;ele=obj.getElementsByTagName('li')[i];i++) {
  5.             ele.onmouseover = function() {this.style.listStyleImage = "url('images/check_on.png')" }
  6.             ele.onmouseout = function() {this.style.listStyleImage = "" }
  7.           }
  8.         }

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
__________________
http://about.me/jemano
  #11 (permalink)  
Antiguo 19/01/2010, 18:08
Avatar de alexk
Colaborador
 
Fecha de Ingreso: julio-2009
Ubicación: De vuelta al trono
Mensajes: 1.697
Antigüedad: 8 años, 5 meses
Puntos: 137
Respuesta: Problema con sangria en CSS

lo ideal creo yo

Código CSS:
Ver original
  1. #texts-menu li a{background:url(imagen.jpg); padding-left:??px;}
  2. /*padding-left:??px agrega los pixeles segun el tamaño de la imagen y un poquito de margen para esta*/
  3. #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!...

Etiquetas: sangria
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 07:39.