Align horizontal menu from tutorial in centre of page

Page 1 of 1

6 Replies - 4760 Views - Last Post: 09 October 2009 - 06:12 AM

#1 ianjgough  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 10
  • Joined: 09-October 09

Align horizontal menu from tutorial in centre of page

Posted 09 October 2009 - 02:07 AM

The following came from the tutorial "http://www.dreamincode.net/forums/showtopic33533.htm"

<html>
<head>
<meta name="GENERATOR" content="Microsoft FrontPage 5.0">
<meta name="ProgId" content="FrontPage.Editor.Document">
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<title>Menu</title>

<style type="text/css">
#menu1{
	height:25px;
	font-family:Verdana, Arial, Helvetica, sans-serif;
}
#menu1 ul{
	margin:0;
	padding:0;
	list-style-type:none;
}
#menu1 ul li{
	display:inline;
}
#menu1 ul li a{
	text-decoration:none;
	float:left;
	height:25;
	margin:12px 0;
	padding:15px;
	width:65px;
	text-align:center;
}
#menu1 a:link, #menu1 a:visited{
	color:#fff;
	background-image:url('images/link.gif');
	background-repeat:repeat-x;
	background-position: center 50%;
}
#menu1 a:hover, #menu1 a:active{
	color:#000;
	background-image:url('images/hover.gif');
	background-repeat:repeat-x;
	background-position: center 50%;
}
#menu1 a:link, #menu1 a:visited{
	color:#fff;
	background-image:url('images/link.gif');
	background-repeat:repeat-x;
	background-position: center 50%;
	border: 1px solid #000000
}
#menu1 a:hover, #menu1 a:active{
	color:#000;
	background-image:url('images/hover.gif');
	background-repeat:repeat-x;
	background-position: center 50%;
	border: 1px solid #ff0000;
}
</style>
</head>

<body>


<div id="menu1">
<ul>
   <li><a href="#">Freaking</a></li>
   <li><a href="#">Pretty</a></li>
   <li><a href="#">CSS</a></li>
   <li><a href="#">Menu</a></li>
   <li><a href="#">Just</a></li>
   <li><a href="#">For</a></li>
   <li><a href="#">You</a></li>
</ul>  
</div>

</body>

</html>




See it here
http://ianjgough.com/Menu/
Images can be found in http://ianjgough.com/Menu/images/

I have tried for hours using centre align and margin 0 auto; along with lots of others things i have found on the net but to no help please advise. Many thanks,
Ian

This post has been edited by ianjgough: 09 October 2009 - 02:38 AM


Is This A Good Question/Topic? 0
  • +

Replies To: Align horizontal menu from tutorial in centre of page

#2 Christopher Elison  Icon User is offline

  • D.I.C Head

Reputation: 38
  • View blog
  • Posts: 230
  • Joined: 29-December 08

Re: Align horizontal menu from tutorial in centre of page

Posted 09 October 2009 - 02:17 AM

How about giving your body a width and set the left and right margin to auto, like so:

body {
  margin-left: auto;
  margin-right: auto;
  width: 800px;
}

Was This Post Helpful? 0
  • +
  • -

#3 ianjgough  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 10
  • Joined: 09-October 09

Re: Align horizontal menu from tutorial in centre of page

Posted 09 October 2009 - 02:25 AM

Thanks Christopher Elison but that did not work. Thanks though and for the quick reply, Ian
Was This Post Helpful? 0
  • +
  • -

#4 tommyflint  Icon User is offline

  • D.I.C Addict
  • member icon

Reputation: 34
  • View blog
  • Posts: 679
  • Joined: 24-July 08

Re: Align horizontal menu from tutorial in centre of page

Posted 09 October 2009 - 03:15 AM

Hi Ian I have tested chris's example in your code and it worked perfectly.
Maybe you could post your code once you have have added chris's part so we can check you have added it correctly.

tommyflint

This post has been edited by tommyflint: 09 October 2009 - 03:18 AM

Was This Post Helpful? 0
  • +
  • -

#5 ianjgough  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 10
  • Joined: 09-October 09

Re: Align horizontal menu from tutorial in centre of page

Posted 09 October 2009 - 03:48 AM 

<html>

<head>
<meta name="GENERATOR" content="Microsoft FrontPage 5.0">
<meta name="ProgId" content="FrontPage.Editor.Document">
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<title>Freaking</title>

<style type="text/css">
body {
  margin-left: auto;
  margin-right: auto;
  width: 800px;
}

#menu1{
	height:25px;
	font-family:Verdana, Arial, Helvetica, sans-serif;
}
#menu1 ul{
	margin:0;
	padding:0;
	list-style-type:none;
}
#menu1 ul li{
	display:inline;
}
#menu1 ul li a{
	text-decoration:none;
	float:left;
	height:25;
	margin:12px 0;
	padding:15px;
	width:65px;
	text-align:center;
}
#menu1 a:link, #menu1 a:visited{
	color:#fff;
	background-image:url('images/link.gif');
	background-repeat:repeat-x;
	background-position: center 50%;
}
#menu1 a:hover, #menu1 a:active{
	color:#000;
	background-image:url('images/hover.gif');
	background-repeat:repeat-x;
	background-position: center 50%;
}
#menu1 a:link, #menu1 a:visited{
	color:#fff;
	background-image:url('images/link.gif');
	background-repeat:repeat-x;
	background-position: center 50%;
	border: 1px solid #000000
}
#menu1 a:hover, #menu1 a:active{
	color:#000;
	background-image:url('images/hover.gif');
	background-repeat:repeat-x;
	background-position: center 50%;
	border: 1px solid #ff0000;
}
</style>
</head>

<body>


<div id="menu1">
<ul>
   <li><a href="#">Freaking</a></li>
   <li><a href="#">Pretty</a></li>
   <li><a href="#">CSS</a></li>
   <li><a href="#">Menu</a></li>
   <li><a href="#">Just</a></li>
   <li><a href="#">For</a></li>
   <li><a href="#">You</a></li>
</ul>  
</div>

</body>

</html>

Thanks tommyflint
Was This Post Helpful? 0
  • +
  • -

#6 ianjgough  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 10
  • Joined: 09-October 09

Re: Align horizontal menu from tutorial in centre of page

Posted 09 October 2009 - 06:03 AM

I found this and i think i should be able to use some of this to help with some trial and error.
But if anyone knows the answer and wants to help please by all means but many thanks, Ian
Was This Post Helpful? 0
  • +
  • -

#7 ianjgough  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 10
  • Joined: 09-October 09

Re: Align horizontal menu from tutorial in centre of page

Posted 09 October 2009 - 06:12 AM

Ok all sorted and can be viewed here for any newbies like myself to css.

http://www.ianjgough.com/Menu1/
Was This Post Helpful? 0
  • +
  • -
Page 1 of 1