Maquetación de prueba
He estado probando con el html y css para maquetar algo y me gustaría que le echaras un vistazo a la estructura para ver si no está muy mal.
Lo he cogido de una plantilla en photoshop no está operativa a lo que corresponde a enlaces y navegación, pero bueno es sólo para que me des tu opinión sobre la maquetación.
1 Respuesta
Perdona... un error.
Decía que clara que está bien, está perfecta. Pero no la has hecho tu, claro.
no entiendo... ¿no te habrás confundido al mandarme el link?
No, mira he realizado varias capturas de un sitio de venta de plantillas y la he maquetado por mi cuenta para probar con mis pocos conocimientos en html y css.
Una duda donde pone "Important Company Facts:" hay un pequeño párrafo debajo de un número. Como puedo situarlo inmediatamente debajo?
Pues si esto lo has maquetado tu, te felicito. Está muy, muy bien. Se me ocurre decirte una tontería: por SEO es casi obligado que en cada página haya un solo elemento <h1> (que sera el principal, el que tu quieras resaltar más). Veo que yienes varios, y yo te aconsejaría cambiarlos por <h2> o <h3> según su importancia.
La pregunta que me haces:
Has de entender que el navegador va escribiendo las cosas tal como las encuentra. Primero encuentra una imagen, y la pone; después tiene un h1 y lo pone a continuación (como le das un margen negativo, lo sube hacia arriba), y a continuación quiere por el <p> que, como ya no cabe, lo manda a la linea siguiente (que es debajo de la imagen). El modo que se me ocurre de situarla donde tu quieres es posicionándola absolutamente respecto a su contenedor. Añade estas lineas al CSS de ese párrafo:
Position: absolute:
bottom: 0;
right; 15 px;
Y por supuesto, no olvides darle a su contenedor, el article class="article_facts" un position: relative.
Hazlo y ya me contarás.
Y vuelvo a felicitarte por el trabajo. Es así como se aprende, trabajando mucho y, en todo caso, preguntando cositas que se te escapan.
Gracias por tus ánimos pero para hacer cualquier página principal como esta me puede llevar 8 horas, pero supongo que será cuestión de práctica.
Mira lo del párrafo que te comenté creo que existe algún problema de margenes o algo así, porque le modifico el ancho a mucho menos y sigue sin subir y prefiero no utilizar ni float ni posicionarlos a menos que sea imprescindibles. (me lo han comentado por lo visto para el diseño responsivo).
Sabes de algún buen manual de seo y de diseño adaptable?.
No es problema de margenes. Como ya te he dicho, la imagen, el <h1> y el <p> están en la misma linea uno tras otro. Y por ello no puedes poner el <p> ocupando el espacio del <h1>.
El único modo (que yo sepa, claro) es romper el flujo del documento con un float o un pos. absolute. Y no sé que eso tenga pegas con el responsive design (precisamente usan mucho float y porcentajes y demás; en todo caso pon right:5%) Yo no sé otras cosas.
Y que mas quisiera yo de tener un buen manual de SEO. Los 4 tíos que entienden de eso se lo guardan bien calladito, que les va su puesto de trabajo.
Y de responsive, te diría lo mismo. Pero utlmamente he visto alguna cosilla:
<a>http://coolvillage.es/</a>
<a>http://mediaqueri.es/</a>
No son manuales, pero enseñan muchas cositas.
Ale, me pongo a trabajar que aun no he hecho nada.
