[SOLUCIONADO] Encabezadoos no alineado

DoPeY-BBS · #1 (**permalink**) 26/09/2015, 20:05

Saludos amigos, estoy aplicando css a una página bastante simple en html 5, mas sin embargo tengo problema al alinear unos encabezados h1 h2 y h3 respectivamente.

Acá coloco los códigos html y css

Código CSS:

Ver original<style>
        h1,h2,h3{
         color:#9F5702;
         font-family: Helvetica, verdana, "Times News Roman";
         border-top: 0.125rem solid #850303;
         padding-top: 0.5em;
         padding-left: 7em;
         
        }
 
        p{
        color:#8F8181;
        line-height: 1.2em;
        font-family: verdana, Helvetica, sans-serif;
        text-align: justify;
        margin-left: 7em;
        }
 
        </style>

Código HTML:

Ver original<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <title>Selectores</title>
    
</head>
<body>
    <h1>El diseño web con CSS</h1>
<p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. </p>
<p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?</p>
<p ><strong>ATENCIÓN:</strong> Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? </p>
<h2>¿Conoces el poder de CSS?</h2>
<p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?</p>
<p><strong>ATENCIÓN:</strong> Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? </p>
<h3>Seguimos aprendiendo</h3>
<p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?</p>
<h3>Diseños atractivos</h3>
<p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?
</p>
 
</body>
</html>

joseanguiano · #2 (**permalink**) 26/09/2015, 23:20

Por que no intentas colocando cada etiqueta en este caso una por una, de igual forma puedes trabajar con Pixeles px

ya que tu codigo se visualiza bien

C2am · #3 (**permalink**) 27/09/2015, 03:37

¿Alinear con respecto a qué o quién?
No comprendí cual es el problema.

Prueba a definir el padding-left con rem en vez de em.

Saludos

AngelKrak · #4 (**permalink**) 27/09/2015, 08:41

si quieres alinearlos al centro con un text-align: center se hace eso ;) pero quitale el padding-left que tienes ;)

Demo:
http://codepen.io/AngelKrak/pen/vNyJjv

DoPeY-BBS · #5 (**permalink**) 27/09/2015, 11:40

Saludos, gracias a todos por su respuesta a todos.

El resultado que busco es hacer que los encabezados tengan una alineación con respecto al texto, por eso lo del padding-left sin embargo el resultado que obtengo es este.

Solucionado

h1,
h2,
h3{
color:#9F5702;
font-size: 1em;
font-family: Helvetica, Verdana, "Times News Roman";
border-top: 0.125rem solid #850303;
padding-top: 0.5em;
padding-left: 3em;

}