Y
yamashita
Alfa
¡Usuario con pocos negocios! ¡Utiliza siempre saldo de Forobeta!
hola quiero poner el menu arriba y lo celeste que este abajo gracias
Y
yamashita
Alfa
¡Usuario con pocos negocios! ¡Utiliza siempre saldo de Forobeta!
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
body {
font-family: Arial, sans-serif;
padding: 20px;
}
.grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 20px;
}
.grid div {
background-color: #3498db;
color: white;
padding: 20px;
text-align: center;
border-radius: 5px;
}
@Media (max-width: 768px) {
.grid {
grid-template-columns: repeat(2, 1fr);
}
}
@Media (max-width: 480px) {
.grid {
grid-template-columns: 1fr;
}
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #333;
}
li {
float: left;
}
li a {
display: block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
li a:hover {
background-color: #111;
}
</style>
</head>
<body>
<div class="grid">
<div>Elemento 1</div>
<div>Elemento 2</div>
<div>Elemento 3</div>
<div>Elemento 4</div>
<div>Elemento 5</div>
<div>Elemento 6</div>
</div>
<ul>
<li><a class="active" href="#home">Home</a></li>
<li><a href="#news">News</a></li>
<li><a href="#contact">Contact</a></li>
<li><a href="#about">About</a></li>
</ul>
</body>
</html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
body {
font-family: Arial, sans-serif;
padding: 20px;
}
.grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 20px;
}
.grid div {
background-color: #3498db;
color: white;
padding: 20px;
text-align: center;
border-radius: 5px;
}
@Media (max-width: 768px) {
.grid {
grid-template-columns: repeat(2, 1fr);
}
}
@Media (max-width: 480px) {
.grid {
grid-template-columns: 1fr;
}
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #333;
}
li {
float: left;
}
li a {
display: block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
li a:hover {
background-color: #111;
}
</style>
</head>
<body>
<div class="grid">
<div>Elemento 1</div>
<div>Elemento 2</div>
<div>Elemento 3</div>
<div>Elemento 4</div>
<div>Elemento 5</div>
<div>Elemento 6</div>
</div>
<ul>
<li><a class="active" href="#home">Home</a></li>
<li><a href="#news">News</a></li>
<li><a href="#contact">Contact</a></li>
<li><a href="#about">About</a></li>
</ul>
</body>
</html>
Berker
Mi
Verificación en dos pasos activada
¡Usuario popular!
Tenes que aplicar valores z-index para posicionamiento de "bajo" a "alto", mientras más cercano a 0 es una capa inferior y más alto se sobrepone, quizás 10 para el fondo y 15 para el menú... si le pones el código y se lo das a ChatGPT o Gémini pidiendo valores z-index para lo que buscas, te lo da hecho y podes probarlo rápido
Franco Gabriel
Épsilon
Verificado
Verificación en dos pasos activada
Verificado por Whatsapp
Verificado por Binance
No entiendo bien, pero la idea quizás sería indexar? O te referis mas bien a crear un header? Que plataforma estás usando?
JustDewey11
VIP
Gamma
Programador
Verificación en dos pasos activada
Verificado por Whatsapp
¡Usuario con pocos negocios! ¡Utiliza siempre saldo de Forobeta!
Suscripción a IA
Pregúntale a chat GPT o a perplexity, te ahorras muchas dudas
Puko
Dseda
Verificación en dos pasos activada
¡Usuario con pocos negocios! ¡Utiliza siempre saldo de Forobeta!
¿Cómo que indexar?
nunca menciona un header
Es un simple html, ahi lo puso
solo mueve el código del menú arriba
<ul> ... </ul>
Asi ...
y eso es todo, lol
Y
yamashita
Alfa
¡Usuario con pocos negocios! ¡Utiliza siempre saldo de Forobeta!
excelenteeee
Franco Gabriel
Épsilon
Verificado
Verificación en dos pasos activada
Verificado por Whatsapp
Verificado por Binance
Si no logras resolverlo te puedo ayudar con una videollamada, sin cargo, a resolverlo, estoy para lo que necesites 🙂
Temas similares
