Iniciar sesiónCerrar
Correo:
Contraseña:
Entrar
Recordar sesión en este navegador
Iniciar sesiónIniciar sesiónCrear cuentaCrear cuenta
LWP » Foros » CSS » layout dos columnas para textos y fotos

CSS - layout dos columnas para textos y fotos

Volver
Nuevo Tema
<<>>
 
Vista:
sin imagen de perfil

layout dos columnas para textos y fotos

Publicado por oscar (1 intervención) el 24/02/2016 14:50:51
Hola foro

espero me puedan ayudar , tengo que hacer un maquetado de un texto en resposive desing para una practica de un curso a distancia para el viernes 26/2/16 y voy mal porque no me sale y les pido ayuda

en resumidas cuentas es un layout similar a esto :

oooCABECERAoooooooooooooooooooooooooo

oH1oooooooooooooxxxxxxxxxxxxxxxxxxxxxxxxxH2xx

ooTITULO ESPoooooooooooooooooooooooooo
ooTITULO ENGoooooooooooooooooooooooooo

aaPARRAF aaaaaaaaaaa cccPARRAFccccccccc
aaaaaaaaaaaaaaaaaaaa cccccccccccccccccccc
bbPARRAFbbbbbbbbbbb dddPARRAFdddddddd
bbbbbbbbbbbbbbbbbbbb ddddddddddddddddd
bbbbbbbbbbbbbbbbbbbb ------foto-------------------

oooTITULO ENGooooooooooooooooooooooooo

------foto------------------------ ccPARRAFCccccccccc
----------------------------------- cccccccccccccccccccc
bbbPARRAFbbbbbbbbbb cccccccccccccccccccc
bbbbbbbbbbbbbbbbbbbb cccccccccccccccccccc
bbbbbbbbbbbbbbbbbbbb cccccccccccccccccccc

oH2oooooooooooooxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx

aaPARRAF aaaaaaaaaaa cccPARRAFccccccccc

ooTITULO ESPoooooooooooooooooooooooooo
ooTITULO ENGoooooooooooooooooooooooooo

aaPARRAF aaaaaaaaaaa cccPARRAFccccccccc
aaaaaaaaaaaaaaaaaaaa cccccccccccccccccccc
bbPARRAFbbbbbbbbbbb dddPARRAFdddddddd
bbbbbbbbbbbbbbbbbbbb ddddddddddddddddd
bbbbbbbbbbbbbbbbbbbb ------foto-------------------

bbbPARRAFbbbbbbbbbb cccPARRAFccccccccc
bbbbbbbbbbbbbbbbbbbb cccccccccccccccccccc
bbbbbbbbbbbbbbbbbbbb cccccccccccccccccccc

--foto- ----------------------------footer----------------------

todo ello con justificado y varias cosas mas que si salen , lo mas complicado es el layout para que todo salga en su posicion

llevo esto hasta el primer bloque pues entiendo que una vez terminado ese los otros son copia pega con poca variacion

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
<!DOCTYPE html>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<html>
	<head>
		<title></title>
		<link rel="stylesheet" type="text/css" href="/aceprensa/css.css" media="screen" />
	</head>
<body>
	<header>
		<h1>cabecera</h1>
		<h2>h1</h2>
		<h3>h2</h3>
	</header>
 
<section>
 
	<h4>titulo esp</h4>
	<h5>titulo eng</h5>
 
	<p class="reparto">xxxx</p>
 
	<p class="p1"></p>
	<p class="p11"></p>
	<p class="p111"></p>
 
	<p class="p2"></p>
	<p class="p22"></p>
 
	<p class="p222" ><img src="........png""/></p>


</body>

</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
* { /* generico */
	margin: 0; font-family: arial;
} /* first leter e indentado de parrafos*/
p.p1:first-letter{font-size: 1.5em;}p.p11{text-indent: 2em;}p.p111{text-indent: 2em;}
p.p22{text-indent: 2em;}p.p222{text-indent: 2em;}
p.p3:first-letter{font-size: 1.5em;}p.p33{text-indent: 2em;}p.p333{text-indent: 2em;}
p.p4:first-letter{font-size: 1.5em;}p.p44{text-indent: 2em;}p.p444{text-indent: 2em;}
 
h1 {/* titular  fondo amarillo */
	margin: -20px auto -8px;color: white;height: 92px;font-size: 80px;text-align: right;background-color: #feb643;

}
h2 { /* titular  amarillo izquierda */
	display: inline-block;padding: 0.3em 73% 0.3em 0.3em;font-weight: bold;color:#feb643;font-size: 20pt

}
h3 { /* titular negro derecha */
	display: inline-block;font-weight: bold;color:black;font-size: 15pt
}
h4 { /* titular pelicula español amarillo grueso izquierda */
	margin : 0em 0em 0em 0.3em ;font-weight: bold;color:#feb643;font-size: 14pt

}
h5 { /* titular pelicula ingles negro grueso borde bottom izquierda */
	border-bottom: solid 3px;margin : 0em 0.3em 0.75em 0.3em ;font-weight: bold;font-size: 10pt
}
 
p.reparto { /* parrafos de texto reparto */
	margin : 0em 0em 0.3em 0.3em;
	font-weight: bold;
	text-align: justify;
	vertical-align: top;
	display: inline-block;
	width: 49%;
}
 
p.p1 { /* parrafo inicio de texto argumento letra capital bold*/
	margin : 0em 0em 0em 0.3em;
	text-indent: 2em;
	position: relative;
	text-align: justify;
	vertical-align: top;
	font-size: 18px;
	width: 49%;
}
 
p.p11, p.p111 { /* parrafos de texto argumento */
	margin : 0em 0em 0em 0.3em;
	text-align: justify;
	vertical-align: top;
	font-size: 18px;
	width: 49%;
}
 
p.p2 { /* parrafos de texto argumento */
	margin : 0em 0em 0.3em 0.3em;
	position: absolute;
	top: 163px;
	right: 0.3em;
	text-align: justify;
	font-size: 18px;
	width: 49%;
}
 
p.p22 { /* parrafos de texto argumento */
 
margin : 0em 0em 0.3em 0.3em;
position: absolute;
top: 206px;
right: 0.3em;
text-align: justify;
font-size: 18px;
width: 49%;
}
 
p.p222 { /* parrafos de texto argumento */
 
margin : 0em 0em 0.3em 0.3em;
position: absolute;
top: 379px;
right: 10px;
 
}

espero me puedan ayudar un poco

gracias
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
sin imagen de perfil

layout dos columnas para textos y fotos

Publicado por DAVID (29 intervenciones) el 16/04/2016 12:20:00
Quieres que quede maquetado en dos columnas? Creo yo, que seria algo así:
1
2
3
4
5
<div>
<h1>capa con dos columnas</h1>
<div style="float:left;widht:50%">aqui primera columna</div>
<div style="float:left;widht:50%">aqui segunda columna</div>
</div>

Un saludo,
David
estudio de diseño grafico
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