Sobre Grid y posicionamiento
Publicado por Sergio (5 intervenciones) el 31/12/2019 17:03:35
En primer lugar, he creado un div en el cual he creado un grid, básicamente para posicionar los elementos principales de mi página web, tales como el header, section, nav, etc. Dentro del header, he vuelto a crear otro grid, el cual lo he dividido en tres recuadros; a la izquierda el logo o nombre de la página, en medio el buscador y a la derecha el área de registro(lo he puesto de color rojo, amarillo y azul. Cuando intento posicionar el logo (rojo) con margin a la izquierda, se me mueven los 3 recuadros que componen el header y he tenido que utilizar text-align para situarlo a la izquierda, pero no quiero que quede totalmente pegado. Me gustaría saber como podría situar mi logo o texto a un punto exacto sin tener que recurrir a position-absolute o relative.
Lo mismo me ocurre en donde pone Proximos lanzamientos, ya que quiero bajar un poco ese texto, pero no se si poner sobre él una celda vacía o hay otra manera, ya que me parece un poco chapucero.
Un saludo y gracias.
HTML
CSS
Lo mismo me ocurre en donde pone Proximos lanzamientos, ya que quiero bajar un poco ese texto, pero no se si poner sobre él una celda vacía o hay otra manera, ya que me parece un poco chapucero.
Un saludo y gracias.
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
<!DOCTYPE html>
<head>
<title>Dgreed</title>
<link rel="stylesheet" href="css/estilo.css">
<link href="https://fonts.googleapis.com/css?family=Barlow+Semi+Condensed&display=swap" rel="stylesheet">
</head>
<body>
<div id="contenedor">
<header>
<div id="c_cabecera">
<div id="logo">Degreed</div>
<div id="buscador">2</div>
<div id="area_usuario">
<ul>
<li>Iniciar sesión</li>
<li> / </li>
<li>Registrarse</li>
</ul>
</div>
</div>
</header>
<nav></nav>
<section></section>
<aside>
<div id="barrera_lateral">Próximos lanzamientos</div>
<div id="Juegos">
</div>
</aside>
<footer></footer>
</div>
</body>
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
*{
margin: 0; padding: 0;}body{background-color: rgb(220,220,220);
}#contenedor{ display: grid; height: 970px;grid-template-columns: repeat(6,6fr);
grid-template-rows: 60px 30px 810px 70px;
text-align: center;
}header{background-color: black;
grid-column-start: 1;
grid-column-end: 7;
}#c_cabecera{background-color: black;
display: grid;height: 100%;
grid-template-columns: repeat(6,6fr);
grid-template-rows: 70% 30%;
}#logo{background-color: red;
grid-column-start: 2;
grid-column-end: 3;
grid-row-start: 1;
grid-row-end: 3;
font-family: barlow semi condensed;
font-size: 40px;
text-align: 90px;
color: white;text-align: left;
}#buscador{background-color: yellow;
grid-column-start: 3;
grid-column-end: 5;
grid-row-start: 1;
grid-row-end: 3;
}#area_usuario{background-color: blue;
grid-column-start: 5;
grid-column-end: 6;
grid-row-start: 2;
grid-row-end: 3;
font-size: 14px;
color: white;}#area_usuario ul{text-align: right;
}#area_usuario li{list-style-type: none;
display: inline-block;
}#area_usuario li: hover{ color: yellow;}nav{background-color: rgb(50,50,50);
grid-column-start: 1;
grid-column-end: 7;
}section{background-color: rgb(132,62,62);
grid-column-start: 2;
grid-column-end: 5;
}aside{background-color: rgb(132, 50 ,50);
grid-column-start: 5;
grid-column-end: 6;
}#barrera_lateral{ display: grid;grid-template-rows: 10% 10%;
font-size: 20px;
}footer{background-color: brown;
grid-column-start: 1;
grid-column-end: 7;
}Valora esta pregunta
0
