Descolocación de mi Web en Navegadores (Firefox):MMORPG Web

Limited · 29 Nov 2008, 21:16 · Solicitar retirada

Hola! Bueno esta web la cree para la comunidad española de jugadores de World Of Warcraft (un MMORPG de fama mundial) a peticion suya, pero para mi gran decepcion todo iba bien hasta que al colgarla para ver como saldria me aparece desordenada:
http://twinkscrueldad.iespana.es/index.html

Como no tengo mucha idea de html y css pues querria un poco de ayuda para poder ponerla en orden, y que los links se mantuvieran siempre en ese colorcico azul suave que suelen tener y no cambiaran a su gusto.

Todo el contenido de la web iria centrado en un espacio de 800px para que ningun monitor tenga problemas al visualizar.

Me salido bastante al hacerla de los margenes que se daba en el tutorial, con esto me refiero a:
Crear un global para navegador horizontal y el contenido, y por otro lado poner la cabecera, el emblema del WOW y el FAQ. La cabecera y el emblema se han desplazado a la izquierda...

Supongo que algun parametro estara mal y por eso sale el navegador sobre el contenido, y el FAQ desplazado a la izquierda.

Si es necesario que proporcione la hoja de html y el css decidlo ^^

Tambien donde esta la lupa me gustaria colocar un recuadro para busqueda, pero en 1 dia entero mirando por google, no vi ninguna plantilla para ello :S

Tengo que añadir que en el IE se ve de puta madre, con algun defectillo tonto, pero nada mas, pero el Firefox me lo da todo desordenado :S

Editado Moderadores:
-Tema que pertenece a la sección: Foro General (movido desde criticamos tu web)
-Modificado el título para mejor descripción del problema

Limited · 30 Nov 2008, 11:38 · Solicitar retirada

Nadie puede echarme una manita?

KenLego · 30 Nov 2008, 14:11 · Solicitar retirada

<div id="global">
  <div id="navegacion">

:arrow: Intenta mover la capa "global" justo despues de la etiqueta <body>
:arrow: En la hoja de estilos pusiste:

a {font-family: Calibri ;
text-decoration:none ;
font: Arial}

y deberias haber puesto:

a:link {font-family: Calibri ;
   text-decoration:none ;
	 font: Arial}

:arrow: En el estilo de la capa #navegacion prueba agregando: margin-top: -15px;

:arrow: La estructura esta muy bien, intenta con eso que te dije :wink:

Limited · 30 Nov 2008, 21:57 · Solicitar retirada

Bien, arregle lo del global, ya esta todo dentro de global.
Lo de -15 margin en la navegacion solo sirve para que esta salga partida por la mitad.
Lo de links no funcciona.
Y sigue igual xD
Si esque nose porque en el IE se ve bien y en el mozilla de culo :S

KenLego · 30 Nov 2008, 22:05 · Solicitar retirada

Limited escribió:Muchisimas gracias, voy raudo y veloz a probar.

Por otro lado como podria arreglar lo de abajo?

Ve a tu hoja de estilos, en la parte de #links encontra:

margin-right: 55px ;
padding: 10 auto;

y reemplaza por:

margin-right: 100px ;
padding: 15px;

Despues, anda a la parte de #preguntasf, encontra:

margin-left: 60px ;

y reemplaza por:

 margin-left: 100px ;

Con eso logras mover todo hacia la izquierda y separarlos entre si, si esas medidas son exageradas anda probando vos a ver cual queda bien :wink:

KenLego · 30 Nov 2008, 22:07 · Solicitar retirada

Limited escribió:Bien, si pongo global encima, que pasa? adios la cabecera, se descoloca 20mil veces mas :s
Lo de -15 margin en la navegacion solo sirve para que esta salga partida por la mitad.
Te explico la estructura:
Cabecera (En este caso el espacio superior de 150px alto y 1000px ancho)
Global (800 px ancho)
Bajo (815px ancho)

Esta dividida en 3 zonas la pagina, ya que la cabecera y el bajo tienen distinta medida.

Si cambias de lugar la div global, sacales los -15px de margin-top a la cabecera :P

Limited · 30 Nov 2008, 22:17 · Solicitar retirada

KenLego escribió:Si cambias de lugar la div global, sacales los -15px de margin-top a la cabecera :P

Eso hice. Mira de nuevo el codigo.

Limited · 30 Nov 2008, 22:49 · Solicitar retirada

No hay modo de dejarlo igual para ambos exploradores.
Tengo interes en saber si el dreamweaver podria hacerlo :S

Limited · 30 Nov 2008, 22:58 · Solicitar retirada

Mira, el estilo lo saque de aqui:
http://eu.wowarmory.com/character-sheet.xml?r=Drek%27Thar&n=Nymh

Sin importar el character-sheet, fijate en la zona de abajo.
El color que queria para los links es ese, pero nose cual es el nombre de ese color. (Encontrado, es : #45acf6).
Y luego querria que el faq fuera igual al de ahi (con el borde separado del fondo o lo que demonios haya hecho) pero ni idea de como hacerlo.

Limited · 1 Dic 2008, 16:58 · Solicitar retirada

Porfavor, que alguien se pase y me de una solucion que deje ver la pagina igual en el IExplorer que en el Mozilla, que no hay modo :S
Y al dar soluciones que mire por ambos exploradores, no vale darle mas o menos medida a uno porque sino el otro tambien se descoloca.

Limited · 2 Dic 2008, 00:05 · Solicitar retirada

Os dejo el codigo pues, para que busqueis algun fallito.
Tambien añadir que el index seria el texto del contenido, y luego el contenido es un margen para poner entremedio los bordes se la imagen, que tienen todos un ancho u alto de 84 en general, por lo que concuerdan en espacio todos.

HTML:

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

<html>
<head>
<title>Twinks Crueldad</title>
<link rel="stylesheet" href="estilos.css" type="text/css" media="all">
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
</head>
<body>
<div id="global">
<div id="emblema">
[contenido no disponible]
</div>
<div id="logotipo">
[contenido no disponible]
</div>
<div id="navegacion">
<ul>

<h2>Índice</h2>

<h2>Guilds</h2>

<h2>Regristro</h2>

<h2>Addons</h2>

<h2>Xfire</h2>

<ul2>[contenido no disponible]</ul2>
</div>
<div id="contenido">
<div id="frametopleft">
</div>
<div id="bordertop">
</div>
<div id="frametopright">
</div>
<div id="borderright">
</div>
<div id="index">
<h1>¿Que es Twinks Crueldad?</h1>
<h3>Twinks Crueldad es una página de encuentro para todos los Twinks españoles jugadores del World Of Warcraft donde se comentan temas directamente relacionados
con twinks hasta otros banales y referentes al World Of Warcraft. Para entrar al foro simplemente se debe tener un Twink.</h3>
<h1>¿Qué es un Twink?</h1>
<h3>Un twink es todo aquel personaje que posea el mejor equipo y sus respectivos encantamientos para su nivel.
No se distingue al twink por su nivel. Un personaje nivel 80 es twink cuando tenga el máximo equipo en su estilo(pve/pvp) y sus encantamientos, al igual que lo es
un personaje nivel 19.</h3>
<h1>¿Como distinguir a un Twink?</h1>
<h3>El twink respeta al jugador enemigo, no usa emociones como /risa y no abusa de su potencial matando a jugadores normales.
Busca siempre batirse con otros twinks, no intenta frenar la victoria para campear(es decir, matar a los jugadores enemigos en su entorno de resurreccion)
,sino que acelera esta para entrar a otra batalla.
Un jugador que controla un Twink suele moverse de modo habil y calcula cada uno de sus movimientos. Si se ve en desventaja no se hace el valiente,
huye para no morir.
No se dedicará a spammear(escribir y escribir en el chat)el chat de batalla, se hara notar lo menos posible simplemente para
no causar mala impresion.</h3>
</div>
<div id="framebottomleft">
</div>
<div id="borderbottom">
</div>
<div id="framebottomright">
</div>
<div id="borderleft">
</div>

</div>

<div id="preguntasf">

Preguntas Frecuentes</p>
<ul>

¿Cómo me pongo 100puntos de salud en el casco?

¿Dónde puedo comprar Ron Rumsey Etiqueta Negra?

¿Qué profesiones elijo?

¿Dónde puedo encontrar macros para decirselas al bando contrario?

¿Dónde puedo encontrar macros para decirselas al bando contrario?

</div>
<div id="links">

Enlaces</p>
<ul>

WoW-Head

WOWInterface

Curse

TodoWOW

WoW-Lista

WoW-Lista

</div>
</div>

<div id="footer">
[contenido no disponible]

© 2008 | World of Warcraft and Blizzard are trademarks of Blizzard Entertainment.</p>

This is a no oficial World Of Warcraft site.</p>
</div>

</body>
</html>

CSS:
body {background-color: #000000 ;
background-image: url(objetos/bg.jpg) ;
background-repeat: no-repeat ;
background-attachment: scroll ;
height:100%;
font-color: silver ;
text-align: center}
#global {width: 800px ;
margin: 4px auto }
#frametopleft {background-image: url(objetos/border-top-left.png) ;
background-repeat: no-repeat ;
height: 84px ;
width: 132px ;
position: top left}
#frametopright {background-image: url(objetos/frame-top-right.png) ;
background-repeat: no-repeat ;
height: 84px ;
width: 132px ;
position: top right}
#framebottomleft {background-image: url(objetos/frame-bottom-left.png) ;
background-repeat: no-repeat ;
height: 132px ;
width: 84px ;
float:bottom left}
#framebottomright {background-image: url(objetos/frame-bottom-right.png) ;
background-repeat: no-repeat ;
height: 132px ;
width: 84px ;
float: bottom right}
#bordertop {background-image: url(objetos/border-top.png) ;
background-repeat: repeat-x ;
height: 82px ;
width: 538px ;
float:top}
#borderleft {background-image: url(objetos/border-left.png) ;
background-repeat: repeat-y ;
width: 82px ;
position: left}
#borderright {background-image: url(objetos/border-right.png) ;
background-repeat: repeat-y ;
width: 82px ;
position: right}
#borderbottom {background-image: url(objetos/border-bottom.png) ;
background-repeat: repeat-x ;
height: 82px ;
width: 538px ;
position: bottom}
#contenido {width:800px ;
margin: 10px 10px 10px 35px ;
text-align: left ;
border: white 1px solid}
#index {background-image: url(objetos/light2.jpg) ;
text-align: left }
#emblema {width: 270px ;
height: 125px ;
float:left ;
margin: 30px 15px 15px 30px ;
border: no-border }
#logotipo {width : 300px ;
height: 140px ;
float: right ;
margin: 15px 100px 15px 15px }
#navegacion {background-image: url(objetos/module-lite.png) ;
background-repeat: repeat ;
border: black 1px solid ;
width: 800px ;
float: left ;
height: 45px ;
padding: 10px 10px 0px 10px ;
margin: 10px 10px 10px 10px ;
text-align: center center}
#navegacion li {list-style: none ;
float:left ;
margin: 0px 20px 0px 20px ;
text-decoration: none }
#navegacion ul {margin-left:15px ;
display:inline}
#navegacion ul2 {position: right ;
float: right}
#links {text-align: left ;
float: right ;
width: 150px ;
background-image: url(objetos/module-lite.png) ;
background-repeat: repeat ;
background-color: #000000 ;
border: 1px gray solid ;
margin-top: 10px ;
margin-right: 39px ;
padding-left: 10px ;
padding-top: 10px ;
padding-right: 20px ;
text}
#links ul {text-align: left}
#links li {}
#preguntasf {background-image: url(objetos/module-lite.png) ;
background-repeat: repeat ;
background-color: #000000 ;
border: 1px gray solid ;
margin-top: 10px;
margin-left: 62px ;
padding-left: 10px ;
padding-top: 10px;
padding-right: 10px ;
float: left ;
width:510px ;
text-align: left }
#preguntasf li {text-align: left ;
list-style: decimal ;
color: silver}
#preguntasf ul {text-align: left }
#footer {background-image: url(objetos/footer-bg.jpg) ;
background-repeat: no-repeat ;
height: 35% ;
background-attachment: scroll ;
margin-top: 20px ;
float: bottom }
a {text-decoration: none ;
color: #45acf6 ;
font-family: calibri}
a:hover {color:white }
a:visited {color: none}
a:link {font-family: Calibri ;
text-decoration: none ;
color: #45acf6}
h1{font-family: Calibri ;
font-weight: bold ;
text-decoration: none ;
font-size: 20px }
h2{font-family: calibri ;
font-size: 20px ;
text-decoration: none ;
color: yellow}
p {font-size: 14px;
font-family: Calibri ;
color: silver }
h3{font-size: 14px ;
font-family: Calibri ;
color: black }

manmanu · 2 Dic 2008, 01:02 · Solicitar retirada

Hola limited,

ardua tarea la tuya.
Encuentro muchos errores en tú trabajo.
Pero pienso que estas haciendo un bonito trabajo, lo cual merece la pena.
Esto que comento es pura y llanamente para echarte una mano.

Por qué???? intentas meter 15 litros en una garrafa de 12 litros.
Todo se te desborda.

1 ejemplo importante;

tú escribes,

#global {width: 800px ;
margin: 4px auto }

luego escribes dentro de global;

#contenido {width:800px ;
margin: 10px 10px 10px 35px ;
text-align: left ;
border: white 1px solid}

¿Donde se mete eso?

Para trabajar con una plantilla,página o como lo quieras llamar, hay que utilizar la calculadora, y hacer las cuentas exactas para que todo entre en su contenido.

Tienes errores de posición para algunos elementos;
ejemplo, position: bottom - border: no-border - float: bottom right etc.etc.

Estas instrucciónes no funcionan bién, ni con firefox, ni con ortos navegadores.

Dame tú opinión, ¿debes repasar tú trabajo?

saludos manmanu

Limited · 2 Dic 2008, 17:11 · Solicitar retirada

Bueno manmanu, de antemano gracias por tu comentario, en un momento me pongo a editar el codigo.

Por otro lado decirte que las prisas provocan esto :S Lo hago todo rapido y no me fijo de muchas cosas como estas.
Para el border, el contenido seria: "border: none" ?
Es que la verdad no tengo mucha idea de html, poco mas que lo mencionado en el curso de CCTW.

He corregido varios errores mas pero sigue viendose mal en el firefox.