Desesperación es la palabra
, porque encima voy a contrarreloj.
Código:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "DTD/xhtml1-transitional.dtd">
<html>
<head>
<title></title>
<link href="estilo.css" rel="stylesheet" media="screen" type="text/css" />
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<meta name="MSSmartTagsPreventParsing" content="true" />
<meta name="generator" content=""/>
<link rel="shortcut icon" type="image/ico" href="favicon.ico" />
<meta name="author" content="" />
<meta name="robots" content="all" />
<meta name="description" content="" />
<meta name="keywords" content="" />
</head>
<body id="body">
<div id="outerblock">
<div id="innerblock">
<div id="contentheader">
<div id="topheader"><img src="logo.gif" alt="" /></div>
<div id="bottomheader">
<p class="firma">Fecha | Última actualización | Similar</p>
</div>
</div>
<div id="contentleft">
<div id="titlesection"><p class="seccionlateral">SECCIÓN 1</p></div>
<div id="leftinside">
<p class="apartado">::Apartado 1::</p>
<p class="enlacesmenu">
<a href="http://">Enlace 1</a> <br />
<a href="http://">Enlace 2</a> <br />
<a href="http://">Enlace 3</a> <br />
</p>
<p class="apartado">::Apartado 2::</p>
<p class="enlacesmenu">
<a href="http://">Enlace 1</a> <br />
</p>
</div>
<div id="titlesection"><p class="seccionlateral">SECCIÓN 2</p></div>
<div id="leftinside">
<p class="apartado">::Apartado 1::</p>
<p class="enlacesmenu">
<a href="http://">Enlace 1</a> <br />
<a href="http://">Enlace 2</a> <br />
<a href="http://">Enlace 3</a> <br />
<a href="http://">Enlace 4</a> <br />
<a href="http://">Enlace 5</a> <br />
<a href="http://">Enlace 6</a> <br />
</p>
<p class="apartado">::Apartado 2::</p>
<p class="enlacesmenu">
<a href="http://">Enlace 1</a> <br />
<a href="http://">Enlace 2</a> <br />
<a href="http://">Enlace 3</a> <br />
</p>
<p class="apartado">::Apartado 3::</p>
<p class="enlacesmenu">
<a href="http://">Enlace 1</a> <br />
<a href="http://">Enlace 2</a> <br />
<a href="http://">Enlace 3</a> <br />
<a href="http://">Enlace 4</a> <br />
<a href="http://">Enlace 5</a> <br />
<a href="http://">Enlace 6</a> <br />
<a href="http://">Enlace 7</a> <br />
<a href="http://">Enlace 8</a> <br />
</p>
</div>
</div>
<!-- main -->
<div id="google">
<!-- Búsqueda Google -->
<center>
<FORM method=GET action="http://www.google.com/search">
<TABLE bgcolor="#FFFFFF"><tr><td>
<A HREF="http://www.google.com/" target="_blank">
<IMG SRC="lgf.gif" border="0" ALT="Google" align="absmiddle"></A>
<INPUT TYPE=text name=q size=31 maxlength=255 value=""
STYLE="font-size: 13px; font-family: arial, verdana, sans-serif; color:#0148B2; border:1px solid #0148B2; border-style: solid; border-top-color:
#0148B2; border-left-color: #0148B2; border-bottom-color: #0148B2; border-right-color: #0148B2; background-image: url(fnd.gif);">
<INPUT TYPE=hidden name=hl value=es>
<INPUT type=submit name=btnG VALUE="Búsqueda Google"
STYLE="font-size: 12px; font-family: arial, verdana, sans-serif; color:#0148B2; background:#FFFFFF; border:1px solid #0148B2; border-style:
solid; border-top-color: #0148B2; border-left-color: #0148B2; border-bottom-color: #0148B2; border-right-color: #0148B2;">
</td></tr></TABLE>
</FORM>
</center>
<!-- Búsqueda Google -->
</div>
<div id="contentmain">
<h1>Bienvenidos a ...</h1><br />
<p>Esto es una prueba.</p>
<p>Esto es otra prueba.</p><br />
<h1>Más pruebas</h1><br />
<p>Esto también forma parte de la prueba.</p>
<p>La prueba se está terminanado.</p>
<p>Fin de la prueba.</p><br /><br />
<p class="firma">Todo tiene solución</p><br />
</div>
</div>
<br clear="all"/>
<div id="contentfooter">
<p>Éste es el pie de página, aquí podemos colocar lo que queramos como, por ejemplo, la resolución recomendada.</p>
</div>
</div>
</body>
</html>
Código:
#body {
background-color: #FFFFFF;
background-image:url('fnd.gif');
font-family: arial, verdana, sans-serif;
scrollbar-face-color: #A28D68;
scrollbar-shadow-color: #000000;
scrollbar-highlight-color: #000000;
scrollbar-3dlight-color: #000000;
scrollbar-darkshadow-color: #000000;
scrollbar-track-color: #A28D68;
scrollbar-arrow-color: #000000;
}
#contentheader {
background:#0148B2;
margin-bottom:10px;
}
#topheader {
margin-bottom:0px;
}
#bottomheader {
background-color: #FFFFFF;
height:0%;
margin-bottom:0px;
border:1px solid #0148B2;
}
#outerblock {
background-image:url('fnd.gif');
background-color: #FFFFFF;
width:98%;
margin-right:auto;
margin-left:auto;
border:0px solid #000000;
margin-top:0px;
margin-bottom:0px;
}
#innerblock {
background-image:url('fnd.gif');
background-color:#FFFFFF;
width:100%;
margin-right:auto;
margin-left:auto;
margin-top:0px;
margin-bottom:0px;
}
/*contentleft contiene a titlesection y a leftinside*/
#contentleft {
background:#0148B2;
width:15%;
float:left;
}
#leftinside {
background:#C3D9FF;
width:100%;
padding:1px;
float:left;
margin-top:5px;
margin-bottom:0px;
border:1px solid #0148B2;
}
#google {
background:#FFFFFF;
width:82%;
padding:0px;
float:right;
margin-top:0px;
margin-bottom:10px;
border:1px solid #0148B2;
}
#contentmain {
background:#FFFFFF;
width:82%;
padding:0px;
float:right;
margin-top:0px;
margin-bottom:10px;
border:1px solid #0148B2;
}
#contentfooter {
background:#0148B2;
margin-bottom:10px;
text-align:absmiddle;
border:1px solid #0148B2;
}
#titlesection {
margin-top:0px;
margin-bottom:0px;
text-align:center;
font-weight: bold;
}
/*titulos principales*/
h1 {
color:#0148B2;
font-size:14pt;
font-weight:bold;
margin:10px 10px 10px 10px;
}
/*titulos secundarios*/
h2 {
color:#0148B2;
font-size:12pt;
font-weight:bold;
margin:10px 10px 10px 10px;
}
*.azuloscuro {color:#0148B2;}
*.azulclaro {color:#C3D9FF;}
p {
color:#0148B2;
font-size:8pt;
text-align:justify;
margin:10px 10px 10px 10px;
line-height:1.2;
}
*.enlacesmenu {
text-align:left;
color:#FFCC00;
line-height:2.2;
font-size:8pt;
}
*.apartado {
text-align:left;
color:#0148B2;
font-weight:bold;
font-size:10pt;
}
*.greeting {
text-align:right;
font-size:12pt;
color:#0148B2;
}
*.firma {
text-align:right;
color:azuloscuro;
font-size:8pt;
font-weight:bold;
line-height:0.6;
}
*.seccionlateral {
text-align:center;
color:#FFFFFF;
font-size:10pt;
font-weight:bold;
}
A:link {color: #0148B2; text-decoration: none; }
A:visited {color: #0148B2; text-decoration: none; }
A:active {color: #0148B2; text-decoration: none; }
A:hover {color: #C3D9FF; background-color: #0148B2;}
Posiblemente haya docenas de errores (algunas incongruencias estarán resueltas cuando la web esté conclusa), es mi primera experiencia seria con DIVs.
Muchas gracias a todos por vuestro tiempo y demás.
