Jag försöker att få en sida att se likadan ut i olika upplösningar men det vill sig inte. Mina kunskaper slutar här helt enkelt.
Skulle vara kanon om nån ville titta lite på koderna och visa hur man ändrar från fasta pixlar till att det förjer med och ser lika ut i olika upplösningar.
index.htm
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<link rel="shortcut icon" href="../../../Inetpub/wwwroot/mamma/img/favicon.ico" >
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"/>
<meta name="description" content="description"/>
<meta name="keywords" content="keywords"/>
<meta name="author" content="author"/>
<link rel="stylesheet" type="text/css" href="../../../Inetpub/wwwroot/mamma/stil.css" media="screen"/>
<title></title>
</head>
<body style="background-color: #F4F4FF; ">
<body onContextMenu="return false;" onSelectStart="return false;">
<div class="top">
<div class="header">
<div class="left" style="width: 780px; height: 101px">
<img border="0" src="../../../Inetpub/wwwroot/mamma/img/logg.jpg" width="776" height="101" usemap="#FPMap0"></div>
</div>
<div class="container">
<div class="navigation" style="width: 775px; height: 22px">
</div>
<div class="main">
<div class="content" style="width: 777px; height: 600px">
<iframe src="open.asp" name="I1" width="100%" height="100%" frameborder="0" scrolling="auto" target="_self">
</iframe></div>
<div class="bottom">
<div class="under" style="width: 777px; height: 17px">
<iframe src="bottom.asp" name="I1" width="100%" height="100%" frameborder="0" scrolling="auto" target="_self"></iframe>
</div>
</body>
</html>
stil.css
html {min-height: 100%;}
* {
margin: 0;
padding: 0;
}
a {color: #963;}
a:hover {color: #C60;}
body
{
font: normal 62.5% Tahoma,sans-serif;
}
p,code,ul {padding-bottom: 1.2em;}
li list-style: none;}
.container {
background: #ffffff;
font-size: 1.2em;
margin: 0 auto;
padding: 0 10px 10px;
width: 780px;
border-left: 2px solid #666666;
border-right: 2px solid #666666;
border-bottom: 2px solid #666666;
}
.top {
background: #f4f4ff;
padding: 5px 0px 0;
}
.header {
background: #FFF;
font-size: 1.2em;
height: 110px;
margin: 0 auto;
padding: 10px 10px 0px;
width: 780px;
border-left: 2px solid #666666;
border-right: 2px solid #666666;
border-top: 2px solid #666666;
}
.header .left {
background: #ffffff;
line-height: 110px;
text-align: center;
width: 564px;
}
.navigation {
background: url('../../../Inetpub/wwwroot/mamma/img/nav.gif');
}
.navigation a {
background: #D9E1E5 url('../../../Inetpub/wwwroot/mamma/img/nav.gif');
border-right: 1px solid #AFBEC7;
color: #575757;
display: block;
float: left;
line-height: 22px;
text-decoration: none; font-style:normal; font-variant:normal; font-weight:bold; font-size:1.1em; font-family:sans-serif; padding-left:15px; padding-right:15px; padding-top:0; padding-bottom:0
}
.navigation a:hover {background-position: left bottom; color: #7575e3;}
.main {
border-top: 4px solid #fff;
background: url(img/bgmain.gif) repeat-y;
}
.content {
float: left;
margin: 0px 0;
padding: 0 1px;
width: 555px;