A ver si me podeis echar un cable, estos son mis codigos...
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title>Page title</title>
<link rel="stylesheet" href="blue.css" type="text/css" media="all">
</head>
<body>
<div id="global">
<div id="curva-superior"></div>
<div id="cabecera">
<div id="logotipo">
<a href="index.html">
[contenido no disponible]
</a>
</div>
<div id="publicidad">Bienvenidos a mi Web</div>
</div>
<div id="navegacion">
<ul>
Sección 1
Sección 2
Sección 3
</div>
<div id="contenido"><h1>EL ELECTROIMAN</h1>
<div id="menu">
<div id="menu2">
<div id="m1">
<ul> Fuerza
</div>
<div id="m2">
<ul> Impulso
</div><div id="m3">
<ul> Electro iman
</div>
<div id="m4">
<ul> Energia
</div>
<div id="m5">
<ul> Tecnica
</div><div id="m6">
<ul> Poder
</div><div id="m7">
<ul> Amperes
</div>
<div id="m8">
<ul> Opera
</div>
<div id="m9">
<ul> Mas
</div>
<div id="m10">
<ul> Imagenes
</div>
<div id="m11">
<ul> Video
</div>
<div id="m12">
<ul> Foro
</div>
</div>
</div>
<div id="imagenes">
[contenido no disponible]
[contenido no disponible]
[contenido no disponible]
</div>
LOS descubrimientos de Ampère y Faraday tuvieron inmediatas aplicaciones
prácticas que cambiaron la faz de la civilización moderna.</p>
Usando el descubrimiento de Oersted, de que una corriente eléctrica produce
un campo magnético en el espacio alrededor del cable que la conduce, tanto
Ampère como Arago lograron magnetizar agujas de hierro. Lo hicieron de la
siguiente forma: enrollaron un cable alrededor de la aguja y luego conectaron
los extremos de aquél a una batería. Al pasar la corriente por el cable crea
un campo magnético en el espacio dentro de la bobina; este campo magnético a
su vez magnetiza la aguja. de la misma forma que un imán permanente magnetiza
una limadura de hierro.</p>
En 1825 el inglés William Sturgeon (1783-1850) enrolló 18 espiras de alambre
conductor alrededor de una barra de hierro dulce, que dobló para que tuviera
la forma de una herradura (Figura 9). Al conectar los extremos del cable a una
batería el hierro se magnetizó y pudo levantar un peso que era 20 veces mayor
que el propio. Este fue el primer electroimán, es decir, un imán accionado
por electricidad. </p>
Años después, en 1829, el estadounidense Joseph Henry (1797-1878) construyó
una versión mejorada del electroimán. Para ello enrolló en una barra de hierro
dulce espiras en forma mucho más apretada y en un número mayor; de esta manera
logró una mayor intensidad magnética. El electroimán se comporta de forma
equivalente a un imán permanente, con la ventaja de que su intensidad se puede
controlar, ya sea cambiando la corriente que se le hace circular o variando
el número de espiras de la bobina. Además, al cesar la corriente, cuando se
desconecta la batería, desaparece el efecto magnético.</p>
El descubrimiento de Ampère sentó las bases para la invención del primer
motor eléctrico. Su funcionamiento es el siguiente. Supóngase que se enrolla una
bobina alrededor de un cilindro de hierro (Figura 10) y que ésta se fija en un
eje LL, alrededor del cual puede girar. Si metemos la bobina dentro de los polos
de un imán permanente, como se muestra en la figura, y se hace pasar una corriente
eléctrica por ella, ésta se vuelve un imán que puede girar dentro del imán
permanente. Los polos de los imanes ejercen fuerzas entre sí; por consiguiente,
la bobina experimenta fuerzas que la hacen girar alrededor del eje LL. </p>
</div>
<div id="pie">
<div id="pieuno">
<ul> Foro Ejemploz/a> <a href="#">Contactos Nos enlazan
</div>
<div id="piedos">pie dos</div>
<div id="pietres">
<ul> Directorio TopSite Mapa de la web
</div>
</div>
</div>
</body>
</html>
Y los css
* {text-indent:0px ; margin:0px ; padding:0px ; border:0px}
#global {width:800px; margin: 4px auto; height:100%}
p {color:white; text-align:justify}
h1 {font-size: 1.8em; color:white ; font-weight: bold ; text-decoration: underline ;
text-align: center}
body{text-align:center; background-image: url(blue/fondo4.jpg);background-repeat: repeat}
#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 }
#logotipo a {}
#logotipo a:link {}
#logotipo a:visited {}
#logotipo a:hover {background-color: white }
#logotipo a:active {}
#publicidad {width:518px ; float:right ; margin-top:25px ; font-size: 16px }
#navegacion {background-color: gray ; border: black 1px solid ; height:20px}
#navegacion li {float:left ; list-style:none ; margin: 0px 20px 0px 20px }
#navegacion ul { margin-left: 180px }
#contenido {width:800px;float:left;background-color:#27408B;
border:black 1px solid;height:790px}
#menu {width:150px;float:left;background-color:#27408B;
margin: 10px 10px 10px 10px; height:790px}
#menu2 {width:125px;float:left;background-image:url(blue/botonblue.jpg);
background-repeat: repeat;border:#B0E2FF 1px solid;
margin: 10px 10px 10px 10px;height: 290px;
padding:3px 3px 3px 3px}
#m1 {width:120px;float:left;background-color: gray;
background-image:url(blue/botonblue.jpg);background-repeat:no-repeat;
border:#B0E2FF 1px solid}
#m2 {width:120px;float:left;background-color:blue;
background-image: url(blue/botonblue.jpg);background-repeat:no-repeat;
border: #B0E2FF 1px solid}
#m3 {width:120px;float:left;background-color: gray;
background-image: url(blue/botonblue.jpg);background-repeat:no-repeat;
border:#B0E2FF 1px solid}
#m4 {width:120px;float:left;
background-image: url(blue/botonblue.jpg);background-repeat:no-repeat;
border:#B0E2FF 1px solid}
#m5 {width:120px;float:left;
background-image: url(blue/botonblue.jpg);background-repeat:no-repeat;
border:#B0E2FF 1px solid}
#m6 {width:120px;float:left;
background-image: url(blue/botonblue.jpg);background-repeat:no-repeat;
border:#B0E2FF 1px solid}
#m7 {width:120px;float:left;
background-image: url(blue/botonblue.jpg);background-repeat:no-repeat;
border:#B0E2FF 1px solid}
#m8 {width:120px;float:left;
background-image: url(blue/botonblue.jpg);background-repeat:no-repeat;
border:#B0E2FF 1px solid}
#m9 {width:120px;float:left;
background-image: url(blue/botonblue.jpg);background-repeat:no-repeat;
border:#B0E2FF 1px solid}
#m10 {width:120px;float:left;
background-image: url(blue/botonblue.jpg);background-repeat:no-repeat;
border:#B0E2FF 1px solid}
#m11 {width:120px;float:left;
background-image: url(blue/botonblue.jpg);background-repeat:no-repeat;
border:#B0E2FF 1px solid}
#m12 {width:120px;float:left;
background-image: url(blue/botonblue.jpg);background-repeat:no-repeat;
border:#B0E2FF 1px solid}
a {text-decoration:none; color:white;font-size:1.2em; float: left; display: block}
a:link {}
a:visited {}
a:hover {background-color:silver}
a:active {}
#menu li {list-style:none}
#imagenes {width:250px; background-color:blue; float:right;
height:790px}
#pie { background-color: white ; width:800px;
border-left: black 1px solid ;
border-right: black 1px solid;
border-top: black 1px solid;
height:75px }
#pie li {list-style:none; font-size:12px}
#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}
#pieuno { float:left;width:150px}
#piedos {background-color:silver;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 }
Aqui os dejo unas capturas...
IE se me descuadra el pie no se muy bien porque, he seguido los ejemplos de cctw..
http://anonimg.com/0xxsgh8tkq
Pero en FIREFOX es peor, se solapan las capas, y retocar las alturas no me funciona...
http://anonimg.com/2p3yu5t7mf
Alguien me puede echar un cbale??
Gracias de antemano
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title>Page title</title>
<link rel="stylesheet" href="blue.css" type="text/css" media="all">
</head>
<body>
<div id="global">
<div id="curva-superior"></div>
<div id="cabecera">
<div id="logotipo">
<a href="index.html">
[contenido no disponible]
</a>
</div>
<div id="publicidad">Bienvenidos a mi Web</div>
</div>
<div id="navegacion">
<ul>
</div>
<div id="contenido"><h1>EL ELECTROIMAN</h1>
<div id="menu">
<div id="menu2">
<div id="m1">
<ul>
</div>
<div id="m2">
<ul>
</div><div id="m3">
<ul>
</div>
<div id="m4">
<ul>
</div>
<div id="m5">
<ul>
</div><div id="m6">
<ul>
</div><div id="m7">
<ul>
</div>
<div id="m8">
<ul>
</div>
<div id="m9">
<ul>
</div>
<div id="m10">
<ul>
</div>
<div id="m11">
<ul>
</div>
<div id="m12">
<ul>
</div>
</div>
</div>
<div id="imagenes">
[contenido no disponible]
[contenido no disponible]
[contenido no disponible]
</div>
LOS descubrimientos de Ampère y Faraday tuvieron inmediatas aplicaciones
prácticas que cambiaron la faz de la civilización moderna.</p>
Usando el descubrimiento de Oersted, de que una corriente eléctrica produce
un campo magnético en el espacio alrededor del cable que la conduce, tanto
Ampère como Arago lograron magnetizar agujas de hierro. Lo hicieron de la
siguiente forma: enrollaron un cable alrededor de la aguja y luego conectaron
los extremos de aquél a una batería. Al pasar la corriente por el cable crea
un campo magnético en el espacio dentro de la bobina; este campo magnético a
su vez magnetiza la aguja. de la misma forma que un imán permanente magnetiza
una limadura de hierro.</p>
En 1825 el inglés William Sturgeon (1783-1850) enrolló 18 espiras de alambre
conductor alrededor de una barra de hierro dulce, que dobló para que tuviera
la forma de una herradura (Figura 9). Al conectar los extremos del cable a una
batería el hierro se magnetizó y pudo levantar un peso que era 20 veces mayor
que el propio. Este fue el primer electroimán, es decir, un imán accionado
por electricidad. </p>
Años después, en 1829, el estadounidense Joseph Henry (1797-1878) construyó
una versión mejorada del electroimán. Para ello enrolló en una barra de hierro
dulce espiras en forma mucho más apretada y en un número mayor; de esta manera
logró una mayor intensidad magnética. El electroimán se comporta de forma
equivalente a un imán permanente, con la ventaja de que su intensidad se puede
controlar, ya sea cambiando la corriente que se le hace circular o variando
el número de espiras de la bobina. Además, al cesar la corriente, cuando se
desconecta la batería, desaparece el efecto magnético.</p>
El descubrimiento de Ampère sentó las bases para la invención del primer
motor eléctrico. Su funcionamiento es el siguiente. Supóngase que se enrolla una
bobina alrededor de un cilindro de hierro (Figura 10) y que ésta se fija en un
eje LL, alrededor del cual puede girar. Si metemos la bobina dentro de los polos
de un imán permanente, como se muestra en la figura, y se hace pasar una corriente
eléctrica por ella, ésta se vuelve un imán que puede girar dentro del imán
permanente. Los polos de los imanes ejercen fuerzas entre sí; por consiguiente,
la bobina experimenta fuerzas que la hacen girar alrededor del eje LL. </p>
</div>
<div id="pie">
<div id="pieuno">
<ul>
</div>
<div id="piedos">pie dos</div>
<div id="pietres">
<ul>
</div>
</div>
</div>
</body>
</html>
Y los css
* {text-indent:0px ; margin:0px ; padding:0px ; border:0px}
#global {width:800px; margin: 4px auto; height:100%}
p {color:white; text-align:justify}
h1 {font-size: 1.8em; color:white ; font-weight: bold ; text-decoration: underline ;
text-align: center}
body{text-align:center; background-image: url(blue/fondo4.jpg);background-repeat: repeat}
#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 }
#logotipo a {}
#logotipo a:link {}
#logotipo a:visited {}
#logotipo a:hover {background-color: white }
#logotipo a:active {}
#publicidad {width:518px ; float:right ; margin-top:25px ; font-size: 16px }
#navegacion {background-color: gray ; border: black 1px solid ; height:20px}
#navegacion li {float:left ; list-style:none ; margin: 0px 20px 0px 20px }
#navegacion ul { margin-left: 180px }
#contenido {width:800px;float:left;background-color:#27408B;
border:black 1px solid;height:790px}
#menu {width:150px;float:left;background-color:#27408B;
margin: 10px 10px 10px 10px; height:790px}
#menu2 {width:125px;float:left;background-image:url(blue/botonblue.jpg);
background-repeat: repeat;border:#B0E2FF 1px solid;
margin: 10px 10px 10px 10px;height: 290px;
padding:3px 3px 3px 3px}
#m1 {width:120px;float:left;background-color: gray;
background-image:url(blue/botonblue.jpg);background-repeat:no-repeat;
border:#B0E2FF 1px solid}
#m2 {width:120px;float:left;background-color:blue;
background-image: url(blue/botonblue.jpg);background-repeat:no-repeat;
border: #B0E2FF 1px solid}
#m3 {width:120px;float:left;background-color: gray;
background-image: url(blue/botonblue.jpg);background-repeat:no-repeat;
border:#B0E2FF 1px solid}
#m4 {width:120px;float:left;
background-image: url(blue/botonblue.jpg);background-repeat:no-repeat;
border:#B0E2FF 1px solid}
#m5 {width:120px;float:left;
background-image: url(blue/botonblue.jpg);background-repeat:no-repeat;
border:#B0E2FF 1px solid}
#m6 {width:120px;float:left;
background-image: url(blue/botonblue.jpg);background-repeat:no-repeat;
border:#B0E2FF 1px solid}
#m7 {width:120px;float:left;
background-image: url(blue/botonblue.jpg);background-repeat:no-repeat;
border:#B0E2FF 1px solid}
#m8 {width:120px;float:left;
background-image: url(blue/botonblue.jpg);background-repeat:no-repeat;
border:#B0E2FF 1px solid}
#m9 {width:120px;float:left;
background-image: url(blue/botonblue.jpg);background-repeat:no-repeat;
border:#B0E2FF 1px solid}
#m10 {width:120px;float:left;
background-image: url(blue/botonblue.jpg);background-repeat:no-repeat;
border:#B0E2FF 1px solid}
#m11 {width:120px;float:left;
background-image: url(blue/botonblue.jpg);background-repeat:no-repeat;
border:#B0E2FF 1px solid}
#m12 {width:120px;float:left;
background-image: url(blue/botonblue.jpg);background-repeat:no-repeat;
border:#B0E2FF 1px solid}
a {text-decoration:none; color:white;font-size:1.2em; float: left; display: block}
a:link {}
a:visited {}
a:hover {background-color:silver}
a:active {}
#menu li {list-style:none}
#imagenes {width:250px; background-color:blue; float:right;
height:790px}
#pie { background-color: white ; width:800px;
border-left: black 1px solid ;
border-right: black 1px solid;
border-top: black 1px solid;
height:75px }
#pie li {list-style:none; font-size:12px}
#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}
#pieuno { float:left;width:150px}
#piedos {background-color:silver;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 }
Aqui os dejo unas capturas...
IE se me descuadra el pie no se muy bien porque, he seguido los ejemplos de cctw..
http://anonimg.com/0xxsgh8tkq
Pero en FIREFOX es peor, se solapan las capas, y retocar las alturas no me funciona...
http://anonimg.com/2p3yu5t7mf
Alguien me puede echar un cbale??
Gracias de antemano