Las imágenes .gif y jpg no se ven al subirlas a internet

kettitaut · 11 Jul 2010, 20:00 · Solicitar retirada

Hola, ante todo mil gracias Jorgens porque estoy aprendiendo mucho con tu página.

Seguí el curso y todo está de maravillas usando el Html Kit. El problema que tengo es que al subirlas a internet, sale todo, menos las imágenes.

Aquí en el foro ingagué por si a alguien le pasaba lo mismo, pero las soluciones que encontré, no se aplican conmigo.

Por eso, pongo mi hoja de estilos y html para ver si encuentran algún error.

Quiero recalcar que las imágenes se muestran en mi html local, osea en los archivos q guardo en mi compu, pero al momento de subirlas a internet, no pasa lo mismo. No se muestran todas la imagenes.

Disculpa que sea tan extensa, aquí van las de estilo y html

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

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<link rel="stylesheet" href="estilo-ketty.css" type="text/css" media="all">
<title>Page title</title>
</head>
<body>
<div id="global">

<div id="curva-superior"></div>
<div id="cabecera">
<div id="logotipo">[contenido no disponible]</div>
<div id="publicidad">[contenido no disponible][contenido no disponible]</div>
</div>
<div id="navegacion"><ul>

Portada

Productos

Formas de Pago y Envío
</div>

<div id="contenido">

<div id="menu">
<h1>Título de Sección 1</h1>
<ul>

Enlace 1

Enlace 2

Enlace 3

Enlace 4

Enlace 4
</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>
<div id="fotos">[contenido no disponible]</div>

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>

[correo eliminado]

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

[correo eliminado]

[correo eliminado]
</div>
</div>

<div id="curva-inferior"></div>
</div>

</body>
</html>

*{margin:0px; padding:0px; border:0px}
p{tex-align:justify}
h1{font-size:1.2em; color:black; font-weight:bold; text-decoration:none; text-align:center}
h2{font-size:1.1em; color:black; font-weight:none; text-decoration:none; text-align:center}
body {text-align: center; background-color:LightBlue }
#global{width:800px; margin:4px auto}
#curva-superior { background-image: url(objetos1/curva-superior1.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:pink; border:black 1px solid; height:20px}
#navegacion li {float:left ; list-style:none ; margin: 0px 20px 0px 20px }
#navegacion ul { margin-left: 200px }
#contenido{background-color:plum; border-left:black 1px solid; border-right:black 1px solid}
#contenido p{margin: 5px 10px 0px 10px ; text-indent: 15px}

#menu {width: 150px ; float:left ;
text-align:left ; margin: 3px 10px 3px 3px; background-image: url(objetos1/menu-curva-inferior-1.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; background-image: url(objetos1/menu-curva-superior-1.gif); padding-top:12px }
#pie {background-color:white; 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 }
#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}

#curva-inferior { background-image: url(objetos1/curva-inferior1.gif);background-repeat: no-repeat ; width: 800px ;height:12px ;
overflow: hidden }

a{color:brown; text-decoration:none; display:block}
a:link{}
a:visited{}
a:hover{color:red; text-decoration:underline; background-color:silver}
a:active{}

Gracias de antemano por la respuesta

kettitaut · 12 Jul 2010, 00:36 · Solicitar retirada

Hola nuevamente, quería agregar, que estoy creando una pagina por mi cuenta y estoy tratando de subier mi propio logotipo, lo cual lo logro en la pag html local, pero al subirlas a mi web, no aparece. He probado de todas la formas, y resulta que si coloco el logotipo de CCTW, sí carga correctamente en la web. ¿pueden explicarme por que? Debo aclarar, que el logotipo mío tiene extensión .gif.

Por otro lado, quiero insertar fotos, pero no las carga tampoco, solo sale el recuadro con la medidoa de la foto y una x.

Todo los pasos del curso los he seguido al pie de la letra. Incluso haciendo vista previa todo está perfecto hasta las imágenes insertadas. El problema surge cuando las subo. Aquí les dejo mi subdominio

http://marianellagaragesales.onlinewebshop.net/productos/accesorios…

Gracias otra vez

fernando mendoza · 12 Jul 2010, 03:40 · Solicitar retirada

Hola bienvenidos/as donde todos/as aprendemos de uno y uno aprende de todos/ as: de acuerdo a la descrpcion de su problema parece que las imagenes no han sido subidas a la carpeta objetos del servidor intente con estas indicaciones para ver si resuelve si no es asi no avisa nuevamente.

Para subir carpeta objetos:
Si la carpeta objetos no esta creada tiene que crearla primero hacer clic en el botón derecho del ratón sobre la carpeta Web-ejemplo-cctw la que esta en Internet
New Create New Fólder en la ventana que se abre donde dice New Fólder name escribir objetos y hacer clic en OK.
Para subir las imágenes hacer clic derecho en el ratón sobre la carpeta objetos la que esta recién creada en Internet se abre un menú hacer clic en uplod se abre un menú buscar en ese la carpeta objetos hacer clic sobre ella y abajo donde dice tipo hacer clic en la marca que esta al lado de cancelar se abre un menú buscar en ese menú donde dice
All Files [*.*] hacer clic ok
Después empezar a subir uno por uno selecciona uno y le da clic en abrir y así hasta que los suba todos.
cortesia de nuestro amigo raulyure.
saludos.

kettitaut · 12 Jul 2010, 03:49 · Solicitar retirada

Hola Fernando. Muchas gracias por tu respuesta. Pero antes de escribir en el foro, hice precisamente lo que me dices: crear carpeta objetos, y empezar a subir todo el contenido.

Lo que me tiene loca es que sólo se observan algunos gráficos en la web a pesar de haber cargado la carpeta objetos de internet. Un ejemplo: yo creé mi propio logo, y no sube, pero cuando pruebo con el logo de CCTW, sí lo muestra. Igual me pasa con el logo de Mercado Libre, pero no muestra el de Ray-Ban, y todo está en la carpeta.

¿puede ser que sea el hosting el del problema? Estoy usando RazyHosting.com

fernando mendoza · 12 Jul 2010, 04:22 · Solicitar retirada

kettitaut veo que tus imagenes tienen problemas con la altura pero de eso se muy poco espera q uno de nuestros/tras profesores/ras que te orienten mejor .
saludos.

kettitaut · 12 Jul 2010, 05:36 · Solicitar retirada

Muchas gracias Fernando, estoy a la espera. Mientras estoy probando subirlas a otro hosting. A ver qué tal me va.

Myxtum · 12 Jul 2010, 06:58 · Solicitar retirada

Mira, hay un pequeño pero importante problema en el código de las imágenes. Y es que no les definiste la propiedad pixeles(px) al lado del ancho(width) y alto(height).

<div id="logotipo">[contenido no disponible]</div>

Revisa las demás y corrígelas que seguro es eso. Suerte.

kettitaut · 12 Jul 2010, 14:21 · Solicitar retirada

Hola Myxtum, gracias por ayudarme, pero lamentablemente, colocando "px" a los valores como dices, no surte ningún efecto.
Tengo entendido que cuando opero en html, no es necesario colocarlos más sí en las hojas de estilo css.

Por otro lado, acabo de subir la pagina a otro navegador, y sí me están subiendo los graficos gif en cabecera pero cuando intento subir las fotos en "contenido", aparece el odioso cuadradito con una "x" dentro.

Te doy mi link nuevo.

http://marianellagaragesales.vacau.com/

Myxtum · 12 Jul 2010, 23:21 · Solicitar retirada

Hola kettitaut, El segundo link no funciona.

No veo ningún error en el código que haga que las imágenes no se vean.

Me baso en el código de esta sección:
http://marianellagaragesales.onlinewebshop.net/productos/accesorios…

No obstante, se me ocurre algo que puede que hallas echo mal, y eso puede ser ponerle la extensión .gif como se muestra a continuación, logomarianella.gif . Te recuerdo que debes de poner el nombre completo de la imagen incluyendo la extensión original. Prueba cambiar el .gif por .png o .jpg que son los más comunes. Eso es para el código.

Ahora, puede que hayas renombrado la imagen dentro de la PC.
Ejemplo: la imagen se llamaba 34232.jpg y al cambiarle el nombre por uno que recuerdes como logomarianella le pusiste la extensión .gif cuando debería de ser logomarianella.jpg

Si ese es el caso, prueba esto.
- Be a tu carpeta objetos1 y abre la imagen, si es .gif se abrirá una ventana del buscador que uses tratando de mostrar la imagen, si la imagen no se ve en el navegador es porque le cambiaste la extensión a una .gif cuando debería de ser otra.

weno, suerte, y no dudes en volver a decir si se te soluciono o no.

kettitaut · 13 Jul 2010, 17:30 · Solicitar retirada

Hola Myxtum,

borre la carpeta FTP y la volví a cargar, y resulta que ahora me salen los logotipos. Pero la foto no :(.

Olvidate del segundo link que lo borre tambien. Seguimos con el primero osea:

//marianellagaragesales.onlinewebshop.net

Hice modificaciones en mi hoja de estilos y html, son pocas pero a ver si me encuentras el error en cuanto a por qué no puedo visualizar en internet la foto.

Este html es de la pag "accesorios.html"

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

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<link rel="stylesheet" href="../estilo-ketty.css" type="text/css" media="all">
<title>Page title</title>
</head>
<body>
<div id="global">

<div id="curva-superior"></div>
<div id="cabecera">
<div id="logotipo">[contenido no disponible]</div>
<div id="publicidad">[contenido no disponible][contenido no disponible]</div>
</div>
<div id="navegacion"><ul>

Portada

Productos

Formas de Pago y Envío
</div>

<div id="contenido">

<div id="menu">
<h1>Rubros</h1>
<ul>

Accesorios

Ropa

Herramientas
</div>

<h1>Anteojos Ray-Ban</h1>

</p>
<h2></h2>

Aviator 3025</p>
<div id="imagen">[contenido no disponible]</div>

</p>
<div id="caracteristicas">

Características:</p>

Marcos: Color Arista</p>

Cristales: G15 - XLT (verdes)</p>

Talles:</p>

55, 58 y 62</p>

Medidas:</p>

TALLE 55</p>

</p>

Cristales:</p>

Ancho: 55mm Largo: 48mm</p>

</div>

</div>

<div id="pie">
<div id="pieuno">
<ul>

[correo eliminado]

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

[correo eliminado]

[correo eliminado]
</div>
</div>

<div id="curva-inferior"></div>
</div>

</body>
</html>

y esta es la hoja de estilos

*{margin:0px; padding:0px; border:0px}
p{tex-align:justify}
h1{font-size:1.2em; color:black; font-weight:bold; text-decoration:none; text-align:center}
h2{font-size:1.1em; color:black; font-weight:none; text-decoration:none; text-align:center}
body {text-align: center; background-color:LightBlue }
#global{width:800px; margin:4px auto}
#curva-superior { background-image: url(objetos1/curva-superior1.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:pink; border:black 1px solid; height:20px}
#navegacion li {float:left ; list-style:none ; margin: 0px 20px 0px 20px }
#navegacion ul { margin-left: 200px }
#contenido{background-color:plum; border-left:black 1px solid; border-right:black 1px solid}
#contenido p{margin: 5px 10px 0px 10px ; text-indent: 15px}
#imagen{border-top: 20px; border-bottom: 20px}
#caracteristicas{text-align:left}
#menu {width: 150px ; float:left ;
text-align:left ; margin: 3px 10px 3px 3px; background-image: url(objetos1/menu-curva-inferior-1.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; background-image: url(objetos1/menu-curva-superior-1.gif); padding-top:12px }
#pie {background-color:white; 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 }
#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}

#curva-inferior { background-image: url(objetos1/curva-inferior1.gif);background-repeat: no-repeat ; width: 800px ;height:12px ;
overflow: hidden }

a{color:brown; text-decoration:none; display:block}
a:link{}
a:visited{}
a:hover{color:red; text-decoration:underline; background-color:silver}
a:active{}

por otro lado tengo las capturas de mi htmlkit para q veas los archivos de la carpeta objetos tanto local como internet, pero no sé como subirlas. Igual te digo que ambas están idénticas, subieron las que puse, pero no se visualizan en internet.

Disculpa tanta molestia.

Myxtum · 14 Jul 2010, 00:44 · Solicitar retirada

Hola,

Te alegrara saber que yo veo todas las imágenes perfectamente menos una. La que se encuentra encima de la etiqueta de sierre del body(</body>)

Te recomiendo que escribas la ruta de la imagen tu mism@ ya que el programa a veces sustituye el nombre de la imagen por signos y números. Esto sucede cuando la imagen tiene acentos, por lo que te recomiendo que no le pongas acentos en el nombre de las imágenes.

este es el código de la imagen.

[contenido no disponible]</p>

kettitaut · 14 Jul 2010, 01:28 · Solicitar retirada

Hola Myxtum

Sí estoy muy contenta pues ya resolví el problema. Voy a escribir aquí qué es lo que encontré porque ya te molesté mucho y probablemente alguien se pueda encontrar en la situación en la que estaba.

Resulta que al querer insertar las fotos, cuya extension es jpg, lo escribía manualmente, y no sé si por ahí le erré en algun simbolo o qué se yo. Lo cierto es que decidí insertar las imágenes con el Html Kit y EUREKA!!!, funcionó.

Cabe recalcar, que las imágenes siempre las pude ver hacien vista previa, pero al momento de subirlas (chequeee y rechequee mil veces si estabn completas las carpetas) no se veían nada.

Pero haciéndolo a traves del Html Kit, las fotos las puedo ver en internet.

Por otro lado, y sigue siendo mi incógnita, en el tema de subir los logos en la parte superior, si no es formato .gif, no se visualiza. Pero bueno, esto también ya lo arreglé.

Muchas gracias a Myxtum y a Fernando por su ayuda y preocupación.

Myxtum · 14 Jul 2010, 03:05 · Solicitar retirada

Weno, te recuerdo que si colocas la imagen con el HTML-kit el nombre de la imagen no debe llevar acento ni espacios entre palabras. Sino el programa sustituye los acentos/espacios por unos caracteres y en la vista previa lo ves bien, pero en la web no se ve.

Tal vez haya alguna manera de configurar el programa para que no haga eso pero no sé cómo.

Suerte.

kettitaut · 14 Jul 2010, 05:25 · Solicitar retirada

Gracias nuevamente Myxtum. Lo tendré presente.