elhacker.net cabecera Bienvenido(a), Visitante. Por favor Ingresar o Registrarse
¿Perdiste tu email de activación?.

 

 


Tema destacado: Usando Git para manipular el directorio de trabajo, el índice y commits (segunda parte)


+  Foro de elhacker.net
|-+  Programación
| |-+  Desarrollo Web (Moderador: #!drvy)
| | |-+  [Resuelto] Texto arriba aside
0 Usuarios y 1 Visitante están viendo este tema.
Páginas: [1] Ir Abajo Respuesta Imprimir
Autor Tema: [Resuelto] Texto arriba aside  (Leído 5,598 veces)
Thryks

Desconectado Desconectado

Mensajes: 112



Ver Perfil
[Resuelto] Texto arriba aside
« en: 6 Septiembre 2015, 21:12 pm »

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
  1. <section>
  2.  
  3. <article>
  4. <embed src="pdf/cv.pdf" class="cv">
  5. </article>
  6. </section>
  7. <aside class="derecha">
  8. <p>Esto es una prueba</p>
  9. </aside>
  10.  

Y esta la del css:

Código
  1. .derecha{
  2. float: right;
  3. vertical-align: text-top;
  4. }
  5. .cv{
  6. margin-top: 5px;
  7. height: 760px;
  8. width: 800px;
  9. text-align: center;
  10. }
  11.  

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
  1. text-align: center;
  2. vertical-align: top;
  3. float: none;
  4.  

Pero tampoco me funcionam, porfavor ¿alguna sugerencia?


« Última modificación: 12 Septiembre 2015, 13:18 pm por #!drvy » En línea

Futuro Sysadmin
DeMoNcRaZy


Desconectado Desconectado

Mensajes: 420


$~*|_


Ver Perfil
Re: Texto arriba aside
« Respuesta #1 en: 6 Septiembre 2015, 21:18 pm »

Buenas,

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

De igual modo prueba:

Código
  1. .derecha{
  2. float: left;
  3. }

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

Saludos.


En línea

Esta página web no está disponible - Google Chrome
Thryks

Desconectado Desconectado

Mensajes: 112



Ver Perfil
Re: Texto arriba aside
« Respuesta #2 en: 6 Septiembre 2015, 21:38 pm »

Claro, resulta que me sale asi:




Y yo quiero que me salga así:

« Última modificación: 7 Septiembre 2015, 12:50 pm por #!drvy » En línea

Futuro Sysadmin
DeMoNcRaZy


Desconectado Desconectado

Mensajes: 420


$~*|_


Ver Perfil
Re: Texto arriba aside
« Respuesta #3 en: 6 Septiembre 2015, 21:51 pm »

Prueba así:

Código
  1. <section>
  2.  <article>
  3.    <embed src="pdf/cv.pdf" class="cv">
  4.  </article>
  5. </section>
  6.  
  7. <aside>
  8.   <p>Esto es una prueba</p>
  9. </aside>

Código
  1. aside{
  2. position: fixed;
  3. top: 20px;
  4. }
  5. .cv{
  6. margin-top: 5px;
  7. height: 760px;
  8. width: 800px;
  9. text-align: center;
  10. }

Y si no funciona, prueba de esta otra forma:

Código
  1. <section id="derecha">
  2.  
  3. <aside >
  4.   <p>Esto es una prueba</p>
  5. </aside>
  6. </section>

Código
  1. aside {
  2. position: fixed;
  3. top: 20px;
  4. }

Prueba y coméntanos.

Saludos.

En línea

Esta página web no está disponible - Google Chrome
Thryks

Desconectado Desconectado

Mensajes: 112



Ver Perfil
Re: Texto arriba aside
« Respuesta #4 en: 6 Septiembre 2015, 22:41 pm »

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  :(
« Última modificación: 7 Septiembre 2015, 12:50 pm por #!drvy » En línea

Futuro Sysadmin
#!drvy
Moderador
***
Desconectado Desconectado

Mensajes: 5.855



Ver Perfil WWW
Re: Texto arriba aside
« Respuesta #5 en: 7 Septiembre 2015, 13:06 pm »

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
  1. /* Covertir section en table */
  2. .cv { display: table; }
  3.  
  4. /* Los mostramos como celdas y les damos
  5. vertical align top */
  6. .archivo, .derecha {
  7.    display: table-cell;
  8.    vertical-align: top;
  9. }
  10.  
  11. .archivo embed {
  12.    width: 800px;
  13.    height: 700px;
  14.    margin-top: 7px;
  15. }

HTML
Código
  1. <section class='cv'>
  2.    <article class='archivo'> <embed src='cv.pdf'> </article>
  3.    <aside class='derecha'> <p>Esto es una prueba</p> </aside>
  4. </section>

Saludos
« Última modificación: 7 Septiembre 2015, 13:09 pm por #!drvy » En línea

Thryks

Desconectado Desconectado

Mensajes: 112



Ver Perfil
Re: Texto arriba aside
« Respuesta #6 en: 8 Septiembre 2015, 21:01 pm »

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
« Última modificación: 8 Septiembre 2015, 23:12 pm por #!drvy » En línea

Futuro Sysadmin
#!drvy
Moderador
***
Desconectado Desconectado

Mensajes: 5.855



Ver Perfil WWW
Re: [Resuelto] Texto arriba aside
« Respuesta #7 en: 12 Septiembre 2015, 13:23 pm »

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
  1. .mi-div {
  2.    width: 100%;
  3.    max-width: 700px;
  4. }

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


En línea

Páginas: [1] Ir Arriba Respuesta Imprimir 

Ir a:  

Mensajes similares
Asunto Iniciado por Respuestas Vistas Último mensaje
Problema con archivos de texto (resuelto)
Programación C/C++
miketru 0 2,220 Último mensaje 9 Septiembre 2010, 23:32 pm
por miketru
[Resuelto] ayuda, texto con tilde se agrega incompleto en mysql de un hosting
PHP
Misterio_S 3 3,331 Último mensaje 3 Enero 2015, 02:31 am
por dimitrix
[Resuelto] Enviar texto a una url con javascript « 1 2 »
Desarrollo Web
Kaxperday 13 9,173 Último mensaje 20 Octubre 2015, 13:49 pm
por Kaxperday
[Resuelto] Texto en div crezca hacia arriba
Desarrollo Web
kakashi20 2 4,606 Último mensaje 23 Octubre 2015, 17:51 pm
por kakashi20
[Resuelto] Input de texto con sugerencias en php o el código que sea
PHP
MaximAlekz 4 4,699 Último mensaje 11 Enero 2016, 16:29 pm
por MaximAlekz
WAP2 - Aviso Legal - Powered by SMF 1.1.21 | SMF © 2006-2008, Simple Machines