Hola a todos, ¿que tal?
Estoy aprendiendo a diseñar webs y he hecho mi primer código sin consultar nada. ¿Me podéis dar opiniones constructivas?
Código html
CSS
Gracias
---------- Post agregado el 24-jul-2013 hora: 14:33 ----------
Ahora estoy intentando complicarlo un poco más.
Quiero hacer lo siguiente:
- En <section> quiero poner 4 artículos, dos arriba y dos debajo, pero no consigo cuadrar las cajas. ¿Como se hace?
- Luego en <aside>, he puesto una imagen pero no consigo centrarla, he puesto padding auto, ¿es así?
- Por otra parte en <nav> quiero separar un poco los botones, ¿como lo hago?
Gracias
Un saludo
Estoy aprendiendo a diseñar webs y he hecho mi primer código sin consultar nada. ¿Me podéis dar opiniones constructivas?
Código html
Insertar CODE, HTML o PHP:
<!DOCTYPE html>
<html lang="es">
<head>
<title>Prueba 23 de Julio</title>
<meta charset="UTF-8">
<meta name="description" content="Ejemplo de HTML5">
<meta name="keywords" content="Prueba">
<title>Este texto es el título del documento</title>
<link href="23_de_julio.css" rel="stylesheet" type="text/css">
</head>
<body>
<header id="cabecera">
<hgroup>
<h1>Prueba 23 de Julio</h1>
<h2>Esto es una práctica que estoy haciendo</h2>
</hgroup>
</header>
<nav>
<ul>
<li><a href="/Enlace 1">Enlace 1<a></li>
<li><a href="/Enlace 2">Enlace 2<a></li>
<li><a href="/Enlace 3">Enlace 3<a></li>
<li><a href="/Enlace 4">Enlace 4<a></li>
</ul>
</nav>
<section>
<article>
<header>
<h1>Articulo 1</h1>
</header>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus augue orci, pellentesque id urna quis, gravida consequat quam. Suspendisse sodales est venenatis eros iaculis convallis. Quisque laoreet ultrices augue, sit amet dapibus lacus. Nulla justo ligula, lacinia vitae malesuada vel, consequat et tortor. In a velit mollis, fringilla nulla id, eleifend arcu. Nunc in tellus eget magna eleifend elementum vel id augue. Morbi facilisis ultricies congue. Interdum et malesuada fames ac ante ipsum primis in faucibus. Maecenas ante lorem, placerat sed tincidunt sed, consectetur hendrerit felis. Proin egestas lectus elit, ultrices congue massa pulvinar sit amet. Pellentesque eu sapien orci. Maecenas sodales ante lorem, sollicitudin tincidunt mi dignissim id. Aliquam tincidunt sodales lacus, eget congue urna egestas ut.<p>
</article>
<article>
<header>
<h1>Articulo 2</h1>
</header>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus augue orci, pellentesque id urna quis, gravida consequat quam. Suspendisse sodales est venenatis eros iaculis convallis. Quisque laoreet ultrices augue, sit amet dapibus lacus. Nulla justo ligula, lacinia vitae malesuada vel, consequat et tortor. In a velit mollis, fringilla nulla id, eleifend arcu. Nunc in tellus eget magna eleifend elementum vel id augue. Morbi facilisis ultricies congue. Interdum et malesuada fames ac ante ipsum primis in faucibus. Maecenas ante lorem, placerat sed tincidunt sed, consectetur hendrerit felis. Proin egestas lectus elit, ultrices congue massa pulvinar sit amet. Pellentesque eu sapien orci. Maecenas sodales ante lorem, sollicitudin tincidunt mi dignissim id. Aliquam tincidunt sodales lacus, eget congue urna egestas ut.<p>
</article>
</section>
<aside>
<div id="cajauno">
Espacio reservado para un menu vertical
</div>
<div id="cajados">
Caja para publicidad
</div>
</aside>
<footer>
Este es el pie de la página
</footer>
</body>
</html>CSS
Insertar CODE, HTML o PHP:
@charset "utf-8";
/* CSS Document */
* {
margin: auto;
padding: 0px;
}
body {
width: 960px;
}
section {
width: 685px;
float: left;
}
header {
background-color:#666;
}
#cabecera {
background-color:#9C9;
}
h1 {
font-size: 25px;
}
h2 {
font-size: 20px;
}
nav {
display: inline-block;
float: right;
width: 960px;
}
li {
display: inline-block;
vertical-align: top;
}
aside {
float: right;
width: 245px;
height: 450px;
background-color:#66F;
padding: 15px;
}
footer {
clear: both;
text-align: center;
padding: 20px;
background-color:#666;
}
#cajauno {
background-color:#666;
}
#cajados {
background-color:#CCC;
}Gracias
---------- Post agregado el 24-jul-2013 hora: 14:33 ----------
Ahora estoy intentando complicarlo un poco más.
Quiero hacer lo siguiente:
- En <section> quiero poner 4 artículos, dos arriba y dos debajo, pero no consigo cuadrar las cajas. ¿Como se hace?
- Luego en <aside>, he puesto una imagen pero no consigo centrarla, he puesto padding auto, ¿es así?
- Por otra parte en <nav> quiero separar un poco los botones, ¿como lo hago?
Gracias
Un saludo
