Web no se visualiza bien en firefox

hegete · 23 Dic 2010, 12:43 · Solicitar retirada

Hola a todos. Segui el curso paso a paso y cree una web, que me visualiza bien en IE, pero muy mal en Firefox y Crome. Las imagenes salen descuadradas y el texto de la portada no se ve.

Os dejo la dirección de la web para que le echeis un vistazo y me podais ayudar a corregir los posibles errores.

http://alvaromontajes.onlinewebshop.net/index.html

Gracias por este estupendo curso, que me a ayudado mucho a comprender la creación y diseño de paginas web.

Os dejo tambien los codigos:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
<title>Montajes Mediterraneo</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"><FONT Color="#000000 ">BIENVENIDOS A MONTAJES MEDITERRANEO
EMPRESA DE SERVICIOS
</FONT></div>
</div>
<div id="navegacion"><ul>

portada

montajes

experiencia

empresas

fotos
</div>

<div id="contenido">
<p class="centrado">[contenido no disponible]</p>
<p class="centrado">[contenido no disponible]</p>
<p class="centrado">[contenido no disponible]</p>
<p class="centrado">[contenido no disponible]</p>
<p class="centrado">[contenido no disponible]</p>
<p class="centrado">[contenido no disponible]</p>
<p class="centrado">[contenido no disponible]</p>
<p class="centrado">[contenido no disponible]</p>
<p class="centrado">[contenido no disponible]</p>
<p class="centrado">[contenido no disponible]</p>

<h1>PAGINA EN CONSTRUCCIÓN</h1>

<h2></h2>

</p>
</div>
<div id="pie">
<div id="pieuno">

</p>
</div>
<div id="piedos">[correo eliminado]

TELEFONO:609528410
TELEFONO:625586640</p></div>
<div id="pietres">[contenido no disponible]</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:#2F4F4F ; 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 }
body {background-color: #1C1C1C}

#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:270px ; float:left}
#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: 60px }
#contenido {background-color: orange ; border-left: black 1px solid ;
border-right: black 1px solid }
#contenido p {margin: 5px 5px 0px 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 {text-decoration:none ; font-size:12px ; padding-top:12px ;
background-image: url(objetos/menu-parte-superior.gif)}
#pie { background-color: grey ;
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: black ; text-decoration:none ; display: block}
a:link {}
a:visited {}
a:hover {color:black ; text-decoration:underline ; background-color:white }
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: gray}
#pie a:active {color:black}
#logotipo a {}
#logotipo a:link {}
#logotipo a:visited {}
#logotipo a:hover {background-color: white}
#logotipo a:active {}

Yaneth · 23 Dic 2010, 16:43 · Solicitar retirada

tienes algunos errores de medidas

fijate cuanto mide tu cabecera de altura en el css
y fijate cuanto mide tu logotipo de altura en html

verás como no contiene, y hace que se desborde

las imgenes que tiennes en contenido
como deben ir???

una al lado de la otra, o una debajo de otra???

saludos

hegete · 24 Dic 2010, 00:58 · Solicitar retirada

Hola, las imagenes van una al lado de otra. Tal como se ve con IE.

Los errores de medida creo que los repare. Aun asi sigue sin visualizarse el texto de la cabecera en Firefox.

Codigo texto:<div id="publicidad"><FONT Color="#000000 ">BIENVENIDOS A MONTAJES MEDITERRANEO
EMPRESA DE SERVICIOS
</FONT></div>
</div>

arigrodriguez1201 · 24 Dic 2010, 08:41 · Solicitar retirada

Hola yo estoy viendo tu pagina con firefox y veo BIENVENIDOS A MONTAJES MEDITERRANEO
EMPRESA DE SERVICIOS

hegete · 24 Dic 2010, 14:21 · Solicitar retirada

Caray, el problema era de mi navegador, concretamente del Adblock plus, que identifica el texto de la cabecera como publicidad.

Me queda el problema de las imagenes, que es el que más quebraderos de cabeza me esta dando.

Yaneth · 24 Dic 2010, 16:18 · Solicitar retirada

para seguir revisando, debes volver a pegar los codigos corregidos

saludos

Webs-ds · 24 Dic 2010, 16:44 · Solicitar retirada

Haber,, yo te aconsejaría que uses el CSS, es decir, una hoja de estilo para tus imágenes, me explico... tu tienes creado una hoja de estilos que es "estilo-general", pues te aconsejo que uses ESA hoja para dar atributos, etc a todos los divs, imagenes, texto etc..
Bueno, yo te recomendaría que uses Divs, es decir, la primera linea de dos fotos, q tengas dos divs, y le das un "float:left" y un "float:right", y asi con todas las lineas que quieras, si tienes 8 fotos, pues 4 lineas con dos divs cad auno,, nose si me explico. Para que se vea bien en TODOS los navegadores, yo por lo menos, siempre trato de usar Divs,, y asi controlo los anchos y altos.
Mira mi web, que se ve identico en todo slos navegadores.. cualquier duda más,, hazmelo saber,, te echaré una mano ;)
http://www.webs-ds.com Saludos!! y Feliz Navidad!!!

Webs-ds · 24 Dic 2010, 16:45 · Solicitar retirada

Haber,, yo te aconsejaría que uses el CSS, es decir, una hoja de estilo para tus imágenes, me explico... tu tienes creado una hoja de estilos que es "estilo-general", pues te aconsejo que uses ESA hoja para dar atributos, etc a todos los divs, imagenes, texto etc..
Bueno, yo te recomendaría que uses Divs, es decir, la primera linea de dos fotos, q tengas dos divs, y le das un "float:left" y un "float:right", y asi con todas las lineas que quieras, si tienes 8 fotos, pues 4 lineas con dos divs cad auno,, nose si me explico. Para que se vea bien en TODOS los navegadores, yo por lo menos, siempre trato de usar Divs,, y asi controlo los anchos y altos.
Mira mi web, que se ve identico en todo slos navegadores.. cualquier duda más,, hazmelo saber,, te echaré una mano ;)

http://www.webs-ds.com

Saludos!! y Feliz Navidad!!!

hegete · 24 Dic 2010, 18:28 · Solicitar retirada

Hola Yaneth, los codigos rectificados los edite en mi primer mensaje. gracias por tu ayuda.

Yaneth · 25 Dic 2010, 02:34 · Solicitar retirada

hola
debes recordar una cosa
esto

es un parrafo
que es un parrafo?? que termina una linea y continua en la siguiente dejando una linea en blanco

algo como esto

esto es un parrafo

y aqui empieza otro

si tu deseas que las imagenes esten una al lado de la otra debes quitarle la etiqueta parrafo

asi
[contenido no disponible]

con eso deberia ponerte las imagenes como lo deseas

si no lo consigues, entonces ve al css como te indicó webs_ds
y pones asi

.seguida{float:left}

<img class="seguida" etc etc etc>

espero que con eso se solucione

y felices fiestas!!

hegete · 26 Dic 2010, 12:22 · Solicitar retirada

Felices fiestas y gracias de nuevo por vuestra ayuda, Webs-ds y Yaneth.

Las imagenes quedaron tambien alineadas en Firefox aunque sin los margenes o sea pegadas unas a otras. Pero bueno lo dejare de momento asi.

Yaneth · 27 Dic 2010, 16:21 · Solicitar retirada

vamos poco a poco

si hiciste esto:

.seguida{float:left}

<img class="seguida" etc etc etc>

ahora debes agregarle el margen en el css

.seguida{float:left; margen: 0px 0px 0px 0px}

recuerda que los 0px van en este orden: arriba, derecha, abajo, izquierda

saludos