Hola Usuarios,
Estoy recien construyendo mi primera pagina y la he ido armando con cosas de varios lados en html y jquery, y va todo ok, pero al momento de hacer un zoom a mi pag o aumentar la resolucion de pantalla se me desconfigura todo y los divs quedan de un lado para otro, por lo que les pido su colaboracion porque he hecho muchas cosas o seguido otros consejos, pero nada aun no logro encontrar la forma......
les copio el codigo de lo que tengo:
<style>
body {
-webkit-font-smoothing: antialiased;
font: normal 15px/1.5 "Helvetica Neue", Helvetica, Arial, sans-serif;
color: #232525;
}
#ordenmenu {
z-index:9999;
position:absolute;
}
#ordenslide {
z-index:1;
}
#slides {
display: none
}
#slides .slidesjs-navigation {
margin-top:5px;
}
a.slidesjs-next,
a.slidesjs-previous,
a.slidesjs-play,
a.slidesjs-stop {
background-image: url(img/btns-next-prev.png);
background-repeat: no-repeat;
display:block;
width:12px;
height:18px;
overflow: hidden;
text-indent: -9999px;
float: left;
margin-right:5px;
}
a.slidesjs-next {
margin-right:10px;
background-position: -12px 0;
}
a:hover.slidesjs-next {
background-position: -12px -18px;
}
a.slidesjs-previous {
background-position: 0 0;
}
a:hover.slidesjs-previous {
background-position: 0 -18px;
}
a.slidesjs-play {
width:15px;
background-position: -25px 0;
}
a:hover.slidesjs-play {
background-position: -25px -18px;
}
a.slidesjs-stop {
width:18px;
background-position: -41px 0;
}
a:hover.slidesjs-stop {
background-position: -41px -18px;
}
.slidesjs-pagination {
margin: 7px 0 0;
float: right;
list-style: none;
}
.slidesjs-pagination li {
float: left;
margin: 0 1px;
}
.slidesjs-pagination li a {
display: block;
width: 13px;
height: 0;
padding-top: 13px;
background-image: url(img/pagination.png);
background-position: 0 0;
float: left;
overflow: hidden;
}
.slidesjs-pagination li a.active,
.slidesjs-pagination li a:hover.active {
background-position: 0 -13px
}
.slidesjs-pagination li a:hover {
background-position: 0 -26px
}
#slides a:link,
#slides a:visited {
color: #333
}
#slides a:hover,
#slides a:active {
color: #9e2020
}
.navbar {
overflow: hidden
}
</style>
<style>
#slides {
display: none
}
.container {
margin: 0 auto
width: 920px;
}
body {
background-color: ##FFFFFF;
}
* {
margin:0;
padding:0;
}
div#menu {
margin:30px auto;
width:80%;
}
</style>
<link href="menu.css" rel="stylesheet" type="text/css">
</head>
<body>
<!--Remover Mensaje No back link-->
<script type="text/javascript">
$(document).ready(function(){
$("body div:last").remove();
});
</script>
<!--Fin del Script No back link-->
<!-- SlidesJS Required: Start Slides -->
<!-- The container is used to define the width of the slideshow -->
<div class="container">
<div id="encabezado">
<a href="index.html"><img src="img/Encabezado.JPG" border="0"></a>
</div>
<div id="ordenmenu"><!-- Aquí llamamos el estilo donde esta z-index -->
<div id="menu">
<ul class="menu">
<li><a href="index.html" class="parent"><span>Inicio</span></a> </li>
<li><a href="#" class="parent"><span>Item 1</span></a>
<div><ul>
<li><a href="#" class="parent"><span>Sub Item 1</span></a>
<div><ul>
<li><a href="#" class="parent"><span>Sub Item 1.1</span></a>
<div><ul>
<li><a href="#"><span>Sub Item 1.1.1</span></a></li>
<li><a href="#"><span>Sub Item 1.1.2</span></a></li>
</ul></div>
</li>
<li><a href="#"><span>Sub Item 1.2</span></a></li>
<li><a href="#"><span>Sub Item 1.3</span></a></li>
<li><a href="#"><span>Sub Item 1.4</span></a></li>
<li><a href="#"><span>Sub Item 1.5</span></a></li>
<li><a href="#"><span>Sub Item 1.6</span></a></li>
<li><a href="#" class="parent"><span>Sub Item 1.7</span></a>
<div><ul>
<li><a href="#"><span>Sub Item 1.7.1</span></a></li>
<li><a href="#"><span>Sub Item 1.7.2</span></a></li>
</ul></div>
</li>
</ul></div>
</li>
<li><a href="#"><span>Sub Item 2</span></a></li>
<li><a href="#"><span>Sub Item 3</span></a></li>
</ul></div>
</li>
<li><a href="#" class="parent"><span>Item 2</span></a>
<div><ul>
<li><a href="#" class="parent"><span>Sub Item 1</span></a>
<div><ul>
<li><a href="#"><span>Sub Item 1.1</span></a></li>
<li><a href="#"><span>Sub Item 1.2</span></a></li>
</ul></div>
</li>
<li><a href="#" class="parent"><span>Sub Item 2</span></a>
<div><ul>
<li><a href="#"><span>Sub Item 2.1</span></a></li>
<li><a href="#"><span>Sub Item 2.2</span></a></li>
</ul></div>
</li>
<li><a href="#"><span>Sub Item 3</span></a></li>
<li><a href="#"><span>Sub Item 4</span></a></li>
<li><a href="#"><span>Sub Item 5</span></a></li>
<li><a href="#"><span>Sub Item 6</span></a></li>
<li><a href="#"><span>Sub Item 7</span></a></li>
</ul></div>
</li>
<li><a href="#" class="parent"><span>Item 3</span></a>
<div><ul>
<li><a href="#" class="parent"><span>Sub Item 1</span></a>
<div><ul>
<li><a href="#"><span>Sub Item 1.1</span></a></li>
<li><a href="#"><span>Sub Item 1.2</span></a></li>
</ul></div>
</li>
<li><a href="#" class="parent"><span>Sub Item 2</span></a>
<div><ul>
<li><a href="#"><span>Sub Item 2.1</span></a></li>
<li><a href="#"><span>Sub Item 2.2</span></a></li>
</ul></div>
</li>
<li><a href="#"><span>Sub Item 3</span></a></li>
<li><a href="#"><span>Sub Item 4</span></a></li>
<li><a href="#"><span>Sub Item 5</span></a></li>
<li><a href="#"><span>Sub Item 6</span></a></li>
<li><a href="#"><span>Sub Item 7</span></a></li>
</ul></div>
</li>
</ul>
</div>
</div>
<br></br><br></br>
<div id="ordenslide">
<div id="slides">
<img src="img/01.jpg">
<img src="img/02.jpg">
<img src="img/03.jpg">
<img src="img/04.jpg" >
</div>
</div>
</div>
<script src="js/jquery.slides.min.js"></script>
<script>
$(function() {
$('#slides').slidesjs({
width: 940,
height: 400,
play: {
active: true,
auto: true,
interval: 4000,
swap: true
}
});
});
</script>
<br>
<div id="banners" style="height:160px; padding-top:10px; margin:35px;">
<div style="width:220px; height:140px; float:left; padding-left: 5px; border-left: 1px dashed #CCC;"><a href><img src="IMG/banner_pap.jpg" width="220" height="140"/></a></div>
<div style="width:220px; height:140px; float:left; padding-left: 5px; border-left: 1px dashed #CCC; padding-right: 5px;"> <a href><img src="IMG/banner_auge.jpg" width="220" height="140" /></a></div>
<div style="width:220px; height:140px; float:left; padding-left: 5px; border-left: 1px dashed #CCC; padding-right: 5px;"><a href><img src="IMG/banner_deberes.jpg" width="220" height="140" /></a></div>
<div style="width:220px; height:140px; float:left; padding-left: 5px; border-left: 1px dashed #CCC; padding-right: 5px;"><a href><img src="IMG/banner_chile_crece_contigo.jpg" width="220" height="140" /></a></div>
</div>
</body>
</html>
