Hola amigos estoy haciendo esta pagina:
http://richardwarrenlifestyle.com/galeria.html estoy trabajando en un monitor de 1280x1024 y cuando lo pongo a 1024x768 el acordeon de imagenes cambia de posicion e igual si lo trabajo en 1024x768 y cambio la resolucion este acordeon de imagenes se mueve a la izquierda, este acordeon esta dentro de un div llamado "kwick" y esta dentro de un div llamado container, mi codigo es:
HTML[/B]
<body>
<div id="container">
<div class="uno" id="name2">
<div id="kwick" >
<ul class="kwicks"><a href="gallery.html"/>
<li class="kwick opt1"><a href="gallery2.html"/></li>
<li class="kwick opt2"><a href="gallery3.html"/></li>
<li class="kwick opt3"><a href="gallery4.html"/></li>
<li class="kwick opt4"><a href="gallery5.html"/></li>
<li class="kwick opt5"><a href="gallery6.html"/></li>
<li class="kwick opt6"><a href="gallery7.html"/></li>
<li class="kwick opt7"><a href="gallery8.html"/></li>
<li class="kwick opt8"><a href="gallery9.html"/></li>
/>
</div>
</div>
<div class="roll_bio" id="m_bio_gal"><a href="biography.html" class="roll_bio"> </a></div>
<div class="roll_cl" id="m_cl"><a href="clients.html" class="roll_cl"> </a> </div>
<div class="roll_cont" id="m_cont"><a href="contact.html" class="roll_cont"> </a> </div>
<script type="text/javascript">
var myMenu = new ImageMenu($$('#kwick .kwick'),{openWidth:200});
</script>
</div>
</body>
</html>
CSS PARA EL ACORDEON:
/*big menu*/
#kwick {
position: absolute;
width: 692px;
margin-top: 47px;
left: 186px;
top: -1px;
margin-left: auto;
}
#kwick .kwicks {
display: block;
height: 400px;
margin: 0px;
}
#kwick li {
float: left;
}
li:after {
content: "";
}
#kwick .kwick {
display: block;
cursor: pointer;
overflow: hidden;
height: 400px;
width: 73px;
/*padding: 10px;*/
background: #faa892 url(menu_gal_images/gal_1.jpg);
/*border-right: 5px solid #202020;*/
border-right: 2px solid #fff;
}
#kwick .kwick span {
display: none;
}
#kwick opt1 {
background: #9ce782 url(menu_gal_images/gal_1.jpg);
}
#kwick .opt2 {
background: #92bdfa url(menu_gal_images/gal_2.jpg);
}
#kwick .opt3 {
background: #faa892 url(menu_gal_images/gal_3.jpg);
}
#kwick .opt4 {
background: #e78282 url(menu_gal_images/gal_4.jpg);
}
#kwick .opt5 {
background: #000 url(menu_gal_images/gal_5.jpg);
border-right: 2px solid #fff;
}
#kwick .opt6 {
background: #000 url(menu_gal_images/gal_6.jpg);
border-right: 2px solid #fff;
}
#kwick .opt7 {
background: #000 url(menu_gal_images/gal_7.jpg);
border-right: 2px solid #fff;
}
#kwick .opt8 {
background: #000 url(menu_gal_images/gal_8.jpg);
border-right:0;
}
CSS PARA EL CONTAINER:
#container {
WIDTH: 825px;
TEXT-ALIGN: inherit;
margin: 0 auto 0 auto;
height: 400px;
background-color: #4F473E;
margin-top: 47px;
text-decoration: none;
}
Agradeceria muchisimo si alguien me orienta ya que es la primera vez que uso CSS. Un abrazo,
Village