CSS - Posicionamiento flex

 
Vista:
sin imagen de perfil

Posicionamiento flex

Publicado por Carlos (3 intervenciones) el 24/01/2022 12:31:34
Buenas.

Necesito ayuda con el posicionamiento flex, ya que no entiendo como va.

Me han pedido modificar este css para que se quede igual pero con el posicionamiento flex

Gracias por todo :)
Valora esta pregunta
Me gusta: Está pregunta es útil y esta claraNo me gusta: Está pregunta no esta clara o no es útil
0
Responder
Imágen de perfil de pablo

Posicionamiento flex

Publicado por pablo (37 intervenciones) el 24/01/2022 14:47:56
Hola Carlos puedes poner el codigo sin que sea archivo zip por favor
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar
sin imagen de perfil

Posicionamiento flex

Publicado por Carlos (3 intervenciones) el 24/01/2022 14:54:27
Solo me deja subirlo en zip, rar, 7z...

Te lo pongo en 7zip

Gracias!!
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar
Imágen de perfil de Kevin
Val: 22
Ha disminuido 1 puesto en CSS (en relación al último mes)
Gráfica de CSS

Posicionamiento flex

Publicado por Kevin (14 intervenciones) el 24/01/2022 16:43:01
Carlos, lo que te comentó Pablo es que copies y pegues el código acá, sin subir ningún tipo de archivo, ya que así se nos hace más fácil ayudarte :)
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
1
Comentar
sin imagen de perfil

Posicionamiento flex

Publicado por Carlos (3 intervenciones) el 24/01/2022 16:53:16
Ah vale, me pensaba que era otra cosa jaja.


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
		<title>Capas web</title>
			<link rel="stylesheet" type="text/css" href="./css/styles.css" id="css"/>
			<script src="./js/javascript.js" type="text/javascript"></script>
				<div id="borde">
</head>
 
<!-- Cabecera -->
 
<body>
	<div id="cuerpo">
		<div id="cabecera">
			<img src=./img/logo.png>
 
 
 
<!--Menu de navegación -->
<div id="nav">
	<ul>
		<li> Inicio </li>
		<li> Enseñanzas </li>
		<li> Organización </li>
		<li> Secretaría </li>
		<li> Orientación </li>
		<li> Padres-Alumnos </li>
		<li> Profesores </li>
		<li> Formación Profesional </li>
	</ul>
	</div>
</div>
 
<div id="contenedor">
	<div id="main">
		<div id="S1">
			<h1> EL MINISTERIO DE CULTURA PUBLICARÁ ACTIVIDADES DE LA BIBLIOTECA DEL CENTRO </h1>
			<p> Estamos de enhorabuena en el IES Ingeniero de la Cierva y, en concreto, en el equipo que nos encargamos de la gestión y organización de la biblioteca. Hemos participado en un proyecto sobre “PRÁCTICAS EDUCATIVAS DE FOMENTO LECTOR Y BIBLIOTECAS DE CENTRO” de toda España. Nos pidieron que explicáramos cuáles eran nuestras actividades de fomento de la lectura que preparábamos en la biblioteca para este nuevo curso 21-22 y les han gustado tanto que piensan incluir algunas de ellas en el informe final que se publicará en el Ministerio de Cultura. </p>
		</div>
 
		<div id="S2">
 
			<iframe width="560" height="315" src="https://www.youtube.com/embed/ptc4Awb0UpU" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen>
 
		</iframe>
 
		<div id="articulo1">
			<h1> Admisión modalidad modular </h1>
			<p> Publicada la Resolución de la Dirección General de Formación Profesional e Innovación, por la que se dictan instrucciones para el proceso de admisión y matriculación en la modalidad modular de oferta general de la Formación Profesional de grado medio y de grado superior en centros docentes sostenidos con fondos públicos de la Región de Murcia, para el curso académico 2021-2022. En la Ley Orgánica 3/2020, de 29 de diciembre, por la que se modifica la Ley Orgánica
			2/2006, de 3 de mayo, de Educación, en su artículo 42, apartado 7, se especifica que en el
			marco  de  lo  establecido  en  los  aspectos  básicos  del  currículo  de  cada  título  y  de  la
			organización  modular  de  los  ciclos  formativos  y  cursos  de  especialización  de  formación
			profesional,  las  Administraciones  educativas  promoverán  la  flexibilidad  y  la  especialización
			de su oferta formativa con el objetivo de promover la innovación y la empleabilidad.
 
			El  artículo  42  del  Real  Decreto  1147/2011,  de  29  de  julio,  por  el  que  se  establece  la
			ordenación general de la Formación Profesional del sistema educativo establece que con la
			finalidad  de  facilitar  la  formación  permanente,  la  integración  social  y  la  inclusión  de  las
			personas  adultas  con  especiales  dificultades  de  inserción  en  el  mercado  de  trabajo,  las
			Administraciones  educativas  podrán  ofertar,  excepcionalmente,  en  régimen  presencial  o  a
			distancia, módulos profesionales incluidos en títulos y asociados a unidades de competencia.
			</p>
 
		</div>
 
 
		<div id="S3">
 
			<iframe width="560" height="315" src="https://www.youtube.com/embed/kN1XP-Bef7w" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen>
 
		</iframe>
 
		<div id="articulo2">
			<h1> AYUDAS FCT SEGUNDO Y TERCER TRIMESTRE 2021-2022 </h1>
			<p> Extracto  de  la  Orden  por  la  que  se  convocan  ayudas  al
			alumnado  de  enseñanzas  de  formación  profesional  para  el
			desarrollo de ciclos en Modalidad Dual y para la movilidad por
			la realización de la FCT durante el segundo y tercer trimestre
			del curso 2020-2021.
			Primero. Beneficiarios.
			Alumnado de enseñanzas de Formación Profesional (programa formativo
			profesional, Formación Profesional Básica, Formación Profesional de Grado Medio
			o de Grado Superior) en centros docentes sostenidos con fondos públicos de la
 
			 que se encuentren en una de las siguientes situaciones:
			Modalidad A: Realizar el módulo profesional de FCT durante el segundo y
			tercer trimestre del curso académico 2020-2021 en una empresa ubicada en una
 
			localidad distinta a la de la residencia o vivienda habitual del alumno y superar el
			referido módulo profesional.
			Modalidad B: Cursar un ciclo formativo en la modalidad dual, en su segundo
			curso, durante el segundo y tercer trimestre del curso académico 2020-2021 y
			haber superado dicho curso en la modalidad dual.
			Segundo. Objeto.
			La  presente  Orden  tiene  por  objeto  convocar,  para  el  segundo  y  tercer
			trimestre del curso académico 2020-2021, ayudas económicas individualizadas,
			destinadas al alumnado de enseñanzas de Formación Profesional en centros docentes.El plazo de presentación de solicitudes será de 10 días hábiles contados a
			partir del día siguiente al de la publicación de esta convocatoria en el Boletín
 
			</p>
		</div>
	</div>
 
	<!-- Pie de página -->
 
	<div id="piedepagina">
		<div id="S4">
			<h3> Enlaces anexos al IES </h3>
			<p> MOODLE. Plataforma de Aprendizaje Virtual.
				Programa de control de la FCT
			</p>
</div>
 
		<div id="S5">
			<h3> Organismos oficiales </h3>
			<p>
				Consejería de Educación, Formación y Empleo
				<br>
				 Ministerio de Educación, Cultura y Deporte
				 <br>
				 -
				 <br>
				-
				 <br>
				</p>
</div>
 
 
		<div id="S6">
			<h3> Enlaces de interés </h3>
		<p>
    		BOE
    		<br>
    		-
    		<br>
    		-
    		<br>
		</p>
 
 
		</div>
</div>
 
 
 
</body>
</html>

Y CSS

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
#borde {
 
	padding: 5px 10px;
}
 
#cabecera {
	border: 1px solid;
	padding: 5px 10px;
}
 
 
#cuerpo {
 
	padding: 5px 10px;
	display: flex;
	flex-direction: column;
}
 
#titulo{
	display: flex;
	flex-direction: column;
}
 
#nav {
	border: 1px solid;
	padding: 5px 10px;
 
}
 
 
li { display: inline;
	 color: black;
	 text-align: center;
	 padding: 50px 50px;
	 text-decoration:none ;
}
 
#contenido {
	border: 1px solid;
	padding: 5px 10px;
}
 
#main {
	padding: 5px 10px;
}
 
#S1 {
	border: 1px solid;
	padding: 5px 10px;
}
 
#S2 {
	border: 1px solid;
	padding: 5px 10px;
}
 
#articulo1 {
 
	padding: 5px 10px;
  	width: 65%;
  	float: right;
}
 
#S3 {
	border: 1px solid;
	padding: 5px 10px;
}
 
#articulo2 {
 
	padding: 5px 10px;
  	width: 65%;
  	float: left;
}
 
#piedepagina {
	padding: 5px 10px;
}
 
#S4 {
 
	padding: 5px 10px;
  	width: 20%;
  	bottom: 170px;
}
 
#S5 {
 
	padding: 5px 10px;
  	width: 20%;
  	text-align: center;
  	position: relative;
  	left: 40%;
  	bottom: 120px;
 
 
}
 
#S6 {
 
	padding: 5px 10px;
	width: 15%;
	text-align: center;
  	position: relative;
  	left: 84%;
  	bottom: 270px;
}
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar
Imágen de perfil de pablo

Posicionamiento flex

Publicado por pablo (37 intervenciones) el 24/01/2022 18:13:36
Hola Carlos aquí el código que creo que necesitas si te preguntas por que en el footer utilice grid es por que es más fácil darle las celdas con grid y queda un footer mejor, otra cosa y que esto te sirva de consejo para futuras páginas o prácticas que decidas hacer primero no tienes por que usar div para todo fijate que hasta te faltaban algunos div por cerrar mi recomendación es que veas la estructura de una pagina web ya html5 por defecto trae etiquetas muy utiles como footer, header etc tienes div como cuerpo dónde no es necesario tenerlo pero bueno, en el nav aplicas un padding muy exagerado que hará que la barra de navegación se salga y así, son detalle pero es importante corregirlos. Aquí te dejo una imagen que ayuda mucho
estructura-de-una-pagina-en-HTML5

Ahora bien lo importante y lo que necesitas
HTML:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
<!DOCTYPE html>
<html>
 
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Capas web</title>
  <link rel="stylesheet" type="text/css" href="./css/styles.css" id="css" />
  <script src="./js/javascript.js" type="text/javascript"></script>
  <div id="borde">
</head>
 
<!-- Cabecera -->
 
<body>
  <div id="cuerpo">
    <div id="cabecera">
      <img src=./img/logo.png>
 
      <!--Menu de navegación -->
      <div id="nav">
        <ul>
          <li> Inicio </li>
          <li> Enseñanzas </li>
          <li> Organización </li>
          <li> Secretaría </li>
          <li> Orientación </li>
          <li> Padres-Alumnos </li>
          <li> Profesores </li>
          <li> Formación Profesional </li>
        </ul>
      </div>
    </div>
 
    <div id="contenedor">
      <div id="main">
        <div id="S1">
          <h1> EL MINISTERIO DE CULTURA PUBLICARÁ ACTIVIDADES DE LA BIBLIOTECA DEL CENTRO </h1>
          <p> Estamos de enhorabuena en el IES Ingeniero de la Cierva y, en concreto, en el equipo que nos encargamos de la gestión y organización de la biblioteca. Hemos participado en un proyecto sobre “PRÁCTICAS EDUCATIVAS DE FOMENTO LECTOR Y BIBLIOTECAS DE CENTRO” de toda España. Nos pidieron que explicáramos cuáles eran nuestras actividades de fomento de la lectura que preparábamos en la biblioteca para este nuevo curso 21-22 y les han gustado tanto que piensan incluir algunas de ellas en el informe final que se publicará en el Ministerio de Cultura. </p>
        </div>
 
        <div id="S2">
 
          <iframe width="560" height="315" src="https://www.youtube.com/embed/ptc4Awb0UpU" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen>
 
          </iframe>
 
          <div id="articulo1">
            <h1> Admisión modalidad modular </h1>
            <p> Publicada la Resolución de la Dirección General de Formación Profesional e Innovación, por la que se dictan instrucciones para el proceso de admisión y matriculación en la modalidad modular de oferta general de la Formación Profesional de grado medio y de grado superior en centros docentes sostenidos con fondos públicos de la Región de Murcia, para el curso académico 2021-2022. En la Ley Orgánica 3/2020, de 29 de diciembre, por la que se modifica la Ley Orgánica
              2/2006, de 3 de mayo, de Educación, en su artículo 42, apartado 7, se especifica que en el
              marco de lo establecido en los aspectos básicos del currículo de cada título y de la
              organización modular de los ciclos formativos y cursos de especialización de formación
              profesional, las Administraciones educativas promoverán la flexibilidad y la especialización
              de su oferta formativa con el objetivo de promover la innovación y la empleabilidad.
 
              El artículo 42 del Real Decreto 1147/2011, de 29 de julio, por el que se establece la
              ordenación general de la Formación Profesional del sistema educativo establece que con la
              finalidad de facilitar la formación permanente, la integración social y la inclusión de las
              personas adultas con especiales dificultades de inserción en el mercado de trabajo, las
              Administraciones educativas podrán ofertar, excepcionalmente, en régimen presencial o a
              distancia, módulos profesionales incluidos en títulos y asociados a unidades de competencia.
            </p>
 
          </div>
        </div>
 
        <div id="S3">
 
          <iframe width="560" height="315" src="https://www.youtube.com/embed/kN1XP-Bef7w" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen>
 
          </iframe>
 
          <div id="articulo2">
            <h1> AYUDAS FCT SEGUNDO Y TERCER TRIMESTRE 2021-2022 </h1>
            <p> Extracto de la Orden por la que se convocan ayudas al
              alumnado de enseñanzas de formación profesional para el
              desarrollo de ciclos en Modalidad Dual y para la movilidad por
              la realización de la FCT durante el segundo y tercer trimestre
              del curso 2020-2021.
              Primero. Beneficiarios.
              Alumnado de enseñanzas de Formación Profesional (programa formativo
              profesional, Formación Profesional Básica, Formación Profesional de Grado Medio
              o de Grado Superior) en centros docentes sostenidos con fondos públicos de la
 
              que se encuentren en una de las siguientes situaciones:
              Modalidad A: Realizar el módulo profesional de FCT durante el segundo y
              tercer trimestre del curso académico 2020-2021 en una empresa ubicada en una
 
              localidad distinta a la de la residencia o vivienda habitual del alumno y superar el
              referido módulo profesional.
              Modalidad B: Cursar un ciclo formativo en la modalidad dual, en su segundo
              curso, durante el segundo y tercer trimestre del curso académico 2020-2021 y
              haber superado dicho curso en la modalidad dual.
              Segundo. Objeto.
              La presente Orden tiene por objeto convocar, para el segundo y tercer
              trimestre del curso académico 2020-2021, ayudas económicas individualizadas,
              destinadas al alumnado de enseñanzas de Formación Profesional en centros docentes.El plazo de presentación de solicitudes será de 10 días hábiles contados a
              partir del día siguiente al de la publicación de esta convocatoria en el Boletín
 
            </p>
          </div>
        </div>
 
      </div>
    </div>
       <!-- Pie de página -->
 
	<div id="piedepagina">
		<div id="S4">
			<h3> Enlaces anexos al IES </h3>
			<p> MOODLE. Plataforma de Aprendizaje Virtual.
				Programa de control de la FCT
			</p>
</div>
 
		<div id="S5">
			<h3> Organismos oficiales </h3>
			<p>
				Consejería de Educación, Formación y Empleo
				<br>
				 Ministerio de Educación, Cultura y Deporte
				 <br>
				 -
				 <br>
				-
				 <br>
				</p>
</div>
 
 
		<div id="S6">
			<h3> Enlaces de interés </h3>
		<p>
    		BOE
    		<br>
    		-
    		<br>
    		-
    		<br>
		</p>
 
 
		</div>
  </div>
 
</body>
 
</html>

CSS

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
#borde {
 
	padding: 5px 10px;
}
 
 
#cabecera {
	border: 1px solid;
	padding: 5px 10px;
}
 
 
#cuerpo {
 
	padding: 5px 10px;
	display: flex;
	flex-direction: column;
}
 
#titulo{
	display: flex;
	flex-direction: column;
}
 
#nav {
	border: 1px solid;
	padding: 5px 10px;
 
}
ul{
  display:flex;
}
li {
	 color: black;
	 text-align: center;
	 padding:3px;
   margin-left:2px;
	 text-decoration:none ;
  list-style: none;
}
 
#contenido {
	border: 1px solid;
	padding: 5px 10px;
}
 
#main {
	padding: 5px 10px;
}
 
#S1 {
	border: 1px solid;
	padding: 5px 10px;
 
}
 
#S2 {
	border: 1px solid;
	padding: 5px 10px;
  display:flex;
}
 
#articulo1 {
 
	padding: 5px 10px;
  	width: 65%;
  	float: right;
}
 
#S3 {
	border: 1px solid;
	padding: 5px 10px;
  display:flex;
  flex-direction: row-reverse;
}
 
#articulo2 {
 
	padding: 5px 10px;
  	width: 65%;
  	float: left;
}
 
#piedepagina {
	display:grid;
   grid-template-columns: repeat(3, 2fr);
}
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar