Css menu problem

[Slumpy]

Hi everyone ,

I am new to css , so I still have to learn a lot .
A friend here in Belgium ask me to make a website for him .
I made a little something and found I very nice menu on the solardreamstudios site .
Befor a make some changes to that menu I would like to place it in the middle , and thats my problem , I can't .
Is there anybody who can help me with this .

Thanks
( sorry for my English writing , it's what I leard at school ).:rolleyes:

[dog]

Hey Slumpy,

You could post the code for the page that you are working on (along with the CSS) and that way people could offer you advise more easily.

Another good idea is to take a look for a page online that is acheiving the effect you are looking for. Take a look at the code they have used and see if you can learn anything from them.

Peace,
dog

[Sliight]

If you want to work on it on your own... here's a great tutorial as well. http://www.westciv.com/style_master/house/index.html

The program you can download and demo is quite nice also for working with CSS. I think you can use it for 30 days free with no restrictions, then after that it's $60 if you want to keep using it.

[alexjewell]

Well, they taught you better English than my school taught me French. Haha.

To center the menu, there's two things to do (one thing to make it center in IE and another to make it center in web standard browsers):



#menu_wrap{
text-align: center;} /* For IE */

#menu{
margin: 0px auto;} /* For other browsers */


Then, you would do the following HTML:



<div id="menu_wrap">
<div id="menu">
<!-- MENU HTML HERE -->
</div>
</div>

[Slumpy]

Hello everyone ,

Thank you for reading my post .

dog - How can I post my code here ?
I've been looking everywhere , and I found some , but I don't know css enough to see what I need myself .

Sliight - The tutorial looks great , there's al lot of reading to do there , and I wil do that , thank you .

alexjewell - Thank you for the code , but I don't know where to place it , I tryed some things , but nothing puts the menu into the middel .
I 'm afraid that , helping me with css , is like giving your car keys to a blind person, and ask him to take you home .
But I do my best , thanks anyway .:cool:

[alexjewell]

Slumpy, we will need to see your code in order to help you. If your site is online, you can just post your url. If not, go to the following page and it will show you how to post your code in this forum:

http://www.dynamicdrive.com/forums/misc.php?do=bbcode

[Slumpy]

Here's the URL for my site http://users.edpnet.be/danny/

And really , my menu is going the right way , great , thanks .:D

[Sliight]

Can you also post the style.CSS code? The HTML code we can get at...but with the CSS code we can show you exactly what you want to change to center that menu.

[Slumpy]

Here it is (I hope).



body {
background-color: #000000;
text-align: center;
margin: 0;
padding: 0;
width: 100&#37;;
height: 100%;
}

.container {
background-color: #202020;

margin:0px auto;
text-align: center;
margin-top: 10px;
width: 760px;
height: 580px;
}

.header{
background-color: #ff7f2a;
background-image: url("HeaderBeeld.JPG");
text-align: center;
margin: 0 auto;
width: 750px;
height:120px;
}

.menuheader{
background-color: #878787;
text-align: center;
margin: 2px auto;
width: 750px;
height:25px;
}

.madeby{
background-color: #fd8127;
font-family: verdana, arial, helvetica, sans-serif;
font-size: 60%;
text-align: right;
margin: 0 auto;
width: 760px;
height: 12px;
}

h1 {
font: bold 16px Arial, Helvetica, sans-serif;
}

p {
font: 11px Arial, Helvetica, sans-serif;
}

a {
color: #900;
text-decoration: none;
}

a:hover {
background: #900;
color: #FFF;
}


/* Root = Horizontal, Secondary = Vertical */
ul#navmenu {
margin: 0
border: 0 none;
padding: 0;
width: 500px; /*For KHTML*/
list-style: none;
height: 24px;
}

ul#navmenu li {
margin: 0:
border: 0 none;
padding: 0;
float: center; /*For Gecko*/
display: inline;
list-style: none;
position: relative;
height: 24px;
}

ul#navmenu ul {
margin: 0;
border: 0 none;
text-align: left;
padding: 0;
width: 160px;
list-style: none;
display: none;
position: absolute;
top: 24px;
left: 0;
}

ul#navmenu ul:after /*From IE 7 lack of compliance*/{
clear: both;
display: block;
font: 1px/0px serif;
content: ".";
height: 0;
visibility: hidden;
}

ul#navmenu ul li {
width: 160px;
float: left; /*For IE 7 lack of compliance*/
display: block !important;
display: inline; /*For IE*/
}

/* Root Menu */
ul#navmenu a {
border: 1px solid #FFF;
border-right-color: #CCC;
border-bottom-color: #CCC;
text-align: left;
padding: 0 6px;
float: none !important; /*For Opera*/
float: center; /*For IE*/
display: block;
background: #EEE;
color: #666;
font: bold 10px/22px Verdana, Arial, Helvetica, sans-serif;
text-decoration: none;
height: auto !important;
width: 0px auto;
height: 1%; /*For IE*/
}

/* Root = Horizontal, Secondary = Vertical */
ul#navmenu {
margin: 0;
border: 0 none;
padding: 0;
width: 500px; /*For KHTML*/
list-style: none;
height: 24px;
}

ul#navmenu li {
margin: 0;
border: 0 none;
padding: 0;
float: left; /*For Gecko*/
display: inline;
list-style: none;
position: relative;
height: 24px;
}

ul#navmenu ul {
margin: 0;
border: 0 none;
padding: 0;
width: 160px;
list-style: none;
display: none;
position: absolute;
top: 24px;
left: 0;
}

ul#navmenu ul:after /*From IE 7 lack of compliance*/{
clear: both;
display: block;
font: 1px/0px serif;
content: ".";
height: 0;
visibility: hidden;
}

ul#navmenu ul li {
width: 160px;
float: left; /*For IE 7 lack of compliance*/
display: block !important;
display: inline; /*For IE*/
}

/* Root Menu */
ul#navmenu a {
border: 1px solid #FFF;
border-right-color: #CCC;
border-bottom-color: #CCC;
padding: 0 6px;
float: none !important; /*For Opera*/
float: left; /*For IE*/
display: block;
background: #EEE;
color: #666;
font: bold 10px/22px Verdana, Arial, Helvetica, sans-serif;
text-decoration: none;
height: auto !important;
height: 1%; /*For IE*/
}

/* Root Menu Hover Persistence */
ul#navmenu a:hover,
ul#navmenu li:hover a,
ul#navmenu li.iehover a {
background: #CCC;
color: #FFF;
}

/* 2nd Menu */
ul#navmenu li:hover li a,
ul#navmenu li.iehover li a {
float: none;
background: #EEE;
color: #666;
}

/* 2nd Menu Hover Persistence */
ul#navmenu li:hover li a:hover,
ul#navmenu li:hover li:hover a,
ul#navmenu li.iehover li a:hover,
ul#navmenu li.iehover li.iehover a {
background: #CCC;
color: #FFF;
}

/* 3rd Menu */
ul#navmenu li:hover li:hover li a,
ul#navmenu li.iehover li.iehover li a {
background: #EEE;
color: #666;
}

/* 3rd Menu Hover Persistence */
ul#navmenu li:hover li:hover li a:hover,
ul#navmenu li:hover li:hover li:hover a,
ul#navmenu li.iehover li.iehover li a:hover,
ul#navmenu li.iehover li.iehover li.iehover a {
background: #CCC;
color: #FFF;
}

/* 4th Menu */
ul#navmenu li:hover li:hover li:hover li a,
ul#navmenu li.iehover li.iehover li.iehover li a {
background: #EEE;
color: #666;
}

/* 4th Menu Hover */
ul#navmenu li:hover li:hover li:hover li a:hover,
ul#navmenu li.iehover li.iehover li.iehover li a:hover {
background: #CCC;
color: #FFF;
}

ul#navmenu ul ul,
ul#navmenu ul ul ul {
display: none;
position: absolute;
top: 0;
left: 160px;
}

ul#navmenu {
border:0pt none;
height:24px;
list-style-image:none;
list-style-position:outside;
list-style-type:none;
margin:auto; /* dittuh of dittuh "margin-left:250px;"*/
padding:0pt;
width:500px;
}

/* Do Not Move - Must Come Before display:block for Gecko */
ul#navmenu li:hover ul ul,
ul#navmenu li:hover ul ul ul,
ul#navmenu li.iehover ul ul,
ul#navmenu li.iehover ul ul ul {
display: none;
}

ul#navmenu li:hover ul,
ul#navmenu ul li:hover ul,
ul#navmenu ul ul li:hover ul,
ul#navmenu li.iehover ul,
ul#navmenu ul li.iehover ul,
ul#navmenu ul ul li.iehover ul {
display: block;
}

#menu_wrap{
text-align: center;} /* For IE */

#menu{
margin: 0px auto;} /* For other browsers */

[Sliight]

Strange... doesn't make sense why it's offset... should be way left or center.

The only thing I can think of is try to use a relative position on:

ul#navmenu {
margin: 0;
border: 0 none;
padding: 0;
width: 500px; /*For KHTML*/
list-style: none;
height: 24px;
left: 30&#37;;
position: relative;
}

Essentially that's kind of a fix... you will need to either use a % or px and just align it properly in the center... just fool around with the left: numbers until it centers up.

This isn't a proper fix by any means, but I can't see why it's not doing what it should be doing.

[Slumpy]

Great , I did set it to 20&#37; and now its perfect in ff , only IE is a little to the right .

I was thinking of placing a banner on the right and on the left , maybe that wil help to center .

I let you know when the website is done .

Thank you very mutch for your help , you are a hero .