[Resuelto] Texto arriba aside

[Thryks]

Tengo un documento con la etiqueta <embed> pero tengo un aside a la derecha, he conseguido ponerlo a la derecha pero no consigo que el texto esté arriba sino que el texto se me alinea abajo a la derecha y quisiese saber como podría ponerlo arriba y centrado.

Esta es la parte del html:

Código (html4strict) [Seleccionar] Expandir


<section>

<article>
<embed src="pdf/cv.pdf" class="cv">
</article>
</section>
<aside class="derecha">
<p>Esto es una prueba</p>
</aside>


Y esta la del css:

Código (css) [Seleccionar] Expandir


.derecha{
float: right;
vertical-align: text-top;
}
.cv{
margin-top: 5px;
height: 760px;
width: 800px;
text-align: center;
}


También he probado a poner un <div> y meter dentro el <p> y ponerle una clase y en esa misma clase modificarlo con:

Código (css) [Seleccionar] Expandir


text-align: center;
vertical-align: top;
float: none;


Pero tampoco me funcionam, porfavor ¿alguna sugerencia?

[DeMoNcRaZy]

Buenas,

No logré entender bien que pasa... si puedes compartir una imagen.

De igual modo prueba:

Código (css) [Seleccionar] Expandir

.derecha{
float: left;
}

Comprueba si está dentro de la clase en la parte superior izquierda.

Saludos.

[Thryks]

Claro, resulta que me sale asi:

Y yo quiero que me salga así:

[DeMoNcRaZy]

Prueba así:

Código (html4strict) [Seleccionar] Expandir

<section>
  <article>
    <embed src="pdf/cv.pdf" class="cv">
  </article>
</section>

<aside>
   <p>Esto es una prueba</p>
</aside>

Código (css) [Seleccionar] Expandir


aside{
position: fixed;
top: 20px;
}
.cv{
margin-top: 5px;
height: 760px;
width: 800px;
text-align: center;
}

Y si no funciona, prueba de esta otra forma:

Código (html4strict) [Seleccionar] Expandir

<section id="derecha">

<aside >
   <p>Esto es una prueba</p>
</aside>
</section>

Código (css) [Seleccionar] Expandir

aside {
position: fixed;
top: 20px;
}

Prueba y coméntanos.

Saludos.

[Thryks]

He hecho justamente lo que me has dicho y no solo no se pone a la derecha sino que el aside se mete en el header. Luego he hecho lo 2º y me vuelve a salir el aside en el header y el article no me aparece  

[#!drvy]

El elemento aside por defecto se considera un elemento aparte por tanto los browsers lo muestran con un display:block. Lo mismo pasa para section y article.  Deberías aprender el uso de estilos tablas en CSS, te vienen muy bien para estos casos.

Un ejemplo.

CSS

Código (css) [Seleccionar] Expandir

/* Covertir section en table */
.cv { display: table; }

/* Los mostramos como celdas y les damos
vertical align top */
.archivo, .derecha {
    display: table-cell;
    vertical-align: top;
}

.archivo embed {
    width: 800px;
    height: 700px;
    margin-top: 7px;
}

HTML

Código (html4strict) [Seleccionar] Expandir

<section class='cv'>
    <article class='archivo'> <embed src='cv.pdf'> </article>
    <aside class='derecha'> <p>Esto es una prueba</p> </aside>
</section>

Saludos

[Thryks]

Muchas gracias por el consejo, aunque consegui ponerlo a la derecha sacando el aside del section, una pregunta, al terminar mi web me he dado cuenta de que no es responsiva y en moviles no se ve bien, me gustaría que lo fuese pero he leido por ahi que para ello tiene que ir todo con porcentajes en vez de pixeles, que es mas facil cuantos menos divs tenga el html y que tengo que usar medias queries y que seria bueno que usase normalize y modernizr, esto es cierto? Deberia crear un hilo para esta consulta o puedo publicarlo aqui? Gracias

[#!drvy]

Si es cierto, lo de los porcentajes no del todo (solo se suele usar para el width) y casi siempre se restringe el maximo con pixeles. Como por ejemplo:

Código (css) [Seleccionar] Expandir

.mi-div {
   width: 100%;
   max-width: 700px;
}

En ese caso, el div se adaptara al tamaño de la ventana pero si esta supera los 700px de ancho, no seguirá alargándose.

Los media-queries son muy importantes pues son los que te permiten manejar la posición y el contenido en general dependiendo del tamaño de la pantalla. normalize esta muy bien para que el código CSS se vea de la misma forma en todos los navegadores ya que predefine las reglas básicas que traen los navegadores. Modernizr es útil solo si buscas compatibilidad con navegadores obsoletos.

En todo caso, te recomiendo que hagas hilo a parte para preguntar sobre esas cosas.

Saludos