Problema con ejemplo de araudi.net

canariozgz · #1 (**permalink**) 27/01/2009, 09:55

Hola amigos descubri esa página desde hace un tiempo gracias a este foro y segui este ejemplo

http://www.araudi.net/ejemplos/3_capas.html

lo he adaptado para mi pagina pero tengo un pequeño problema

tengo este codigo html

<!DOCTYPE
html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="es">
<head>

<title>Co</title>
<link rel="stylesheet" type="text/css" media="all" href="css/reset.css" />
<link rel="stylesheet" type="text/css" media="all" href="css/exaltacion.css" />
<link rel="shortcut icon" href="imagenes/favicon.ico"/>
<script type="text/javascript" src="./js/mootools-beta-1.2b2.js"></script>
<script type="text/javascript" src="./js/carrusel.js"></script>
<script type="text/javascript" src="./js/funciones.js"></script>
<script type="text/javascript">

//var car1 = new Carrusel('carrusel1',{images:['./imagenes/imagen1.jpg','./imagenes/imagen2.jpg','./imagenes/imagen4.jpg']});
window.addEvent('domready', function() {
var car = new Carrusel('carrusel');
car.addImages(['imagenes/cabecera1.jpg','imagenes/cabecera2.jpg','imagenes/cabecera3.jpg','imagenes/cabecera4.jpg','imagenes/cabecera5.jpg']);
//car.addImage('imagenes/imagen2.jpg');
//car.addImage('imagenes/imagen1.jpg');
car.start();
});

</script>

</head>
<body>

<div class="contenedor ">

<div class="cabecera">
<div style="position:relative; z-index:2;">
<a href="index.html">
<img src="imagenes/logo_transparente_completo.png" alt="logo" width="267" height="85"/>
</a>
</div>

<div style="position:absolute; float:left; left:60px; top:0px;">
<div id="carrusel" >
</div>

</div>
<div>

<ul class="menusup">
<li><a href="historia.html">Historia</a></li>
<li><a href="#">1</a></li>
<li><a href="#">2</a></li>
<li><a href="#">3</a></li>
<li><a href="#">Junta </a></li>
<li><a href="#">4</a></li>
<li><a href="#">Otros</a></li>
<li><a href="#">Contacta</a></li>

</ul>
</div>

</div>
<div class="contenido">
11111111111111111111111111111111111111111111111111 11111111111111111111111111111111111111111111111111 111111111
CUerpooooooooooooooooooooooooooooooooooooooooooooo oooooooooooooooooooooooooooooooooooooooooo<br/>
CUerpooooooooooooooooooooooooooooooooooooooooooooo oooooooooooooooooooooooooooooooooooooooooo<br/>
CUerpooooooooooooooooooooooooooooooooooooooooooooo oooooooooooooooooooooooooooooooooooooooooo<br/>
CUerpooooooooooooooooooooooooooooooooooooooooooooo oooooooooooooooooooooooooooooooooooooooooo<br/>
CUerpooooooooooooooooooooooooooooooooooooooooooooo oooooooooooooooooooooooooooooooooooooooooo<br/>
CUerpooooooooooooooooooooooooooooooooooooooooooooo oooooooooooooooooooooooooooooooooooooooooo<br/>
CUerpooooooooooooooooooooooooooooooooooooooooooooo oooooooooooooooooooooooooooooooooooooooooo<br/>
CUerpooooooooooooooooooooooooooooooooooooooooooooo oooooooooooooooooooooooooooooooooooooooooo<br/>
CUerpooooooooooooooooooooooooooooooooooooooooooooo oooooooooooooooooooooooooooooooooooooooooo<br/>
CUerpooooooooooooooooooooooooooooooooooooooooooooo oooooooooooooooooooooooooooooooooooooooooo<br/>
CUerpooooooooooooooooooooooooooooooooooooooooooooo oooooooooooooooooooooooooooooooooooooooooo<br/>
CUerpooooooooooooooooooooooooooooooooooooooooooooo oooooooooooooooooooooooooooooooooooooooooo<br/>
CUerpooooooooooooooooooooooooooooooooooooooooooooo oooooooooooooooooooooooooooooooooooooooooo<br/>
CUerpooooooooooooooooooooooooooooooooooooooooooooo oooooooooooooooooooooooooooooooooooooooooo<br/>
CUerpooooooooooooooooooooooooooooooooooooooooooooo oooooooooooooooooooooooooooooooooooooooooo<br/>
CUerpooooooooooooooooooooooooooooooooooooooooooooo oooooooooooooooooooooooooooooooooooooooooo<br/>
CUerpooooooooooooooooooooooooooooooooooooooooooooo oooooooooooooooooooooooooooooooooooooooooo<br/>
CUerpooooooooooooooooooooooooooooooooooooooooooooo oooooooooooooooooooooooooooooooooooooooooo<br/>
CUerpooooooooooooooooooooooooooooooooooooooooooooo oooooooooooooooooooooooooooooooooooooooooo<br/>
CUerpooooooooooooooooooooooooooooooooooooooooooooo oooooooooooooooooooooooooooooooooooooooooo<br/>
CUerpooooooooooooooooooooooooooooooooooooooooooooo oooooooooooooooooooooooooooooooooooooooooo<br/>
CUerpooooooooooooooooooooooooooooooooooooooooooooo oooooooooooooooooooooooooooooooooooooooooo<br/>
CUerpooooooooooooooooooooooooooooooooooooooooooooo oooooooooooooooooooooooooooooooooooooooooo<br/>
CUerpooooooooooooooooooooooooooooooooooooooooooooo oooooooooooooooooooooooooooooooooooooooooo<br/>
CUerpooooooooooooooooooooooooooooooooooooooooooooo oooooooooooooooooooooooooooooooooooooooooo<br/>
CUerpooooooooooooooooooooooooooooooooooooooooooooo oooooooooooooooooooooooooooooooooooooooooo<br/>
CUerpooooooooooooooooooooooooooooooooooooooooooooo oooooooooooooooooooooooooooooooooooooooooo<br/>
CUerpooooooooooooooooooooooooooooooooooooooooooooo oooooooooooooooooooooooooooooooooooooooooo<br/>
CUerpooooooooooooooooooooooooooooooooooooooooooooo oooooooooooooooooooooooooooooooooooooooooo<br/>

22222222222222222222222222222222222222222222222222 222222222222222222222222222222222222222222222

</div>
<div class="pie">
<div style="float:left; margin-top:12px; margin-left:150px;">
Pieeee
</div>
<div class="enlaces_pie">

<a href="http://validator.w3.org/check?uri=referer">XHTML 1.1</a>
   

<a href="http://jigsaw.w3.org/css-validator/">CSS 2.1</a>
</div>
</div>
</div>
</body>
</html>

y el css es

html, body {
height: 100%;
background-image:url(../imagenes/fondonegro.jpg);
background-color:#505050;
background-repeat:repeat-x;
}
.contenedor {
width: 960px;
background-color: #6cc;
margin: 0 auto;
position: relative;
height: auto!important;
min-height: 100%;
height: 100%;
background-color: #FFFFFF;
}
.cabecera {
background-color: #FFFFFF;

height: 90px;
position:fixed;
width:960px;
z-index:3;
}
.contenido {
position: absolute;
display: block;
padding-top:125px;
font-family:Verdana,Arial,Helvetica,sans-serif;
font-size:11px;
z-index:0;
background-color: #FFFFFF;
width:960px;
}
.pie {
position: fixed;
bottom: 0;
height: 35px;
background-image:url(../imagenes/fondo_menu.gif);
font-family:Verdana,Arial,Helvetica,sans-serif;
font-size:11px;

color: #fff;
text-align: center;
width: 960px;
clear: both;
}

.bordeCuerpo{
border-left-color:#A9A9A9;
border-left-style:solid;
border-left-width:1px;
border-right-color:#A9A9A9;
border-right-width:1px;
border-right-style:solid;

}

.menusup {
padding-left:32px;
margin:0;
list-style:none;
height:35px;
background:#fff url(../imagenes/fondo_menu.gif);
position:relative;

border-bottom:1px solid #444;
width:928px!important;
}
.menusup li {
float:left;
}
.menusup li a {
display:block;
float:left;
height:35px;
line-height:35px;
color:#FFFFFF;
text-decoration:none;
font-size:11px;
font-family:Verdana,Arial,Helvetica,sans-serif;
font-weight:bold;
text-align:center;
padding:0 23px;
}
.menusup li a:hover {
color:#fff;
text-decoration:underline;
}

.enlaces_pie {
float:right;
margin-top:12px;
margin-right:15px;
}
.enlaces_pie a:link {
color:#FFFFFF;
text-decoration:none;
}

.enlaces_pie a:hover {
text-decoration:underline;
}

.capa_historia{
font-family:Verdana,Arial,Helvetica,sans-serif;
font-size:11px;
}

.capa_historia p{
margin-bottom:10px;
}

.imagen_historia{
float:left;
margin-right:5px;
}

el problema es que si la capa contenido tiene mucho texto y reduzco la resolucion del navegador el contenido se me va metiendo por debajo del pie y tarda un buen rato y en aparecer el scroll y cuando aparece el scroll y lo bajo para abajo no aparece todo el texto que se habia metido.

un saludo a ver si me podeis echar una mano
gracias

talmente · #2 (**permalink**) 27/01/2009, 11:52

Hola, si has utilizado el ejemplo bien (xhtml y css) la razón puede ser que en el ejemplo usan un DOCTYPE 1.0 Strict, y tu usas 1.1. . Saludos

LO HE PROBADO Y ME TEMO QUE NO ES POR ESO.

canariozgz · #3 (**permalink**) 27/01/2009, 12:59

Hola gracias por la respuesta

prueba esto a ver

simplemente he cogido el codigo del ejempo puesto a la cabecera y el pie fixed y cambialo anchuras y colores y añadido contenido

<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xml:lang="es" xmlns="http://www.w3.org/1999/xhtml" lang="es-es"><head>

<title>3 cajas 100x100 alto - Recursos CSS - araudi.net</title>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<meta name="Keywords" content="recursos, css, diseño web, xhtml, software libre">
<meta name="Description" content="3 cajas 100x100 alto - Recursos CSS - araudi.net">
<meta name="Author" content="Mikel Morote Donazar - Praxis Iruñea SLL">
<meta name="Subject" content="Recursos CSS">
<meta name="Language" content="español">
<meta name="Robots" content="index, follow">
<link rel="alternate" href="http://www.araudi.net/indice.html" title="Indice de contenidos" media="all" lang="es">
<style type="text/css">
html, body { margin: 0;
padding: 0;
height: 100%;
background-color: #366;
}
#capaMadre {
width: 960px;
background-color: #6cc;
margin: 0 auto;
position: relative;
height: auto!important;
min-height: 100%;
height: 100%;

}
#cabecera {
background-color: #00FFFF;
height: 90px;
position:fixed;
width:960px;
z-index:3;
}
#cuerpo {
position: absolute;
display: block;
padding-top:125px;
font-family:Verdana,Arial,Helvetica,sans-serif;
font-size:11px;
z-index:0;
background-color: #FF00FF;
width:960px;
}
#pie {
position: fixed;
bottom: 0;
height: 35px;
background-image:url(../imagenes/fondo_menu.gif);
font-family:Verdana,Arial,Helvetica,sans-serif;
font-size:11px;
color: #000;
background-color:#fff0ff;
text-align: center;
width: 960px;
clear: both;
}
</style>
</head><body>
<div id="capaMadre">
<div id="cabecera">Header</div>
<div id="cuerpo">Cuerpoooooooooooooo<br/>Cuerpo<br/>Cuerpo<br/>Cuerpo<br/>Cuerpo<br/>Cuerpo<br/>
Cuerpo<br/>Cuerpo<br/>Cuerpo<br/>Cuerpo<br/>Cuerpo<br/>Cuerpo<br/>Cuerpo<br/>Cuerpo<br/>
Cuerpo<br/>Cuerpo<br/>Cuerpo<br/>Cuerpo<br/>Cuerpo<br/>Cuerpo<br/>Cuerpo<br/>Cuerpo<br/>
Cuerpo<br/>Cuerpo<br/>Cuerpo<br/>Cuerpo<br/>Cuerpo<br/>Cuerpo<br/>Cuerpo<br/>Cuerpo<br/>
Cuerpo<br/>Cuerpo<br/>Cuerpo<br/>Cuerpo<br/>Cuerpo<br/>Cuerpo<br/>Cuerpo<br/>Cuerpo<br/>
Cuerpo<br/>Cuerpo<br/>Cuerpo<br/>Cuerpo<br/>Cuerpo<br/>Cuerpo<br/>Cuerpo<br/>Cuerpoooooooooooooooooooooo<br/>

</div>
<div id="pie">Pie</div>
</div>
</body></html>

es el mismo codigo que el ejemplo pero cambiado simplemente eso y me sigue pasando que si achico el navegador tarda un tiempo en salir el scroll y luego si lo bajo y aparece el texto entero

gracias

Mikmoro · #4 (**permalink**) 27/01/2009, 17:22

Hola, canariozgz.
El asunto es que el ejemplo que has usado no estaba pensado para eso, y por eso no lo hace bien.
Prueba con este otro, o con este otro
que sí están pensados para lo que tú buscas.

Ya contarás si te sirve.

Calizman · #5 (**permalink**) 27/01/2009, 21:40

uuufff!! ya decia yo!

Era demaciado raro, para que fuera cierto! un error en la gloriosa pagina de araudi, Imposible!!

por poco me da algo... uff.. de la ke me salve! casi casi me pongo a editar los post que he puesto donde recomiendo esa web... por suerte el creador es un genio en el CSS...

Solo es una broma! xD

canariozgz · #6 (**permalink**) 28/01/2009, 04:57

Hola a ver esos ejemplos no me valen porque son a pantalla completa y yo queria de resolucion fija como el otro ejemplo, ademas el pie en caunto sale scroll desaparece y queria que estuviera fijo

gracias por la respuesta

Mikmoro · #7 (**permalink**) 28/01/2009, 07:57

En ningún momento había entendido que lo que quisieras fuera mantener el pie siempre fijo abajo y que el cuerpo de texto tuviera scroll, sino todo lo contrario.

No sé por qué lo pensaste, pero para eso ni sirve el primer ejemplo que cogiste ni los otros dos que te puse (que son casi para lo contrario).

Lo que tú dice se soluciona poniendo un padding-botton de 50px (por ejemplo) al selector del contenedor del texto (#cuerpo ).

Ya si quieres hacer otras cosas no sé.

Dalvenjha · #8 (**permalink**) 28/01/2009, 08:01

Pues no le entiendo nada de nada, tengo déficit de comprensión de lectura -.-. Podrías dejar un dibujo de como quisieras que fuera tu website? o también de repente subir tu sitio a alguna parte para que lo veamos -.-.

canariozgz · #9 (**permalink**) 28/01/2009, 09:11

Hola gracias por la respuesta, pensaba que habia contado lo de que queria la cabecera y el pie fijo, perdonar ha sido fallo mio, pero con el codigo ultimo que he puesto eso ya lo he conseguido.

He probado lo del padding-bottom: 50px; y efectivamente funciona, pero tengo un pequeño pero, en Internet Explorer 7 (para variar) me aparece scroll bastante antes de que haya texto y en opera tambien pasa lo mismo, y no consigo saber porque.

Si me ayudarais en eso ya terminaria muchas gracias

Mikmoro · #10 (**permalink**) 28/01/2009, 12:37

Cita:

Iniciado por canariozgz

He probado lo del padding-bottom: 50px; y efectivamente funciona, pero tengo un pequeño pero, en Internet Explorer 7 (para variar) me aparece scroll bastante antes de que haya texto y en opera tambien pasa lo mismo, y no consigo saber porque.

¿Te aparece scroll antes de que haya texto?
Bueno, pues ya sí me he perdido. Si querías decir que aparece antes de que el texto llegue abajo, pon el padding a 40px y listo. En IE7 lo veo perfectamente.

canariozgz · #11 (**permalink**) 28/01/2009, 15:37

Exacto me aparece scroll antes de que el pie llegue al texto. En firefox con el padding se ve bien pero en IE7 cuando voy reduciendo el navegador desde abajo la dimension aparece scroll antes de que el pie llegue al texto como ves en la imagen, el caso es que si luego amplias un poco se va, igual es eso lo que ocurre ati. prueba a reducir la dimension y luego ampliarla

Mikmoro · #12 (**permalink**) 28/01/2009, 15:50

Sí, ahora lo veo.

Mikmoro · #13 (**permalink**) 28/01/2009, 17:25

Bueno, localizado el error: le estás diciendo a tu capaMadre que tenga un alto mínimo del 100% y usando el important de forma totalmente innecesaria para lo que quieres hacer:

height: auto!important;
min-height: 100%;
height: 100%;

Quita las dos primeras líneas y deja sólo la de height: 100%;, porque el resto realmente te sobra, que imagino habrás heredado del ejemplo que no corresponde con lo que tú quieres hacer, y con eso se resuelve el problema que mencionas de IE7 y Opera.

canariozgz · #14 (**permalink**) 28/01/2009, 18:03

Tio eres el amo mil gracias llevaba mucho tiempo dandole vueltas al tema y no lo conseguia, muchas gracias
este foro da gusto mil gracias nuevamente

Calizman · #15 (**permalink**) 28/01/2009, 22:23

Cita:

Tio eres el amo

Ni dudarlo!!! no tengo mas que escribir... solo mi admiracion hacia Mik!

Mikmoro · #16 (**permalink**) 29/01/2009, 01:27

No hay de qué. Para otra vez recuerda que cuanto más claro plantees el problema, más posible recibir una respuesta adecuada.

Saludos.