alex_92 escribió:Este es mi codigo html hasta el momento:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<HTML>
<HEAD>
<TITLE>Bienvenidos a Cacarotito.com - Todo sobre animales, pokemon y mas!!!</TITLE>
<link rel="stylesheet" media="screen" type="text/css" href="estilos.css">
</HEAD>
<BODY>
<div id="global">
<div class="cabezera">
<div><div class="logo">[img]imagenes/logo.jpg[/img]</div></div>
</div>
<div class="navegacion">
<ul>
<li class="lista1">[url="mascotas.html"]Mascotas[/url]
<li class="lista1">[url="pokemon.html"]Pokemon[/url]
<li class="lista1">[url="animales.html"]Animales[/url]
<li class="lista1">[url="descargas.html"]Descargas[/url]
<li class="lista1">[url="bloopers.html"]Bloopers[/url]
<li class="lista2">[url="celular.html"]Celular[/url]
[/list]
</div>
<div class="cuerpo">
<p class="contenido">Bienvenidos a Cacarotito.com, un lugar dedicado a las mascotas, los animales y a los Pokemon. Aqui podras subir fotos de tus mascotas para que todos las puedan ver. Tambien tendras fotos, videos e informacion sobre cada uno de los animales de este gran planeta.
En cuanto a los Pokemon encontraras datos de cada uno ellos, de los personajes, etc. En la zona de descargas podras bajar wallpapers, videos y algun juego para tu compu. Tambien tendras descargas para tu celular si lo quieres. En la parte Bloopers podras ver algunos videos divertidos de animales. Cualquier duda o consejo para la pagina puedes contarmela en la seccion de Contacto.</p>
<div class="poke">[img]imagenes/logo-pokemon.gif[/img]</div>
<div class="anim">[img]imagenes/animales.jpg[/img]</div>
</div>
</div>
</BODY>
</HTML>
Y este mi hoja de estilos:
* {border: 0xp; margin: 0px; padding: 0px}
body {background-color: silver; text-align: center}
#global {width: 800px; margin: 10px auto 10px auto; height: 1050px}
a {text-decoration: none; color: blue; font-family: Comic Sans Ms}
.cabezera {width: 800px; height: 125px; background-color: #FFFFFF}
.logo {float:left; margin: 10px; border: 1px solid black}
.navegacion {width: 800px; height: 30px; background-color: #FFFFFF; font-size: 20px; padding-top:4px; padding-bottom: 4px;
border-top: 1px solid #BEBEBE}
.navegacion li {float: left; list-style: none}
.lista1 {width: 132px; border-right: 1px solid #27408B}
.lista2 {width: 133px}
.cuerpo {width: 800px; height: 800px; background-color: #FFFFFF; border-top: 1px solid #BEBEBE}
.contenido {text-align: justify; font-size: 25px; color: blue; font-family: Comic Sans MS; text-indent: 50px; margin: 10px 10px 50px 10px}
.poke {border: 1px solid black; float: left; margin-left: 20px}
.anim {border: 1px solid black; float: left; margin-left: 20px}
Le puse bordes a las imagenes para que se note el problema al visualisarlo en el explorer
Hola:
No estoy muy seguro de lo que usted desea en su página, por ejemplo , tenemos una capa global en que todo lo demás irá dentro de esa capa, por lo tanto esa capa se abre justo debajo del primer body y se cierra justo antes del último body, por tanto eso está bien.
Pero luego tenemos una clase de capa que se llama cabezera, la cual se abre, la cuestión es ¿dónde quiere usted poner la capa logotipo?. ¿Dentro de la capa cabezera o a continuación hacia abajo?. Porque en este momento, segun sus códigos veo que el navegador no sabe que hacer con esas dos capas, ya que el navegador se preguntará, Si se quiere crear una capa cabezera y se quiere meter el logo dentro de esa capa, entonces, ¿A qué se debe que en la página, justo antes de poner la clase de capa logo haya un <div>?. Será que a lo mejor en la capa cabezera se quiere poner dentro de ella el logo, pero que ese logo vaya también dentro de una capa . Por lo tanto tendríamos en ese sector , tres capas, una que se llama cabezera, una que "se llama" div, y una que se llama logo. Así entiendo lo que veo en sus códigos.
Alguna cosa que veo es que usted a la capa global le ha puesto margin 10px auto, eso significa que por los cuatro corstados tendrá ese margin, y el auto querrá decir que el navegador tratará de dejarlo centrado, pero a continuación usted vuelve a ponerle margin:10px auto, a mi parecer esa segunda directiva está demás, ya que creo que si tiene 10px de margin, y ahora le está diciéndo que tenga otros 10px de margin, puede que haya un conflicto de medidas.
Como la capa global ya tiene un width (ancho) de 800px, suele ser redundante ponerle a la capa cabezera que también tenga 800px de ancho, ya que esa capa tomará el ancho que le manda la capa global.
Trataré de pasar sus códigos a mi ordenador para visualizar mejor el problema, ya que veo demasiadas medidas que si no se tiene cuidado generan muchos conflictos, porque debe notar que usted en la declaración del DOCTYPE, parece ser que está usando el modo strict, y eso significa que ese modo casi no le va a dejar pasar una equivocación.
Veré lo que puedo hacer, a menos que alguien le sugiera alguna solución.
Saludos
