CMS Style
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head><style type="text/css">
html, body {
margin:0;
padding:0;
}
</style>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type='text/css'>
.top {
height: 100px;
width: 100%;
border-bottom-style: solid;
border-top-color: #000;
border-right-color: #000;
border-bottom-color: #000;
border-left-color: #000;
background-image: url(CMS Style-images/topbg.png);
}
.top_content {
background-image: url(CMS Style-images/logo.gif);
background-repeat: no-repeat;
background-position: left 15px;
height: 100px;
width: 800px;
margin-right: auto;
margin-left: auto;
text-align: left;
vertical-align: bottom;
}
.tab {
float: left;
height: 26px;
margin-top: 74px;
margin-right: 4px;
}
.marquee {
background-color: #FFF;
height: 20px;
width: 778px;
margin-right: auto;
margin-left: auto;
border-top-width: 1px;
border-right-width: 1px;
border-bottom-width: 1px;
border-left-width: 1px;
border-right-style: solid;
border-bottom-style: solid;
border-left-style: solid;
border-top-color: #000;
border-right-color: #000;
border-bottom-color: #000;
border-left-color: #000;
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
vertical-align: middle;
padding-right: 10px;
padding-left: 10px;
padding-top: 5px;
}
.content {
width: 778px;
margin-right: auto;
margin-left: auto;
border: 1px solid #000;
padding-right: 10px;
padding-left: 10px;
background-color: #FFF;
margin-top: 5px;
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
padding-top: 5px;
}
.footer {
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
background-color: #FFF;
text-align: center;
height: 35px;
width: 778px;
padding-right: 10px;
padding-left: 10px;
border: 1px solid #000;
margin-right: auto;
margin-left: auto;
margin-top: 5px;
padding-top: 5px;
}
.hotelview {
height: 130px;
width: 650px;
border-top-width: 1px;
border-right-width: 1px;
border-bottom-width: 1px;
border-left-width: 1px;
border-top-style: solid;
border-bottom-style: solid;
border-top-color: #000;
border-right-color: #000;
border-bottom-color: #000;
border-left-color: #000;
margin-right: auto;
margin-left: auto;
background-image: url(CMS Style-images/hotelview.png);
border-right-style: solid;
border-left-style: solid;
padding-top: 20px;
padding-left: 50px;
}
</style>
<script type="text/javascript">
function MM_swapImgRestore() { //v3.0
var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc;
}
function MM_preloadImages() { //v3.0
var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
}
function MM_findObj(n, d) { //v4.01
var p,i,x; if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
if(!x && d.getElementById) x=d.getElementById(n); return x;
}
function MM_swapImage() { //v3.0
var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)
if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}
}
</script>
<style type="text/css">
body {
background-image: url(CMS Style-images/beach_bg.png);
}
</style>
</head>
<body onload="MM_preloadImages('CMS Style-images/community2.png','CMS Style-images/home2.png','CMS Style-images/staff2.png')">
<div class="top">
<div class="top_content">
<div class="tab"><a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image2','','CMS Style-images/home2.png',1)"><img src="CMS Style-images/home1.png" name="Image2" width="80" height="26" border="0" id="Image2" /></a></div>
<div class="tab"><a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('community','','CMS Style-images/community2.png',1)"><img src="CMS Style-images/community1.png" name="community" width="114" height="26" border="0" id="community" /></a></div>
<div class="tab"><a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('staff','','CMS Style-images/staff2.png',1)"><img src="CMS Style-images/staff1.png" name="staff" width="73" height="26" border="0" id="staff" /></a></div>
<div class="tab"><a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('credits','','CMS Style-images/credits2.png',0)"><img src="CMS Style-images/credits1.png" name="credits" width="89" height="26" border="0" id="credits" /></a></div>
<br />
</div>
</div>
<div class="marquee"><!-- HTML codes by Quackit.com -->
<marquee behavior="scroll" direction="left">Welcome to our hotel! You can edit this.</marquee>
</div>
<div class="content">
<br />
<div class="hotelview"><a href="#"><img src="CMS Style-images/loginbutton.gif" width="96" height="109" border="0" /></a></div>
<br />
<br />
<p><strong>Welcome!</strong><br />
<br />
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce velit lacus, iaculis et cursus quis, vestibulum vel turpis. Nunc tempus aliquet aliquam. In at nibh nisi, in pellentesque erat. Phasellus facilisis, turpis aliquet hendrerit egestas, urna magna scelerisque velit, ac consectetur ipsum risus quis velit. Aenean sapien velit, consequat eget accumsan id, vulputate non eros. Maecenas enim dui, scelerisque eu posuere sit amet, tincidunt et eros. Pellentesque dui dolor, iaculis sit amet lacinia vehicula, vestibulum eu odio. Integer et euismod magna. Donec vulputate, elit eget tristique pharetra, tortor erat tristique mauris, in mattis mauris nibh varius leo. Fusce vitae eros nunc, et vulputate nisl.</p>
<p>Morbi nibh risus, bibendum non lobortis eget, condimentum in odio. Praesent ornare eros et urna venenatis blandit. Donec ut libero sit amet diam vehicula facilisis placerat vel dui. Sed euismod, magna eu semper tempor, risus libero consequat orci, a vulputate tellus mauris id leo. Vivamus mattis sollicitudin lectus ut tincidunt. Nam viverra dictum dolor, et eleifend libero molestie a. Ut sit amet semper ipsum. Quisque felis leo, tincidunt in euismod a, molestie id mauris. Ut porttitor, eros vitae euismod fermentum, sem urna adipiscing turpis, ut tristique metus felis eu mi. Morbi ut consequat velit. Fusce ac elit odio, sed scelerisque massa. Integer ut velit nibh. Pellentesque diam enim, vulputate a sagittis tincidunt, auctor in nibh. In leo arcu, laoreet a fermentum eget, auctor at ligula. Phasellus fringilla tempor metus, sed congue elit feugiat sit amet. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div>
<div class="footer">Copyright Yoursitename 2010<br />
</div>
</body>
</html>
Related examples in the same category