http://www.trishs.net/menutest.html
I have followed the guide at http://www.coffeecup.com/help/articles/ … -designer/
but when I get to Step 6: Positioning Your Menu I am not sure where to put the .center { margin-left:auto; margin-right:auto; >} command in menu-menu.css
I placed it at the top.
Also tried adding <div></div> tags including <div class=”center”> but the menu is still over to the left.
Css Menu How to Center it in Browser...
Tresha Ruttan
Registered User
6 posts
Inger
Senior Advisor
14,628 posts
Online Now
Add the <div class=”center”></center> to your menu in the html file, as described in that help file. Forget the rest.
Add a class in the css file like this:
.center {
width:700px;
margin: auto;
}
You'll have to experiment with the width so that it is just a wee bit wider than your menu.
Came to think of it, it will be easier to adjust the width for the center class if you add this to it:
.center {
width:700px;
margin: auto;
height: 50px;
border: 1px solid yellow;
}
The border is just a tool so that you can see the width of the class better. When you are done, you can just delete that line and the height.
Add a class in the css file like this:
.center {
width:700px;
margin: auto;
}
You'll have to experiment with the width so that it is just a wee bit wider than your menu.
Came to think of it, it will be easier to adjust the width for the center class if you add this to it:
.center {
width:700px;
margin: auto;
height: 50px;
border: 1px solid yellow;
}
The border is just a tool so that you can see the width of the class better. When you are done, you can just delete that line and the height.
Ha en riktig god dag!
Inger, Norway
My work in progress:
Components for Site Designer and the HTML Editor: https://mock-up.coffeecup.com
Inger, Norway
My work in progress:
Components for Site Designer and the HTML Editor: https://mock-up.coffeecup.com
Tresha Ruttan
Registered User
6 posts
Thanks for the tips. Now, at the beginning part of the .html I have put <div class=”center”>
<style type="text/css">
<!--
body {
color:#FF00E5;
background-color:#000000;
}
a { color:#66FF00; }
a:visited { color:#00FF1A; }
a:hover { color:#00FF1A; }
a:active { color:#FF00E5; }
-->
</style>
<div class=”center”>
<ul class="menu-menu">
and at the end </center>
<li><a href="http://www.trishs.net/blufaerie/">Blog</a></li>
</ul>
</li>
</ul>
<link rel="stylesheet" type="text/css" href="css/menu-menu.css" media="screen">
</center>
</head>
<body>
Are these the correct places to put the code? I am new to CSS.
In the menu, at the top, I have put
.center {
width:700px;
margin: auto;
}
and tried a couple of numbers for the width but no change so far.
Inger
Senior Advisor
14,628 posts
Online Now
I think you have misunderstood a bit. Here is a mockup page with a menu:
Notice that the div class="center" ends after the menu as just </div>
The css code:
or without the height and border, has to go in the css file menu-menu.css, not in the styles at the beginning of the html document. Hope this was clearer.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="generator" content="CoffeeCup HTML Editor (www.coffeecup.com)">
<meta name="created" content="må, 26 sep 2011 18:14:18 GMT">
<meta name="description" content="">
<meta name="keywords" content="">
<title></title>
<style type="text/css">
<!--
body {
color:#FF00E5;
background-color:#000000;
}
a { color:#66FF00; }
a:visited { color:#00FF1A; }
a:hover { color:#00FF1A; }
a:active { color:#FF00E5; }
-->
</style>
<!--[if IE]>
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<link rel="stylesheet" type="text/css" href="css/menu-menu.css" media="screen">
</head>
<body>
<div class="center">
<ul class="menu-menu">
<li class="first"><a href="http://">Untitled1</a></li>
<li><a href="http://">Untitled2</a></li>
<li><a href="http://">Untitled3</a></li>
<li><a href="http://">Untitled4</a></li>
<li><a href="http://">Untitled5</a></li>
<li><a href="http://">Untitled6</a></li>
<li><a href="http://">Untitled7</a></li>
</ul>
</div>
</body>
</html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="generator" content="CoffeeCup HTML Editor (www.coffeecup.com)">
<meta name="created" content="må, 26 sep 2011 18:14:18 GMT">
<meta name="description" content="">
<meta name="keywords" content="">
<title></title>
<style type="text/css">
<!--
body {
color:#FF00E5;
background-color:#000000;
}
a { color:#66FF00; }
a:visited { color:#00FF1A; }
a:hover { color:#00FF1A; }
a:active { color:#FF00E5; }
-->
</style>
<!--[if IE]>
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<link rel="stylesheet" type="text/css" href="css/menu-menu.css" media="screen">
</head>
<body>
<div class="center">
<ul class="menu-menu">
<li class="first"><a href="http://">Untitled1</a></li>
<li><a href="http://">Untitled2</a></li>
<li><a href="http://">Untitled3</a></li>
<li><a href="http://">Untitled4</a></li>
<li><a href="http://">Untitled5</a></li>
<li><a href="http://">Untitled6</a></li>
<li><a href="http://">Untitled7</a></li>
</ul>
</div>
</body>
</html>
Notice that the div class="center" ends after the menu as just </div>
The css code:
.center {
width:700px;
margin: auto;
height: 50px;
border: 1px solid yellow;
}
width:700px;
margin: auto;
height: 50px;
border: 1px solid yellow;
}
or without the height and border, has to go in the css file menu-menu.css, not in the styles at the beginning of the html document. Hope this was clearer.
Ha en riktig god dag!
Inger, Norway
My work in progress:
Components for Site Designer and the HTML Editor: https://mock-up.coffeecup.com
Inger, Norway
My work in progress:
Components for Site Designer and the HTML Editor: https://mock-up.coffeecup.com
Tresha Ruttan
Registered User
6 posts
Got it. Thanks very much. The code was not quite right, in the wrong order etc. All fixed. I'll now work on updating the rest of the pages. Appreciate the help.
Inger
Senior Advisor
14,628 posts
Online Now
Glad it worked out! 
Ha en riktig god dag!
Inger, Norway
My work in progress:
Components for Site Designer and the HTML Editor: https://mock-up.coffeecup.com
Inger, Norway
My work in progress:
Components for Site Designer and the HTML Editor: https://mock-up.coffeecup.com
Have something to add? We’d love to hear it!
You must have an account to participate. Please Sign In Here, then join the conversation.
