Diseños de sitios web de una sola columna simples en CSS
En esta lección practicaremos la creación de diseños de sitios web de una sola columna simples. Vamos, por ejemplo, a hacer un diseño como este:
Empecemos con la implementación. Cada diseño
generalmente comienza con un div general llamado
wrapper, que contiene todo el resto del sitio:
<div id="wrapper">
</div>
En nuestro caso, el contenedor estará centrado en la pantalla:
#wrapper {
width: 800px;
margin: 50px auto;
}
También tendrá un borde:
#wrapper {
width: 800px;
margin: 50px auto;
border: 1px solid black;
}
Ahora hagamos la estructura principal de la página. Consistirá en un menú y el contenido principal:
<div id="wrapper">
<div id="menu">
</div>
<div id="content">
</div>
</div>
Añadamos el contenido de nuestros bloques:
<div id="wrapper">
<div id="menu">
<a href="#">link text 1</a>
<a href="#" class="active">link text 2</a>
<a href="#">link text 3</a>
<a href="#">link text 4</a>
<a href="#">link text 5</a>
</div>
<div id="content">
<h1>Proin tristique lorem</h1>
<p>
...
</p>
<p>
...
</p>
</div>
</div>
Ahora podemos añadir estilos a nuestros bloques. Añadamos estilo al menú:
#menu {
display: flex;
justify-content: center;
margin-bottom: 20px;
background-color: #484848;
}
#menu a {
margin: 0 5px;
padding: 15px 25px;
text-decoration: none;
color: #fff;
font: bold 14px Arial;
}
#menu a:hover, #menu a.active {
color: #484848;
background-color: #fff;
}
Y ahora añadamos estilos a los elementos de contenido:
#content {
padding: 0 30px 20px;
}
#content h1 {
text-align: center;
margin-top: 0;
margin-bottom: 10px;
}
#content p {
padding: 0 10px;
margin-bottom: 5px;
font: 18px/1.3 Arial;
text-align: justify;
}
Ahora podemos juntar todo el código:
<div id="wrapper">
<div id="menu">
<a href="#">link text 1</a>
<a href="#" class="active">link text 2</a>
<a href="#">link text 3</a>
<a href="#">link text 4</a>
<a href="#">link text 5</a>
</div>
<div id="content">
<h1>Proin tristique lorem</h1>
<p>
...
</p>
<p>
...
</p>
</div>
</div>
#wrapper {
width: 800px;
margin: 50px auto;
border: 1px solid black;
}
#menu {
display: flex;
justify-content: center;
margin-bottom: 20px;
background-color: #484848;
}
#menu a {
margin: 0 5px;
padding: 15px 25px;
text-decoration: none;
color: #fff;
font: bold 14px Arial;
}
#menu a:hover, #menu a.active {
color: #484848;
background-color: #fff;
}
#content {
padding: 0 30px 20px;
}
#content h1 {
text-align: center;
margin-top: 0;
margin-bottom: 10px;
}
#content p {
padding: 0 10px;
margin-bottom: 5px;
font: 18px/1.3 Arial;
text-align: justify;
}
Consejo 1
Es más conveniente dar márgenes de arriba a abajo.
Por ejemplo, tenemos un menú y un contenido,
y entre ellos - un espacio vacío. Obviamente,
este espacio puede ser hecho con el margen inferior
del menú, el margen superior del contenido,
o la influencia simultánea de ambos. En este caso
es mejor establecer el margen inferior al menú, y al contenido
quitarle el padding y margin por defecto
para h1.
Consejo 2
Los elementos descendientes no deben formar el margen entre
los elementos padres. Por ejemplo, tenemos un menú.
El margen inferior de este menú se puede formar
con el margin del div con el menú, o con el margin
de los enlaces. Es mejor elegir la primera opción, ya
que los enlaces no deben actuar por encima de la cabeza
del elemento padre.
Consejo 3
Supongamos que entre dos elementos hay un margen
y en este caso visualmente no hay diferencia
en qué elegir para el margen - margin o padding.
En este caso elige margin, ya que
precisamente este debe crear los márgenes entre
elementos.
