Para jugoncan

pipicalzaslargas · 11 Mar 2008, 17:55 · Solicitar retirada

Bueno tadavía no pude centrar mi pagina, he cambiado tantas veces en la hoja de estilos que ya no se cual es la buena. Lo último que puse fuen en la capa global ( que engloba toda la pagina), width:800px; margin: 100px auto. Pero la pagina sigue estando pegada al margen izquierdo, lo único que está separada por arriba. Y asi queda fatal. Además en el otro ordenador que tengo, no me carga la pagina y no se porque puede ser. Asi que no puedo ver como se comporta en otro ordenador.

Jugoncan · 11 Mar 2008, 17:57 · Solicitar retirada

Puedes poner la url para ver como tienes el código html y su hoja de estilos?
Saludos :wink:

Deathly Snake · 11 Mar 2008, 19:20 · Solicitar retirada

Yo tengo el mismo problema :?

En IE se separa por arriba, pero no por la izquierda :?

plantilla.html

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title>SitioMetal Gea.atwebpages.com/index.html</title>
<link rel="stylesheet" href="estilo-general.css" type="text/css" media="all">
</head>
<body>
<div id="global">
<div id="curva-superior"></div>
<div id="cabecera">
<div id="logotipo">[contenido no disponible]</div>
<div id="publicidad">Bienvenidos a mi Web</div>
</div>
<div id="navegacion">
<div id="enlace1">
Comenzando..
</div>
<div id="enlace2">
Datos básicos del juego
</div>
<div id="enlace3">
Metal Gear Solid 1
</div>
<div id="enlace4">
Metal Gear Solid 2: Sons of Liberty
</div>
<div id="enlace5">
Metal Gear Solid 3: Snake Eater
</div>
<div id="enlace6">
Guías
</div>
<div id="enlace7">
Creador de la saga
</div>
<div id="enlace8">
Sobre Sitiometalgear
</div>
</div>
<div id="contenido">
<div id="menu">
<h1>Menú</h1>
<ul>

Inicio

Datos básicos

Metal Gear Solid 1

Metal Gear Solid 2: Sons of Liberty

Metal Gear Solid 3: Snake Eater

Guías

Foro

Autor

Sobre Sitiometalgear
</div>
<h1>Esta será la zona principal de la web</h1>

Este es mi segundo párrafo. Acabo de poner un punto y en cambio sigue siendo un párrafo
pues no le he colocado aún la etiqueta de cierre. Voy a ponersela justo aquí.</p>
<h2>Y este es el tercer párrafo.</h2>

En pocas lecciones aprenderé a darle margenes para
separarlos unos de otros, e incluso hacerles sanguias por la izquierda a la primera línea,
que queda mucho mejor.</p>

Anda, fijate! Salen todos centrados, que cosa. Espero que Jorgens nos enseñe a ponerlos
alineados a la izquierda, o justificados. Así esto parece una poesia! je je je.</p>
</div>
<div id="pie">
<div id="pieuno">
<ul>

foro ejemplo

contactanos

nos enlazan
</div>
<div id="piedos">pie dos</div>
<div id="pietres">
<ul>

directorio

topsite

mapa de la web
</div>
</div>
<div id="curva-inferior"></div>
</div>
</body>
</html>

estilo-general.css :

* {text-indent:0px ; margin:0px ; padding:0px ; border:0px}

p {text-align: justify}

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: 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:100px}

#logotipo {width:300px ; float:left }

#logotipo a {}
#logotipo a:link {}
#logotipo a:visited {}#logotipo a:hover {background-color: white}
#logotipo a:active {}

#publicidad {width:498px ; float:right ; margin-top:25px ;
font-size: 16px }

#navegacion {border: black 1px solid ;
height:20px}

#enlace1 {float:left ; background-color:#CCFFFF ; width:199px ; height: 38px}
#enlace2 {float:left ; background-color:#CCFFFF ; width:199px ; height: 38px}
#enlace3 {float:left ; background-color:#CCFFFF ; width:199px ; height: 38px}
#enlace4 {float:left ; background-color:#CCFFFF ; width:199px ; height: 38px}
#enlace5 {float:left ; background-color:#CCFFFF ; width:199px ; height: 38px}
#enlace6 {float:left ; background-color:#CCFFFF ; width:199px ; height: 38px}
#enlace7 {float:left ; background-color:#CCFFFF ; width:199px ; height: 38px}
#enlace8 {float:left ; background-color:#CCFFFF ; width:199px ; height: 38px}

#navegacion a {color: brown ; text-decoration:none ; font-size: 15px;
text-aling: justify }
#navegacion a:link {}
#navegacion a:visited {}
#navegacion a:hover {color:blue ; text-decoration:underline ;}
#navegacion a:active {}

#navegacion li {float:left ; list-style:none ;
margin: 0px 20px 0px 20px }

#navegacion ul { margin-left: 180px }

#palabras-clave {background-color:red}

#contenido {background-color: #CCCCFF ; border-left: black 1px solid ;
border-right: black 1px solid ; height: 400px }

#contenido p {margin: 5px 10px 0px 10px ; text-indent: 15px}

#menu {background-color: orange ; width: 150px ; float:left ;
text-align:left ; margin: 3px 10px 10px 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 {text-decoration:none ; font-size:12px ; padding-top:12px ;
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 ; }

#pieuno {float:left ; width: 150px;}

#pie li {list-style: none ; font-size: 12px }
#piedos {float:left ; width: 498px;}
#pietres{float:left ; width: 150px;}

#by {background-color:yellow ; text-align: center}

#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 }

a:link {}
a:visited {}
a:hover {color:red ; text-decoration:underline ;
background-color: silver}
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 ;}

Gracias :wink:

Jugoncan · 11 Mar 2008, 21:27 · Solicitar retirada

Qué raro, no veo el problema en la parte del código correspondiente. Puedes ponernos la url?

Raulyure · 12 Mar 2008, 07:19 · Solicitar retirada

Deathly Snake escribió:Yo tengo el mismo problema :?

En IE se separa por arriba, pero no por la izquierda :?

plantilla.html

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title>SitioMetal Gea.atwebpages.com/index.html</title>
<link rel="stylesheet" href="estilo-general.css" type="text/css" media="all">
</head>
<body>
<div id="global">
<div id="curva-superior"></div>
<div id="cabecera">
<div id="logotipo">[contenido no disponible]</div>
<div id="publicidad">Bienvenidos a mi Web</div>
</div>
<div id="navegacion">
<div id="enlace1">
Comenzando..
</div>
<div id="enlace2">
Datos básicos del juego
</div>
<div id="enlace3">
Metal Gear Solid 1
</div>
<div id="enlace4">
Metal Gear Solid 2: Sons of Liberty
</div>
<div id="enlace5">
Metal Gear Solid 3: Snake Eater
</div>
<div id="enlace6">
Guías
</div>
<div id="enlace7">
Creador de la saga
</div>
<div id="enlace8">
Sobre Sitiometalgear
</div>
</div>
<div id="contenido">
<div id="menu">
<h1>Menú</h1>
<ul>
Inicio
Datos básicos
Metal Gear Solid 1
Metal Gear Solid 2: Sons of Liberty
Metal Gear Solid 3: Snake Eater
Guías
Foro
Autor
Sobre Sitiometalgear
</div>
<h1>Esta será la zona principal de la web</h1>

Este es mi segundo párrafo. Acabo de poner un punto y en cambio sigue siendo un párrafo
pues no le he colocado aún la etiqueta de cierre. Voy a ponersela justo aquí.</p>
<h2>Y este es el tercer párrafo.</h2>

En pocas lecciones aprenderé a darle margenes para
separarlos unos de otros, e incluso hacerles sanguias por la izquierda a la primera línea,
que queda mucho mejor.</p>

Anda, fijate! Salen todos centrados, que cosa. Espero que Jorgens nos enseñe a ponerlos
alineados a la izquierda, o justificados. Así esto parece una poesia! je je je.</p>
</div>
<div id="pie">
<div id="pieuno">
<ul>
foro ejemplo
contactanos
nos enlazan
</div>
<div id="piedos">pie dos</div>
<div id="pietres">
<ul>
directorio
topsite
mapa de la web
</div>
</div>
<div id="curva-inferior"></div>
</div>
</body>
</html>

estilo-general.css :

* {text-indent:0px ; margin:0px ; padding:0px ; border:0px}

p {text-align: justify}

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: 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:100px}

#logotipo {width:300px ; float:left }

#logotipo a {}
#logotipo a:link {}
#logotipo a:visited {}#logotipo a:hover {background-color: white}
#logotipo a:active {}

#publicidad {width:498px ; float:right ; margin-top:25px ;
font-size: 16px }

#navegacion {border: black 1px solid ;
height:20px}

#enlace1 {float:left ; background-color:#CCFFFF ; width:199px ; height: 38px}
#enlace2 {float:left ; background-color:#CCFFFF ; width:199px ; height: 38px}
#enlace3 {float:left ; background-color:#CCFFFF ; width:199px ; height: 38px}
#enlace4 {float:left ; background-color:#CCFFFF ; width:199px ; height: 38px}
#enlace5 {float:left ; background-color:#CCFFFF ; width:199px ; height: 38px}
#enlace6 {float:left ; background-color:#CCFFFF ; width:199px ; height: 38px}
#enlace7 {float:left ; background-color:#CCFFFF ; width:199px ; height: 38px}
#enlace8 {float:left ; background-color:#CCFFFF ; width:199px ; height: 38px}

#navegacion a {color: brown ; text-decoration:none ; font-size: 15px;
text-aling: justify }
#navegacion a:link {}
#navegacion a:visited {}
#navegacion a:hover {color:blue ; text-decoration:underline ;}
#navegacion a:active {}

#navegacion li {float:left ; list-style:none ;
margin: 0px 20px 0px 20px }

#navegacion ul { margin-left: 180px }

#palabras-clave {background-color:red}

#contenido {background-color: #CCCCFF ; border-left: black 1px solid ;
border-right: black 1px solid ; height: 400px }

#contenido p {margin: 5px 10px 0px 10px ; text-indent: 15px}

#menu {background-color: orange ; width: 150px ; float:left ;
text-align:left ; margin: 3px 10px 10px 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 {text-decoration:none ; font-size:12px ; padding-top:12px ;
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 ; }

#pieuno {float:left ; width: 150px;}

#pie li {list-style: none ; font-size: 12px }
#piedos {float:left ; width: 498px;}
#pietres{float:left ; width: 150px;}

#by {background-color:yellow ; text-align: center}

#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 }

a:link {}
a:visited {}
a:hover {color:red ; text-decoration:underline ;
background-color: silver}
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 ;}

Gracias :wink:

Hola Deathly Snake:
No es que quiera meterme porque seguro que yo se mucho menos que vosotros de esto pero como yo también tenía un problema parecido en algún momento me di cuenta de que el problema que yo tenía era de los bordes. Con esto no quiero decirte que esa puede que sea tu solución, pero he visto en tus códigos en el DIV navegación, que tienes bordes por los cuatro lados, al poner en la hoja de estilo navegación: border:4 px , creo que eso hace que le de bordes a los cuatro lados y muchas veces ese pixel de más hace que todo se vaya o aun lado o hacia abajo, sobre todo los textos, a la vez que le has dado solo 20 de alto, por que si le has dado solo 20 de alto y los otros enlaces los querias fuera de la capa navegación entonces es que no has cerrado la capa navegacion, y si la has cerrado despues de todos los enlaces entonces no creo que tuvieses que ponerle a la capa navegacion es altura tan pequeña.
Resumiendo:
Si quieres la capa navegacion sin ningun enlace , entonces tendrías que cerrarla, si quieres que todos esos enlaces vayan dentro de la capa navegacion entonces no te sirve esa altura que le has puesto.
Disculpa mi entrometimiento que seguro que jugoncan te dará mejores soluciones.

Deathly Snake · 12 Mar 2008, 15:58 · Solicitar retirada

Muchas gracias voy a probarlo :wink: