Foros del Web » Creando para Internet » CSS »

Fondo fuera pág vs fondo dentro pág

Estas en el tema de Fondo fuera pág vs fondo dentro pág en el foro de CSS en Foros del Web. Hola a todos, me encuentro con el siguiente problema: resulta que tengo una página a la que le quiero mantener un fondo blanco, pero "fuera ...
  #1 (permalink)  
Antiguo 14/01/2007, 14:19
 
Fecha de Ingreso: enero-2007
Ubicación: perdida entre líneas de código...
Mensajes: 235
Antigüedad: 10 años, 11 meses
Puntos: 1
Fondo fuera pág vs fondo dentro pág

Hola a todos, me encuentro con el siguiente problema:
resulta que tengo una página a la que le quiero mantener un fondo blanco, pero "fuera de la pág" (cómo si fuera el gris que se ve en este sitio a ambos lados de la pág central) quiero poner una textura x, el problema es que veo la textura en todo el fondo!!
Probé poniendo background al contenedor gral de mi pág y queda bco, pero el pie, debe quedar afuera y a eso se le ve el fondo de la textura.

Acá les mando el código:
body {
font-family:"Trebuchet MS", Tahoma, Arial;
font-size:12px;
text-align:center;
line-height:1.2em;
background-color:#8C953B;
background-image:url(imagenes/pattern.gif);
}

#contenedor {
width:950px;
height:auto;
margin:0 auto 0 auto;
text-align:center;
padding:0;
border:1px solid #8C953B;
background-color:#FFFFFF;
}
el "contenedor incluye "toda" la pág, la barra lateral de la botonera y el encabezado con el logo, etc.
Alguien sabe qué puedo estar haciendo mal?
  #2 (permalink)  
Antiguo 14/01/2007, 17:48
Avatar de Mikmoro
Colaborador
 
Fecha de Ingreso: octubre-2006
Ubicación: K-pax
Mensajes: 7.228
Antigüedad: 11 años, 2 meses
Puntos: 279
Re: Fondo fuera pág vs fondo dentro pág

Pues justamente lo que no has puesto es el código css del pie
¿El pie no te funciona poniéndole también un color de fondo como al contenedor?
Y otra pregunta: ¿No podría estar también el pie dentro del contenedor?
Pon si puedes todo el código html y css que se verá mejor el problema.

Mikel.
  #3 (permalink)  
Antiguo 15/01/2007, 11:28
 
Fecha de Ingreso: enero-2007
Ubicación: perdida entre líneas de código...
Mensajes: 235
Antigüedad: 10 años, 11 meses
Puntos: 1
Re: Fondo fuera pág vs fondo dentro pág

Bueno estoy queriendo poner el cód completo pero me sale un mens de error que dice que solo puedo incluir enlaces hacia otros sitios luego de haber publicado al menos 30 mens.
No creo estar poniendo enlaces, solo copio el código, a que se refieren con eso? tengo que bporrar alguna parte?
Bueno gracias por la respuesta!
  #4 (permalink)  
Antiguo 15/01/2007, 11:50
Avatar de Mikmoro
Colaborador
 
Fecha de Ingreso: octubre-2006
Ubicación: K-pax
Mensajes: 7.228
Antigüedad: 11 años, 2 meses
Puntos: 279
Re: Fondo fuera pág vs fondo dentro pág

Será por la cabecera del html, que ya pondrá un link. Sólo busca donde salga http o www y sepáralos con espacios, y ya podrás ponerlo.

Mikel.
  #5 (permalink)  
Antiguo 15/01/2007, 12:25
 
Fecha de Ingreso: enero-2007
Ubicación: perdida entre líneas de código...
Mensajes: 235
Antigüedad: 10 años, 11 meses
Puntos: 1
De acuerdo Re: Fondo fuera pág vs fondo dentro pág

<link rel=stylesheet href="mis-estilos.css" type="text/css" />
<style type="text/css">
.barra-lateral {
float:left;
width:150px;
border-right:#999900 1px solid;
height:800px;
background-color: #f4f3d4;
}
.contenedor-central {
margin: 0;
float:left;
width: 788px;
padding:20px 0 0 10px;
background-color:#FFFFFF;
height:780px;
}
.cont-texto-1-nivel{
float:left;
width:760px;
height:160px;
margin-bottom:auto;
}

.img2 {
margin:5px 20px 10px 0px;
margin-top:0px;
float:left;
font-size: 10px;
width: 196px;
height: 154px;
margin-bottom:auto;
}
.texto {
float:left;
width:530px;
height: 100%;
line-height: normal;
}
.texto2 {
float:left;
width:770px;
margin-top:5px;
line-height: normal;
}
.barra-de-titulo {
float:left;
width:770px;
}
h1 {
color:#8C953B;
font-size:16px;
font-weight: bolder;
text-align: left;
margin-top: 5px;
}
h2 {
text-align:left;
color:#999999;
font-size:16px;
}
h3 {
color:#8d963d;
font-size:20px;
font-weight: bolder;
text-align: left;
margin-top:5px;
}
.h2 {
float:left;
width:390px;
height:20px;
margin: 40px 0 0 0;
text-align:left;
color:#666666;
font-size:12px;
font-weight: bolder;
font-variant:small-caps;
}

ul {
color:#000000;
list-style-type:square;
list-style-position:inside;
}

.img {
margin:0 15px 0 0;
float:left;
font-size: 10px;
background-color: #FFFFFF;
width: 138px;
}
.texto2nivel {
float:left;
width:770px;
text-align: left;
margin-top:10px;
margin-bottom:5px;
}
.cont-texto3nivel{
float:left;
padding:5px 0px 0px 10px;
background-color: #f4f3d4;
border-bottom: solid 1px #7b8519;
border-top: solid 1px #7b8519;
width: 760px;
height:180px;
margin-top:5px;
}
.columna-1 {
float:left;
padding:0px 15px 10px 0;
width:370px;
line-height:normal;
border-right:solid #8c953b 1px;
}
.text-imagen {
float:right;
width:240px;
height:53px;
padding-top: 50px;
}
.columna-2 {
float:left;
padding:0px 0 10px 15px;
width:370px;
line-height: normal;
}
.columna-3 {
float:right;
width:395px;
height:110px;
margin-top: 20px;
}
.titulo {font-size: 20px}
.style4 {font-size: 12px}
.style5 {font-size: 16px}
.titulo-verde-12pt {font-size: 12px; font-weight: bold; }
</style>

<!--[if IE]>
<style>
#contenedor{
border:#899337 2px solid;
width:950px;
margin:0 auto 0 auto;
text-align:center;
padding:0;
background-color:#FFFFFF;
}
.contenedor-central {
margin: 0px 0px 0px 3px;
height:200px;
float:left;
width: 780px;
}
.barra-lateral {
float:left;
width:150px;
border-right:#999900 1px solid;
height:800px;
background-color: #f4f3d4;
}
.titulo {
font-size:20px;
color:#8C953B;
text-align:left;
}
.barra-de-titulo {
float:left;
width:770px;
}
.texto {
float:left;
width:530px;
height: 100%;
line-height: normal;
}
.style4 {
font-size:12px
}
.style5 {
font-size:16px
}
.texto2nivel {
float:left;
width:770px;
color:#000000;
padding:0px 0px 10px 0px;
text-align: left;
margin: 10px 0 0 0;
margin-top: 0px;
border-top: 10px solid #DEDCB0;
font-weight: normal;
}
.cont-texto3nivel{
float:left;
padding:5px 0px 0px 10px;
background-color: #f4f3d4;
border-bottom: solid 1px #7b8519;
border-top: solid 1px #7b8519;
width: 760px;
height:135px;
margin-top:10px;
}
.columna-1 {
float:left;
padding-top:10px;
width:370px;
}
.columna-2 {
float:right;
padding-top:10px;
width:370px;
}
.columna-3 {
float:right;
width:395px;
height:110px;
margin-top:20px;
}
.img {
margin:0 15px 0 0;
float:left;
font-size: 10px;
background-color: #FFFFFF;
width: 138px;
}
.text-imagen {
float:right;
width:240px;
height:25px;
padding-top:50px;
}

.img2 {
margin:5px 10px 0px 0px;
float:left;
font-size: 10px;
width: 200px;
}

</style>
<![endif]-->


<div id="contenedor">
<div class="logo1"><img src="imagenes/cabecera_01.gif" alt="logo" width="314" height="107"></div>
<div class="flash"><img src="imagenes/cabecera_02.jpg" alt="flash" width="636" height="107" /></div>
<div class="logo2"><img src="imagenes/cabecera_02.gif" alt="logo" width="950" height="35"></div>

<div class="contenedor-central">
<div class="cont-texto-1-nivel">
<div class="img2"><img src="imagenes/terapia.jpg" alt="centro familiar" width="203" height="152" /></div>
<div class="texto">
<h1 class="titulo">Centro Familiar Eirene</h1>
<p align="left">Profesionales cristianos al servicio
de la familia y de la comunidad.</p>
<p align="left" class="titulo style4">&nbsp;</p>
<h1 align="left" class="titulo style4"><span class="style5">Nuestro Prop&oacute;sito</span></h1>
<p align="left"> El Centro Familiar es un lugar donde las personas y las instituciones
pueden recibir ayuda para enriquecer sus v&iacute;nculos y resolver
situaciones problem&aacute;ticas.</p>
</div>
</div>
<div class="barra-de-titulo">
<h1 align="left" class="style5">Nuestros Servicios </h1>
</div>
<div class="columna-1">
<h1 align="left"><span class="titulo-verde-12pt">Area de Psicolog&iacute;a:</span></h1>
<p align="left">Terapia
Familiar, individual y de pareja. Se atiende a ni&ntilde;os, adolescentes
y adultos. Orientaci&oacute;n
sobre problem&aacute;ticas espec&iacute;ficas.</p>
<p align="left">

<p align="left">
<hr style="border:1px dashed #999999; width:360px" />
&nbsp;</p>
<h1 align="left"><span class="titulo-verde-12pt">Area de Psicopedagog&iacute;a:</span></h1>
<p align="left">Detecci&oacute;n
y tratamiento de problemas de aprendizaje. Orientaci&oacute;n Vocacional.
Orientaci&oacute;n a
Padres.</p>
</div>
<div class="columna-2">
<h1 align="left"><span class="titulo-verde-12pt">Area Legal:</span></h1>
<p align="left">Asesoramiento
en asuntos jur&iacute;dicos a familias,
individuos e instituciones.</p>
<p align="left">

<hr style="border:1px dashed #999999; width:360px" />&nbsp;</p>
<h1 align="left"><span class="titulo-verde-12pt">Area de Consultoria
Educativa:</span></h1>
<p align="left">Diagn&oacute;stico, asesoramiento y
elaboraci&oacute;n de estrategias frente a problemas de dif&iacute;cil
resoluci&oacute;n en las instituciones educativas. Orientaci&oacute;n
a directivos, docentes, alumnos y padres.</p>
</div>
<div class="columna-3">
<div class="img"><img src="imagenes/Maria Elena Mamarianpeq.jpg" alt="Mar&iacute;a Elena Mamarian de Partamian" width="138" height="104" /></div>
<div class="text-imagen"> <h1><span class="style4">Coordinadora:<br />
Lic. Maria Elena Mamarian de Partamian
</span><br />
<span class="link">[email protected] </span></h1>
</div>
</div>

</div>
<div class="pie">Eirene Argentina - 2004 -2007 - Todos los derechos reservados<br />
Armon&iacute;a Plena - Servicio Integral a la Familia - Asociaci&oacute;n Civil - Resoluci&oacute;n IGJ N&ordm; 0000987 - Al servicio del prop&oacute;sito de Dios</div>
<div class="borde-cierre"></div>
</div>
</body>
</html>
  #6 (permalink)  
Antiguo 15/01/2007, 12:26
 
Fecha de Ingreso: enero-2007
Ubicación: perdida entre líneas de código...
Mensajes: 235
Antigüedad: 10 años, 11 meses
Puntos: 1
De acuerdo Re: Fondo fuera pág vs fondo dentro pág

Solo para aclarar, diré que #contenedor es quien contiene a tooooda la pág (incluyendo la barra lateral que contiene enlaces, botonera, etc) ,el encabezado y el resto del contenido)
El .contenedor central es el que contiene la info dinámica.
y el pie a veces lo he puesto dentro del contenedor central y asi solucioné el problema, pero eso no siempre funciona, en realidad el problema surge cuando el contenido dinámico es demasiado pequeño en relación al alto de la barra lateral, entonces el pie me queda al medio de la pág (en realidad a 20px por debajo de lo último que aparece porque asi lo puse el el css) quiero que me quede siempre al final y que el fondo sea bco.
Buenoi mil gracias al que se digne a leer este choclo y le encuentre una respuesta!
Acá van los estilos que tengo en un archivop por separado .css


* {
margin: 0;
padding: 0;
}


body {
font-family:"Trebuchet MS", Tahoma, Arial;
font-size:12px;
text-align:center;
line-height:1.2em;
background-color:#8C953B;
background-image:url(imagenes/pattern.gif);
}

#contenedor {
width:950px;
height:auto;
margin:0 auto 0 auto;
text-align:center;
padding:0;
border:1px solid #8C953B;
background-color:#FFFFFF;
}
.logo1 {
margin: 0;
width: 314px;
float: left;
}
.flash {
margin:0;
float:left;
width: 636px;
}
.logo2 {
margin:0;
float:left;
width: 950px;
}

.botonera {
float:left;
padding: 20px 0 0 20px;
}

.buscar {
float:left;
padding-top: 20px;
margin: 0 0 0 5px;
}

.texto-barra-lateral {
float:left;
margin: 10px 0 0 3px;
width: 130px;
padding: 10px 0 5px 10px;
border-top: solid 1px #8C953B;
}

.form {
float:left;
margin: 0 0 0 5px;
}

.link {
font-size:12px;
color:#FF6600;
text-decoration: none;
font-style:italic;
}
.boton {
font-size:12px;
border:#8C953B solid 1px;
background-color:#DEDCB0;
color:#8C953B;
width:60px;
font-weight: bold;
margin-top: 5px;
}

.pie {
float:right;
width:780px;
margin-top:20px;
border-top: 1px solid #8C953B;
color:#999999;
font-style:italic;
padding:5px 0 5px 0;
z-index:2;
}

.borde-cierre {
float:left;
background-color:#8C953B;
width:950px;
height:15px;
}
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 04:34.