Imposible dar formato al pie

Hola!

Estoy practicando el curso de CCTW en una web creada por mi y no soy capaz de darle al Pie el formato que quiero:

- Alinear los tres pies uno al lado del otro. (El Pie3 me sale debajo, como fuera de la capa Pie)
- El mismo color de fondo a los 3 pies (la capa Pie2 me sale del color del Contenido, y el Pie3 del color del Body.
- Tamaño del texto de 0.7em (la capa Pie2 y Pie3 me sale con un tamaño superior)


Os adjunto tanto el HTML como el CSS correspondiente a esta capa, por si me podéis ayudar a detectar el fallo, que no lo consigo encontrar:

HTML:
<div id="pie">
<div id="pieuno">
<ul><li>Página creada gracias a <a href="http://www.comocreartuweb.com" target="_blank">CCTW</a></li><li>
Enlace 2</li><li>Enlace 3</li></ul>
</div>
<div="piedos">
<a href="mailto:[correo eliminado]" target="_blank">Contáctame</a></div>
<div="pietres">Copyright</div>
</div>


CSS:
#pie {background-color:#C2B999 ; height:85px ; width:800px}
#pie li {list-style:none}
#pieuno {background-color:#3A5D61 ; margin:10px 10px 10px 10px ; font-size:0.7em ; color:white ; float:left ; width:300px}
#piedos {background-color:#3A5D61 ; margin:10px 0px 10px 0px ; font-size:0.7em ; color:white ; float:right ; width:230px}
#pietres {background-color:#3A5D61 ; margin:10px 10px 10px 10px ; font-size:0.7em ; color:white ; float:right ; width:230px}
#pie a {color:white ; text-decoration:none ; display:block}
#pie a:link {}
#pie a:visited {}
#pie a:hover {background-color:#9A9278}
#pie a:active {}


Si creeis que el fallo puede estar en algún otra parte de HTML o CSS, por favor, hacédmelo saber porque este fallo me está volviendo loca...
Muchas gracias!

Hola, una forma puede ser darle margin izquierdo mayor al ancho del pie anterior. Esto quiere decir que tendrías que añadir a pieuno, piedos y pietres lo siguiente:

#pieuno {position: relative; left: tamaño en pixeles; background-color:#3A5D61 ; margin:10px 10px 10px 10px ; font-size:0.7em ; color:white ; float:left ; width:300px} /* En este caso no es necesario especificar left, porque es el primer pie */

#piedos {position: relative; left: tamaño pie_anterior + 10px; background-color:#3A5D61 ; margin:10px 10px 10px 10px ; font-size:0.7em ; color:white ; float:right ; width:230px} /* En este caso el tamaño del pie anterior es el width: 300px; y 10 px son solo una referencia, puesto que puede ser cualquier tamaño */

#pietres {position: relative; left: tamaño_pie_anterior + 10px;background-color:#3A5D61 ; margin:10px 10px 10px 10px ; font-size:0.7em ; color:white ; float:right ; width:230px} /* Esto debe ser igual al anterior */

Eso debería funcionar.

Saludos.

hola

yo no acostumbro pobner posisciones absolutas ni relativas
aqui el problema puede ser de anchos

mira, cuanto mide el pie de ancho y alto
y cuanto mide de ancho cada uno de sus contenidos, pie1, 2 y tres
tambien toma en cuenta el ancho de los bordes
cuando yo tengo un problema de esos, procuro irme muy abajo en las medidas, para irlas aumentando poco a poco

para ayudarte a ver
pega aqui
toooodo el html y tooodo el css

saludos

hola!
ya está solucionado. era un fallo tonto, que se me habia olvidado poner el atributo "id".

habia puesto: <div="piedos">
en lugar de: <div id="piedos">

Amigos un gusto saludarlo, yo tengo el problema de que mi pie de pagina con todo y curva se ve super bien en
internet explorer... pero al abrirla con mozilla o google chrome... desparece la imagen de la curva del pie de pagina.
me podrian ayudar como solucionar eso.
gracias.
les adjunto e codigo de la plantilla y de estilos general
<!-- INICIO CODIGO PIE DE PAGINA - NO TOCAR -->
<div id="pie">
<div id="pieuno">
<ul>
<li><a href="#">Foro Ejemplo</a></li><li><a href="#">Contactos</a></li><li><a href="#">Nos Enlazan</a></li>
</ul>
</div>
<div id="piedos">pie dos</div>
<div id="pietres">
<ul>
<li><a href="#">Directorio</a></li><li><a href="#">TopSite</a></li><li><a href="#">Mapa de la Web</a></li>
</ul>
</div>
</div>

<div id="curva-inferior"></div>
</div>
<!-- FIN CODIGO PIE DE PAGINA -->

de estilos general:
* {text-indent:0px; margin:0px; padding:0px; border:0px;}
p {text-align:justify;}
h1 {font-size:1.2em; color:#2E8B57; font-weight:bold; text-decoration:underline; text-align:center;}
h2 {font.size:1.1em; color:#2E8B57; font-weight:bold; text-decoration:none; text-align:center;}
body {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:85px;}
#logotipo {width:280px; float:left;}
#publicidad {width:518px; float:right;margin-top:25px;}
#navegacion {background-color:#00EE00;border: black 1px solid;height:20px;}
#navegacion li {float:left;list-style:none;margin:0px 20px 0px 20px;}
#navegacion ul { margin-left: 250px }
#contenido {background-color:#00FF7F; float:left;border-left:black 1px solid; border-right:black 1px solid;}}
#contenido p {padding:5px 10px 5px 10px; text-indent:15px;}
#menu {width:150px; float:left; text-align:left;margin:3px 10px 3px 3px;background-image: url(objetos/menu-parte-inferior.gif);background-position:bottom; padding-bottom:5px;}
#menu li {list-style:none ; margin: 4px 8px 4px 6px;}
#menu h1 {padding-top:12px;text-decoration:none; font-size:14px;background-image: url(objetos/menu-parte-superior.gif);}
#pie {background-color:white;border-left: black 1px solid ;
border-right: black 1px solid;
border-top: black 1px solid ;height: 65px ;}
#pie li {list-style:none;font-size:12px;}
#pieuno { float:left;width:150px;}
#piedos { float:left;width:498px;}
#pietres { float:left;width:150px;}
#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:blue; text-decoration:underline; background-color:#458B00;}
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 {}

Les agradesco mucho por su ayuda.

debes pegar aqui tooodo el contenido del html... solo asi podremos ayudarte

saludos

Gracias por responder
Este es el html de la pagina:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

<html>
<head>
<title>XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX</title>
<link rel="stylesheet" href="estilo-general.css" type="text/css" media="all">
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
</head>
<body>
<div id="global">
<!-- INICIO CODIGO DE CABECERA - NO TOCAR -->
<div id="curva-superior"></div>
<div id="cabecera"> <div id="logotipo">
<a href="index.html">
<img src="objetos/logotipo.gif" width="270" height="80"
alt="Haz clic aquí para volver a la página de inicio">
</a>
</div>
<div id="publicidad">Bienvenidos a mi Web</div>
</div>
<div id="navegacion">
<ul>
<li><a href="#">Sección 1</a></li>
<li><a href="#">Sección 2</a></li>
</ul>
</div>
<!-- FIN DE CODIGO DE CABECERA -->
<div id="contenido">
<!-- INICIO CODIGO DE MENU LATERAL IZQUIERDO - NO TOCAR -->
<div id="menu">
<ul>
<h1>ISAC 4/52</h1><li><a href="#">Enlace 1</a></li><li><a href="#">Enlace 2</a></li><li><a href="#">Enlace 3</a></li>
</ul>
</div>
<!-- FIN DE CODIGO DE MENU LATERAL IZQUIERDO -->
<h1> XXXXXXXXXXXXXXXX XXXXXXXXX XXXXXXXXXXXXXXXXXXXXXXXX XXXXXXXXXX</h1>
<p>XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX XXXXXXXXXXXXXXXXXXXXXXXXXXXX</p>
<h2>XXXXXXXXXXXXXXXXXXXXXXXXXX</h2></p>XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX</p>
<p>XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX X XXXXXXXXXXXXXXXXXXXXXXXXXXXXX XX</p>
</div>

<!-- INICIO CODIGO PIE DE PAGINA - NO TOCAR -->
<div id="pie">
<div id="pieuno">
<ul>
<li><a href="#">Foro Ejemplo</a></li><li><a href="#">Contactos</a></li><li><a href="#">Nos Enlazan</a></li>
</ul>
</div>
<div id="piedos">pie dos</div>
<div id="pietres">
<ul>
<li><a href="#">Directorio</a></li><li><a href="#">TopSite</a></li><li><a href="#">Mapa de la Web</a></li>
</ul>
</div>
</div>
<!-- FIN CODIGO PIE DE PAGINA -->
<div id="curva-inferior"></div>
</div>

</div>
</body>
</html>


Saludos

hola
al final de la linea 18 en el css te sobra un }

aqui
#curva-inferior {background-image:url(objetos/curva-inferior.gif);
background-repeat: no-repeat ;
width:800px ;
height: 12px
overflow: hidden;}

te falta ; despues de height: 12px

sigo revisando

saludos

UUy gracias Yaneth... ya sale la imagen del pie de pagina...
pero aun no me salen los bordes superior, el derecho y el izquierdo...

saludos ^_^

ok, sigo revisando

Gracias Yaneth
Le cuento que encontre el error pero no se como resolverlo...
el la hoja de estilos-general.css
en la linea
#pie {background-color:white;border-left: black 1px solid ;
border-right: black 1px solid;
border-top: black 1px solid ;height: 65px ;}
donde empieza "#pie" no aparece de color azul como los demas entonces el navegador no encuentra las caracteristicas que le di al pie.......
a que se debe eso??

gracias por tu ayuda

Saludos

hola
debes volver a pegar aqui el html y el css, por si hiciste algun cambio

cada que preguntes algo, debes pegar los codigos actualizados, asi veremos si corregiste lo que te indicamos, y que falta de corregir

saludos