PDA

View Full Version : Vertical centered page with Chrome CSS Drop Down Menu



psilos
06-04-2007, 09:27 AM
1) Script Title: Chrome CSS Drop Down Menu

2) Script URL (on DD): http://www.dynamicdrive.com/dynamicindex1/chrome/index.htm

3) Describe problem:

Ok i have been trying to create a center aligned page wich uses Chrome CSS Drop Down Menu.
In order to achieve center aligned page i use absolute positioning and then .dropmenudiv won't appear in the proper position. I know it has something to do with positioning..but i cannot find how to adjust this.

The code is this (i have left only menu and the layout, including css):


<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
* {
padding:0;
margin:0;
}
html, body {
padding:0;
margin:0;
text-align: center;
font-family: Tahoma, Verdana, Arial, "Arial Narrow", Georgia;
font-size:7pt;
height:100%;
width:100%;
background:#ededee;
}
#horizontal {
position:absolute;
top:50%;
left: 0px;
width: 100%;
display: block;
}
#container {
text-align:left;
height:600px;
width: 926px;
margin: 0 auto;
background-color:#ecedef;
border:1px solid #CCCCCC;
margin-left: -463px;
position: absolute;
top: -300px;
left: 50%;
}
/******************************************** Left Menu Rules **************************/
#leftMenu {
float:left;
width:126px;
background-color:#515055;
height:594px;
border-bottom:solid #000000 6px;
}
/******************************************** Main Content Rules **************************/
#content {
float:right;
width:800px;
height:100%;
}
/******************************** Header Rules ********************************/
#header {
background-color:#FFFFFF;
height:85px;
width:100%;
}
#search {
float:left;
height:67px;
width:464px;
}
#logo {
float:right;
height:100%;
width:336px;
}
/******************************************** Menu Rules **************************/
.chromestyle ul{
padding: 0px;
margin: 0;
text-align: left; /*set value to "left", "center", or "right"*/
/*height: 23px;*/
}

.chromestyle ul li{
display: inline;
}

.chromestyle ul li a{
color: #96969a;
padding: 0 4.5px;
margin: 0;
text-decoration: none;
border-right: 1px solid #666666;
font:normal 7pt Tahoma;
line-height:18px;
vertical-align: middle;
float:left;
}

.chromestyle ul li a:hover, #chromemenu .activeTop {
color: #000000;
}

/* ######### Style for Drop Down Menu ######### */

.dropmenudiv{
position:absolute;
top: 0;
font:normal 10px Tahoma;
line-height:16px;
z-index:100;
background-color: white;
width: 150px;
visibility: hidden;
text-align: left;
margin-top: 2px;
margin-left:2px;
}

.dropmenudiv a{
width: auto;
display: block;
text-indent: 3px;
border-left:#FF0000 solid 5px;
border-bottom:#999999 solid 1px;
padding: 2px 0;
text-decoration: none;
color: #67676b;
margin: 0px;
margin-bottom:1px;
}

* html .dropmenudiv a{ /*IE only hack*/
width: 100%;
}

.dropmenudiv a:hover{ /*THEME CHANGE HERE*/
color:#000;
}

#dropmenu2{
width:230px;
}
</style>
<script type="text/javascript" src="Scripts/chrome.js"></script>

</head>

<body>
<div id="horizontal">
<div id="container">
<div id="leftMenu">
</div>
<div id="content">
<div id="header">
<div id="search">
</div>
<div id="logo">
</div>
<div id="chromemenu" class="chromestyle">
<ul>
<li><a href="#" rel="dropmenu1">Εταιρία</a></li>
<li><a href="ereyna/ereyna.html">Έρευνα & Ανάπτυξη</a></li>
<li><a href="#" rel="dropmenu2">Προιόντα</a></li>
<li><a href="ypostiriksi/ypostiriksi.html">Υποστήριξη</a></li>
<li><a href="paragwgi/paragwgi.html">Παραγωγη & Διακίνηση</a></li>
<li><a href="#" rel="dropmenu3" style="border:none">Ολοκληρωμένες Λύσεις</a></li>
</ul>
</div>

<!--1st drop down menu -->
<div id="dropmenu1" class="dropmenudiv" >
<a href="etairia/etairia.html">IΣΤΟΡΙΚΟ</a>
<a href="etairia/egatastaseis.html">ΕΓΚΑΤΑΣΤΑΣΕΙΣ</a>
<a href="etairia/paragwgi.html">ΠΑΡΑΓΩΓΙΚΗ ΔΙΑΔΙΚΑΣΙΑ</a>
<a href="#" style="border-left:#000000 solid 5px;margin:0;">ΔΙΚΤΥΟ ΠΩΛΗΣΕΩΝ </a>
</div>

<div id="dropmenu2" class="dropmenudiv" >
<a href="#" style="border-left:#3e6fb4 solid 5px;">ΣΤΕΓΑΝΩΤΙΚΑ ΥΛΙΚΑ</a>
<a href="#" style="border-left:#52abaa solid 5px;">ΒΕΛΤΙΩΤΙΚΑ ΣΚΥΡΟΔΕΜΑΤΟΣ & ΚΟΝΙΑΜΑΤΩΝ</a>
<a href="#" style="border-left:#d7da41 solid 5px;">KΟΛΛΕΣ & ΑΡΜΟΣΤΟΚΟΙ</a>
<a href="#" style="border-left:#eabb00 solid 5px;">ΕΠΙΣΚΕΥΑΣΤΙΚΑ ΥΛΙΚΑ</a>
<a href="#" style="border-left:#ca501b solid 5px;">ΕΤΟΙΜΟΙ ΣΟΒΑΔΕΣ</a>
<a href="#" style="border-left:#7a2d37 solid 5px;margin:0;">ΒΙΟΜΗΧΑΝΙΚΑ ΔΑΠΕΔΑ </a>
</div>

<div id="dropmenu3" class="dropmenudiv" style="width:200px">
<a href="#">ΣΤΕΓΑΝΩΣΕΙΣ</a>
<a href="#">ΕΤΟΙΜΟΙ ΣΟΒΑΔΕΣ</a>
<a href="#">ΑΠΟΣΤΡΑΓΓΙΣΕΙΣ</a>
<a href="#">ΕΠΙΣΤΡΩΣΕΙΣ ΔΑΠΕΔΩΝ</a>
<a href="#">ΒΑΦΕΣ - ΧΡΩΜΑΤΑ</a>
<a href="#">ΠΑΚΤΩΣΕΙΣ ΜΗΧΑΝΗΜΑΤΩΝ</a>
<a href="#" style="border-left:#000000 solid 5px;margin:0;">ΕΠΙΣΚΕΥΕΣ - ΑΠΟΚΑΤΑΣΤΑΣΕΙΣ </a>
</div>

<script type="text/javascript">
cssdropdown.startchrome("chromemenu")
</script>
</div>
</div>
</div>
</div>

</body>
</html>


Sorry if it seems all greek to u. That's because it is greek language in menu..

Thanx in advance..

psilos
06-05-2007, 07:29 AM
No luck yet...
Anyone??