1

Editando una de las páginas de mi proyecto web, usé la plantilla de otra de las páginas que se ven bien, pero supongo que al no tener la misma estructura, se descolocó todo o algo así...

La idea es que se vea bien tanto en ordenador como en cualquier dispositivo móvil. Las otras páginas cumplen con eso (tienen la misma estructura entre ellas), pero, como dije antes, esta cambia un poco la estructura, y quizá se deba a eso.

Este es mi código, con el error visible:

body {
	font-family: Verdana;
	background-image: url("https://lh6.googleusercontent.com/proxy/2_FymYLSO-g-We5Lo3JB5A8hMSg2fZMe53Cr0BctC9DY9n2cwTO1JNiGKL5ESGBA86CZx_J7It0wGiLA4YCX_ff0N74aKB03oS5bWhXiRvx373MBr2Eb9DUy");
	width: 100%;
	background-size: 100px 80px;
}

/* Redimensión */

* {
	box-sizing: border-box;
}
#menu {
	float:left;
	width:100%;
	text-align:center;
}
#menu a {
	background-color: none;
	padding:8px;
	margin-top:7px;
	display:block;
	text-align: center;
	width:100%;
	color:white;
}
#portada {
	float:left;
	width:100%;
	padding:0 20px;
}
#contenido {
	background-color:none;
	float:left;
	width:100%;
	padding:15px;
	margin-top:7px;
	text-align:center;
}

/* Estructura flex */

.flex-container {
  display: flex;
  align-items: stretch;
  background-color: none;
}

.flex-container > div {
  background-color: none;
  color: black;
  width: 100px;
  margin: 5px;
  text-align: center;
  line-height: 30px;
  font-size: 15px;
}

/* Nav bar */

ul {
  list-style-type: none;
  margin: 5px;
  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:not(.active) {
  background-color: #111;
}

.active {
  background-color: #4CAF50;
}

/* Galería de imágenes */

div.gallery {
  border: 1px solid #ccc;
  background-color: white;
}

div.gallery:hover {
  border: 1px solid #777;
}

div.gallery img {
  width: 100%;
  height: auto;
}

div.desc {
  padding: 5px;
  text-align: center;
  font-size: 12px;
}

.responsive {
  padding: 0 6px;
  float: left;
  width: 31%;
}
@media only screen and (max-width: 720px) {
	.responsive {
		width: 30%;
		margin: 6px 0;
	}
}

@media only screen and (max-width: 719px) {
	.responsive {
		width: 50%;
		margin: 6px 0;
	}
}

@media only screen and (max-width: 500px) {
	.responsive {
		width: 100%;
	}
}

.clearfix:after {
	content: "";
	display: table;
	clear: both;
}

.gato {
	color: DarkSlateBlue;
	font-weight: bold;
	font-size: 20px;
}
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>

<!-- Header -->
<!-- Imagen de portada de la wea -->
<div class="flex-container" id="portada">
  <div style="flex-grow: 10">
		<img src="https://www.promiau.com/static/img/img_blog/Como-proteger-a-tu-gato-de-los-parasitos-internos.jpg"
		width="100%" height="200px;">
  </div>
</div>

<!-- Nav bar. class="active"-->

<ul id="menu">
  <li><a href="../index.php">Inicio</a></li>
  <li><a href="../gato1/gato1.html">Gato1</a></li>
  <li><a href="../gato2/gato2.html">Gato2</a></li>
  <li><a class="active" href="./gato3.html">Gato3</a></li>
</ul>

<!-- Contenido -->

<div class="flex-container">
	<div style="flex-grow: 7">
		<p class="gato">Gato </p>		
		<p style="background-color: white">
				1 gato<br>
        2 gatos<br>
        3 gatos<br>
        4 gatos<br>
        5 gatos<br>
        6 gatos<br>
        7 gatos
        Texto con imagen al lado
		</p>
	</div>
	<div style="flex-grow: 3">	
		
		<div class="responsive">
		<div class="gallery">	
			<img src="https://www.purina.es/gato/purina-one/sites/g/files/mcldtz1856/files/2018-06/Como_saber_si_un_gato_tiene_fiebre%281%29_0.jpg" alt="Ingredientes de las tortitas" width="800" height="500">		
		</div>
		</div>
	</div>
<div class="flex-container">
	<div style="flex-grow: 8"> 
		<p class="gato">Gato</p>
			<p style="background-color: white">
			Aquí va un texto largo sin imagen, justo debajo del texto de arriba.
			</p>
	</div>
	</div>
  <div style="flex-grow: 2">
		<div class="responsive">
		<div class="gallery">	
			<img src="https://www.purina.es/gato/purina-one/sites/g/files/mcldtz1856/files/2018-06/Como_saber_si_un_gato_tiene_fiebre%281%29_0.jpg" alt="Ingredientes de las tortitas" width="800" height="500">		
		</div>
		</div>
   </div>
</div>


</body>
</html>

Intenté cambiar los flex, cambiarlos de sitio, eliminar, añadir otros... El caso es que se ponían en cualquier lugar menos donde debía ponerse. Tampoco aparecen imágenes que deberían aparecer.

Probé la idea de la respuesta de David, pero no me llega a convencer del todo ya que hay que estar redimensionando todo el rato según el contenido.

La idea es que finalmente quede así (o similar):

final

2 respuestas 2

4

Primero deberías establecer la estructura principal y despues rellenar el contenido, aquí te dejo un fragmento de código para que puedas ver como crear la estructura que presenta tu diseño. Puedes adaptarlo reemplazando los p por el contenido final

.contenedor{
  display: flex;
  flex-direction: column; /* default */
  width: 400px;
}
.fila{
  width: 100%;
  display: flex;
  flex-direction: row;
 }
 .columna{
  flex-grow: 1;
  height: 100px;
  border: 1px solid black;
  margin: 2px;
  display: flex;
 }
 .columna.w-25{
  width: 25%;
 }
 .columna.w-50{
  width: 50%;
 }
 p{
  margin: auto;
 }
 
<div class="contenedor">
  <div class="fila">
    <div class="columna">
      <p>portada</p>
    </div>
  </div>
  <div class="fila">
   <div class="columna w-25">
    <p>texto</p>
   </div>
   <div class="columna">
    <p>imagen</p>
   </div>
  </div>
  <div class="fila">
    <div class="columna w-50">
      <p>texto</p>
    </div>
    <div class="columna">
      <p>imagen</p>
    </div>
  </div>
</div>

2
  • ¡Lo probaré! Muchas gracias por la respuesta
    – Lucía
    el 31 ene. 2020 a las 13:56
  • He estado probándolo y no me convence del todo. Hay que estar modificando la altura de cada columna y cada fila según el contenido que añadas. En cambio, con los flexbox se adapta según el contenido. No es mala idea la que me has dado, pero no es la que buscaba del todo. Muchas gracias por tomarte tiempo a contestar
    – Lucía
    el 3 feb. 2020 a las 7:59
0

Después de muchos intentos de hacer y rehacer todo el código, di con la respuesta.

Al tener asignado un id a los div, el que no tenía el id asignado, no se colocaba. Lo que hice fue asignado un estilo con el id correspondiente, conssiguiendo así que quedasen colocados.

body {
	font-family: Verdana;
	background-image: url("https://lh6.googleusercontent.com/proxy/2_FymYLSO-g-We5Lo3JB5A8hMSg2fZMe53Cr0BctC9DY9n2cwTO1JNiGKL5ESGBA86CZx_J7It0wGiLA4YCX_ff0N74aKB03oS5bWhXiRvx373MBr2Eb9DUy");
	width: 100%;
	background-size: 100px 80px;
}

/* Redimensión */

* {
	box-sizing: border-box;
}
#menu {
	float:left;
	width:100%;
	text-align:center;
}
#menu a {
	background-color: none;
	padding:10px;
	margin-top:0px;
	display:block;
	text-align: center;
	width:100%;
	color:white;
}

#portada {
	float:left;
	width:100%;
	padding:0 20px;
}
#contenido {
	background-color:none;
	float:left;
	width:100%;
	padding:15px;
	margin-top:7px;
	text-align:center;
}

#contenido2 {
	background-color:none;
	float:left;
	width:100%;
	padding:15px;
	margin-top:7px;
	text-align:center;
}

/* Estructura flex */

.flex-container {
  display: flex;
  align-items: stretch;
  background-color: none;
}

.flex-container > div {
  background-color: none;
  color: black;
  width: 100px;
  margin: 5px;
  text-align: center;
  line-height: 30px;
  font-size: 15px;
}

/* Nav bar */

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:not(.active) {
  background-color: #111;
}

.active {
  background-color: #4CAF50;
}

/* Galería */

div.gallery {
  border: 1px solid #ccc;
  background-color: white;
}

div.gallery:hover {
  border: 1px solid #777;
}

div.gallery img {
  width: 100%;
  height: auto;
}

div.desc {
  padding: 5px;
  text-align: center;
  font-size: 12px;
}

.responsive {
  padding: 0 6px;
  float: left;
  width: 31%;
}

@media only screen and (max-width: 700px) {
  .responsive {
    width: 30%;
    margin: 6px 0;
  }
}

@media only screen and (max-width: 500px) {
  .responsive {
    width: 100%;
  }
}
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>

<div class="flex-container" id="portada">
  <div style="flex-grow: 10">
		<p style="background-color: white">PORTADA</p>
  </div>
</div>

<ul id="menu">
  <li><a class="active" href="index.php">Inicio</a></li>
  <li><a href="">Hola</a></li>
  <li><a href="">Hola</a></li>
  <li><a href="">Hola</a></li>
</ul>

<div class="flex-container" id="contenido">	
	<div style="flex-grow: 7">	
		<p style="background-color: white">Texto</p>
	</div>	
	
	<div style="flex-grow: 3"> 
		<p style="background-color: white">Imagen</p>
	</div>
</div>
<div class="flex-container" id="contenido2">	
	<div style="flex-grow: 8">	
		<p style="background-color: white">Más texto</p>
	</div>	
	
	<div style="flex-grow: 2"> 
		<p style="background-color: white">Otra imagen</p>
	</div>
</div>

</body>
</html>

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.