Foros del Web » Creando para Internet » CSS »

Problema con imagagenes de susitucion

Estas en el tema de Problema con imagagenes de susitucion en el foro de CSS en Foros del Web. Hola, he realizado un pie con photoshop cs5, lo he ido cortando con la herramienta sector,. Una vez cortado todos los guarde y lo puse ...
  #1 (permalink)  
Antiguo 02/12/2010, 08:55
 
Fecha de Ingreso: diciembre-2010
Mensajes: 14
Antigüedad: 7 años
Puntos: 0
Mensaje Problema con imagagenes de susitucion

Hola, he realizado un pie con photoshop cs5, lo he ido cortando con la herramienta sector,.
Una vez cortado todos los guarde y lo puse en el pie de mi pagina, dentro de una etiqueta did con las mismas dimensiones.
Lo que me ocurre es que cuando arranco con firefoz para ver mi pagina resulta que salen huecos vacios entre sectores y sectores, sin embargo en explores no me salen esos huecos,¿por que sera? Son espacios chicos de varios pixeles
Expero que me hayais entendido
Me fuera gustado enviaaros unas fotos pero no me ha sido posible, es mi primera visita por los foros y no se mandar fotos, ¿Hay posibilidad de mandar fotos en este foro?
Gracias y un saludo
  #2 (permalink)  
Antiguo 02/12/2010, 13:10
Avatar de roc2107
ɹopɐɹǝpoɯ
 
Fecha de Ingreso: febrero-2003
Ubicación: León Guanajuato
Mensajes: 4.834
Antigüedad: 14 años, 9 meses
Puntos: 109
Respuesta: Problema con imagagenes de susitucion

Aquí puedes encontrar la manera para subir fotos: http://www.forosdelweb.com/f5/como-a...e-foro-566872/
__________________
Blog de Diseño Gráfico roc21.com || Exámenes

El secreto de la creatividad es saber esconder tus fuentes.
  #3 (permalink)  
Antiguo 04/12/2010, 12:15
 
Fecha de Ingreso: diciembre-2010
Mensajes: 14
Antigüedad: 7 años
Puntos: 0
Respuesta: Problema con imagagenes de susitucion

esto es lo que me pasa, a que sera debido
http://img718.imageshack.us/img718/6
  #4 (permalink)  
Antiguo 04/12/2010, 12:17
 
Fecha de Ingreso: diciembre-2010
Mensajes: 14
Antigüedad: 7 años
Puntos: 0
Respuesta: Problema con imagagenes de susitucion

[URL=http://img718.imageshack.us/i/fo
  #5 (permalink)  
Antiguo 04/12/2010, 12:22
 
Fecha de Ingreso: diciembre-2010
Mensajes: 14
Antigüedad: 7 años
Puntos: 0
Respuesta: Problema con imagagenes de susitucion

  #6 (permalink)  
Antiguo 04/12/2010, 14:12
 
Fecha de Ingreso: diciembre-2010
Ubicación: Argentina
Mensajes: 42
Antigüedad: 7 años
Puntos: 0
Respuesta: Problema con imagagenes de susitucion

Por favor, pon el código css para que podamos ayudarte. Es raro que los gifs no se ajusten, tu html está en divs o tablas? Para adelantarme, para mí con photoshop, siempre fue mejor guardar web en forma de divs que en tabla. Creo que deberías crear también el css y mostrarlo aquí.
  #7 (permalink)  
Antiguo 04/12/2010, 17:04
 
Fecha de Ingreso: diciembre-2010
Mensajes: 14
Antigüedad: 7 años
Puntos: 0
Respuesta: Problema con imagagenes de susitucion

Esta realizado en divs
body {
background-image: url(../imagenes/Fondoweb_prueba.png);
margin: 0px;
padding: 0px;
background-position: center;
}
#contenedor {
height: 2000px;
width: 800px;
margin-top: 0px;
margin-right: auto;
margin-bottom: 0px;
margin-left: auto;
background-color: #FFFFFF;
}
#cabezera {
background-image: url(../imagenes/cabezera_04.jpg);
height: 160px;
width: 800px;
}
#botonera {
height: 40px;
width: 800px;
background-color: #666666;
}
.inicio {
margin-left: 75px;
}
.deque {
margin-left: 100px;
}
.sigueme {
margin-left: 100px;
}


#contenido {
height: 1550px;
width: 800px;
background-color: #CCCCCC;
}
#ContenidoC1 {
margin: 30px;
float: left;
height: auto;
width: 500px;
background-color: #999999;
}
.presentacion {
height: auto;
width: 480px;
margin-top: 20px;
margin-right: auto;
margin-left: auto;
margin-bottom: 20px;
}

#ContenidoC2 {
float: right;
height: auto;
width: 210px;
margin-top: 30px;
margin-right: 30px;
white-space: nowrap;
}
.k {
height: 200px;
width: 200px;
}



#pie {
height: 251px;
width: 800px;
float: none;
}
  #8 (permalink)  
Antiguo 04/12/2010, 17:16
 
Fecha de Ingreso: diciembre-2010
Mensajes: 14
Antigüedad: 7 años
Puntos: 0
Respuesta: Problema con imagagenes de susitucion

Perdona pero nose si me explicado bien, por que he bisto el codigo y aparece algo de tablas .+
Te explico un poco, en photoshop e utilizado la herramienta sector y he seleccionado uno pòr uno los diferentes sitios web, y despues en dreamweaver los he colocado todo con la herramienta imagen de sustitucion

Esto es un poco de codigo
</div>
<div id="pie">
<!-- Save for Web Slices (Pie Acabado.psd) -->
<table id="Tabla_01" width="801" height="24" border="0" cellpadding="0" cellspacing="0">
<tr>
<td colspan="5"><img src="imagenes/Pie2/imagenes/Pie-Acabado_01.jpg" width="800" height="62" /></td>
<td width="10">
<img src="imagenes/espacio.gif" width="1" height="62" alt=""></td>
</tr>
  #9 (permalink)  
Antiguo 04/12/2010, 21:14
 
Fecha de Ingreso: diciembre-2010
Ubicación: Argentina
Mensajes: 42
Antigüedad: 7 años
Puntos: 0
Respuesta: Problema con imagagenes de susitucion

Pueden ser varias cosas:
1) ¿Reseteaste los valores de los navegadores? Deberías usar, al principio de tu css, el siguiente código, para resetear los estilos de los navegadores, que vienen definidos "de fábrica":
Cita:
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, sub, sup, tt, var, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td {
border:0pt none;
font-family:inherit;
font-size: 100%;
font-style:inherit;
font-weight:inherit;
margin:0pt;
padding:0pt;
vertical-align:baseline;}
2) Tienes el sitio en divs, pero lo que generaste con photoshop son tablas. Ojo con eso.
3) Normalmente, el div contenedor tiene un height=auto;

En síntesis, empiezas con el punto 1, sí o sí. Si sigue igual, pasas al punto 2, generas divs en vez de tablas (pero dejas el código que pusiste en el punto. Fijate el css que te tira photoshop (que es lo que tenés en el head del archivo html que te generó)
Después, dale sin miedo un valor de "height=auto;" a tu div contenedor.
Prueba y cuenta lo que pasó. Saludos
  #10 (permalink)  
Antiguo 05/12/2010, 00:26
Avatar de marioStudios
Colaborador
 
Fecha de Ingreso: octubre-2005
Ubicación: Chiapas; México.
Mensajes: 1.625
Antigüedad: 12 años, 1 mes
Puntos: 211
Respuesta: Problema con imagagenes de susitucion

Creo que mover este post a CSS seria mucho mejor, ahí te daran más ayuda propia del problema que tratas!!!
__________________
Diseño Gráfico Digital - Fotomontajes - marioStudios
Debes Mat 6:33 con Heb 11:1, DLB. Luc 2:14!!!
  #11 (permalink)  
Antiguo 05/12/2010, 12:41
 
Fecha de Ingreso: diciembre-2010
Mensajes: 14
Antigüedad: 7 años
Puntos: 0
Respuesta: Problema con imagagenes de susitucion

No he reseteado nada es lo primero que escucho,
El punto 3 no lo comprendo , me podeis ayudar
  #12 (permalink)  
Antiguo 06/12/2010, 07:38
 
Fecha de Ingreso: diciembre-2010
Mensajes: 14
Antigüedad: 7 años
Puntos: 0
Respuesta: Problema con imagagenes de susitucion

¿He hecho bien el reseteo?¿hay era donde se ponia el codigo ese ?
si es correcto lo que e hecho, me salen en la imagen mas espacios todavia



html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, sub, sup, tt, var, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td {
border:0pt none;
font-family:inherit;
font-size: 100%;
font-style:inherit;
font-weight:inherit;
margin:0pt;
padding:0pt;
vertical-align:baseline;}
body {
background-image: url(../imagenes/Fondoweb_prueba.png);
margin: 0px;
padding: 0px;
background-position: center;
}
#contenedor {
height: auto;
width: 800px;
margin-top: 0px;
margin-right: auto;
margin-bottom: 0px;
margin-left: auto;
background-color: #FFFFFF;
}
#cabezera {
background-image: url(../imagenes/cabezera_04.jpg);
height: 160px;
width: 800px;
}
#botonera {
height: 40px;
width: 800px;
background-color: #666666;
}
.inicio {
margin-left: 75px;
}
.deque {
margin-left: 100px;
}
.sigueme {
margin-left: 100px;
}


#contenido {
height: auto;
width: 800px;
background-color: #CCCCCC;
}

#pie {
height: 251px;
width: 800px;
}
  #13 (permalink)  
Antiguo 06/12/2010, 08:04
Avatar de paolamurias
Colaboradora
 
Fecha de Ingreso: junio-2006
Ubicación: Rosario
Mensajes: 2.317
Antigüedad: 11 años, 6 meses
Puntos: 189
Tema trasladado desde diseño gráfico
__________________
El mundo atribuye sus infortunios a conspiraciones de grandes malvados. Entiendo que subestima la estupidez. A. Bioy Casares

Mi portfolio
  #14 (permalink)  
Antiguo 06/12/2010, 13:58
 
Fecha de Ingreso: diciembre-2010
Mensajes: 14
Antigüedad: 7 años
Puntos: 0
Respuesta: Problema con imagagenes de susitucion

Habla en español colega
  #15 (permalink)  
Antiguo 06/12/2010, 15:21
Colaborador
 
Fecha de Ingreso: junio-2007
Mensajes: 5.798
Antigüedad: 10 años, 6 meses
Puntos: 538
Respuesta: Problema con imagagenes de susitucion

Creo Sr. Rafael que no va a encontrar la respuesta, en forma del código exacto que necesita.
A parte de lo que ya le han comentado anteriormente, el pasar un diseño gráfico (imagen) a código html + css no es un proceso tan automático.
Prueba de ello es la gran cantidad de empresas/personas que han hecho de ello su actividad económica. Tal como http://psdahtml.com/
Creo que antes o a la vez, debería adquirir unos conocimientos y práctica base para comprender la naturaleza de sus problemas (el porqué) y las posibles soluciones.
Manuales como los que hay en www.librosweb.es le será de utilidad.
  #16 (permalink)  
Antiguo 06/12/2010, 15:39
 
Fecha de Ingreso: diciembre-2010
Mensajes: 14
Antigüedad: 7 años
Puntos: 0
Respuesta: Problema con imagagenes de susitucion

No intento ganarme la vida con esto, tan solo en mi tiempo libre me gusta pasarlo emfrente del ordenador , y aprender cosas nuevas, en el camino encuentro muchas dificultades que de momento las voy resolviendo,.
Lo solucionare señor Kseso....
  #17 (permalink)  
Antiguo 07/12/2010, 14:55
Colaborador
 
Fecha de Ingreso: junio-2007
Mensajes: 5.798
Antigüedad: 10 años, 6 meses
Puntos: 538
Respuesta: Problema con imagagenes de susitucion

Cita:
Iniciado por Rafaelpc Ver Mensaje
No intento ganarme la vida con esto, tan solo en mi tiempo libre me gusta pasarlo emfrente del ordenador , y aprender cosas nuevas, en el camino encuentro muchas dificultades que de momento las voy resolviendo,.
Lo solucionare señor Kseso....
No me cabe la menor duda de que lo logrará. Y a nadie en el foro importa si lo suyo es sólo entretenimiento o actividad "profesional" para intentar ayudarle.
Y además siempre tendrá a mano estos foros para aquellas dudas concretas en las que se atore. No dude en consultarlas.

Lo que pretendía decirle es que pasar un diseño gráfico a código html+css no es algo automático e igual para todos y cada uno de los diseños.
En cada uno se precisa de un análisis para ver cómo enfocarlo y qué proceso seguir. Y que sin un enlace para ver insitu el problema, no se puede ofrecer una solución en forma de código. Símplemente porque sólo se pueden hacer suposiciones sobre qué está pasando y qué lo causa.

Esto era lo que quería transmitirle en el anterior.

No obstante, hay infinidad de tutoriales. Quizás alguno le sea de utilidad a su caso.

Última edición por kseso?; 07/12/2010 a las 15:37
  #18 (permalink)  
Antiguo 08/12/2010, 07:40
 
Fecha de Ingreso: diciembre-2010
Ubicación: Argentina
Mensajes: 42
Antigüedad: 7 años
Puntos: 0
Respuesta: Problema con imagagenes de susitucion

Hola de nuevo. Primero que todo, convierte la tabla del pie en divs. Segundo, revisa todas las unidades en pixeles. Porque si hay 1 px de más o de menos en el ancho o en el alto, te saltan espacios en blanco o desbordamientos.
Y lo más importante: Si vas a escribir dentro de un div: ATENCION: La imagen del div no debe estar en html, sino como background del div, escrito en css, o sea:

ESTO ES VALIDO:

Código HTML:
Cita:
<div id="prueba">Hola esto es una prueba</div>
Codigo CSS
Cita:
#prueba {background-image:url(../carpeta/imagen.jpg); width:500px; height:50px;}
ESTO TE AGREGA ESPACIOS

Código HTML:
Cita:
<div id="prueba"><img src="carpeta/imagen.jpg"/> Hola esto es una prueba</div>
Codigo CSS
Cita:
#prueba {width:500px; height:50px;}
Y por último:
Si te olvidas de poner px tendrás esos espacios en blanco con toda seguridad.

Hazlo y después nos cuentas

Última edición por Anotadorcom; 08/12/2010 a las 07:48
  #19 (permalink)  
Antiguo 12/12/2010, 11:25
 
Fecha de Ingreso: diciembre-2010
Mensajes: 14
Antigüedad: 7 años
Puntos: 0
Respuesta: Problema con imagagenes de susitucion

Muy buena respuesta, pero para poner dentro del div las imagenes en background como se hace,¿todos con estilos css.?
Yo he puesto todas las imagenes con la herramienta de sustitucion de imagenes para que al pasar el cursor por lo alto cambie de forma, y eso me genera un monton de tablas.
De que manera lo puedo hacer.
¿como cambio las tablas a div?, Lo he intentado pero se me desencaja mas todavia

Que sera lo que ago mal
Te pongo un poco del codigo a ver si me podrias hacer un ejemplo de lo que haciendo referencia a lo que me comentastes antes
Muchas gracias
<div id="pie">
<!-- Save for Web Slices (Pie Acabado.psd) -->
<table id="Tabla_01" width="801" height="24" border="0" cellpadding="0" cellspacing="0">
<tr>
<td colspan="5"><img src="imagenes/Pie2/imagenes/Pie-Acabado_01.jpg" width="800" height="62" /></td>
<td width="10">
<img src="imagenes/espacio.gif" width="1" height="62" alt=""></td>
</tr>
<tr>
<td width="177"><a href="http://www.elhacker.net/" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('hacker','','imagenes/Pie2/imagenes/Pie-Acabado_02.jpg',1)"><img src="imagenes/ulti/imagenes/Pie-Acabado_02.jpg" alt="Hacker" name="hacker" width="177" height="29" border="0" id="hacker" /></a></td>

Etiquetas: Ninguno
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 15:08.