[SOLUCIONADO] Alinear 2 objetos

[benti]

Hola! estoy intentando alinear el logo al paragrafo pero no termino de hacerlo bien, el CSS no es lo mio...
EL logo se queda siempre por encima del parrafo

Código HTML:

 <logo><img src="images/logo.png" /></logo>
            <header>
                <h1>Titulo</h1>
                <h2>Descripción del site</h2>
            </header> 

y el CSS

Código HTML:

.container > logo{
	padding: 150px 0px 0px 50px;
	margin: 0px 0px 0px 0px;
	position: relative;
	display: block;
    text-align: left;

}
.container > header{
	padding: 0px 0px 0px 250px;
	margin: 0px 0px 0px 0px;
	position: relative;
	display:block;
	text-shadow: 1px 1px 1px rgba(0,0,0,0.2);
    text-align: left;
}

Gracias por la ayuda

[pzin]

¿Esa etiqueta logo es nueva?

Y si quieres que aparezca debajo del párrafo —que por cierto, no veo ningún párrafo— ¿por qué no pones el elemento simplemente debajo de él?

¿O lo que quieres hacer es que estén alineados horizontalmente? Porque entonces lo que tienes que hacer es flotar los elementos con float.

[benti]

gracias pzin voy a intentar con la propiedad float
lo de logo funciona ;) jejeje

[pzin]

Iniciado por benti

lo de logo funciona ;) jejeje

Utiliza una etiqueta que exista. Que funcione no significa que esté bien hecho.

[benti]

OK lo voy a hacer bien ;)

Código HTML:

 <header>
<img src="images/logo.png" />
                <h1>Titulo</h1>
                <h2>Descripción del site</h2>
            </header> 

Y ahora el CSS, pero el problema es el ahora que no se alinea a la izquierda de los títulos :(

Código HTML:

.container > header{
	padding: 0px 0px 0px 250px;
	margin: 0px 0px 0px 0px;
	position: relative;
	display:block;
	text-shadow: 1px 1px 1px rgba(0,0,0,0.2);
    text-align: left;
}
.container > header img{
	top: 100px;
	padding: 20px 0px 0px -50px;
	margin: 0px 0px 0px 0px;
	position: relative;
	display: block;
    text-align: left;
}

[pzin]

Si quieres alinear algo horizontalmente, usa float como ya te dije.

Si quieres que la imagen esté al lado del h1 a la vez que del h2, estos últimos tendrán que estar en un pequeño contenedor y flotar ese contenedor además de la imagen.

[benti]

Pzin gracias ya lo he cambiado dandole propiedades a los "h1" y "h2"

Código HTML:

.container > header{
	padding: 0px 0px 0px 10%;
	margin: 0px 0px 0px 0px;
	position: relative;
	display:block;
	text-shadow: 1px 1px 1px rgba(0,0,0,0.2);
    text-align: left;
}
.container > header h1{
	font-family: 'BebasNeueRegular', 'Arial Narrow', Arial, sans-serif;
	font-size: 75px;
	line-height: 45px;
	position: relative;
	font-weight: 400;
	color: #fff;
	text-shadow: 1px 1px 1px rgba(0,0,0,0.3);
    padding: 0px 0px 5px 200px;
}
.container > header h1 span{

}
.container > header h2, p.info{
	font-family: 'Arial Narrow', Arial, sans-serif;
	font-size: 26px;
	font-style: italic;
	color: #9a9a9a;
	text-shadow: 1px 1px 1px rgba(0,0,0,0.6);
	padding: 0px 0px 5px 200px;
}
.container > header img{
	top: 100px;
	position: relative;
	display: block;
}