Problema con imagagenes de susitucion

[Rafaelpc]

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

[roc2107]

Aquí puedes encontrar la manera para subir fotos: http://www.forosdelweb.com/f5/como-a...e-foro-566872/

[Rafaelpc]

esto es lo que me pasa, a que sera debido
http://img718.imageshack.us/img718/6

[Rafaelpc]

[URL=http://img718.imageshack.us/i/fo

[Rafaelpc]

[Anotadorcom]

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í.

[Rafaelpc]

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

[Rafaelpc]

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>

[Anotadorcom]

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":

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

[marioStudios]

Creo que mover este post a CSS seria mucho mejor, ahí te daran más ayuda propia del problema que tratas!!!

[Rafaelpc]

No he reseteado nada es lo primero que escucho,
El punto 3 no lo comprendo , me podeis ayudar

[Rafaelpc]

¿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;
}

[paolamurias]

Tema trasladado desde diseño gráfico

[Rafaelpc]

Habla en español colega

[kseso?]

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.

[Rafaelpc]

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....

[kseso?]

Iniciado por Rafaelpc

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.

[Anotadorcom]

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:

<div id="prueba">Hola esto es una prueba</div>

Codigo CSS

#prueba {background-image:url(../carpeta/imagen.jpg); width:500px; height:50px;}

ESTO TE AGREGA ESPACIOS

Código HTML:

<div id="prueba"><img src="carpeta/imagen.jpg"/> Hola esto es una prueba</div>

Codigo CSS

#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

[Rafaelpc]

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>