porthosmuoz escribió:Buenos días,
Estoy siguiendo el curso y estoy intentando hacer mis experimentos. En "mi página web" he creado una página principal siguiendo los pasos del curso CCTW y otras dos, una como respuesta a la pregunta de la página principal y otra donde inserto fotos mías y que se accede a ella a través del menú horizontal.
Pues bien, en esa página de mis fotos, me gustaría tener una zona central donde poner las fotos y/o slides o cualquier otra cosa, y otras dos zonas a cada lateral de unos 150px ó 180px.
Lo he intentado siguiendo pasos idénticos o similares a la creación del pié de página pero no me ha salido. ¿Alguien me puede indicar donde está mi error o alguna forma diferente de hacerlo? Agradecido de antemano.
A continuación les dejo mi HTML de la página de fotos y el código CSS:
HTML:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>MIS FOTOS</title>
<link rel="stylesheet" href="Estilo-Principal.css" type="text/css" media="all">
<link rel="stylesheet" href="estilo-menu-desplegable.css" type="text/css" media="all">
<script language="javascript" src="no-tocar.txt" type="text/javascript"></script>
<script language="javascript" src="numero-de-menus.txt" type="text/javascript"></script>
</head>
<body onload="init();">
<div id="global">
<div id="curva-superior"></div>
<div id="cabecera">
<div id="logotipo">
<a href="http://andy-soto.spaces.live.com/"target="_blank">
[contenido no disponible]
</a></div>
<div id="publicidad">Bienvenido a mi WEB</div>
</div>
<div id="navegacion">
<ul>
Sobre mi
Sección 2
Sección 3
Sección 4
</div>
<div id="contenido">
<div id="contenido izquierda">
<ul>
Enlace 1
Enlace 2
Enlace 3
</div>
<div id="contenido central">
<h1>Esta será la sección donde pondré mis fotos</h1>
<h3>............................</h3>
[contenido no disponible]
PAGINA PRINCIPAL
</div>
<div id="contenido derecha">
<ul>
Enlace 4
Enlace 5
Enlace 6
</div>
</div>
<div id="pie">
<div id="pieuno">
<ul>
Foro EjemploContactosNos Enlazan
</div>
<div id="piedos">
<div id="CCTW">
<a href="http://www.comocreartuweb.com/"target="_blank">
[contenido no disponible]
</a></div>
<div id="CCTWpubli">
Agradecimientos a Jorgens</p>
y a su Web en la que he</p>
aprendido a manejar HTML</p>
</div>
</div>
<div id="pietres">
<ul>
DirectorioTopSiteMapa de la Web
</div>
</div>
<div id="curva-inferior"></div>
</div>
<script language="javascript" src="definir-menus.txt" type="text/javascript"></script>
</body>
</html>
CODIGO CSS:
* {margin:0px; padding:0px; border:0px}
p {text-align:justify}
img {border-style: none}
h1 {font-size:1.2em; color:blue; font-weight:bold; text-decoration:underline; text-align:center}
h2 {font-size:1.1em; color:blue; font-weight:bold; text-decoration:none; text-align:left}
h3 {font-size:1em; color:blue; font-weight:bold; text-decoration:none; text-align:center}
body {background-color:cyan; text-align:center}
#global {width:800px; margin:4px auto}
#curva-superior {background-image: url(objetos/curva-superior.gif); background-repeat: no-repeat; width: 800px; height: 12px; overflow: hidden}
#cabecera {background-color:white; border-left: black 1px solid; border-right: black 1px solid; height: 100px}
#logotipo {background-color: white; width: 95px; float: left}
#publicidad {background-color: white; width: 703px; float: right; margin-top: 45px}
#navegacion {background-color:gray; border: black 1px solid; height: 20px}
#navegacion ul {margin-left: 180px}
#navegacion li {float: left; list-style: none; margin: 0px 20px 0px 20px}
#contenido {background-color:orange; border-left: black 1px solid; border-right: black 1px solid}
#contenido li {list-style:none; font-size: 12px}
#contenido izquierda {float: left; background-color: blue}
#contenido central {float: left; background-color:red}
#contenido derecha {float: rigth; background-color:yellow}
#contenido p {padding: 5px 10px 5px 10px; text-indent: 15px}
#menu {background-image: url(objetos/menu-parte-inferior.gif); background-position: bottom; padding-bottom: 5px; background-color:yellow; width:150px; float:left; text-align:left; margin:3px 10px 3px 3px}
#menu h1 {background-image: url(objetos/menu-parte-superior.gif); font-size:12px; color:blue; font-weight:bold; text-decoration:none; text-align:left}
#menu li {list-style:none; padding: 4px 8px 4px 6px}
#pie {background-color:white; border-left: black 1px solid; border-right: black 1px solid; border-top: black 1px solid; height: 80px}
#pie li {list-style: none; font-size: 12px}
#pieuno {background-color: white ; float:left; width: 150}
#piedos {background-color: white ; float:left; width: 498}
#pietres {background-color: white ; float:left; width: 150}
#CCTW {background-color: white; width: 250px; float:left; margin-left: 15px}
#CCTWpubli {background-color: white; width: 180px; float: left; margin-left: 15px; margin-top: 8}
#curva-inferior {background-image: url(objetos/curva-inferior.gif); background-repeat: no-repeat; width: 800px; height: 12px; overflow: hidden}
a {color:brown; text-decoration:none; display:block}
a:link {}
a:visited {}
a:hover {color:red; text-decoration:underline; background-color:none}
a:active {}
#pie a {color: blue; text-decoration:none ; display: block }
#pie a:link {}
#pie a:visited {}
#pie a:hover {color:black ; text-decoration:underline ; background-color: white }
#pie a:active {color:black}
#logotipo a {}
#logotipo a:link {}
#logotipo a:visited {}
#logotipo a:hover {background-color: white }
#logotipo a:active {}
#CCTW a {}
#CCTW a:link {}
#CCTW a:visited {}
#CCTW a:hover {background-color: white }
#CCTW a:active {}
Por cierto, he subido esta web en razyhosting y la dirección es:
http://andys-world.mywebcommunity.org/
Espero sus repuestas.
Un saludo.
Ya lo solucioné, vaya fallo más tonto ...
En la definición de estilos, el CSS, había definido el div "contenido izquierda" con un espacio en blanco, sólo tuve que separar las dos palabras con un guión sin espacio alguno y ya está, y especificando el ancho que le quería dar (igual para los otros dos divs del contenido).
Por si a alguien le puede ayudar.
Saludos.
