Foros del Web » Creando para Internet » CSS »

(Ayuda) 3 problemas visibles

Estas en el tema de (Ayuda) 3 problemas visibles en el foro de CSS en Foros del Web. Hola, como andan???? No quiero seguir con el diseño antes de solucionar estos problemitas Mirar aca 1ero: el problema con el pie de pagina (footer) ...
  #1 (permalink)  
Antiguo 10/07/2008, 09:19
 
Fecha de Ingreso: marzo-2008
Mensajes: 1.020
Antigüedad: 16 años, 8 meses
Puntos: 21
(Ayuda) 3 problemas visibles

Hola, como andan????

No quiero seguir con el diseño antes de solucionar estos problemitas

Mirar aca

1ero: el problema con el pie de pagina (footer) que no se adapta al contenido y no baja cdo este aumenta.

2do: Cdo le doy zoom o cambio de resolucion el contenido se va hacia la derecha y no se adapta.

3ero: El sidebar right esta un nivel debajo del left y center. como lo alineao horizontalmente a los tres div??

ACA va el codigo del layout:

Código PHP:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Bienvenidos al VENI</title>
</head>
<style type="text/css">
*
{
  padding:0;
  margin:0;
  outline:0;
}

html, body 
{
    height:100%;
    font-family:Calibri;
    font-size:1em;
    outline:0;
    background-image:url(imagenes/fondo.jpg);
    background-repeat:repeat-x;
}

#header
{
    position: absolute;
    top: 84px;
    left:13%;
    margin:0 auto;
}

#content
{
    min-height:40%;
    height:auto;
    width:100%;
    position:absolute;
    top:275px;
    text-align:center;
}

#sidebar-left
{
    float:left;
    width:25%;
    border-right:2px dotted #808080;
    
}

#sidebar-center
{
    float: none ;
    width:50%;
}

#sidebar-right
{
    float: right ;
    width:25%;
    
}

#footer
{
    position:absolute;
    bottom:0;
    font-size:2em;
    text-align: center;
    width:100%;
    border-top:2px solid #000000;
}


</style>
<body>

<div id="header"><img src="imagenes/header.png" /></div>


<div id="content">


<div id="sidebar-left"><?php include('http://www.nutrimel.com.ar/veni/includes/sidebar-left.php'); ?></div>

<div id="sidebar-center">SIDEBAR-CENTER</div>

<div id="sidebar-right"> SIDEBAR-RIGHT</div>

</div>


<div id="footer">Pie de Pagina</div>



</body>
</html>
  #2 (permalink)  
Antiguo 10/07/2008, 12:30
Avatar de Mikmoro
Colaborador
 
Fecha de Ingreso: octubre-2006
Ubicación: K-pax
Mensajes: 7.228
Antigüedad: 18 años, 1 mes
Puntos: 280
Respuesta: (Ayuda) 3 problemas visibles

No sé cómo es exactamente la imagen de lo que quieres conseguir, pero el problema principal es que has colocado todo con posiciones absolutas. Para arreglar las cosas que dices hay que tocar toda la css.
Si puedes pon una captura de cómo te gustaría que quedara.

Mikel.
  #3 (permalink)  
Antiguo 10/07/2008, 12:51
Avatar de Mikmoro
Colaborador
 
Fecha de Ingreso: octubre-2006
Ubicación: K-pax
Mensajes: 7.228
Antigüedad: 18 años, 1 mes
Puntos: 280
Respuesta: (Ayuda) 3 problemas visibles

Mira a ver si lo que quieres hacer se parece en algo a esto:

Cita:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Bienvenidos al VENI</title>
</head>
<style type="text/css">
* {padding:0;
margin:0;
outline:0;
}
html, body { height:100%;
font-family:Calibri;
font-size:1em;
outline:0;
background-image:url(img/fondo.jpg);
background-repeat:repeat-x;
}
#header{position: relative;top: 84px;
margin: auto;text-align: center;
}
#content
{
min-height:40%;
height:auto;
width:100%;
margin-top:100px;
text-align:center;
}
#sidebar-left {float:left;
width:25%;
border-right:2px dotted #808080;
}
#sidebar-center {float: left;
width:50%;
}
#sidebar-right {}
#footer {font-size:2em;
text-align: center;
width:100%;
border-top:2px solid #000000;
}
.corte {clear: both;}
</style>
<body>
<div id="header"><img src="imagenes/header.png" /></div>
<div id="content">
<div id="sidebar-left"><?php include('http://www.nutrimel.com.ar/veni/includes/sidebar-left.php'); ?></div>
<div id="sidebar-center">SIDEBAR-CENTER</div>
<div id="sidebar-right"> SIDEBAR-RIGHT</div>
<div class="corte"></div>
</div>
<div id="footer">Pie de Pagina</div>
</body>
</html>
Mikel.
  #4 (permalink)  
Antiguo 10/07/2008, 13:07
 
Fecha de Ingreso: marzo-2008
Mensajes: 1.020
Antigüedad: 16 años, 8 meses
Puntos: 21
Respuesta: (Ayuda) 3 problemas visibles

Gracias por responder..

Mikemoro, me podrias decir como hiciste, que modificaciones has usado, debido a que has logrado lo que buscaba, pero estoy aprendiendo y me gustaria saber el como...

saludos..

PD: agregue contenido al sidebar-right y mira lo que pasa: aqui
  #5 (permalink)  
Antiguo 10/07/2008, 14:02
 
Fecha de Ingreso: marzo-2008
Mensajes: 1.020
Antigüedad: 16 años, 8 meses
Puntos: 21
Respuesta: (Ayuda) 3 problemas visibles

bueno, lo solucione con padding...de momento funciona....

saludos...y gracias..

pd: si hay alguna otra solucion...bienvenida sea...
  #6 (permalink)  
Antiguo 10/07/2008, 14:27
Avatar de Mikmoro
Colaborador
 
Fecha de Ingreso: octubre-2006
Ubicación: K-pax
Mensajes: 7.228
Antigüedad: 18 años, 1 mes
Puntos: 280
Respuesta: (Ayuda) 3 problemas visibles

Como dices que ya lo has solucionado, no veo nada raro donde dices "mira lo que pasa".

Como lo que he modificado de tu hoja de estilo son unas cuantas cosas, lo mejor sería que compararas la hoja anterior con esta y vieras las diferencias. Luego si algo no lo entiendes pregunta y te lo explico con mucho gusto, aunque hay unas cuantas cosas que a nada que uses el buscador del foro encontrarás extensas expicaciones.

Mikel.
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 05:00.