Foros del Web » Creando para Internet » CSS »

Problema con ejemplo de araudi.net

Estas en el tema de Problema con ejemplo de araudi.net en el foro de CSS en Foros del Web. 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 ...
  #1 (permalink)  
Antiguo 27/01/2009, 09:55
 
Fecha de Ingreso: octubre-2006
Mensajes: 123
Antigüedad: 11 años, 1 mes
Puntos: 1
Problema con ejemplo de araudi.net

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>
&nbsp;&nbsp;&nbsp;

<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
  #2 (permalink)  
Antiguo 27/01/2009, 11:52
Avatar de talmente  
Fecha de Ingreso: noviembre-2007
Mensajes: 233
Antigüedad: 10 años, 1 mes
Puntos: 4
Respuesta: Problema con ejemplo de araudi.net

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.

Última edición por talmente; 27/01/2009 a las 12:09
  #3 (permalink)  
Antiguo 27/01/2009, 12:59
 
Fecha de Ingreso: octubre-2006
Mensajes: 123
Antigüedad: 11 años, 1 mes
Puntos: 1
Respuesta: Problema con ejemplo de araudi.net

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
  #4 (permalink)  
Antiguo 27/01/2009, 17:22
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
Respuesta: Problema con ejemplo de araudi.net

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.
__________________
Visita mi nueva web idplus.org
  #5 (permalink)  
Antiguo 27/01/2009, 21:40
Avatar de Calizman
Organiza competencias CSS
 
Fecha de Ingreso: octubre-2008
Ubicación: Ciudad de Guatemala, Guatemala
Mensajes: 1.122
Antigüedad: 9 años, 2 meses
Puntos: 83
Respuesta: Problema con ejemplo de araudi.net

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
__________________
[ Mi Sitio Personal ]
"La felicidad no es una estacion de llegada... Es un modo de viajar"
Tom Schreiter
  #6 (permalink)  
Antiguo 28/01/2009, 04:57
 
Fecha de Ingreso: octubre-2006
Mensajes: 123
Antigüedad: 11 años, 1 mes
Puntos: 1
Respuesta: Problema con ejemplo de araudi.net

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
  #7 (permalink)  
Antiguo 28/01/2009, 07:57
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
Respuesta: Problema con ejemplo de araudi.net

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é.
__________________
Visita mi nueva web idplus.org
  #8 (permalink)  
Antiguo 28/01/2009, 08:01
Avatar de Dalvenjha  
Fecha de Ingreso: febrero-2008
Ubicación: $("#oficina");
Mensajes: 692
Antigüedad: 9 años, 9 meses
Puntos: 53
Respuesta: Problema con ejemplo de araudi.net

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 -.-.
__________________
Mi Showcase ||

Compartiendo todo lo posible con los demás.

Última edición por Dalvenjha; 28/01/2009 a las 08:12
  #9 (permalink)  
Antiguo 28/01/2009, 09:11
 
Fecha de Ingreso: octubre-2006
Mensajes: 123
Antigüedad: 11 años, 1 mes
Puntos: 1
Respuesta: Problema con ejemplo de araudi.net

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
  #10 (permalink)  
Antiguo 28/01/2009, 12:37
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
Respuesta: Problema con ejemplo de araudi.net

Cita:
Iniciado por canariozgz Ver Mensaje
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.
__________________
Visita mi nueva web idplus.org
  #11 (permalink)  
Antiguo 28/01/2009, 15:37
 
Fecha de Ingreso: octubre-2006
Mensajes: 123
Antigüedad: 11 años, 1 mes
Puntos: 1
Respuesta: Problema con ejemplo de araudi.net

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

  #12 (permalink)  
Antiguo 28/01/2009, 15: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
Respuesta: Problema con ejemplo de araudi.net

Sí, ahora lo veo.
__________________
Visita mi nueva web idplus.org

Última edición por Mikmoro; 28/01/2009 a las 17:27
  #13 (permalink)  
Antiguo 28/01/2009, 17:25
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
Respuesta: Problema con ejemplo de araudi.net

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.
__________________
Visita mi nueva web idplus.org
  #14 (permalink)  
Antiguo 28/01/2009, 18:03
 
Fecha de Ingreso: octubre-2006
Mensajes: 123
Antigüedad: 11 años, 1 mes
Puntos: 1
Respuesta: Problema con ejemplo de araudi.net

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
  #15 (permalink)  
Antiguo 28/01/2009, 22:23
Avatar de Calizman
Organiza competencias CSS
 
Fecha de Ingreso: octubre-2008
Ubicación: Ciudad de Guatemala, Guatemala
Mensajes: 1.122
Antigüedad: 9 años, 2 meses
Puntos: 83
Respuesta: Problema con ejemplo de araudi.net

Cita:
Tio eres el amo
Ni dudarlo!!! no tengo mas que escribir... solo mi admiracion hacia Mik!
__________________
[ Mi Sitio Personal ]
"La felicidad no es una estacion de llegada... Es un modo de viajar"
Tom Schreiter
  #16 (permalink)  
Antiguo 29/01/2009, 01:27
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
Respuesta: Problema con ejemplo de araudi.net

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

Saludos.
__________________
Visita mi nueva web idplus.org
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 14:23.