Quiero hacer esto en css

blaster99 · 2023-08-16T16:17:24-0600

quiero hacer esto en css como se ve en la imagen

BotBeta · 2023-08-16T16:17:32-0600

Lamento la confusión pero como un bot de texto, no puedo ver ni analizar imágenes. Sin embargo, si puedes describir lo que estás viendo en la imagen, estaré encantado de ayudarte a crear el código correcto.

ramones33 · 2023-08-16T17:34:12-0600

Creo que lo puedes hacer con un Grid

dexter1991 · 2023-08-16T20:40:20-0600

BotBeta dijo:
Lamento la confusión pero como un bot de texto, no puedo ver ni analizar imágenes. Sin embargo, si puedes describir lo que estás viendo en la imagen, estaré encantado de ayudarte a crear el código correcto.

puedes ayudar con codigo html?

BotBeta · 2023-08-16T20:40:24-0600

dexter1991 dijo:
puedes ayudar con codigo html?

¡Claro! Puedo ayudarte con HTML. ¿Cuál es exactamente el problema que estás experimentando o qué te gustaría lograr?

dexter1991 · 2023-08-16T20:41:47-0600

BotBeta dijo:
¡Claro! Puedo ayudarte con HTML. ¿Cuál es exactamente el problema que estás experimentando o qué te gustaría lograr?

como haria una lista usando html?

BotBeta · 2023-08-16T20:41:57-0600

dexter1991 dijo:
como haria una lista usando html?

Aquí tienes un ejemplo de cómo hacer una lista en HTML:

HTML:

<ul>
  <li>Elemento 1</li>
  <li>Elemento 2</li>
  <li>Elemento 3</li>
</ul>

Este es un ejemplo de una lista no ordenada (<ul>). Cada <li> es un elemento de la lista. Si quisieras una lista ordenada (es decir, una lista numerada), puedes usar <ol> en lugar de <ul>.

dexter1991 · 2023-08-16T20:42:58-0600

BotBeta dijo:
Aquí tienes un ejemplo de cómo hacer una lista en HTML:

HTML:

<ul> <li>Elemento 1</li> <li>Elemento 2</li> <li>Elemento 3</li> </ul>

Este es un ejemplo de una lista no ordenada (<ul>). Cada <li> es un elemento de la lista. Si quisieras una lista ordenada (es decir, una lista numerada), puedes usar <ol> en lugar de <ul>.

gracias bot muy util

BotBeta · 2023-08-16T20:43:02-0600

dexter1991 dijo:
gracias bot muy util

De nada, ¡me alegra poder ayudar! Si tienes más preguntas sobre HTML, CSS o cualquier otro tema, no dudes en hacerlas. ¡Buena suerte con tu codificación!

ultracobra · 2023-08-17T15:49:41-0600

para contener las imágenes se puede uar algo como esto...

<div className="image-container">
<div className="image-box">
<img src="imagen1.jpg" alt="Imagen 1" />
</div>
<div className="image-box">
<img src="imagen2.jpg" alt="Imagen 2" />
</div>
<div className="image-box">
<img src="imagen3.jpg" alt="Imagen 3" />
</div>
</div>

y un poquito de estilo, no tengo un mejor widget a la mano

.image-container {
display: flex;
justify-content: space-around; /* Ajusta el espacio entre las imágenes */
}

.image-box {
width: 100px; /* Ancho de cada cuadro */
margin: 10px; /* Margen entre los cuadros */
}

.image-box img {
width: 100%; /* Imagen se ajusta al ancho del cuadro */
height: auto; /* Mantener la proporción de la imagen */
}

blaster99 · 2023-08-23T16:35:04-0600

AQUI EL CODIGO NO ME SALE :$

CSS

body {

background-color: #cccccc;
}

.image-container {
display: flex;
justify-content: space-around; /* Ajusta el espacio entre las imágenes */
}

.image-box {
width: 100px; /* Ancho de cada cuadro */
margin: 10px; /* Margen entre los cuadros */
}

.image-box img {
width: 100%; /* Imagen se ajusta al ancho del cuadro */
height: auto; /* Mantener la proporción de la imagen */
}

::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::

<html>
<head>
<link rel="stylesheet" type="text/css" href="estilos.css" />
<title>Trabajos.cl</title>
</head>
<body>
<p>Empleos</p>
<a>registrarse</a>
<a>iniciar sesion</a>
<a>Mas Demandados</a>
<a>menos demandados</a>
<a>Quienes Somos</a>
<a>newsletter</a>
<a>Ferias Laborales en Santiago</a>

<div className="image-container">
<div className="image-box">
<img src="images/imagen1.jpg" alt="Imagen 1" />
</div>
<div className="image-box">
<img src="images/imagen2.jpg" alt="Imagen 2" />
</div>
<div className="image-box">
<img src="images/imagen3.jpg" alt="Imagen 3" />
</div>
</div>

</body>
</html>

lalilalilali · 2023-08-23T17:23:49-0600

Es fácil, con flexbox o con grid.

grxhz · 2023-08-30T10:41:14-0600

Solo tienes que poner todos los elementos en una caja con display: flex y luego ponerlos con flex-direction: row para que se pongan en una sola linea. así de sencillo.

Puko · 2023-08-30T12:58:28-0600

blaster99 dijo:
AQUI EL CODIGO NO ME SALE :$

no te sale porque ...

blaster99 dijo:
<div className="image-container">

className no existe, es <div class="

1.creamos un <div> por ejemplo <div class="cont1">

<div class="cont1">
...
</div>

2.Dentro ponemos cada "sección", cada uno en un <div> con class por ejemplo "menux"

<div class="cont1">
<div class="menux">Empleos</div>
<div class="menux">registrarse</div>
<div class="menux">iniciar sesion</div>
<div class="menux">Mas Demandados</div>
<div class="menux">menos demandados</div>
<div class="menux">Quienes Somos</div>
<div class="menux">menos demandados</div>
<div class="menux">newsletter</div>
<div class="menux">Ferias Laborales en Santiago</div>
</div>

3.creamos otro <div> para las imágenes por ejemplo <div class="cont2">

<div class="cont2">
...
</div>

4.Dentro ponemos cada "imagen", cada uno en un <div> con class por ejemplo "menu-img1", "menu-img2","menu-img3"

<div class="cont2">
<div class="menu-img1"><img src="https://forobeta.com/data/avatars/m/229/229615.jpg?1683647467" /></div>
<div class="menu-img2"><img src="https://forobeta.com/data/avatars/m/229/229615.jpg?1683647467" /></div>
<div class="menu-img3"><img src="https://forobeta.com/data/avatars/m/229/229615.jpg?1683647467" /></div>
</div>

5.previo...

6. Ahora le ponemos style/css
a .cont1 le ponemos width a .menux le ponemos width: max-content; y margin
7.previo...

8. a .cont2 le ponemos display: flex; para que se alinie horizontalmente y un width: max-content;

9.previo...

10. a cada .menu-img le ponemos width height margin y border
previo...

11. a cada imagen .menu-img1 img,.menu-img2 img,.menu-img3 img le ponemos width: 100%; y height: 100%;
previo...

12 y listo

En resumen...

HTML:

<html>
<head>
<link rel="stylesheet" type="text/css" href="estilos.css" />
<title>Trabajos.cl</title>
<style>
body {
  background-color: #cccccc;
}
.cont1 {
  width: 240px;
}
.menux {
  width: max-content;
  margin: 4px;
}
.cont2 {
  display: flex;
  width: max-content;
}
.menu-img1 {
  width: 200px;
  height: 150px;
  margin: 10px;
  border: 6px solid #000;
}
.menu-img2 {
  width: 300px;
  height: 150px;
  margin: 10px;
  border: 6px solid #000;
}
.menu-img3 {
  width: 400px;
  height: 150px;
  margin: 10px;
  border: 6px solid #000;
}
.menu-img1 img,.menu-img2 img,.menu-img3 img {
  width: 100%;
  height: 100%;
}
</style>
</head>
<body>
<div class="cont1">
<div class="menux">Empleos</div>
<div class="menux">registrarse</div>
<div class="menux">iniciar sesion</div>
<div class="menux">Mas Demandados</div>
<div class="menux">menos demandados</div>
<div class="menux">Quienes Somos</div>
<div class="menux">menos demandados</div>
<div class="menux">newsletter</div>
<div class="menux">Ferias Laborales en Santiago</div>
</div>
 <div class="cont2">
<div class="menu-img1"><img src="https://forobeta.com/data/avatars/m/229/229615.jpg?1683647467"/></div>
<div class="menu-img2"><img src="https://forobeta.com/data/avatars/m/229/229615.jpg?1683647467" /></div>
<div class="menu-img3"><img src="https://forobeta.com/data/avatars/m/229/229615.jpg?1683647467" /></div>
</div>
</body>
</html>