Estoy aprendiendo HTML y CSS y necesito vuestro consejo, estoy haciendo la estructua de una pagina web pero no se si voy bien. Solo he utilizado la propiedad float, y la unos contenedores para ir practicando,¿no se se hay otra forma mejor de hacerlo con position? os pongo el codigo para ver si voy bien:
Código HTML :
<body> <header id="headerMain"> <div id="logoMain"> <h1>Aqui iria el logo</h1> </div> <nav id="menuMain"> <ul> <li><a href="">Inicio</a></li> <li><a href="">Servicios</a></li> <li><a href="">Contacto</a></li> </ul> </nav> <div id="clearHeader"></div> </header> <section> <article class="post"> <header> <h1>Titulo primer post</h1> </header> <article> <p>Esto es una linea cualquiera</p> </article> <footer> <a href="">Boton Leer Mas...</a> </footer> </article> <article class="post"> <header> <h1>Titulo segundo post</h1> </header> <article> <p>Esto es una linea cualquiera</p> </article> <footer> <a href="">Boton Leer Mas...</a> </footer> </article> <article class="post"> <header> <h1>Titulo tercer post</h1> </header> <article> <p>Esto es una linea cualquiera</p> </article> <footer> <a href="">Boton Leer Mas...</a> </footer> </article> <article class="post"> <header> <h1>titulo cuarto post</h1> </header> <article> <p>linesasd asdasd asdadasda s das d ada sda</p> </article> <footer> <a href="">Boton Leer Mas...</a> </footer> </article> <aside> <h1>Redes Sociales</h1> <ul> <li><a href="">Twitter...</a></li> <li><a href="">Facebook...</a></li> <li><a href="">Google +...</a></li> <li><a href="">Pinterest...</a></li> </ul> </aside> <footer id="footerMain"> <p>Aviso legal y Condiciones y uso</p> <p>Prueba de estructura pagina web con float</p> </footer> </body>
Este es el CSS:
Código :
html, body{
width: auto;
height: 100%;
margin: 0;
padding: 0;
border: 0;
}
body{
background: #ebebeb;
width: 60%;
margin: 0 auto;
}
#headerMain{
border: 0.1em solid blue;
}
section{
width: 60%;
height: 70%;
margin-left: 2%;
float: left;
border: 0.1em solid black;
}
.post{
width: 40%;
height: 40%;
margin-top: 2%;
margin-left: 4.8%;
padding: 0.4em;
float: left;
border: 0.1em solid blue;
}
aside{
margin-right: 2%;
width: 30%;
height: 70%;
float: right;
border: 0.1em solid black;
}
#footerMain{
height: 12%;
text-align: center;
clear: both;
border: 0.1em solid yellow;
}La pregunta o preguntas son: ¿Estan bien aplicados los float?,¿hay alguna manera de hacerlo mejor o mas profesional?, ¿Para calcular el ancho y alto lo he hecho a ojo, hay alguna forma de hacerlo mejor?.
Me gustaria saber si voy bien para ir avanzando o si estoy totalmente perdido?.
Espero que no sean muchas preguntas, de todas formas, Gracias a todos.
Un saldudo.Josept.
