PDA

View Full Version : how to centralize the two menu in the central of website??


fattat
04-08-2009, 01:36 PM
http://img509.imageshack.us/img509/4431/picture10w.png (http://img509.imageshack.us/my.php?image=picture10w.png)
how to centralize the two menu in the central of website??


below is the css code
body{
font:12px Verdana, Arial, Helvetica;
}
* {padding:0; margin:0}

.dropdown{
float:left;
padding-right:0px;
}

.dropdown dt{
width:188px;
border:2px solid #9ac1c9;
padding:8px;
font-weight:bold;
cursor:pointer;
background:url(images/header.gif);
}

.dropdown dt:hover{
background:url(images/header_over.gif);
}

.dropdown dd{
position:absolute;
overflow:hidden;
width:208px;
display:none;
background:#fff;
z-index:200;
opacity:0;
}

.dropdown ul{
width:204px;
border:2px solid #9ac1c9;
list-style:none;
border-top:none;
}

.dropdown li{
display:inline;
}

.dropdown a, .dropdown a:active, .dropdown a:visited{
display:block;
padding:5px;
color:#333;
text-decoration:none;
background:#eaf0f2;
width:194px;
}

.dropdown a:hover{
background:#d9e1e4;
color:#000;
}

.dropdown .underline{
border-bottom:1px solid #b9d6dc;
}







--------------------------------------------
and here is the html code




<body>
<dl class="dropdown">
<dt id="one-ddheader" onmouseover="ddMenu('one',1)" onmouseout="ddMenu('one',-1)">Dropdown One</dt>
<dd id="one-ddcontent" onmouseover="cancelHide('one')" onmouseout="ddMenu('one',-1)">
<ul>
<li><a href="#" class="underline">Navigation Item 1</a></li>
<li><a href="#" class="underline">Navigation Item 2</a></li>
<li><a href="#" class="underline">Navigation Item 3</a></li>
<li><a href="#" class="underline">Navigation Item 4</a></li>
<li><a href="#">Navigation Item 5</a></li>
</ul>
</dd>
</dl>

<dl class="dropdown">
<dt id="two-ddheader" onmouseover="ddMenu('two',1)" onmouseout="ddMenu('two',-1)">Dropdown Two</dt>
<dd id="two-ddcontent" onmouseover="cancelHide('two')" onmouseout="ddMenu('two',-1)">
<ul>
<li><a href="#" class="underline">Navigation Item 1</a></li>
<li><a href="#" class="underline">Navigation Item 2</a></li>
<li><a href="#" class="underline">Navigation Item 3</a></li>
<li><a href="#" class="underline">Navigation Item 4</a></li>
<li><a href="#">Navigation Item 5</a></li>
</ul>
</dd>
</dl>

<div style="clear:both" />

</body>
</html>

edbr
04-09-2009, 01:41 AM
put them in a div and then centre the div

fattat
04-09-2009, 02:10 AM
put them in a div and then centre the div

can give some example??

edbr
04-09-2009, 03:01 AM
<style type="text/css">
<!--

.centre {
clear: both;
border:#333 1px solid;
width:400px;
text-align:center;
float: center;
margin-right: auto;
margin-left: auto;
position: relative;
}
-->
</style>

<div class="centre">
div centred</div>

fattat
04-09-2009, 05:47 AM
can direct on the dl add in div ??
<div class="centre">
<dl class="dropdown">
<dt id="one-ddheader" onmouseover="ddMenu('one',1)" onmouseout="ddMenu('one',-1)">Dropdown One</dt>
<dd id="one-ddcontent" onmouseover="cancelHide('one')" onmouseout="ddMenu('one',-1)">
<ul>
<li><a href="#" class="underline">Navigation Item 1</a></li>

xristina
04-09-2009, 12:55 PM
try this one..



<body>



<div style="clear: both; width:420px; text-align:center; float: center; margin-right: auto; margin-left: auto; position: relative;">

<dl class="dropdown">
<dt id="one-ddheader" onmouseover="ddMenu('one',1)" onmouseout="ddMenu('one',-1)">Dropdown One</dt>
<dd id="one-ddcontent" onmouseover="cancelHide('one')" onmouseout="ddMenu('one',-1)">
<ul>
<li><a href="#" class="underline">Navigation Item 1</a></li>
<li><a href="#" class="underline">Navigation Item 2</a></li>
<li><a href="#" class="underline">Navigation Item 3</a></li>
<li><a href="#" class="underline">Navigation Item 4</a></li>
<li><a href="#">Navigation Item 5</a></li>
</ul>
</dd>
</dl>
<dl class="dropdown">
<dt id="two-ddheader" onmouseover="ddMenu('two',1)" onmouseout="ddMenu('two',-1)">Dropdown Two</dt>
<dd id="two-ddcontent" onmouseover="cancelHide('two')" onmouseout="ddMenu('two',-1)">
<ul>
<li><a href="#" class="underline">Navigation Item 1</a></li>
<li><a href="#" class="underline">Navigation Item 2</a></li>
<li><a href="#" class="underline">Navigation Item 3</a></li>
<li><a href="#" class="underline">Navigation Item 4</a></li>
<li><a href="#">Navigation Item 5</a></li>
</ul>
</dd>
</dl>

</div>
</body>

fattat
04-09-2009, 03:54 PM
try this one..



<body>



<div style="clear: both; width:420px; text-align:center; float: center; margin-right: auto; margin-left: auto; position: relative;">

<dl class="dropdown">
<dt id="one-ddheader" onmouseover="ddMenu('one',1)" onmouseout="ddMenu('one',-1)">Dropdown One</dt>
<dd id="one-ddcontent" onmouseover="cancelHide('one')" onmouseout="ddMenu('one',-1)">
<ul>
<li><a href="#" class="underline">Navigation Item 1</a></li>
<li><a href="#" class="underline">Navigation Item 2</a></li>
<li><a href="#" class="underline">Navigation Item 3</a></li>
<li><a href="#" class="underline">Navigation Item 4</a></li>
<li><a href="#">Navigation Item 5</a></li>
</ul>
</dd>
</dl>
<dl class="dropdown">
<dt id="two-ddheader" onmouseover="ddMenu('two',1)" onmouseout="ddMenu('two',-1)">Dropdown Two</dt>
<dd id="two-ddcontent" onmouseover="cancelHide('two')" onmouseout="ddMenu('two',-1)">
<ul>
<li><a href="#" class="underline">Navigation Item 1</a></li>
<li><a href="#" class="underline">Navigation Item 2</a></li>
<li><a href="#" class="underline">Navigation Item 3</a></li>
<li><a href="#" class="underline">Navigation Item 4</a></li>
<li><a href="#">Navigation Item 5</a></li>
</ul>
</dd>
</dl>

</div>
</body>


but when i create a table behind the div...the table layout arrangement start from the menu...

and i cant adjust the table to centralize even adjust it to left hand side...

how to settle this problem??

domedia
04-09-2009, 04:03 PM
but when i create a table behind the div...the table layout arrangement start from the menu...

and i cant adjust the table to centralize even adjust it to left hand side...

how to settle this problem??
Don't use tables for layout.

fattat
04-09-2009, 04:35 PM
Don't use tables for layout.

but i want combine css and table...
doesnt have other solution??

domedia
04-09-2009, 07:29 PM
You can use tables as much as you want, but it's not meant for layout purposes.

fattat
04-10-2009, 01:14 AM
You can use tables as much as you want, but it's not meant for layout purposes.

yes...but when i apply the table
the table can't be centralize in the central of website

edbr
04-10-2009, 03:06 AM
then dont use tables , oh wait a minute Domedia already advised that