formateado de texto( margenes)

trevol · #1 (**permalink**) 19/08/2009, 10:34

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.

abimaelrc · #2 (**permalink**) 19/08/2009, 10:37

¿Podiras escribir lo que has hecho?

trevol · #3 (**permalink**) 19/08/2009, 10:50

<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>

sanchy · #4 (**permalink**) 19/08/2009, 11:11

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

trevol · #5 (**permalink**) 19/08/2009, 11:16

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;}

trevol · #6 (**permalink**) 19/08/2009, 11:17

el css lo tengo en un archivo aparte

sanchy · #7 (**permalink**) 19/08/2009, 11:29

(.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; }

sanchy · #8 (**permalink**) 19/08/2009, 11:33

la verdad que no entiendo mucho tu codigo... ^_^

trevol · #9 (**permalink**) 19/08/2009, 12:04

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.

sanchy · #10 (**permalink**) 19/08/2009, 12:11

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

trevol · #11 (**permalink**) 19/08/2009, 12:23

Gracias sanchi voy a mirar mejor

kseso? · #12 (**permalink**) 19/08/2009, 12:23

¿menú horizontal y texto debajo también centrado?
Mira a ver si este ejemplo te es útil:

Código html:

Ver original<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="es" lang="es-es">
<head>
<title>kseso? jugando con css</title>
<style type="text/css">
* {margin: 0; padding: 0; border: 0; position: relative;}
html, body {
background-color: #cdcdcd;
}
ul {
margin:15px auto;
text-align:center;
width:20em;
overflow:hidden;
}
ul li {
float:left;
list-style-type:none;
}
ul li a {
display: block;
padding: 5px 10px;
text-decoration: none;
color: #fff;
}
.uno {background: #c0c0c0;}
.dos {background: #707070;}
.tres {background: #4F4F4F}
ul li a:hover {
text-decoration: none;
color: #F0C000;
background: #600000;
}
.contenedor {
width: 76%;
margin: 0 auto;
clear:both;
}
</style>
</head>
<body>
  <ul>
    <li><a class="uno" href="#">Enlace 1</a></li>
    <li><a class="dos" href="#">Enlace 2</a></li>
    <li><a class="tres" href="#">Enlace 3</a></li>
  </ul>
<div class="contenedor">
<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>
<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>
</div>
</body>
</html>

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

)

Un saludo

trevol · #13 (**permalink**) 19/08/2009, 13:11

Gracias a todos chicos y a ti kseso como siempre impecable.

trevol · #14 (**permalink**) 19/08/2009, 13:28

el unico problema kseso es que yo quiero darle mas separacion al texto del menu.

kseso? · #15 (**permalink**) 19/08/2009, 13:49

¿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

trevol · #16 (**permalink**) 20/08/2009, 02:47

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

kseso? · #17 (**permalink**) 20/08/2009, 05:11

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ú

trevol · #18 (**permalink**) 20/08/2009, 11:45

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;
}

trevol · #19 (**permalink**) 20/08/2009, 12:43

a ver si podeis ayudarme es urgente