Foros del Web » Creando para Internet » CSS »

[Consulta sobre CSS] remover alineacion vertical en sidebar

 Estas en el tema de [Consulta sobre CSS] remover alineacion vertical en sidebar en el foro de CSS en Foros del Web. antes que nada, hola, me llamo Damián y soy autor de mi blog (http://dmblog.com.ar/), tengo un pequeño problema en el mismo, como ven en la ...
  #1 (permalink)  
Antiguo 22/12/2010, 01:44
 
Fecha de Ingreso: diciembre-2010
Mensajes: 5
Antigüedad: 13 años, 10 meses
Puntos: 0
[Consulta sobre CSS] remover alineacion vertical en sidebar
antes que nada, hola, me llamo Damián y soy autor de mi blog (http://dmblog.com.ar/), tengo un pequeño problema en el mismo, como ven en la imagen que esta al final de todo este escrito. lo que sucede es que el sidebar se me alinea todo verticalmente, lo que yo quiero es remover eso, o sea, que yo tenga que darle el formato desde la opcion de widgets del wordpress, me mate editando cosas y nada, algo de css se, pero contra esto no puedo, ya hace 3 dias que no le encuentro la vuelta de rosca, y en google no encontre nada!



Link a la imagen por si no se ve: http://img94.imageshack.us/img94/8687/asdfvd.png

muchas gracias de ante mano

pd: no encontre lugar para dar mi bienvenida, lamento que un pedido de ayuda sea mi primer topico/post, saludos!
  #2 (permalink)  
Antiguo 22/12/2010, 15:02
Colaborador
  
Fecha de Ingreso: junio-2007
Mensajes: 5.798
Antigüedad: 17 años, 5 meses
Puntos: 539
Respuesta: [Consulta sobre CSS] remover alineacion vertical en sidebar
¿a qué se refiere con alineación vertical?
Si por casualidad es que el texto queda centrado (text-align: center) y lo quiere a la izquierda, eso lo controla el archivo style.css, línea 76:
Código CSS: 
Ver original
  1. #sidebar {
  2.     color: #666666;
  3.     text-align: center;
  4. }
cambie el valor "center" por left (a la izquierda) o right (a la derecha)
Cita:
pd: no encontre lugar para dar mi bienvenida, lamento que un pedido de ayuda sea mi primer topico/post, saludos!
Por eso no se preocupe. En su tiempo lo hubo, ahora ya no.
Bien hallado.
  #3 (permalink)  
Antiguo 22/12/2010, 17:28
 
Fecha de Ingreso: diciembre-2010
Mensajes: 5
Antigüedad: 13 años, 10 meses
Puntos: 0
Respuesta: [Consulta sobre CSS] remover alineacion vertical en sidebar
lamentablemente no funciono eso, xq eso solo me mueve el titulo, las cosas siguen apareciendo como en filas....


a ver, si puedo ser mas grafico...



asi esta mi blog ahora:



yo lo quiero asi:




me explico?


dejo el codigo de todo el sidebar:

Código: 
#sidebar { color: #666666; float: right; padding: 0px 10px 20px 10px; width: 210px; text-align: center; }
#sidebar a, #sidebar a:visited { color: #5c9699; display: block; text-decoration: none; }
#sidebar a:hover { color: #73a714; display: block; text-decoration: none; text-align: center; }
#sidebar h2, #sidebar .sidebartitle { color: #73a714; font: lighter 18px Arial, Helvetica, sans-serif; margin: 20px 0px 2px; text-align: center; }
#sidebar ul { margin: 0; padding: 0; }
#sidebar ul li { border: none; list-style: none; margin: 0; padding: 2px 0; }
#sidebar ul li ul { margin: 0; padding: 0; }
#sidebar ul li ul li { padding: 2px 0 2px 0px; }
#sidebar ul li ul li ul li { border: none; padding: 1px 0 1px 10px; }
  #4 (permalink)  
Antiguo 23/12/2010, 15:50
Avatar de armandoweb  
Fecha de Ingreso: enero-2003
Ubicación: San Cristobal, Santa Fe, Argentina
Mensajes: 544
Antigüedad: 21 años, 9 meses
Puntos: 7
Respuesta: [Consulta sobre CSS] remover alineacion vertical en sidebar
Hola:

Puedes probar de incluir display:inline aqui:

Código CSS: 
Ver original
  1. #sidebar ul li {
  2.    display: inline; 
  3.    border: none; 
  4.    list-style: none; 
  5.    margin: 0; 
  6.    padding: 2px 0;
  7. }

Pruebalo y nos dices si funcionó.

Saludos.
__________________
www.awdesarrollos.com.ar - [twitter: @armandoweb] - [Skype: awdesarrollos"]
  #5 (permalink)  
Antiguo 23/12/2010, 18:56
 
Fecha de Ingreso: diciembre-2010
Mensajes: 5
Antigüedad: 13 años, 10 meses
Puntos: 0
Respuesta: [Consulta sobre CSS] remover alineacion vertical en sidebar
no, lamentablemente no me funciono, a ver si esto les sirve... les dejo el .php del sidebar y todo el CSS



Sidebar.php

Código PHP:
  <div id="sidebar">

<?php if ( !function_exists('dynamic_sidebar') || !dynamic_sidebar() ) : ?>

    <h2 class="sidebartitle"> buscar </h2>

<?php include (TEMPLATEPATH . '/searchform.php'); ?>

    <h2>categorias</h2>
    <ul>
            <?php wp_list_categories('title_li='); ?> 
    </ul>

    <h2>archivo</h2>
    <ul>
            <?php wp_get_archives('title_li='); ?>
    </ul>

    <h2>amigos</h2>
    <ul>
            <?php wp_list_bookmarks('categorize=0&title_li='); ?>
    </ul>

    <h2>opciones de logueo</h2>
    <ul>
<?php wp_register(); ?>

                    <li><?php wp_loginout(); ?></li>

                    <li><a href="http://validator.w3.org/check/referer" title="This page validates as XHTML 1.0 Transitional">Valid <abbr title="eXtensible HyperText Markup Language">XHTML</abbr></a></li>

                    <li><a href="http://gmpg.org/xfn/"><abbr title="XHTML Friends Network">XFN</abbr></a></li>

                    <li><a href="http://wordpress.org/" title="Powered by WordPress, state-of-the-art semantic personal publishing platform.">WordPress</a></li>

                    <?php wp_meta(); ?>
    </ul>

<?php endif; ?>
  </div>
CSS

Código CSS: 
Ver original
  1. /* HTML styling */
  2.  
  3. a { color: #009cff; text-decoration: none; }
  4. a.mini-add-comment { background: url(images/mini-down-arrow.gif) no-repeat; float: right; padding-left: 18px; }
  5. span.next-entries { background: url(images/mini-nav-right.gif) no-repeat right center; display: block; float: right; padding-right: 18px; text-align: right; width: 225px; }
  6. a.post-calendar { background: url(images/mini-calendar.gif) no-repeat; color: #999999; float: right; font-size: 95%; padding-left: 20px; }
  7. span.post-dates { background: url(images/date.gif) no-repeat; float: left; font-size: 95%; padding-left: 20px; padding-right: 10px; }
  8. span.post-cat { background: url(images/mini-category.gif) no-repeat; float: left; font-size: 95%; padding-left: 20px; }
  9. span.post-comments { background: url(images/mini-comments.gif) no-repeat; float: right; font-size: 95%; padding-left: 20px; }
  10. span.previous-entries { background: url(images/mini-nav-left.gif) no-repeat left center; display: block; float: left; padding-left: 18px; width: 228px; }
  11. a:hover { color: #009cff; text-decoration: none; }
  12. a:visited { color: #009cff; text-decoration: none; }
  13. body { background-color: #27343c; font: 75%/150% Arial, Helvetica, sans-serif; padding: 0px; }
  14. form { margin: 0px; padding: 0px; }
  15. h1 { background: url(images/header-icon.gif) no-repeat; color: #afe0ff; font: lighter 36px/150% Arial, Helvetica, sans-serif; height: 60px; margin: 0px; }
  16. h1 a, h1 a:visited { color: #009cff; text-decoration: none; }
  17. h1 a:hover { color: #ffffff; text-decoration: blink; }
  18. h2 { color: #009cff; font: lighter 18px Arial, Helvetica, sans-serif; letter-spacing: -1px; margin: 0px 0px 2px; padding-bottom: 3px; }
  19. h2 a, h2 a:visited { color: #000000; text-decoration: none; }
  20. h2 a:hover { color: #0099cc; text-decoration: none; }
  21. h3 { color: #83b700; font: normal 140%/100% Arial, Helvetica, sans-serif; margin: 10px 0px 5px; }
  22. h4 { color: #83b700; font: normal 130%/100% Arial, Helvetica, sans-serif; margin: 10px 0px 5px; }
  23. hr.clear { clear: both; margin: 0px; padding: 0px; visibility: hidden; }
  24. img.alignleft, img[align="left"] { float: left; margin: 2px 10px 5px 0px; }
  25. img.alignright, img[align="right"] { float: right; margin: 2px 0px 5px 10px; }
  26. img.center, img[align="center"] { display: block; margin-left: auto; margin-right: auto; }
  27. p { margin: 0px; padding: 0px 0px 15px; }
  28.  
  29. /* Div's and layout */
  30.  
  31. #commentform { font: 110% Arial, Helvetica, sans-serif; margin-top: 10px; text-align: center; }
  32. #commentform #submit { background: url(images/btn-bg.gif) no-repeat; border: none; color: #FFFFFF; cursor: pointer; font: bold 12px Arial, Helvetica, sans-serif; height: 20px; width: 500x; text-align: center; }
  33. #commentform input { background-color: #ffffff; border: 1px solid #cccccc; margin-top: 3px; padding: 3px; width: 500px; text-align: center; }
  34. #commentform label { color: #262626; font-size: 87%; }
  35. #commentform p { margin: 0px; padding: 6px 0px; }
  36. #commentform textarea { background-color: #ffffff; border: 1px solid #cccccc; height: 150px; margin-top: 1px; padding: 2px; width: 500px; }
  37. #commentform textarea:focus, #commentform input[type="text"]:focus { background: #ffffff; }
  38. #comments, #respond { clear: both; padding: 10px 0 5px 0; }
  39. #content { float: left; padding: 0px 10px 0px 20px; width: 730px; }
  40. #credits { color: #7a9299; font-size: 11px; height: 15px; line-height: 120%; margin: 0px auto; padding-bottom: 3px; width: 1000px; }
  41. #credits a, #credit a:visited { color: #048db4; }
  42. #footer { clear: both; color: #ACD7EE; font-size: 11px; line-height: 130%; margin-left: auto; margin-right: auto; padding-bottom: 10px; text-align: left; width: 1000px; }
  43. #footer a strong { color: #FFFFFF; }
  44. #footer a, #footer a:visited { color: #ACD7EE; }
  45. #footer a:hover { color: #FFFFFF; }
  46. #footer h4 { font: normal 146%/100% Arial, Helvetica, sans-serif; margin: 10px 0px 5px; }
  47. #footer li a { display: block; }
  48. #footer_bg { background: url(images/footer.jpg) no-repeat; height: 72px; width: 1000px; }
  49. #header { background: url(images/header.jpg) no-repeat; height: 40px; margin-left: auto; margin-right: auto; margin-top: 15px; width: 1000px; }
  50. #logo { background: url(images/logo.png) no-repeat; margin-left: auto; margin-right:auto; display: block; height: 100px; width: 1000px; }
  51. #logo {cursor:pointer}
  52. #logo p { color: #FFFFFF; font-size: 150%; line-height: 200%; padding: 0px; }
  53. #nav { clear: both; float: right; list-style: none; margin: 0px 10px 0 0; }
  54. #nav a { border-bottom: 3px solid #FFFFFF; color: #FFFFFF; display: block; float: left; font: 12px/100% Arial, Helvetica, sans-serif; height: 32px; line-height: 32px; margin-right: 3px; text-decoration: none; vertical-align: middle; padding: 0 10px; }
  55. #nav a:hover { border-bottom: 3px solid #0099CC; color: #0099CC; }
  56. #nav li { display: inline; height: 30px; list-style: none; }
  57. #nav ul { margin: 0px; padding: 0px; }
  58. #page { background: url(images/content.jpg) repeat-y left top; margin: 0px auto; width: 1000px; }
  59. #searchform { margin: 15px 0 0; }
  60. #searchform #s { background: #fff; border: 1px solid #cccccc; color: #000000; cursor: pointer; font-weight: normal; height: 19px; line-height: 19px; margin-right: 2px; padding: 0px 5px 0px 5px; vertical-align: middle; width: 135px; }
  61. #searchform br { display: none; }
  62. #searchform input { background: url(images/search-btn-bg.gif) no-repeat; border: none; color: #FFFFFF; font: bold 11px Arial, Helvetica, sans-serif; height: 20px; line-height: 20px; vertical-align: middle; width: 52px; }
  63. #sidebar { color: #666666; float: right; padding: 0px 10px 20px 10px; width: 210px; text-align: center; }
  64. #sidebar a, #sidebar a:visited { color: #5c9699; display: block; text-decoration: none; }
  65. #sidebar a:hover { color: #73a714; display: block; text-decoration: none; text-align: center; }
  66. #sidebar h2, #sidebar .sidebartitle { color: #73a714; font: lighter 18px Arial, Helvetica, sans-serif; margin: 20px 0px 2px; text-align: center; }
  67. #sidebar ul { margin: 0; padding: 0; }
  68. #sidebar ul li { border: none; list-style: none; margin: 0; padding: 2px 0; }
  69. #sidebar ul li ul { margin: 0; padding: 0; }
  70. #sidebar ul li ul li { padding: 2px 0 2px 0px; }
  71. #sidebar ul li ul li ul li { border: none; padding: 1px 0 1px 10px; }
  72. #sidebar ul li {
  73.    display: inline; 
  74.    border: none; 
  75.    list-style: none; 
  76.    margin: 0; 
  77.    padding: 2px 0;
  78. }
  79.  
  80.  
  81. /* Classes and other stuff */
  82.  
  83. .alignleft { float: left; }
  84. .alignright { float: right; }
  85. .center { text-align: center; }
  86. .clear { clear: both; }
  87. .commentlist { line-height: 130%; margin: 10px 0px; padding-left: 20px; }
  88. .commentlist .alt { }
  89. .commentlist cite { color: #CC6600; font-size: 120%; font-style: normal; font-weight: bold; }
  90. .commentlist cite a, .commentlist cite a:visited { color: #CC6600; }
  91. .commentlist li { padding: 5px 10px; }
  92. .commentlist small { display: block; font-size: 87%; margin-bottom: 5px; }
  93. .entry { clear: both; padding-top: 10px; }
  94. .footer-about { float: left; margin-left: 10px; width: 240px; }
  95. .footer-recent-comments { float: left; margin-left: 10px; width: 240px; }
  96. .footer-recent-comments ul { font-size: 11px; line-height: 110%; list-style: none; margin: 0px; padding: 0px; }
  97. .footer-recent-comments ul li { background: url(images/mini-footer-comments.gif) no-repeat; padding: 0px 0px 10px 20px; }
  98. .footer-recent-posts { float: left; margin-left: 10px; width: 240px; }
  99. .footer-recent-posts strong { font-size: 107%; font-weight: bold; line-height: 135%; }
  100. .footer-recent-posts ul { font-size: 11px; line-height: 110%; list-style: none; margin: 0px; padding: 0px; }
  101. .footer-recent-posts ul li { background: url(images/mini-footer-post.gif) no-repeat; padding: 0px 0px 10px 20px; }
  102. .loginout { background: url(images/mini-loginout.gif) no-repeat left center; margin-left: 8px; padding-bottom: 2px; padding-left: 18px; }
  103. .navigation { clear: both; height: 15px; padding: 10px 0px; }
  104. .post { clear: both; padding-top: 15px; }
  105. .post-date { background: url(images/date-bg.gif) no-repeat; float: left; height: 49px; width: 45px; }
  106. .post-day { color: #999999; display: block; font-size: 18px; line-height: 18px; margin-left: -3px; padding-top: 7px; text-align: center; }
  107. .post-month { color: #FFFFFF; display: block; font-size: 11px; line-height: 11px; margin-left: -3px; padding-top: 2px; text-align: center; }
  108. .post-title { float: center; margin-left: 0px; width: 730px; }
  109. .rss { background: url(images/mini-rss.gif) no-repeat left center; margin-left: 8px; padding-bottom: 2px; padding-left: 18px; }
  110. img {
  111. border: none;
  112. }
  113.  
  114.  
  115. *::-moz-selection{
  116.    background: #ffffff;
  117.    color: #fc0000;
  118. }
  119.  
  120. *::selection {
  121.    background: #ffffff;
  122.    color: #fc0000;
  123. }

saludos y gracias de antemano nuevamente
  #6 (permalink)  
Antiguo 26/12/2010, 18:16
 
Fecha de Ingreso: diciembre-2010
Mensajes: 5
Antigüedad: 13 años, 10 meses
Puntos: 0
Respuesta: [Consulta sobre CSS] remover alineacion vertical en sidebar
help ?
  #7 (permalink)  
Antiguo 01/01/2011, 22:35
 
Fecha de Ingreso: diciembre-2010
Mensajes: 5
Antigüedad: 13 años, 10 meses
Puntos: 0
Respuesta: [Consulta sobre CSS] remover alineacion vertical en sidebar
alguno ? por favor !
  #8 (permalink)  
Antiguo 02/01/2011, 17:15
Avatar de jomaruro
Colaborador
  
Fecha de Ingreso: junio-2002
Ubicación: Naboo
Mensajes: 5.442
Antigüedad: 22 años, 4 meses
Puntos: 361
Respuesta: [Consulta sobre CSS] remover alineacion vertical en sidebar
Hola:

Y añadir a #sidebar ul li un float:left;

Saludos.

Etiquetas: alineacion, sidebar
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


« Tema Anterior | Próximo Tema »


La zona horaria es GMT -6. Ahora son las 16:34.