CSS: Desbordamiento, Dos Columnas
Publicado por jmb0286 (3 intervenciones) el 27/10/2015 16:07:15
Consulta, estoy maquetando una página y quiero hacer dos columnas:
1) Tengo una sección que se llama multimedia compuesta de esta manera: y lo que quiero hacer son dos columnas ocupando todo el ancho que sería 960px (sin margen entre medio).
2) Luego tengo dos secciones más que se llaman Juegos y Ocio quiero hacer lo mismo pero que está si tenga un margien en el medio de 10px, en este caso el ancho sería de 470px.
3) Y la tercer duda seria sobre como evitar el desbordamiento cuando se hago control - (menos).
Aquí va el CSS:
Desde ya gracias. Y cuanto antes puedan respondes mejor.
1) Tengo una sección que se llama multimedia compuesta de esta manera: y lo que quiero hacer son dos columnas ocupando todo el ancho que sería 960px (sin margen entre medio).
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
<!-- Inicio: Sección: Multimedia --><h3 class="multimedia">Sección: Multimedia</h3>
<!-- Centrado Forzado --><center>
<section>
<div class="wrapper, left">
<img src="imgs/index/iconos/multimedia/audio.png" alt="Audio">
<a href="">AUDIO</a>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean molestie turpis orci.</p>
</div>
<div class="wrapper, left">
<img src="imgs/index/iconos/multimedia/diseno.png" alt="Diseño">
<a href="">DISEÑO</a>
<p>Proin sed lorem pretium, dignissim neque at, commodo orci. Nunc pretium consequat ligula sit amet.</p>
</div>
<div class="wrapper, left">
<img src="imgs/index/iconos/multimedia/dvd.png" alt="DVD">
<a href="">DVD</a>
<p>Nulla risus turpis, porta ut ultricies et, lacinia non velit. Ut ac sagittis metus, et cursus augue.</p>
</div>
<div class="wrapper, right">
<img src="imgs/index/iconos/multimedia/edicion.png" alt="Edición">
<a href="">EDICIÓN</a>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean olestie turpis orci.</p>
</div>
<div class="wrapper, right">
<img src="imgs/index/iconos/multimedia/imagen.png" alt="Imagen">
<a href="">IMAGEN</a>
<p>Proin sed lorem pretium, dignissim neque at, commodo orci. Nunc pretium consequat ligula sit amet.</p>
</div>
<div class="wrapper, right">
<img src="imgs/index/iconos/multimedia/video.png" alt="Videos">
<a href="">VIDEO</a>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean molestie turpis orci.</p>
</div>
</section>
</center>
<!-- Centrado Forzado --> <!-- Fin: Sección: Multimedia -->2) Luego tengo dos secciones más que se llaman Juegos y Ocio quiero hacer lo mismo pero que está si tenga un margien en el medio de 10px, en este caso el ancho sería de 470px.
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
<!-- Inicio: Sección: Juegos --><h3>Sección: Juegos</h3>
<!-- Centrado Forzado --><center>
<section title="Juegos">
<div class="wrapper">
<img src="imgs/index/iconos/ocio_juegos/clasicos.png" alt="Clásicos">
<a href="">EMULADORES Y ROMS</a>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean molestie turpis orci.</p>
</div>
<div class="wrapper">
<img src="imgs/index/iconos/ocio_juegos/steam.png" alt="Steam">
<a href="">STEAM</a>
<p>Proin sed lorem pretium, dignissim neque at, commodo orci. Nunc pretium consequat ligula sit amet.</p>
</div>
<div class="wrapper">
<img src="imgs/index/iconos/ocio_juegos/otros.png" alt="Otros">
<a href="">OTROS</a>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean molestie turpis orci.</p>
</div>
</section>
</center>
<!-- Centrado Forzado --> <!-- Fin: Sección: Juegos --> <!-- Inicio: Sección: Ocio --><h3>Sección: Ocio</h3>
<!-- Centrado Forzado --><center>
<section title="Sección Ocio">
<div class="wrapper">
<img src="imgs/index/iconos/ocio_juegos/cuevanastorm.jpg" alt="Cuevana Storm">
<a href="">CUEVANA APP</a>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean molestie turpis orci.</p>
</div>
<div class="wrapper">
<img src="imgs/index/iconos/ocio_juegos/free-studio.png" alt="Free Studio">
<a href="">FREE STUDIO</a>
<p>Proin sed lorem pretium, dignissim neque at, commodo orci. Nunc pretium consequat ligula sit amet.</p>
</div>
<div class="wrapper">
<img src="">
<a href="">SAMSUNG ALL SHARE</a>
<p>Nulla risus turpis, porta ut ultricies et, lacinia non velit. Ut ac sagittis metus, et cursus augue.</p>
</div>
</section>
</center>
<!-- Centrado Forzado --> <!-- Fin: Sección: Ocio -->3) Y la tercer duda seria sobre como evitar el desbordamiento cuando se hago control - (menos).
Aquí va el 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
*{
margin: 0px; padding: 0px; }body{font-family: "Calibri";
}header, h3, nav, section, footer{
border: 1px solid #3E607F;
width: 960px; }header{background-image: ;
height: 200px; margin: 10px auto; }nav{ border: none; height: 30px; margin: 0px auto 10px auto; }h3{background-color: #F5F5F5;
color: #3E607F;
display: block;font-family: 'Exo 2', sans-serif;
margin: 0px auto; padding: 5px 0px; }.mitad{
float: left; margin: 0px auto 10px auto; width: 470px; }.windows{
background-color: #B6DEDC;
}.internet{
background-color: #E1E2E3;
}.multimedia{
background-color: #9BCE7D;
}section{border-right: none;
border-bottom: none;
display: inline-block;
margin: 10px auto; }.left, .right{
border-right: 1px solid #3E607F;
border-bottom: 1px solid #3E607F;
float: left; width: 479px; }.right{
float: right; }.wrapper{
border-right: 1px solid #3E607F;
border-bottom: 1px solid #3E607F;
float: left; padding: 10px; width: 299px; }.wrapper img{
float: left; width: 64px; }.wrapper a{
color: #000;
float: left;font-weight: bold;
margin-left: 10px;
text-decoration: none;
}.wrapper p{
float: left;font-family: "Arial";
font-size: 13px;
margin: 5px 10px;margin-right: 0px;
text-align: justify;
width: 215px; }footer{ margin: 10px auto;margin-top: 0px;
}Desde ya gracias. Y cuanto antes puedan respondes mejor.
- Obligatorio.rar(2,2 KB)
Valora esta pregunta
0
