テンプレート レイアウトの使用から独自の css スクリプトの作成に移行する際に、多くの問題に遭遇しましたが、継続を妨げている問題が 1 つあります。フローティング div を使用して 3 列のレイアウトを正常に作成しましたが、ブラウザーでサイズを変更すると、右側の列が中央の div に重なって表示されます。ウィンドウのサイズを変更すると、Div セクションのシフトにあるスクリプトをインポートしましたが 、成功しませんでした。基本的に、レイアウトをhttp://www.allstarselectric.comの現在のレイアウトと同じように動作させたいのですが、%. クロス解像度のサポートに % を使用していますが、回避策/解決策はありますか、それともピクセルが絶対に必要ですか? どんな助けでも大歓迎です。
CSS:
body {
height: 100%;
width: 100%;
margin: 0px;
padding: 0px;
color: #666;
font-family: Tahoma, Geneva, sans-serif;
font-size: 13px;
line-height: 1.7em;
background-color: #4a4d51;
background-image: url(images/templatemo_body.jpg);
background-repeat: repeat-x;
background-position: top
}
.content{
position: fixed;
width: 100%;
height: 100%;
background-image: url(images/templatemo_body.jpg);
}
.contentbody{
float: left;
width: 70%;
height: 100%;
}
.wrapper {
width:100%
}
.sidebar{
float: left;
width: 15%;
height: 100%;
border: 0px solid #BBB;
background-color:#dddddd;
}
.sidebar li{
list-style-type:none;
margin:0;
padding:0;
}
.sidebar2{
float: left;
width: 15%;
height: 100%;
border: 0px solid #BBB;
background-color:#dddddd;
}
.sidebar2 li{
list-style-type:none;
text-align: center;
margin:0;
padding:0;
}
.chromestyle{
width: 100%;
font-weight: bold;
}
.chromestyle:after{ /*Adds margin between menu and rest of content in Firefox*/
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
/*Affects the background/menustyle*/
.chromestyle ul{
border: 0px solid #BBB;
width: 730px;
height: 45px;
background: url(imgs/navm.jpg) center center no-repeat; /*THEME CHANGE HERE*/
padding: 0 15px;
margin: 0;
text-align: left; /*set value to "left", "center", or "right"*/
}
.chromestyle ul li{
display: inline;
}
/*Affects menu text*/
.chromestyle ul li a{
float: left;
display: block;
color: #000;
padding: 8px 20px;
margin: 0 1px 0 0;
text-decoration: none;
border: none;
}
.chromestyle ul li a:hover, .chromestyle ul li a.selected{ /*script dynamically adds a class of "selected" to the current active menu item*/
color: #fff;
background: #ff0011
center center repeat-x; /*THEME CHANGE HERE*/
}
.current { color: #fff; background: ; }
/* ######### Style for Drop Down Menu ######### */
.dropmenudiv{
position:absolute;
top: 0;
border: 1px solid #BBB; /*THEME CHANGE HERE*/
border-bottom-width: 0;
font:normal 12px Verdana;
line-height:18px;
z-index:100;
background-color: #d5a30b;
width: 200px;
visibility: hidden;
}
.dropmenudiv a{
width: auto;
display: block;
text-indent: 3px;
border-bottom: 1px solid #BBB; /*THEME CHANGE HERE*/
padding: 2px 0;
text-decoration: none;
font-weight: bold;
color: black;
}
* html .dropmenudiv a{ /*IE only hack*/
width: 100%;
}
.dropmenudiv a:hover{ /*THEME CHANGE HERE*/
background-color: #F0F0F0;
}
HTML:
<html>
<head>
<title>Allstars Electric</title>
<meta name="keywords" content="electricians," />
<meta name="description" content="Electrical Contractor DFW" />
<link rel="stylesheet" type="text/css" href="style.css" />
<script src="js/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript" src="js/drop.js">
</script>
<style type="text/css">
<!--
.style2 {color: #FFFF00}
.style3 {
font-size: 36px
}
-->
</style>
<SCRIPT LANGUAGE="JavaScript">
<!--
function JumpToIt(list) {
var newPage = list.options[list.selectedIndex].value
if (newPage != "None") {
location.href=newPage
}
}
//-->
</SCRIPT>
</head>
<body>
<div class="wrapper">
<div class="sidebar" id="sidebar"><li>home</li></div>
<div class="contentbody">
<center>
<div class="chromestyle" id="chromemenu">
<ul>
<li><a href="index.html" class="current">Home</a></li>
<li><a href="specialoffers.html">Special Offers</a></li>
<li><a href="#" rel="dropmenu2">Services</a></li>
<li><a href="about.html">About Us</a></li>
<li><a href="contact.html">Contact</a></li>
<li><a href="#" rel="dropmenu3">Themes</a></li>
</ul>
</div>
<!--1st drop down menu -->
<div id="dropmenu1" class="dropmenudiv">
<a href="#">1</a>
<a href="#">2</a>
<a href="#">3</a>
<a href="#">4</a>
<a href="#">5</a>
</div>
<!--2nd drop down menu -->
<div id="dropmenu2" class="dropmenudiv" style="width: 150px;">
<a href="electrical.html">Electrical</a>
<a href="hvac.html">Heating & Air Conditioning</a>
</div>
<!--3rd drop down menu -->
<div id="dropmenu3" class="dropmenudiv" style="width: 150px;">
<a href="http://www.allstarselectric.com/index.html">Dark</a>
<a href="http://www.allstarselectric.com/light/index.html">Light</a>
</div>
<!-- Dropdown End -->
<br><tr>text/other</br></tr>
</center>
</body>
</div>
</div>
<div class="sidebar2" id="sidebar2"><li>Home</li>
<script type="text/javascript">
cssdropdown.startchrome("chromemenu")
</script>
</div>
</body>
</html>