Hola! quisiera saber porque a la hora de achicar el navegador un poco todo el contenido de mi web se mueve... como puedo solucionarlo? Gracias
Tengo otra duda, como hago para que mi web se vea bien en todas las resoluciones? actualmente solo se ve bien en 1024x768 :\
Aquí les dejo mi código CSS para que me digan lo que necesito cambiar (Esta un poco desordenado creo también) :\ si me echan una mano arreglando el código también les agradecería ^^
Código:
El XHTML<style type="text/css"> body{ background: #333 url('http://www.habbotimes.net/assets/img/web_1.0.0/pagebg.png') repeat fixed; font: 76% arial; margin:0 0 5px 0; padding: 0; } p{ color: #fff; } #contenedor{ width: 950px; margin: 0 auto; padding: 0px 5px 0px 4px; border: 0px solid #5f8096; background: url('http://img246.imageshack.us/img246/7717/icentroqs9.gif') center repeat-y; } #contenedor2{ height: 153px; margin: 0 auto; padding: 0px 0px 0px 0px; border-top: 3px solid #fff; border-bottom:1px solid #ADAF96; background: #49A9B4 url('http://img222.imageshack.us/img222/901/fondosegurofx4.gif') repeat; } #contenedorin1{ float: left; margin: 0 auto; margin: 0 auto; width: 775px; height: 150px; background: url('http://img221.imageshack.us/img221/859/elfondosombrann1.png') top no-repeat; } #contenedorin1 .top{ width: 765px; height: 107px; } #contenedorin1 .topmenu{ margin: 3px; padding-top: 0px; } #contenedorin2{ float: right; width: 225px; height: 153px; padding: 0px 0px 0px 0px; margin: 0 auto; } #derecha{ float: left; margin: 10px 10px 5px 10px; width: 210px; } #izquierda{ float: left; margin: 10px 10px 5px 10px; width: 210px; } #medio{ float: left; margin: 0px 0px 0px 0px; width: 480px; } #topcontainer{ margin-top: 7px; padding: 8px 5px 0px 4px; background: url('http://img126.imageshack.us/img126/5335/itopsitevq8.gif') center no-repeat; } #pie { clear: both; border-top: 1px solid #5e534f; background-color: #7ED0E4; } #pie p{ margin:0; padding:5px 10px } #tabsB { float:left; width:100%; line-height:normal; } #tabsB ul { margin:7px; padding:18px 0px 0px 30px; list-style:none; } #tabsB li { display:inline; margin:0; padding:0; } #tabsB a { float:left; background:url("http://img376.imageshack.us/img376/8052/leftbok1.gif") no-repeat left top; margin:0; padding:0 5px 0 4px; text-decoration:none; } #tabsB a span { float:left; display:block; background:url("http://img376.imageshack.us/img376/9454/rightbfl4.gif") no-repeat right top; padding:7px 10px 4px 5px; color:#fff; } /* Commented Backslash Hack hides rule from IE5-Mac \*/ #tabsB a span {float:none;} /* End IE5-Mac hack */ #tabsB a:hover span { color:#000; } #tabsB a:hover { background-position:0% -42px; } #tabsB a:hover span { background-position:100% -42px; } #tabsB #current a { background-position:0% -42px; } #tabsB #current a span { background-position:100% -42px; } </style>
Código:
Aun no tiene contenido esos ihabbo son bultos <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="es" lang="es"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <title>Titulo de la web</title> <body> <div id="contenedor2"> <div id="contenedorin1"> <div class="top"> <IMG SRC="http://img123.imageshack.us/img123/754/fanlr4.gif"/> </div> <div class="topmenu"> <div id="tabsB"> <ul> <!-- CSS Tabs --> <li id="current"><a href="#"><span><b>iHotel1</b></span></a></li> <li><a href="#"><span><b>iHotel2</b></span></a></li> <li><a href="#"><span><b>iHotel3</b></span></a></li> <li><a href="#"><span><b>iHotel4</b></span></a></li> <li><a href="#"><span><b>iHotel5</b></span></a></li> <li><a href="#"><span><b>iHotel6</b></span></a></li> <li><a href="#"><span><b>iHotel7</b></span></a></li> </ul> </div> </div> </div> <div id="contenedorin2"> <IMG SRC="http://img385.imageshack.us/img385/15/logoihotelxr7.png"/></div> </div></div> <div id="topcontainer"> <br> </div> <div id="contenedor"> <div id="derecha"> <p>ihabbo</p> <p>ihabbo</p> <p>ihabbo</p> </div> <div id="medio"> <p>ihabbo</p> <p>ihabbo</p> <p>ihabbo</p><p>ihabbo</p><p>ihabbo</p> <p>ihabbo</p> <p>ihabbo</p> <p>ihabbo</p> <p>ihabbo</p> <p>ihabbo</p> <p>ihabbo</p> <p>ihabbo</p> <p>ihabbo</p> <p>ihabbo</p> <p>ihabbo</p> <p>ihabbo</p> <p>ihabbo</p> <p>ihabbo</p> <p>ihabbo</p> <p>ihabbo</p> <p>ihabbo</p> <p>ihabbo</p> <p>ihabbo</p> <p>ihabbo</p> <p>ihabbo</p> <p>ihabbo</p> <p>ihabbo</p> <p>ihabbo</p> <p>ihabbo</p> <p>ihabbo</p> <p>ihabbo</p> <p>ihabbo</p> <p>ihabbo</p> <p>ihabbo</p> <p>ihabbo</p> <p>ihabbo</p> <p>ihabbo</p> <p>ihabbo</p> </div> <div id="izquierda"> <p>ihabbo</p> <p>ihabbo</p> <p>ihabbo</p> </div> <div id="pie"><p>ihabboihabboihabbo</p></div> </div> </body> </html>