Hola como veran no puedo alinear el asida de mi pagina.
lo quiero aquí.
(https://i.ibb.co/1bmy1yr/2013-05-25-copia.jpg)
https://i.ibb.co/1bmy1yr/2013-05-25-copia.jpg (https://i.ibb.co/1bmy1yr/2013-05-25-copia.jpg) :huh:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Pati</title>
<link href="https://fonts.googleapis.com/css2?family=Baloo+Thambi+2:wght@700&display=swap" rel="stylesheet">
<link rel="stylesheet" href="css/index.css">
</head>
<body>
<header class="cabecera text-aling">
<div class="caja izquierda">
<a href="index.html" class="ancla logo">PATI</a>
<p>Siempre pensando en la gente.</p>
</div>
<div class="caja derecha">
<p class="contratar">Contratar: 0388-123456</p>
<p class="emergencias">Emergencias: 0303456</p>
<a href="registro.html" class="ancla derecha">Ingresar</a>
</div>
</header>
<nav>
<a class="nav-enlace" href="#">Inicio</a>
<a class="nav-enlace" href="#">Programación</a>
<a class="nav-enlace" href="#">Noticias</a>
<a class="nav-enlace" href="#">Cocina</a>
<a class="nav-enlace" href="#">Animes</a>
<a class="nav-enlace" href="#">Contacto</a>
</nav>
<main>
<section class="flex">
<div class="izquierda">
<p class="titulo">¿Quienes somos?</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Excepturi dolores odio odit? Quidem
asperiores,
iure enim reprehenderit libero ducimus voluptatibus pariatur veniam modi veritatis! Magni vel
sapiente
reiciendis nihil enim.</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Excepturi dolores odio odit? Quidem
asperiores,
iure enim reprehenderit libero ducimus voluptatibus pariatur veniam modi veritatis! Magni vel
sapiente
reiciendis nihil enim.</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Excepturi dolores odio odit? Quidem
asperiores,
iure enim reprehenderit libero ducimus voluptatibus pariatur veniam modi veritatis! Magni vel
sapiente
reiciendis nihil enim.</p>
<p> ...</p>
</div>
</section>
<section class="flex text-align">
<div class="columna">
<h1>Plan Joven</h1>
<p class="precio">$600</p>
<p>Lorem ipsum dolor, sit amet consectetur.</p>
<hr>
<p>Lorem ipsum dolor </p>
<p>Lorem ipsum dolor</p>
<p>Lorem ipsum dolor, sit amet consectetur adipisicing elit.</p>
<hr>
<a href="#" class="btn-comprar">Comprar</a>
</div>
<div class="columna">
<h1>Plan Adulto</h1>
<p class="precio">$900</p>
<p>Lorem ipsum dolor, sit amet consectetur.</p>
<hr>
<p>Lorem ipsum dolor </p>
<p>Lorem ipsum dolor</p>
<p>Lorem ipsum dolor, sit amet consectetur adipisicing elit.</p>
<hr>
<a href="#" class="btn-comprar">Comprar</a>
</div>
<div class="columna">
<h1>Plan Leyenda</h1>
<p class="precio">$1200</p>
<p>Lorem ipsum dolor, sit amet consectetur.</p>
<hr>
<p>Lorem ipsum dolor </p>
<p>Lorem ipsum dolor</p>
<p>Lorem ipsum dolor, sit amet consectetur adipisicing elit.</p>
<hr>
<a href="#" class="btn-comprar">Comprar</a>
</div>
</section>
</main>
<aside class="side">
<p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Tempore alias qui distinctio vero
repudiandae aliquam mollitia obcaecati cum, quis voluptatibus deleniti quia inventore, eius totam unde! Ad
corrupti voluptatem maiores!</p>
</aside>
<footer>
<ul>
<li><a href="aviso-legal.html">Aviso legal</a></li>
<li><a href="privacidad.html">Privacidad</a></li>
<li><a href="contactar.html">Contactar</a></li>
</ul>
</footer>
</body>
</html>
Creo que estoy maquetando mal
p {
margin: 0px auto;
}
.ancla {
text-decoration: none;
}
.logo {
font-size: 80px;
color: lightseagreen;
font-family: 'Baloo Thambi 2', cursive;
}
.titulo {
font-size: 40px;
color: lightseagreen;
font-family: 'Baloo Thambi 2', cursive;
}
.cabecera {
margin: 10px auto;
padding: 10px;
width: 90%;
padding-bottom: 180px;
}
.side{
margin: 0 auto;
float: right;
width: 24%;
}
.flex {
display: flex;
width: 70%;
}
.text-align {
text-align: center;
}
.caja {
margin: 10px auto;
padding: 10px;
width: 23%;
}
.izquierda {
float: left;
}
.derecha {
float: right;
}
.contratar {
background: rgb(85, 85, 247);
border-radius: 8px;
color: white;
text-align: center;
font-size: 26px;
margin: 10px auto;
}
.emergencias {
background: salmon;
border-radius: 8px;
color: white;
text-align: center;
font-size: 26px;
margin: 10px auto;
}
.columna {
background: rgb(238, 238, 238);
color: #333;
border: 1px solid #333;
margin: 10px auto;
padding: 10px;
border-radius: 5px;
box-shadow: 5px 5px;
width: 23%;
box-sizing: border-box;
display: inline-block;
}
.precio {
font-size: 50px;
color: lightseagreen;
}
.btn-comprar {
background: salmon;
display: block;
padding: 10px;
color: seashell;
text-decoration: none;
border-radius: 4px;
}
.btn-comprar:hover{
background: rgb(97, 97, 248);
}
nav {
padding: 10px;
display: flex;
justify-content: space-around;
}
.nav-enlace {
color: whitesmoke;
background-color: rgb(80, 80, 241);
padding: 10px 40px;
display: inline-block;
text-decoration: none;
font-size: 20px;
border-radius: 6px;
}
.nav-enlace:hover{
color: whitesmoke;
background-color: rgb(240, 143, 159);
padding: 10px 40px;
display: inline-block;
text-decoration: none;
font-size: 20px;
border-radius: 6px;
}
@media (max-width: 900px) {
.columna {
width: 46%;
}
}
@media (max-width: 600px) {
.columna {
width: 92%;
}
}
:huh:
Saludos,
- Veo que has estado separando un espacio para tu
<aside> dentro de tu
<main>, sin embargo tu
<aside> esta fuera del
<main> XD. Me parece que el problema está en la mezcla de dos ideas, una es guardar espacio para el <aside> y la otra es crear un contenedor para cada columna y dentro de esta crear sub-contenedores para las filas contenidas.
- Solo hay que aplicar bien esa idea correctamente. Sin modificar nada en tu HTML y solo en el CSS se puede agregar lo siguiente al final:
main {
float: left;
width: 70%;
}
.flex {
display: flex;
width: 100%;
}
.side {
width: 30%;
}
footer {
clear: both;
}- Tu
<side> no flota al costado del
<main> porque este último es un elemento de bloque que ocupa una fila entera dentro de su objeto contenedor <body> en este caso. Para que el
<side> pueda flotar al que convertir el
<main> en objeto de línea o flotante, en mi caso lo puse flotante a la izquierda con un ancho de 70%.
- A tu estilo
.flex le pongo ancho 100% ya que este ancho es mejor ponerlo directamente al
<main>- A tu estilo
.side le pongo un ancho del 30% que sería el resto que dejó libre
<main>- Por último al <footer> le doy un
clear: both; para que empiece en una nueva fila después de los elementos flotantes
<main> y
<side>
Dios mio!! GRACIAS!!
NO entiendo bien lo de seccionar la pagina me pierdo, esto no es como wix, me ayudarias con algun video que te haya servido a ti gracias. ;-)
- Como ya lo había comentado en tu mensaje sobre donde podías subir tu página web, este curso de MiriadaX es bastante bueno para empezar: https://miriadax.net/web/html5mooc-9edicion/inicio
- En esa nueva edición solo se menciona a Float, ya que hoy se prefiere utilizar FlexBox y Grid. Por cierto el curso es gratuito, solo tienes que darle al botón de "Regístrate", luego podrás acceder al material y vídeos. Comprar el certificado es completamente opcional.