Hola, estoy haciendo una pagina web y tengo problemas con las imagenes.
Miren estoy usando este codigo CSS para ENCABEZADO, CUERPO y PIE DE PAGINA:
* {
margin: 0;
padding: 0;
}
html, body {
height: 100%;
}
body {
background: #155fb3;
font: 11px Verdana, sans-serif;
}
#container-page {
color: black;
border: 1px solid #ffe;
margin: 0 auto;
width: 975px;
background: white;
position: relative;
min-height: 100%; /* For Modern Browsers */
height: auto !important; /* For Modern Browsers */
height: 100%; /* For IE */
}
#container-head {
background: #074c9a;
}
#head {
padding: 0;
}
#container-content {
padding: 0 2em 45px 2em;
}
#container-content:after {
clear: both;
display: block;
font: 1px/0px serif;
content: ".";
height: 0;
visibility: hidden;
}
#content-pri {
/*width: 50%;*/
/*height: 100%;*/
/*float: right;*/
}
/*#content-sec {
padding: 1em 0;
width: 20%;
float: left;
}*/
#container-foot {
width: 100%;
border-top: 3.5px solid #074c9b;
background: #074c9a;
position: absolute;
bottom: 0 !important;
bottom: -1px; /* For Certain IE widths */
height: 55px;
}
#foot {
padding: 0 1em;
}
p#footp {
font-size: 120%;
margin: 10px; line-height: 0px
}
p {
text-align: justify;
font-size: 115%;
margin: 0.5em 0 1.5em;
line-height: 1.5em;
}
a {
color: white;
font-weight: bold;
text-decoration: underline;
}
a:hover {
font-size:115%;
text-decoration: underline overline;
}
a:visited {
color: #ff0;;
}
ul#navlist
{
font-size: 105%;
text-align: center;
padding-top: 15px;
padding-bottom: 20px;
}
#navlist li {
display: inline;
list-style-type: none;
}
#navlist a:link, #navlist a:visited {
padding: 6px 6px;
background-color: #074c9a;
}
Aqui esta el HTML:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<link rel="stylesheet" type="text/css" href="seccion.css" >
<meta content="text/html; charset=ISO-8859-1" http-equiv="content-type">
<title>PAGINA</title>
</head>
<body>
<div id="container-page">
<div id="container-head">
<div id="head">
<img style=" height:115px; width:973px; border: 1px solid #fff;"src="" alt="" >
</div>
</div>
<div id="container-content">
<div id="content-pri">
<div id="menu1">
<ul id="navlist">
<li id="active"><a href="">aa</a></li>
<li><a href="">bb</a></li>
<li><a href="">cc</a></li>
<li><a href="">dd</a></li>
<li><a href="f">ee</a></li>
<li><a href="">ff</a></li>
<li><a href="">gg</a></li>
</ul>
</div>
<div style="margin: 5px;">
<p>AQUI</p>
<p>QUIERO PONER</p>
<p>LAS IMAGENES</p>
</div>
</div>
</div>
<div id="container-foot">
<div id="foot">
<p id="footp"><a href="mailto:[email protected]">yo</a></p>
<div style="font-size: 80%; color: white; padding: 2px 1em;"></div>
</div>
</div>
</div>
</body>
</html>
lo que e tratado de hacer es colocar 2 imagenes de forma horizontal c/imagen un mensaje arriba y otro abajo como en los de esta pagina: "http://wwwghcc.msfc.nasa.gov/GOES/goes_es.html"
pero pues no me sale, si me puede echar una mano porfavor.
