Turbo
Delta
Verificación en dos pasos activada
Verificado por Whatsapp
¡Ha verificado su Paypal!
¡Usuario con pocos negocios! ¡Utiliza siempre saldo de Forobeta!
- Desde
- 7 Abr 2013
- Mensajes
- 582
Para mi primer tutorial enseñare como hacer dos cajas juntas, ya que muchos usuarios se complican un montón al querer crear dos cajas (boxes) una al lado de la otra como se muestra en la foto:
Para aquello usaremos css3 & html5:
En el archivo .css (style.css) siempre pondremos este código en la cabecera para que funcione:
El css para el área los box seria el siguiente:
.content
Margin-top: Estamos diciendo que queremos un espacio exterior hacia arriba de 10px, es decir que las cajas estén a 10px de distancia del contenido de arriba (En este caso, la navegación).
Como en .wrapper definimos que el ancho del sitio no sobrepase los 980px, tenemos que hacer que las dos cajas + el espacio entre ambas no sobrepasen dicha medida.
.content c1
float: leftt; Que la caja se mantenga al lado izquierdo
widht: El ancho sea máximo de 600px (Tamaño a elección)
.ccontent c2
float: right: Que la caja se mantenga al lado derecho.
width: El ancho sea máximo de 300px (Tamaño a elección)
El HTML para las cajas seria el siguiente:
El HTML de la estructura básica seria:
Wrapper: El wrapper sera para que nuestro sitio sea responsive (Claro que puedes llamarlo como quieras).
<h2>: Es el titulo de la caja.
<section>: Para definir la sección.
Si me falta explicar algo, me equivoque en algo o tiene dudas, comenten :encouragement:
Para aquello usaremos css3 & html5:
En el archivo .css (style.css) siempre pondremos este código en la cabecera para que funcione:
Insertar CODE, HTML o PHP:
/*Predeterminado*/
*
{
margin: 0;
padding: 0;
}
.clear::after
.clearfix::after,
article::after,
aside::after,
details::after,
div::after,
figure::after,
footer::after,
header::after,
hgroup::after,
li::after,
nav::after,
p::after,
section::after,
{
clear: both;
content: " ";
display: block;
visibility: hidden;
}
.wrapper
{
margin: auto auto;
width: 980px;
}El css para el área los box seria el siguiente:
Insertar CODE, HTML o PHP:
.content
{
margin-top: 10px;
}
.content .c1
{
float: left;
width: 600px
}
.content .c2
{
float: right;
width: 300px
}
.content h2
{
font-size: 20px bold;
color: #444;
border-bottom: solid 1px #444;
}.content
Margin-top: Estamos diciendo que queremos un espacio exterior hacia arriba de 10px, es decir que las cajas estén a 10px de distancia del contenido de arriba (En este caso, la navegación).
Como en .wrapper definimos que el ancho del sitio no sobrepase los 980px, tenemos que hacer que las dos cajas + el espacio entre ambas no sobrepasen dicha medida.
.content c1
float: leftt; Que la caja se mantenga al lado izquierdo
widht: El ancho sea máximo de 600px (Tamaño a elección)
.ccontent c2
float: right: Que la caja se mantenga al lado derecho.
width: El ancho sea máximo de 300px (Tamaño a elección)
El HTML para las cajas seria el siguiente:
HTML:
<div class="content">
<section>
<div class="c1">
<h2>Titulo del box</h2>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
<br/>
</p>
</div>
<div class="c2">
<section>
<h2>Titulo box 2</h2>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
</section>
</div>
</div>El HTML de la estructura básica seria:
HTML:
<!DOCTYPE html>
<html lang="es">
<head>
<title>Titulo del sitio</title>
<meta name="charset" content="iso-4849-15" />
<html>
<body>
<div id="page" class="page"/>
<header>
<div class="wrapper">
<figure>
<img src="img/logo.png"/>
</figure>
</div>
<nav>
<div class="wrapper">
<a href="./index.php">Inicio</a>
<a href="./index.php">Servicios</a>
</div>
</nav>
</header>
<div class="wrapper">
<div class="content">
<section>
<div class="c1">
<h2>Titulo del box</h2>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
<br/>
</p>
</div>
<div class="c2">
<section>
<h2>Titulo box 2</h2>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut l[COLOR="#FFD700"]abore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullam[/COLOR]co laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
</section>
</div>
</div>
</div>
<footer>
Texto Footer
</footer>
</div>
</body>
</html>Wrapper: El wrapper sera para que nuestro sitio sea responsive (Claro que puedes llamarlo como quieras).
<h2>: Es el titulo de la caja.
<section>: Para definir la sección.
Si me falta explicar algo, me equivoque en algo o tiene dudas, comenten :encouragement:
Última edición:
