Foros del Web » Creando para Internet » CSS »

formateado de texto( margenes)

Estas en el tema de formateado de texto( margenes) en el foro de CSS en Foros del Web. hola amigos tengo una pagina en la cual tengo un menú horizontal y después un texto con div. y aunque lo he conseguido centrar no ...
  #1 (permalink)  
Antiguo 19/08/2009, 11:34
 
Fecha de Ingreso: agosto-2008
Mensajes: 584
Antigüedad: 9 años, 4 meses
Puntos: 11
formateado de texto( margenes)

hola amigos tengo una pagina en la cual tengo un menú horizontal y después un texto con div. y aunque lo he conseguido centrar no se como hacer para que no me salga a la misma altura que el menu, pues lo quiero debajo. Tampoco se como dejarle margenes a izquierda y derecha.
  #2 (permalink)  
Antiguo 19/08/2009, 11:37
Avatar de abimaelrc
Colaborador
 
Fecha de Ingreso: mayo-2009
Ubicación: En el planeta de Puerto Rico
Mensajes: 14.728
Antigüedad: 8 años, 6 meses
Puntos: 1512
Respuesta: formateado de texto( margenes)

¿Podiras escribir lo que has hecho?
__________________
Verifica antes de preguntar.
Los verdaderos amigos se hieren con la verdad, para no perderlos con la mentira. - Eugenio Maria de Hostos
  #3 (permalink)  
Antiguo 19/08/2009, 11:50
 
Fecha de Ingreso: agosto-2008
Mensajes: 584
Antigüedad: 9 años, 4 meses
Puntos: 11
Respuesta: formateado de texto( margenes)

<div id="navcontainer">
<ul id="navlist">
<li><a class="uno" href="#">Item one</a></li>
<li><a class="dos" href="#">Item two</a></li>
<li><a class="tres" href="#">Item three</a></li>
<li><a class="cuatro" href="#">Item four</a></li>
<li><a class="cinco" href="#">Item five</a></li>
</ul>
</div>
<div align="center" >

y aqui el texto

</div>
  #4 (permalink)  
Antiguo 19/08/2009, 12:11
Avatar de sanchy  
Fecha de Ingreso: octubre-2008
Mensajes: 389
Antigüedad: 9 años, 1 mes
Puntos: 9
Respuesta: formateado de texto( margenes)

para centarlo tenes que remover el align="center" y darle una clase. despues:
.clase {
text-align:center;
}

si agregas el css te digo como dejarlo debajo
  #5 (permalink)  
Antiguo 19/08/2009, 12:16
 
Fecha de Ingreso: agosto-2008
Mensajes: 584
Antigüedad: 9 años, 4 meses
Puntos: 11
Respuesta: formateado de texto( margenes)

y porque no me dices tambien como pones un tamaño igual a todos los <h> como si fueran <h> y tambien en dejar margenes a izquierda y derecha.

{margin:0;padding:0; border:0; outline:none; position: relative;}
ul#navlist {
margin-left: 150px;
padding-left:100px ;
margin-top:150px;}

#navlist li {
display:table;
float:left;
height:4em;
list-style-type:none;
margin:15px;
width:4em;
}

#navlist a {
display:table-cell;
height:100%;
position:relative;
text-align:center;
vertical-align:middle;
text-decoration: none;
color: #444;
border: 1px inset #660;
}

#navlist a:link.uno {background: #ff0000;}
#navlist a:link.dos {background: #00ff00;}
#navlist a:link.tres {background: #0000ff;}
#navlist a:link.cuatro {background: #ffff00;}
#navlist a:link.cinco {background: #ff3300;}
#navlist a:hover {
color:#ff3300;
border: 1px outset #69f;
}


#navlist a:hover.uno {background: #ff0033;}
#navlist a:hover.dos {background: #99ff00;}
#navlist a:hover.tres {background: #0033ff;}
#navlist a:hover.cuatro {background: #ffff33;}
#navlist a:hover.cinco {background: #ff6600;}

#cabezeras { margin: 50;50;50;}
  #6 (permalink)  
Antiguo 19/08/2009, 12:17
 
Fecha de Ingreso: agosto-2008
Mensajes: 584
Antigüedad: 9 años, 4 meses
Puntos: 11
Respuesta: formateado de texto( margenes)

el css lo tengo en un archivo aparte
  #7 (permalink)  
Antiguo 19/08/2009, 12:29
Avatar de sanchy  
Fecha de Ingreso: octubre-2008
Mensajes: 389
Antigüedad: 9 años, 1 mes
Puntos: 9
Respuesta: formateado de texto( margenes)

(.center es la clase del div con texto)



*{margin:0;padding:0; border:0; outline:none; }

ul#navlist {
width:100%;
margin-left: 150px;
padding-left:100px ;
margin-top:150px;
list-style:none;
}

#navlist li {
display:inline-table;
height:4em;
margin:15px;
width:4em;
}

#navlist a {
display:table-cell;
height:100%;
text-align:center;
vertical-align:middle;
text-decoration: none;
color: #444;
border: 1px inset #660;
}

#navlist a:link.uno {background: #ff0000;}
#navlist a:link.dos {background: #00ff00;}
#navlist a:link.tres {background: #0000ff;}
#navlist a:link.cuatro {background: #ffff00;}
#navlist a:link.cinco {background: #ff3300;}
#navlist a:hover {
color:#ff3300;
border: 1px outset #69f;
}


#navlist a:hover.uno {background: #ff0033;}
#navlist a:hover.dos {background: #99ff00;}
#navlist a:hover.tres {background: #0033ff;}
#navlist a:hover.cuatro {background: #ffff33;}
#navlist a:hover.cinco {background: #ff6600;}

#cabezeras { margin: 50;50;50;}

.center { text-align:center; }
  #8 (permalink)  
Antiguo 19/08/2009, 12:33
Avatar de sanchy  
Fecha de Ingreso: octubre-2008
Mensajes: 389
Antigüedad: 9 años, 1 mes
Puntos: 9
Respuesta: formateado de texto( margenes)

la verdad que no entiendo mucho tu codigo... ^_^
  #9 (permalink)  
Antiguo 19/08/2009, 13:04
 
Fecha de Ingreso: agosto-2008
Mensajes: 584
Antigüedad: 9 años, 4 meses
Puntos: 11
Respuesta: formateado de texto( margenes)

pues lo unico que necesito es tener un texto centrado con hoja css, Ademas de que tenga margenes a ambos lados y salga debajo de un menu horizontal. Por ahora nada solucionado.
  #10 (permalink)  
Antiguo 19/08/2009, 13:11
Avatar de sanchy  
Fecha de Ingreso: octubre-2008
Mensajes: 389
Antigüedad: 9 años, 1 mes
Puntos: 9
Respuesta: formateado de texto( margenes)

bueno en firefox se ve exactamente como vos queres que se vea. en IE ya el codigo que diste no se ve.. y el mio modificado mucho menos todavia
  #11 (permalink)  
Antiguo 19/08/2009, 13:23
 
Fecha de Ingreso: agosto-2008
Mensajes: 584
Antigüedad: 9 años, 4 meses
Puntos: 11
Respuesta: formateado de texto( margenes)

Gracias sanchi voy a mirar mejor
  #12 (permalink)  
Antiguo 19/08/2009, 13:23
Colaborador
 
Fecha de Ingreso: junio-2007
Mensajes: 5.798
Antigüedad: 10 años, 6 meses
Puntos: 538
Respuesta: formateado de texto( margenes)

¿menú horizontal y texto debajo también centrado?
Mira a ver si este ejemplo te es útil:
Código html:
Ver original
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="es" lang="es-es">
  3. <title>kseso? jugando con css</title>
  4. <style type="text/css">
  5. * {margin: 0; padding: 0; border: 0; position: relative;}
  6. html, body {
  7. background-color: #cdcdcd;
  8. }
  9. ul {
  10. margin:15px auto;
  11. text-align:center;
  12. width:20em;
  13. overflow:hidden;
  14. }
  15. ul li {
  16. float:left;
  17. list-style-type:none;
  18. }
  19. ul li a {
  20. display: block;
  21. padding: 5px 10px;
  22. text-decoration: none;
  23. color: #fff;
  24. }
  25. .uno {background: #c0c0c0;}
  26. .dos {background: #707070;}
  27. .tres {background: #4F4F4F}
  28. ul li a:hover {
  29. text-decoration: none;
  30. color: #F0C000;
  31. background: #600000;
  32. }
  33. .contenedor {
  34. width: 76%;
  35. margin: 0 auto;
  36. clear:both;
  37. }
  38. </head>
  39.   <ul>
  40.     <li><a class="uno" href="#">Enlace 1</a></li>
  41.     <li><a class="dos" href="#">Enlace 2</a></li>
  42.     <li><a class="tres" href="#">Enlace 3</a></li>
  43.   </ul>
  44. <div class="contenedor">
  45. <p>Lorem ipsum dolor sit amet consectetuer Nam congue Aliquam neque habitant. Eget ac Vestibulum malesuada semper facilisis vitae Curabitur Quisque eget enim. In elit consequat adipiscing ultrices quis elit non elit cursus eget. Phasellus Fusce Quisque sit ipsum quis volutpat urna felis in nibh. Tellus in porttitor Pellentesque tristique fringilla sagittis lorem wisi sed neque. Cras Sed dictumst in ac dictumst tincidunt vel auctor nunc ac. Molestie tempus justo et sed orci urna leo cursus.</p>
  46. <p>Et Sed condimentum augue Vestibulum Quisque Sed risus Phasellus consequat dolor. Et felis Ut mauris turpis convallis id sodales auctor gravida Fusce. Consectetuer consequat condimentum interdum In Quisque.</p>
  47. </div>
  48. </body>
  49. </html>

El menú tiene alguna cosilla innecesaria porque es el de otra consulta (reciclaje de recursos )

Un saludo
__________________
Por una web con mucho estilo
+++ CUENTA ABANDONADA. ¿la quieres? +++
  #13 (permalink)  
Antiguo 19/08/2009, 14:11
 
Fecha de Ingreso: agosto-2008
Mensajes: 584
Antigüedad: 9 años, 4 meses
Puntos: 11
Respuesta: formateado de texto( margenes)

Gracias a todos chicos y a ti kseso como siempre impecable.
  #14 (permalink)  
Antiguo 19/08/2009, 14:28
 
Fecha de Ingreso: agosto-2008
Mensajes: 584
Antigüedad: 9 años, 4 meses
Puntos: 11
Respuesta: formateado de texto( margenes)

el unico problema kseso es que yo quiero darle mas separacion al texto del menu.
  #15 (permalink)  
Antiguo 19/08/2009, 14:49
Colaborador
 
Fecha de Ingreso: junio-2007
Mensajes: 5.798
Antigüedad: 10 años, 6 meses
Puntos: 538
Respuesta: formateado de texto( margenes)

¿más separación al texto del menú?
Si te refieres a dejar más padding en los enlaces:
aumenta el padding lateral de 'ul li a' (el segundo valor que ahora está en 10px), y quizás tengas que aumentar la anchura de 'ul'.

Si te refieres a separar el texto inferior (los párrafos) de la lista aumenta el valor de ul {margin:15px auto 50px auto;}

Un saludo
__________________
Por una web con mucho estilo
+++ CUENTA ABANDONADA. ¿la quieres? +++
  #16 (permalink)  
Antiguo 20/08/2009, 03:47
 
Fecha de Ingreso: agosto-2008
Mensajes: 584
Antigüedad: 9 años, 4 meses
Puntos: 11
Respuesta: formateado de texto( margenes)

Lo que me gustaria es que la alineacion del menu y la del texto se hiciera en el mismo css pero de forma independiente, es decir que pudiera centrar el texto darle margenes sin que se modificara el menu
  #17 (permalink)  
Antiguo 20/08/2009, 06:11
Colaborador
 
Fecha de Ingreso: junio-2007
Mensajes: 5.798
Antigüedad: 10 años, 6 meses
Puntos: 538
Respuesta: formateado de texto( margenes)

Pues añade una definición más al css:
.contenedor p {...}
las propiedades y sus valores que definas ahí no deberían afectar a la lista del menú
__________________
Por una web con mucho estilo
+++ CUENTA ABANDONADA. ¿la quieres? +++
  #18 (permalink)  
Antiguo 20/08/2009, 12:45
 
Fecha de Ingreso: agosto-2008
Mensajes: 584
Antigüedad: 9 años, 4 meses
Puntos: 11
Respuesta: formateado de texto( margenes)

Hola amigos, con el codigo que pongo a continuacion he conseguido alinear el texto a izquierda y derecha como queria pero no consigo ponerlo a la altura que quiero, utilizo margin-top pero no me va. Que es lo que esta mal? os pongo el codigo.


.contenedor {margin-top: 850px;
margin-left: 300px ;
margin-right: 250px;
clear:both;
}
  #19 (permalink)  
Antiguo 20/08/2009, 13:43
 
Fecha de Ingreso: agosto-2008
Mensajes: 584
Antigüedad: 9 años, 4 meses
Puntos: 11
Respuesta: formateado de texto( margenes)

a ver si podeis ayudarme es urgente
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 00:47.