Ayudaa con páginnaa Html5 y css3

  • Iniciador del tema Iniciador del tema khrizs
  • Fecha de inicio Fecha de inicio
khrizs

khrizs

Usuario Casual nvl. 2
1 Feb 2012
3.036
38
47
CHILOE
Hola, estoy aprendiendo a hacer páginas web en html5 y css3y para aprender haciendo estoy haciendo una página de turismo a modo de prueba.

El problema que tengo es que le puse un slider a la página y el contenido queda debajo del slider tapandolo.

este es el codigo:

HTML5
Código: 
<!doctype html><html lang="es">
<head>
<meta charset="utf-8">
<title>estudio de Html5 y Css3</title>
<meta name="description" content="descripcion de la pagina"/>
<link rel="stylesheet" href="turismo.css">
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<script type="text/javascript" src="jquery/js/jquery-1.11.3.min.js"></script>
</head>


<body>
<div id="agrupar">
	
    <!--CABECERA DE PAGINA-->
    <header id="cabecera">
    	<h1 class="logo">Turismo</h1>
    </header>
    
    <!--NAVEGADOR- MENU -->
    <nav id="navegacion">
    	<ul>
        	<li>INICIO</li>
            <li>CONTACTO</li>
        </ul>
    </nav>
    
            <!--SECCION DE SLIDER-->
    
    <main id="imagen">
        <div id="slider">
                <div><img src="img/img1.jpg"></div>
                <div><img src="img/img2.jpg"></div>
                <div><img src="img/img3.jpg"></div>
            </div>
    
     </section>
    
     
     <!--Java para slider-->
    <script type="text/javascript">
        $(function(){
            $('#slider div:gt(0)').hide();
                setInterval(function(){
                    $('#slider div:first-child').fadeOut(1000)
                    .next('div').fadeIn(1000)
                    .end().appendTo('#slider');
                    },3000);
            })
    
    
    </script>
    <!--FIN DE JAVA PARA SLIDER-->
    <!--FIN DE SECCION DE SLIDER-->


<section id="seccion">


    	<article id="contenido">
        	<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend tellus. Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim. Aliquam lorem ante, dapibus in, viverra quis, feugiat a, tellus. Phasellus viverra nulla ut metus varius laoreet. Quisque rutrum. Aenean imperdiet. Etiam ultricies nisi vel augue. Curabitur ullamcorper ultricies nisi. Nam eget dui. Etiam rhoncus. Maecenas tempus, tellus eget condimentum rhoncus, sem quam semper libero, sit amet adipiscing sem neque sed ipsum. Nam quam nunc, blandit vel, luctus pulvinar, hendrerit id, lorem. Maecenas nec odio et ante tincidunt tempus. Donec vitae sapien ut libero venenatis faucibus. Nullam quis ante. Etiam sit amet orci eget eros faucibus tincidunt. Duis leo. Sed fringilla mauris sit amet nibh. Donec sodales sagittis magna. Sed consequat, leo eget bibendum sodales, augue velit cursus nunc,</p>
        </article>
    </section>
    
    <!--BARRA LATERAL DE PAGINA-->
    <aside id="lateral">
    	<article id="contenido_lateral">
        	<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend tellus. Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim. Aliquam lorem ante, dapibus in, viverra quis, feugiat a, tellus. Phasellus viverra nulla ut metus varius laoreet. Quisque rutrum. Aenean imperdiet. Etiam ultricies nisi vel augue. Curabitur ullamcorper ultricies nisi. Nam eget dui. Etiam rhoncus. Maecenas tempus, tellus eget condimentum rhoncus, sem quam semper libero, sit amet adipiscing sem neque sed ipsum. Nam quam nunc, blandit vel, luctus pulvinar, hendrerit id, lorem. Maecenas nec odio et ante tincidunt tempus. Donec vitae sapien ut libero venenatis faucibus. Nullam quis ante. Etiam sit amet orci eget eros faucibus tincidunt. Duis leo. Sed fringilla mauris sit amet nibh. Donec sodales sagittis magna. Sed consequat, leo eget bibendum sodales, augue velit cursus nunc,</p>
        </article>
    </aside>
    <!--PIE DE PÁGINA-->
    <footer id="pie_pagina">
    	<p>Pie de página</p>
    </footer>
 </div>  
    
</body>
</html>

CSS3

Código: 
*{	margin: 0px;
	padding: 0px;
}
/*esto es un comentario*/


body {
	background-image: url(image/fondoblanco2.png);
	background-repeat: no-repeat;
	background-attachment: fixed;   /*este codigo sirve para que la imagen de fondo quede fija*/
    overflow: scroll;				/*este codigo sirve para que la imagen de fondo quede fija*/
	background-size:100% 100% 100%; /*Adapta la imagen de fondo a un 100%*/
}


header, section, footer, aside, nav, article, figure, figcaption, hgroup {
	display: block;
}
h1 {
 font: bold 20px Segoe, "Segoe UI", "DejaVu Sans", "Trebuchet MS", Verdana, sans-serif	
}
h2{
 font: bold 14px Segoe, "Segoe UI", "DejaVu Sans", "Trebuchet MS", Verdana, sans-serif	
	}
	
body {
	text-align:right;
}


#agrupar{
	width: 80%;
	max-width:1024px;
	margin: auto;
	text-align: left;
	padding:15px;
	box-sizing:border-box;
}


#cabecera {
	background-color: rgb(135,211,124);
	border: 2px solid #1E824C;
	padding: 2%
}


#navegacion {
	background-color: #E9D460;
	border: 2px solid #798429;
	padding: 5px 15px;
}


#navegacion li {
	display:inline-block;
	list-style:none;
	padding: 5px;
	text-align:center;
	font:bold 14px Segoe, "Segoe UI", "DejaVu Sans", "Trebuchet MS", Verdana, sans-serif;
}


/*ESTILO PARA SLIDER*/
#imagen{
	width:100%;
	height:auto;
	padding:0px;
	margin:auto;
	float:left;
	margin:3PX auto;
}


#slider {
	position:relative;
	width:100%;
	height:auto;
	margin:auto;
}


#slider > div{
	position: absolute;
	width: 100%;
	height: 100%;
	
}


img{
	width:100%;
	height:auto;
	max-width:1024px;
	margin:auto;


}




/*FIN DE ESTILO PARA SLIDER*/


#seccion {
	background:rgba(163,163,163,.6);
	width: 70%;
	margin: 1px;
	float:left;
	padding: 2%;
	


}


#contenido {
   
}


#lateral {
	width: 20%;
	margin: 1px 0px;
	float: right;
	padding: 2%;
	background: #C8F7C5;
	border-radius: 5px;
}


#contenido_lateral{
	width:100%;
	
}


#pie_pagina{
	clear:both;
	background-color:#019875;
	text-align:center;
	padding: 20px;
}

Como les dije estoy recien aprendiendo solo leyendo y mirando tutoriales, necesito que no el contenido no quede detrás del slider y no se como hacerlo.
Lo otro que no puedo lograr es que al llegar a un tamaño, ejemplo tablet o celulares la página se reacomode, solo logre hacerla responcibe para monitores.

Agradezco cualquier ayuda o concejo. saludos
 
Hola, yo lo arreglaría haciendo 3 cosas:

1 cerrar bien el bloque main id = imagen
2 agregando al selector #slider un overflow hidden
3 ultimo y con algo de info, este es tu problema, al ser divs absolutos el padre no puede tomar su tamaño, por lo que con un pequeño truco dejo el primero estatico, y funciona perfect xD.

Aqui te dejo un ejemplo https://jsfiddle.net/DoreaNcl/s065q25x/
 
funcionó pulento, ahora lo que no me gusta mucho es el efecto que le di al slider, desaparece de una dejando a la vista el fondo y luego aparece la imagen, se supone que cuando desaparece una debería verse la otra de inmediato, pero voy a ir probando con el mismo código, seguramente debe poderse con el mismo java que hice.
*****************************************************************************

Probando creo que mi java esta malo, el fadeOut no pesca solo el fadein por eso desaparece dejando ver el fondo... esa es mi teoria.

Código: 
<script type="text/javascript">        $(function(){
            $('#slider div:gt(0)').hide();
                setInterval(function(){
                    $('#slider div:first-child').fadeOut(1000)
                    .next('div').fadeIn(1000)
                    .end().appendTo('#slider');
                    },3000);
            })

no se si estoy equivocado aun no he visto mucho javascript. asi que estoy tratando de buscar mas al respecto.
 
Última edición:
ya esta responsive. eso lo vi en css3 el problema es el efecto que tiene el slider.. saludos
 
Debes iniciar sesión o registrarte para responder aquí.
Arriba Pie
Atrás