K
Kratz
Curioso
¡Usuario con pocos negocios! ¡Utiliza siempre saldo de Forobeta!
¡Feliz cumpleaños!
Hola compañeros, espero estén muy bien.. He estado aprendiendo HTML y CSS últimamente, aunque me falta mucho por aprender.. me puse a practicar lo poco que sé pero me topé con un problema. Así que quisiera saber de que forma puedo subir el DIV que dice PUBLICIDAD y quede debajo del otro llamado BUSCAR.
Estaría agradecido de que me ayudaran. Saludos
Aquí está el codigo que he estado haciendo, si tienen alguna recomendación con gusto la recibiré.
HTML:
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<title>turove</title>
<link rel="stylesheet" type="text/css" href="\estilo.css">
</head>
<body>
<div class="contenedor">
<header><img src="\logo.png"" alt="Tu Respuesto Online Venezuela C.A"/></header>
<ul id="menu">
<li><a href="#">INICIO</a></li>
<li><a href="#">SERVICIOS</a></li>
<li><a href="#">NOSOTROS</a></li>
<li><a href="#">COTIZAR</a></li>
<li><a href="#">LOGIN</a></li>
</ul></div>
<div class="cuerpo">
<div id="slider">
<h1>OFERTAS</h1>
</div>
<div id="search">
<h1>BUSCAR REPUESTOS</h1>
</div>
<div id="marcas">
<h1>MARCAS CON LAS QUE TRABAJAMOS</h1>
</div>
<div id="publicidad">
<h1>PUBLICIDAD</h1>
</div>
<footer></footer>
</div>
</body>
</html>
HTML:
body {
background: #CBD6DE;
}
.contenedor {
width: 85%;
background-color: white;
margin:auto;
border-radius: 8px 8px 0px 0px;
max-width: 1200px;
vertical-align: top;
}
.cuerpo {
width: 85%;
background-color: white;
margin:auto;
max-width: 1200px;
padding-bottom: 20px;
overflow: auto;
}
.cuerpo h1 {
transform: translateY(-180%);
font-family: courier, monospace;
text-align: center;
color: white;
font-size: 20px;
}
#menu {
background: rgb(93, 105, 115);
padding-top: 20px;
border-radius: 5px 5px 0px 0px;
text-align: center;
}
#menu li {
display: inline-block;
position: relative;
top:40%;
right: 0%;
transform: translateY(-40%);
}
#menu a {
font-size: 20px;
font-family: courier, monospace;
text-decoration: none;
color: white;
padding:0px 10px 0px 10px;
}
#menu a:hover {
color: #2F9CEB;
}
#slider {
width: 65%;
height: 200px;
background-color: #F4F6F5;
float: left;
margin-left: 8px;
margin-top: 10px;
border-top: 40px solid;
border-color:#1CED58;
border-radius: 4px 4px 0px 0px;
box-shadow: 0px 1px 1px #848484;
}
#search {
width: 30%;
height:60px;
background-color: #F4F6F5;
float: right;
margin-right: 8px;
margin-top: 10px;
border-top: 40px solid;
border-color:#1CED58;
border-radius: 4px 4px 0px 0px;
box-shadow: 0px 1px 1px #848484;
}
#marcas {
width: 65%;
height: 150px;
background-color: #F4F6F5;
float: left;
margin-left: 8px;
margin-top: 10px;
border-top: 40px solid;
border-color:#1CED58;
border-radius: 4px 4px 0px 0px;
box-shadow: 0px 1px 1px #848484;
}
#publicidad {
width: 30%;
height:150px;
background-color: #F4F6F5;
float: right;
margin-right: 8px;
margin-top: 10px;
border-top: 40px solid;
border-color:#1CED58;
border-radius: 4px 4px 0px 0px;
box-shadow: 0px 1px 1px #848484;
}
footer {
padding-bottom: 30px;
}