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/dynamici...rome/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):

Code:

<!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??

Thread: Vertical centered page with Chrome CSS Drop Down Menu

Thread Tools

Search Thread

Vertical centered page with Chrome CSS Drop Down Menu

Bookmarks

Bookmarks

Posting Permissions