Hola a todos
Estoy trabajando con una plantilla que tiene un ancho fijo de 980px y me gustaría saber como hacerlo para conseguir un diseño que se adapte a la resolución del monitor.He intentado cambiar los píxeles a porcentaje,pero no hay manera,a una resolucíon de 1024x768 se vee muy ancha.Copio aquí parte del código a ver si alguien me puede ayudar.
Muchísimas gracias
html {
height: 100%;
margin-bottom: 1px;
}
form {
display:inline;
}
body {
margin: 0px 0px 0px 0px;
width: 100%;
display: table;
background:url(../images/bg_page.jpg) top repeat-x #0A1C4C;
}
body, td{
font-family: "Trebuchet MS";
font-size: 13px;
color: #333;
line-height: 1.3em;
}
a:link, a:visited {
text-decoration: none;
font-weight: normal;
}
a:hover {
text-decoration: underline;
font-weight: normal;
}
input.button { cursor: pointer; }
p { margin-top: 0; margin-bottom: 5px; }
img { border: 0 none; margin:0px; }
#page_bg {
padding: 0px;
margin: 0px;
margin-bottom: 0px;
}
div#top_menu{
height:54px;
margin:0px auto;
width: 980px;
}
#topnav{ height: 54px; width:980px; margin: 0px; padding:0px; font-weight: bold; }
#topnav ul { margin: 0px 0px 0px 11px; padding: 0; width: auto; float: left; list-style-type:none; }
#topnav ul li{ margin: 0; padding: 0; height: 54px; float: left; position: relative; }
#topnav ul li a{ color: #FFFFFF; font-weight: bold; text-decoration: none; padding: 14px 10px 0px 10px; height:40px; display: block; float: left; }
#topnav ul li a:hover{ background-color: #444444; text-decoration: none; font-weight: bold; color: #fff; }
#topnav ul li ul ul { margin: -50px 0 0 297px; z-index: 100; }
#topnav ul li li { width:auto; height: 35px; }
#topnav ul li li a { color: #000000; text-transform: none; display: block; background: none; width: 277px; border-top: 1px solid #DDDDDD; border-left: 0px; padding: 9px 10px 6px 10px; height:20px; }
#topnav ul li li a:hover{ background: none; background-color: #333333; left: 0; width: 277px; padding: 9px 10px 6px 10px; height:20px; border-top: 1px solid #DDDDDD; }
#topnav ul li ul { left: -999em; top: 54px; left: 0; display: block; height: 36px; width: 277px; position: absolute; z-index: 99; left: -999em; clear: left; margin-top: 0px; margin-left: 0px; }
#topnav ul li:hover ul ul, #topnav ul li:hover ul ul ul { left: -999em; }
#topnav ul li:hover ul, #topnav ul li li:hover ul, #topnav ul li li li:hover ul { left: auto; }
#topnav ul.menu li{
background-image:none;
}
div#main_bg{
margin:0px auto;
width: 979px;
text-align:left;
}
div.banner1{
background: #FFF url(../images/banner1.jpg) top center no-repeat;
}
div#h_area{
margin:0px auto;
width: 964px;
height:382px;
text-align:left;
padding-left:14px;
padding-top:10px;
}
.logo{
display: block;
float:left;
padding-top:0.1em;
margin-bottom:1em;
margin-left:4em;
}
a.logo,a.logo:link,a.logo:hover, a.logo:visited{
font-size:4.2em;
line-height: 1em;
color:#FFFFFF;
text-decoration:none;
font-weight:normal;
font-family: Georgia, "Times New Roman", Times, serif;
}
div#position0{
float:right;
text-align:left;
margin-right: 20px;
}
div#position0 div.search{
width: 185px;
height:43px;
text-align:left;
padding-top: 5px;
padding-left:35px;
background: url(../images/search_bg.gif) top left no-repeat;
}
div#position0 div.search .inputbox {
background:#FFFFFF;
width: 156px;
height: 17px;
font-size: 11px;
color: #454545;
margin:9px 0px 10px 20px;
border: 1px solid #D3D3D3;
padding:5px 2px 2px 2px;
}
div#position0 label{
display:none;
}
div#main_top table.contentpaneopen{
padding:0px;
margin-top:70px;
margin-left:22px;
width:410px;
height:134px;
overflow: auto;
text-align:left;
color:#FFFFFF;
float:left;
}
div#main_top table.contentpaneopen td{
color:#FFFFFF;
}
#leftcolumn{
margin-left:9px;
padding:0px;
width:205px;
float:left;
}
#rightcolumn{
margin-right:9px;
padding:0px;
width:205px;
float:right;
}
#maincolumn{
width:520px;
float:left;
margin:0px 10px 0px 10px;
padding:0px;
overflow:hidden;
}
#maincolumn_middle{
width: 730px;
float:left;
margin:0px 10px 0px 10px;
padding:0px;
overflow:hidden;
}
#maincolumn_big{
width: 957px;
float:left;
margin:0px 10px 0px 10px;
padding:0px;
overflow:hidden;
}
div.path{
margin:10px 0 0 0px;
padding: 5px;
padding-left:30px;
}
/*eliminada imagen del background*/
div.nopad {
float:left;
padding:0 0px 15px 0px;
}
div.nopad ul {
clear: both;
}
