HTML - duda código html-css

 
Vista:

duda código html-css

Publicado por jorge (1 intervención) el 25/11/2020 10:36:21
Buenas
tengo una duda con un código html muy secillo, pero que no me funciona bien. he creado una plantilla con css y la he intentado replicar sin usar css, pero no me funcionan igual. alguien sabe a que puede ser debido?

codigo con 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
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3c.org/TR/1999/REC-html401-19991224/loose.dtd"><head>
<meta http-equiv=Content-Type content="text/html; charset=utf-8">
<title></title>
<style type="text/css">
 
body, html { height:100%;
	margin:0;
	padding:0;
	width:100%;
	background-color:silver;
	}
 #c1{ border:1px solid black;
	width:19.5%;
	display:inline-block;
	height:69.5%;
	background-color:blue;
	}
#c2{ border:1px solid black;
	width:79.5%;
	height:69.5%;
	display:inline-block;
	background-color:green;
	}
#c3{ border:1px solid black;
	width:49.5%;
	height:19.5%;
	display:inline-block;
	background-color:yellow;
	}
#c4{ border:1px solid black;
	width:49.5%;
	height:19.5%;
	display:inline-block;
	background-color:red;
	}
#pie {  border:1px solid black;
	width:99%;
	height:10%;
	display:inline-block;
	background-color:blue;
	}
</style>
</head>
<body>
	<div style="color:#ff9; background-color:#000; padding:10px; width:100%; height: 10%; ">
	esto es la cabecera
	</div>
	<div id="c1">cuadrado 1</div>
	<div id="c2">cuadrado 2</div>
	<br>
	<div id="c3">cuadrado 3</div>
	<div id="c4">cuadrado 4</div>
	<div id="pie">pie</div>
</body>
</html>



codigo sin css:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3c.org/TR/1999/REC-html401-19991224/loose.dtd"><head>
<meta http-equiv=Content-Type content="text/html; charset=utf-8">
<title></title>
<style>
 </style>
</head>
<body style="height:100%; margin:0; padding:0; width:100%; background-color:silver;">
	<div style="color:#ff9; background-color:#000; padding:10px; width:100%; height: 10%; ">
	esto es la cabecera
	</div>
	<div style="border:1px solid black; width:19.5%; height:69.5; display:inline-block; background-color:blue;">cuadrado 1</div>
	<div style="border:1px solid black; width:79.5%; display:inline-block; height:69.5%; background-color:green;">cuadrado 2</div>
	<br>
	<div style="border:1px solid black; width:49.5%; height:19.5%; display:inline-block; background-color:yellow;">cuadrado 3</div>
	<div style="border:1px solid black; width:49.5%; height:19.5%; display:inline-block; background-color:red;">cuadrado 4</div>
	<div style="border:1px solid black; width:99%; height:10%; display:inline-block; background-color:blue;">pie</div>
</body>
</html>
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 joel
Val: 1.453
Oro
Ha mantenido su posición en HTML (en relación al último mes)
Gráfica de HTML

duda código html-css

Publicado por joel (460 intervenciones) el 29/11/2020 09:23:24
Te recomiendo siempre utilizar un archivo externo!!! el código queda mucho mas claro y se posiciona mejor!!
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