no se si sera correcto pero creo que he dado con una solucion despues de trastear mucho. Al menos lo he comprobado en todos los navegadores y me funciona.
me he creado un fondo en forma de tira que mostraba los colores de los div con sus bordes y lo he repetido verticalmente (fondo3colores.gif). Y la imagen que tenia de fondo la he metido en un div aparte fuera de pagina, con un posicionamiento absoluto y a la vez le he dado al body un "overflow-x:hidden", para que solo las pantallas con gran resolucion vean esa imagen que unicamente tiene un sentido decorativo cuando la pagina se abre a una resolucion alta.
A la vez he tenido que meterle un posicionamiento absoluto tambien al contenedor principal porque me mostraba un segundo scroll cuando se escondia parte del texto.
Este es el codigo:
Código:
* {
}
html, body {
height: 100%;
margin: 0px;
background-color: #ede5db;
background-image: url(links/fondo3colores.gif);
background-repeat: repeat-y;
overflow-x: hidden;
}
#contenedorfuera {
background-image: url(links/Floral-Illustration.gif);
background-repeat: no-repeat;
position: absolute;
height: 600px;
width: 1120px;
left: 1061px;
top: 400px;
}
#contenedor {
height: 700px;
width: 1061px;
position: absolute;
}
#contenedor #divleft {
float: left;
}
#contenedor #divright {
float: left;
clear: right;
}
#contenedor #divright #secciones {
font-family: 'Sansita One', cursive;
font-size: 12px;
width: 280px;
padding-left: 37px;
padding-top: 37px;
border-right-width: 7px;
border-right-style: solid;
border-right-color: #000;
height: 100%;
background-color: #c7b299;
color: #000;
}
#contenedor #divleft #foto img {
float: left;
clear: right;
height: 509px;
width: 730px;
border-right-width: 7px;
border-right-style: solid;
border-right-color: #000;
}
#contenedor #divleft #cuadrologo {
background-color: #FFF;
background-image: url(links/logo.jpg);
background-position: 30px 28px;
width: 215px;
border-top-width: 7px;
border-right-width: 7px;
border-top-style: solid;
border-right-style: solid;
border-top-color: #000;
border-right-color: #000;
background-repeat: no-repeat;
font-family: Arial, Helvetica, sans-serif;
font-size: 9px;
padding-top: 140px;
padding-left: 38px;
float: left;
clear:left;
color: #000;
}
.textoTF {
font-family: 'Sansita One', cursive;
font-size: 10px;
color: #736357;
}
.textoTF-blanco {
font-family: 'Sansita One', cursive;
font-size: 10px;
color: #ede5db;
}
a {
text-decoration: none;
}
#contenedor #divleft #texto {
background-color: #736357;
border-top-width: 7px;
border-right-width: 7px;
border-top-style: solid;
border-right-style: solid;
border-top-color: #000;
border-right-color: #000;
width: 400px;
float: left;
font-family: 'Sansita One', cursive;
font-size: 28px;
padding-top: 33px;
padding-left: 35px;
padding-right: 35px;
color: #c7b299;
}
.texto-comun {
font-family: Arial, Helvetica, sans-serif;
font-size: 11px;
color: #FFF;
text-align: justify;
}
.texto-comunNegro {
font-family: Arial, Helvetica, sans-serif;
font-size: 11px;
color: #000;
text-align: justify;
}
.texto-comunSANSITA {
font-family: 'Sansita One', cursive;
font-size: 11px;
color: #c7b299;
}
.texto-comunSANSITAblanco {
font-family: 'Sansita One', cursive;
font-size: 11px;
color: #ede5db;
}
a:link {
color: #000;
}
a:visited {
color: #000;
}
a:hover {
color: #000;
}
a:active {
color: #000;
}
y aqui el resultado:
http://www.cocinasconestilo.com/contacto-5.html
El unico problema que me queda por resolver cuando haya aplicado estos cambios a todas las paginas es conseguir centrar un texto verticalmente. Un texto que en todos los navegadores se ve bien menos en IE:
Aqui vereis de que hablo:
http://www.cocinasconestilo.com