I build website for 1024 x 768 layout : www.masterlink.co.id
but when you change the resolution the layout location turn to mess. Why is it ?
style.css
#header {
background-color: #999999;
height: 200px;
}
#login {
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
font-style: normal;
height: 50px;
background-color: #FFFF00;
background-image: none;
}
#searchwrapper {
width:310px; /*follow your image's size*/
height:40px;/*follow your image's size*/
background-image:url(Images/search_box.jpg);
background-repeat:no-repeat; /*important*/
padding:0px;
margin:-40px;
position:relative; /*important*/
left:800px;
}
#searchwrapper form { display:inline ; }
.searchbox {
border:0px; /*important*/
background-color:transparent; /*important*/
position:absolute; /*important*/
top:5px;
left:20px;
width:146px;
height:28px;
font:arial;
font-style:italic;
color:white;
}
.searchbox_submit {
border:0px; /*important*/
background-color:transparent; /*important*/
position:absolute; /*important*/
top:3px;
left:163px;
width:30px;
height:25px;
}
#news1 {
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
font-style: normal;
font-weight: normal;
width: 180px;
float: left;
margin-top: 0px;
margin-bottom: 10px;
background-color: #FFFF00;
}
#content {
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
font-style: normal;
font-weight: normal;
position: relative;
visibility: visible;
top: auto;
margin-top: 30px;
height: 300px;
width: 750px;
float: right;
}
#footer p {
font-family: "Times New Roman", Times, serif;
font-size: 12px;
font-style: normal;
font-weight: normal;
font-variant: normal;
height: 10px;
}
#nav #login {
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
font-style: italic;
background-position: right;
right: auto;
}
#content #content1 {
width: 500px;
height: 100px;
float: left;
margin: 10px;
}
#content #content2 {
float: left;
height: 100px;
margin-bottom: 20px;
margin: 10px;
width: 500px;
}
h2 {
font-family: Arial, Helvetica, sans-serif;
font-size: 16px;
font-style: normal;
font-weight: normal;
word-spacing: normal;
white-space: normal;
display: inline-block;
border-top-width: thin;
border-right-width: thin;
border-bottom-width: thin;
border-left-width: thin;
border-top-style: none;
border-right-style: none;
border-bottom-style: none;
border-left-style: none;
}
#footer {
height: 150px;
width: 1000px;
float: left;
background: yellow;
margin-top: 200px;
position: relative;
}
#event {
z-index: 1;
height: 200px;
width: 180px;
float: left;
font-family: "Times New Roman", Times, serif;
font-size: 12px;
background-color: yellow;
position:absolute;
left: 0px;
top: 665px;
}
#banner {
z-index: 2;
height: 180px;
width: 180px;
background-color: yellow;
float: left;
margin-bottom: 10px;
}
.headerStyle {
font-family: Arial, Helvetica, sans-serif;
font-size: 16px;
font-style: normal;
background-image: url(Images/bar.jpg);
background-repeat: no-repeat;
}
#kategori {
z-index: 3;
height: 200px;
width: 180px;
align: left;
position: relative;
margin-top: 5px;
background-color: yellow;
font-family: Arial, Helvetica, sans-serif;
font-size: 13px;
}
#columnleft {
position: relative;
top: 100px;
left: 0px;
background-color: #CCCCCC;
float: left;
width: 200px;
}