CSS - CSS: Desbordamiento, Dos Columnas

   
Vista:

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).
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.
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 xve

CSS: Desbordamiento, Dos Columnas

Publicado por xve (349 intervenciones) el 27/10/2015 19:36:07
Hola, la verdad es que en html5, desaparece el <center>...

Para tu primera pregunta, de crear dos columnas del 50% sin separación, te he preparado este código de ejemplo:
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
<!doctype html>
<html>
<head>
	<meta charset="utf-8">
	<style>
	body {width:996px;margin:auto;}
	.grid_2>div {width:50%;float:left;}
	</style>
</head>
 
<body>
<!-- Inicio: Sección: Multimedia -->
<h3 class="multimedia">Sección: Multimedia</h3>
<section class="grid_2">
	<div>
		<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>
	<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>
	</div>
</section>
<!-- Fin: Sección: Multimedia -->
</body>
</html>
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 xve

CSS: Desbordamiento, Dos Columnas

Publicado por xve (349 intervenciones) el 27/10/2015 19:39:30
Aqui te adjunto el segundo ejemplo, que es el mismo que el primero, pero añadiendo un estilo mas... haber que te parece...

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
<!doctype html>
<html>
<head>
	<meta charset="utf-8">
	<style>
	body {width:996px;margin:auto;}
	.grid_2>div {width:50%;float:left;box-sizing:border-box;}
	.grid_2>div:first-child {padding-right:5px;}
	.grid_2>div:first-child {padding-left:5px;}
	</style>
</head>
 
<body>
<!-- Inicio: Sección: Multimedia -->
<h3 class="multimedia">Sección: Multimedia</h3>
<section class="grid_2">
	<div>
		<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>
	<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>
	</div>
</section>
<!-- Fin: Sección: Multimedia -->
</body>
</html>

Coméntanos que te parece, y si tienes alguna duda...
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