Foros del Web » Programando para Internet » Javascript »

El Flexslider se visualiza cortado en mi web

Estas en el tema de El Flexslider se visualiza cortado en mi web en el foro de Javascript en Foros del Web. Hola amigos les comento el flexslider se me visualizaba perfecto en mi web hasta que decidi hacer la botonera <nav> ahi cuando cargo el flexslider ...
  #1 (permalink)  
Antiguo 18/08/2014, 13:14
 
Fecha de Ingreso: septiembre-2008
Mensajes: 115
Antigüedad: 15 años, 6 meses
Puntos: 0
El Flexslider se visualiza cortado en mi web

Hola amigos les comento el flexslider se me visualizaba perfecto en mi web hasta que decidi hacer la botonera <nav> ahi cuando cargo el flexslider se me ve cortado aca les dejo el codigo HTML y CSS, Algun genio de programacion que me pueda dar una solucio gracias!!

EL HTML SE LOS DEJO DIVIDO EN TRES PARTES TALVEZ RESULTE MAS PROLIJO DE VISULIZAR.

Código HTML:
<!DOCTYPE HTML>
<html lang="es">
<head>
	<meta name= "description" content="Mi Web"/>
	<meta charset="utf-8"/>
	<link rel="stylesheet" href="css/atributos.css"/>
	<link rel="stylesheet" href="css/flexslider.css"/><!--hay flexslider que no estan diseñados para diseño sensible(responsive design)hay que buscar por google los que sean para diseño sensible!-->
	<!--en la siguiente linea escribo un script que indica la ruta de la libreria de jquery desde los servidores de google!, generalmente los script se escriben dentro de las etiquetas head!-->
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
	<script src="js/jquery.flexslider.js"></script>
	<!--la siguiente linea que esta dentro de los scripts significa: que cuando  la ventana del navegador haya cargado, ejecute la funcion!-->
	<script>
		$(window).load(function(){
			$(".flexslider").flexslider();
		});
	</script>
	<!-- la proxima instruccion es con java script y es por si el usuario tiene una version anterior a Internet explorer 9, hace que las nuevas etiquetas de html5 como article, section,header,nav etc..las interprete en el viejo navegador-->
	<!--[if it IE 9]>
		<script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script>	
	<![endif]-->
</head> 
ACA LA BOTONERA

Código HTML:
<body>
<header>
	<h1>Todo Muebles</h1>
</header>
<nav>
	<ul>
		<li>
			<div class="contenedor-general">
				<div class="contenedor-uno">
					<p class= "texto_uno">Inicio</p>
			    </div>
				<div class="contenedor-dos">
					<p class= "texto_dos"><a href="index.html">Inicio</a></p>
				</div>
			</div>
		</li>
		<li>
			<div class="contenedor-general">
				<div class="contenedor-uno">
					<p class= "texto_uno">Muebles</p>
				</div>
				<div class="contenedor-dos">
					<p class= "texto_dos"><a href="index.html">Muebles</a></p>
				</div>
			</div>
		</li>
		<li>
			<div class="contenedor-general">
				<div class="contenedor-uno">
					<p class= "texto_uno">Sillones</p>
				</div>
				<div class="contenedor-dos">
					<p class= "texto_dos"><a href="index.html">Sillones</a></p>
				</div>
			</div>
			</li>
			<li>
				<div class="contenedor-general">
					<div class="contenedor-uno">
						<p class= "texto_uno">Decoraci&oacute;n</p>
					</div>
					<div class="contenedor-dos">
						<p class= "texto_dos"><a href="index.html">Decoraci&oacute;n</a></p>
					</div>
				</div>
				</li>
				<li>
					<div class="contenedor-general">
						<div class="contenedor-uno">
							<p class= "texto_uno">Contacto</p>
						</div>
						<div class="contenedor-dos">
							<p class= "texto_dos"><a href="index.html">Contacto</a></p>
						</div>
					</div>
				</li>
	</ul>
</nav> 
ACA LES DEJO EL DIV DONDE ESTA FLEXSLIDER

Código HTML:
<section id="animacion">
		<div class="flexslider">
			<ul class="slides">
				<li>
					<img src="img/buena-vista.jpg" width= 100% height= 700px;/>
						<p class="flex-caption">Ventas de muebles | accesorios...y mucho mas</p>
				</li>
				<li>
					<img src="img/vista-mar.jpg" width= 100% height= 700px; />
						<p class="flex-caption">Eleji tu habitacion</p>
				</li>
				<li>
					<a src="http://bextlan.com"><img src="img/confort.jpg" width= 100% height= 700px;/></a>
						<p class="flex-caption">Una buena imagen</p>
				</li>
				<li>
					<img src="img/cocina.jpg" width= 1300px height= 700px;/>
						<p class="flex-caption">Amuebla tu cocina</p>
				</li>
			</ul>
		</div>
	</section>
	<section id="contenidos">
		
		<div id="division-uno">
			<h2>Productos Destacados</h2><br><p class="division-uno"><a href="http://escritoriotina.html">- Escritorio Tina</a><br><a href="http://mesaflor.html">- L&aacutempara de mesa flor</a><br><a href="http://mesafrancisco.html">- Mesa de comedor Francisco</a><br/><a href="http=//silloncharly.html">- Sill&oacuten Charly<a/><br><a href="//cajoneraalma.html">- Cajonera Alma</a>
		</div>
		<div id="division-dos">
			<a href="http://sillaisa.html">- Silla Isa</a><br><a href="http://mesaAlina.html">- Mesa de comedor Alina</a><br><a href="http://mesacubo.html">- Mesa de arrime cubo</a><br/><a href="http=//biblioteca-modular.html">- Biblioteca Modular<a/>
		</div>
		<div id="division-tres">
			<a href="http://mesa-charo.html">- Mesa de living charo</a><br><a href="http://mesa-luz.html">- Mesa de luz</a><br><a href="http://silla-bianca.html">- Silla Bianca</a>
		</div>
	</section>
</body> 
Y ACA LES DEJO EL CSS

Código:
*{
	margin: 0px;
	padding: 0px;
}

@font-face {
    font-family: 'caviar_dreamsitalic';
    src: url('../fonts/caviardreams_italic-webfont.eot');
    src: url('../fonts/caviardreams_italic-webfont.eot?#iefix') format('embedded-opentype'),
         url('../fonts/caviardreams_italic-webfont.woff') format('woff'),
         url('../fonts/caviardreams_italic-webfont.ttf') format('truetype'),
         url('../fonts/caviardreams_italic-webfont.svg#caviar_dreamsitalic') format('svg');
    font-weight: normal;
    font-style: normal;

}

body{
	font-family: 'caviar_dreamsitalic' Helvetica, Verdana;
	background: #212121 url(../img/fondo.jpg);
	color: #FFF;
	
}

header{
	
	background: #212121 url(../img/fondo.jpg);/*Este color rgba(200, 54, 54, 0.5) es un rojo transparente */
	height: 5em;
	margin:0 auto;
	padding: 1em;
	max-width:100%;
}
  
nav{
	background-color: #000000;
	max-width: 100%;
	height: 40px; /* o 6 por ciento aprox*/
	position: absolute;
	z-index: 5;
	visibility: visible;
}
 
section#animacion{
	background: #AE990D; 
	height: 700px;
	margin:0.8em auto;
	padding: 1em;
	max-width:90%;
	margin-top: 40px;
}

section#contenidos{

	background: #1D1B1B url(../img/fondo.jpg);
	height: 15em;
	max-width: 90%;
	margin:0 auto;
	margin-top: -12px;
	padding: 1em;
}

a{
	color: orange;
	text-decoration: none;
}

a:hover {color: white;}

p.division-uno{
	color: orange;
}

#division-uno, #division-dos, #division-tres{
	display: inline-block;
	vertical-align: top;
}

#division-dos, #division-tres{
	margin-top: 50px;
}

#division-tres{
	padding-left: 1.5%;
}

ul{
	list-style: none;
	width: 1000px;
	height: 40px; /* o 6 por ciento aprox*/
}

li{
	float: left;
	width: 200px;
	height: 40px;
	background-color: red;
	overflow: hidden;
	margin-top: 0px;
}

div.contenedor-general:hover{
	margin-top: -40px;
	overflow: hidden;
}

div.contenedor-general{
	width: 200px;
	height: 80px;
	background-color: none;
	-webkit-transition: margin-top .2s;/*el prefijo -webkit-es para que el atributo "transition" lo interprete en los navegadores viejos de Chrome y Safari.*/
	-moz-transition: margin-top .2s;/*el prefijo -moz-(navegador mozilla Firefox) es para que el atributo "transition" lo interprete en navegadores viejos de Mozilla Firefox.*/
	-ms-transition: margin-top .2s;/*el prefijo -ms-(significa microsoft) es para que el atributo "transition" lo interprete en navegadores viejos de internet explorer.*/
	overflow: hidden;
}

div.contenedor-uno{
	background: url("../img/fondo.jpg");
	width: 200px;
	height:40px;
	background-color: #212121;
	overflow: hidden;
	
}

div.contenedor-dos{
	width: 200px;
	height:40px;
	background-color: #c0c0c0;
	overflow: hidden;/* la funcion overflow permite que se recorte el contenido de una capa, para mostrar únicamente el contenido que quepa, según sus dimensiones,Para acceder al contenido que no se muestra, porque no cabe en la capa, se puede configurar overflow para que aparezcan unas barras de desplazamiento. */
	/* el valor hidden indica que los contenidos que, por el tamaño de la capa, no quepan en la misma, se deben recortar. Por ello, la capa tendrá siempre el tamaño configurado, pero los contenidos en ocasiones podrán no verse por completo*/
}

p.texto_uno, p.texto_dos{
	text-align: center;
	margin-top: 10px;
	font-weight: bold;
	color: white;
	font-size:1.1em;
}

p.texto_dos{
	color: #0080FF;
	font-weight: bold;
}

Etiquetas: ajax, cortado, funcion, html, js, valor
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:11.