• (2 Pages)
  • +
  • 1
  • 2

CSS pretty Horizontal and Vertical Menus Rate Topic: ***** 1 Votes

#16 Footsie  Icon User is offline

  • D.I.C Regular
  • member icon

Reputation: 20
  • View blog
  • Posts: 368
  • Joined: 20-September 07

Posted 19 May 2009 - 02:35 PM

I thought I would just post a small problem I came across while working through this tutorial. Just before your first Photoshop screenshot your text says to make the graphic 25px high and 3px wide. However in your screenshot it shows the height at 50px.

I used the size as 25px high which was a big mistake because the graphic does not fill the menu box.
It took me a long time to discover why it wouldn't work.

Just make sure your graphics you create are 50px high not 25!

Thanks for a great tutorial though.
Was This Post Helpful? 0
  • +
  • -

#17 SixOfEleven  Icon User is offline

  • using Caffeine;
  • member icon

Reputation: 930
  • View blog
  • Posts: 6,316
  • Joined: 18-October 08

Posted 12 June 2009 - 05:22 PM

I used your tutorial for my web sites (vertical menus) and it works great!
Was This Post Helpful? 0
  • +
  • -

#18 bob83  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 1
  • Joined: 18-January 10

Posted 01 February 2010 - 05:32 PM

Excellent tutorial! I am fairly new to CSS, and I have been working on a menu like your horizontal menu, but instead of changing the picture, mine drops down lists of further menu options when you hover over the parent images. The problem I have run into is this: I want to get the whole thing to be centered on the page, regardless of the size. I can get it to center by setting left:50% and setting margin-left to half the size of the whole menu, but causes problems when the window is reduced (displays on multiple lines). Do you have any tricks to center a horizontal menu like this and keep it all on the same line in smaller windows? Here is my code.

CSS First:
<style type="text/css">
#body
{
	background-color:#666666;
	margin-left:5em;
	margin-right:5em;
}
p.navbar
{
	background-color:maroon;
	border:thick #000000 groove;
	text-align:center;
}
img.nav
{
	float:inherit;
	height:2em;
	width:inherit;
	background-color:maroon;
	top:-1em;
}
p.text
{
	padding-left: 16em;
}
p.center
{
	text-align:center;
}
#h1
{
	color:maroon;
	text-align:center;
	font-family:"Brush Script", "French Script MT", "Edwardian Script ITC";
	font-size:64px;
}
#h2
{
	color:#CC6699;
	border-color:#FFFFFF;
	margin-top:64px;
	text-align:center;
}
div.nav
{
	margin-top:-1em;
	left:50%;
	margin-left:225px;
}
#menu ul
{
	margin-left:-2.5em;
	text-align:center;

}
#menu li
{
	list-style-type:none;
	border: black solid 1px;
	float:left;
	width:10em;
	background-color: maroon;
}
#menu a
{
	display: block;
	color: black;
	text-decoration:none;
	padding-left:3em;
}
#menu a:hover
{
	background-color:red;
}
#menu li ul
{
	display:none;
	margin-left:-2.5em;
}
#menu li:hover>ul
{
	display:block;
}
</style>


Now the HTML:

<!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 content="text/html; charset=utf-8" http-equiv="Content-Type" />
<title>Untitled 1</title>
<style type="text/css">
@import url('profilestyle.css');
</style>
<script type="text/javascript">
	//<![CDATA[
	//from innerHTML.html	
	function loadPage(option)
	{
		output=document.getElementById("content");
		if(option==1)
		{
			output.innerHTML="<br/><iframe src='resume.html' width=95% height='400px' frame=0;/>";
		}
	}
	//]]>
</script>
</head>

<body bgcolor="333333">
<p class="center"><img src="ProfileHeader.jpg" height="120px" width="550px" alt="Robert Jenkins Online Profile"/></p>
<center><div id="menu" class="nav">
<ul>
	<li><img class="nav" src="ContentNavigator.jpg"/></li>
	<li><img class="nav" src="CredentialsButton.jpg" alt="Credentials Button"/>
		<ul>
			<li><a onclick="loadPage('1')" id="resume">Resume</a></li>
			<li><a href="recommendations.html" id="recommendations">Recommendations</a></li>
		</ul>
	</li>
	<li><img class ="nav" src="ContactButton.jpg" alt="Contact Button"/>
		<ul>
			<li><a href="mailto: rbob113083@aol.com" id="email">E-mail Robert</a></li>
			<li><a href="contactform.html" id="contact">Contact Form</a></li>
		</ul>
	</li>
	<li><img class="nav" src="SamplesButton.jpg" alt="Samples Button"/>
		<ul>
			<li><a href="websamples.html" id="webasmples">Web Samples</a></li>
			<li><a href="graphicssamles.html" id="graphicsamples">Graphics Samples</a></li>
			<li><a href="oopsamples.html" id="oopsamples">C and C++ Samples</a></li>
		</ul>
	</li>
	<li><img class="nav" src="ContentNavigator.jpg"/></li>
</ul>
</div></center><br/><br/>
<center><div id="content" class="output">
	Nothing is here yet.</div></center>
<br/>
</body>
</html>

Was This Post Helpful? 0
  • +
  • -
  • (2 Pages)
  • +
  • 1
  • 2