PDA

View Full Version : CSS Drop down menu


snpri3
12-04-2007, 11:34 PM
HEllo all im new here, well im a complete dumbshit when it comes to Dreamweaver i can bearly edit a line of text. i used to know how to use it but years ago. And no i got this website to make well by christmass latest i need it done by so im kind of in a rush. anyways....



i posted a screenshot of where i want my Drop down menu, i just want a simple but yet effective drop down menu, ive read so many tutorials and i keep failing i dont know what i do wrong everything just moves. the current selection in Dreamwever is the part that should be a verticle menu, i tried using spry verticle menu, then everything just messes up. like cant i add some lines of text where my selection is and make it pop out, i struggled in Flash and its not bad anyways but it wont fit in my page, cause of the stupid white background. please help, im a graphic designer and i would do anything to pay back.


http://img455.imageshack.us/img455/1820/75851177yb0.jpg

edbr
12-05-2007, 12:04 AM
check out stu nichols on (i think) csplay.co.uk) there is a great selection of css menus

snpri3
12-05-2007, 12:38 AM
check out stu nichols on (i think) csplay.co.uk) there is a great selection of css menus

yeah thanx, but its no problem finding the CSS menus, its installing into my selection like i mentioned. whatever code i put in there it just screws up somehow and doesnt work, i would like the existing backgroun as it took a while to create where the menu is and just expand the links into a verticle menu, im sure it doesnt sound hard. but im a noob at this so its very difficult

edbr
12-05-2007, 03:40 AM
post your code

snpri3
12-05-2007, 05:57 AM
this is the code for the current menu

<div id="menu">
<ul>
<li class="first"><a href="#">Home


</a></li>
<li><a href="#">Home Moves</a></li>
<li><a href="#">Business Moves</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Contact</a></li>
</ul>
</div>

edbr
12-05-2007, 08:25 AM
sorry I wasn't clear the problem is probably in your styling so the code for the div and classes relevant to your layout

snpri3
12-05-2007, 11:56 AM
i added txt. attachments for both the CSS style sheet and the entire website code. i hope this helps

edbr
12-06-2007, 01:18 AM
I am a bit confused . you have a menu bar this is not a drop down menu though, just a menu to display vertically in blocks.

In your code you show background of images , you will have to check the sixzes of these to be sure they are not to0 large.
also you show in one link
<li><a href="#" class="style12">Home Moves</a></li>
I would change to
<li><a href="#" >Home Moves</a></li>
keep the links consistent.
file:///C:/Documents%20and%20Settings/Administrator/Desktop/ScreenShot.gif
as far as drop down menus pls check the link I gave you an see a lot of options there

snpri3
12-06-2007, 05:07 AM
well cool thanx for the tip, but i still dont understand on how to use the code in my dreamweaver document. i want to replace the current menu and keep the background image and just have a menu. where do i start?

edbr
12-06-2007, 05:41 AM
you have different options to view docs in Dw . design/split and code.
select split then where ever you select in design part will also be highlighted in code .
If you just want a menu , not in blocks then[
CODE] <div id="menu">
<a href="index.htm">Home </a> </br>
<a href="your page.htm" >Home Moves</a> </br>
<a href="your page.htm">Business Moves</a> </br>
<a href="your page.htm"">About</a> </br>
<a href="your page.htm"">Contact</a>

</div>[/CODE]
replacing your page with the actual page name.

Cary
12-06-2007, 07:54 AM
Here's a method based on a sperling.com tutorial (http://www.sperling.com/examples/menuv/).

It's not perfect, so backup your html and css before making the changes below.

You'll also need to download the csshover.htc file (http://www.xs4all.nl/~peterned/csshover.html).

Put this piece of code in the head of your html:
<!--[if lt IE 7]>
<style type="text/css" media="screen">
body{behavior:url(csshover.htc);}
</style>
<![endif]-->

Use something like this for your menu:
<div id="menu">
<ul>
<li><a href="#" class="first">Home</a></li>
<li><a href="#">Home Movies &gt;&gt;</a>
<ul>
<li><a href="#">Home Movies:1</a></li>
<li><a href="#">Home Movies:2</a></li>
<li><a href="#">Home Movies:3</a></li>
<li><a href="#">Home Movies:4</a></li>
</ul>
</li>
<li><a href="#">Business Movies &gt;&gt;</a>
<ul>
<li><a href="#">Business Movies:1</a></li>
<li><a href="#">Business Movies:2 &gt;&gt;</a>
<ul>
<li><a href="#">Business Movies:2:1</a></li>
<li><a href="#">Business Movies:2:2</a></li>
<li><a href="#">Business Movies:2:3</a></li>
<li><a href="#">Business Movies:2:4</a></li>
</ul>
</li>
<li><a href="#">Business Movies:3</a></li>
<li><a href="#">Business Movies:4</a></li>
</ul>
</li>
<li><a href="#">About</a></li>
<li><a href="#">Contact &gt;&gt;</a>
<ul>
<li><a href="#">Contact:1</a></li>
<li><a href="#">Contact:2</a></li>
<li><a href="#">Contact:3</a></li>
<li><a href="#">Contact:4</a></li>
</ul>
</li>
</ul>
</div>

And replace the menu portion of your css code with this:
/* Menu */

/* Fix IE. Hide from IE Mac \*/
* html #menu ul li{
float: left;
height: 1%;
}

* html #menu ul li a{
height: 1%;
}
/* End */

#menu {
float: left;
width: 200px;
height: 200px;
background: url(img03.jpg); /* double-check the image paths */
position: relative;
z-index: 10;
}

#menu a {
display: block;
padding: 8px 10px;
background: url(img05.gif) repeat-x; /* double-check the image paths */
text-decoration: none;
font-size: 100%;
font-weight: bold;
color: #FFFFFF;
white-space: nowrap;
}

#menu a:hover {
text-decoration: underline;
}

#menu .first a {
background: none;
}

#menu li
{
list-style-type: none;
}

#menu ul li
{
position: relative;
}

#menu li ul
{
position: absolute;
top: 0;
left: 160px;
display: none;
}

div#menu ul {
margin: 0;
padding: 0 20px;
width: 160px;
}

#menu ul ul, div#menu ul ul ul
{
margin: 0;
padding: 0;
width: 160px;
}

div#menu ul ul, div#menu ul ul ul, div#menu ul li:hover ul ul, div#menu ul li:hover ul ul ul
{
display: none;
}

div#menu ul li:hover ul, div#menu ul ul li:hover ul, div#menu ul ul ul li:hover ul
{
display: block;
}

snpri3
12-06-2007, 07:35 PM
shucks thanx allot guys. i did what Cary said and it worked out ok actually, except just this... for some reason when i put the code in the picture disapeared where the menu used to be. but it does work, just doesnt fit right, how would i modify these parts i described? also some kind of coding seems to appear on top of the page

http://i12.tinypic.com/8246moo.jpg

Cary
12-06-2007, 08:14 PM
I left two notes in the css I supplied to remind you to make sure to fix the image paths. It looks like you didn't do that, so the images aren't showing up.

There's also something messed up in the head of your html which is causing the embedded styling code to show up at the top of the page.

This is how the head looked when I finished with it:

<!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 http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Transition by Free Css Templates</title>
<meta name="keywords" content="" />
<meta name="description" content="" />
<!--[if lt IE 7]>
<style type="text/css" media="screen">
body{behavior:url(csshover.htc);}
</style>
<![endif]-->
<link href="default.css" rel="stylesheet" type="text/css" />
<style type="text/css">
<!--
.style3 {color: #85C329}
.style6 {
font-size: 10px
}
.style7 {
color: #3399F
}
.style9 {color: #3586B7}
.style11 {color: #2173B6}
-->
</style>
<script src="Scripts/AC_RunActiveContent.js" type="text/javascript"></script>
</head>

I just noticed you have "color: #3399F". The Hex number should be either 3 or 6 characters long, not 5.

snpri3
12-06-2007, 09:49 PM
what thats awsome thanx for the help it actually works, but you mentioned to download that file you provided the link to, where do i input the code? and what do i save it as, and how would i specify the path towords this document.

also when my menu drops out its just lettering with links, how would i make boxes with slightly faded colors around those? is this why the script HTC is there for?

Cary
12-06-2007, 10:43 PM
Check where I placed this code in the head code above.

<!--[if lt IE 7]>
<style type="text/css" media="screen">
body{behavior:url(csshover.htc);}
</style>
<![endif]-->

This code works if the csshover.htc file is in the same folder/directory as the html. It simply allows the menu to work in IE6. Download the zip file, uncompress it and copy the csshover.htc file into the same folder as your html.

You could just change the background images you're using to make the background faded, or I'm probably not understanding your question correctly.

snpri3
12-06-2007, 11:09 PM
thank you so much i got the htc file in and its all cool, now about the boxes and transparancy i was talking about. heres a screenshot i edited in PS, like boxed menu so its more visible because when the drop down menu goes to the right its bearly visible to the eye what it sais because the logo. so there must be a way to create a menu with boxes like allot of other drop down menus ive seen

http://i11.tinypic.com/7y2j9l2.jpg

Cary
12-06-2007, 11:39 PM
Looking at this CSS...

#menu a {
display: block;
padding: 8px 10px;
background: url(img05.gif) repeat-x; /* double-check the image paths */
text-decoration: none;
font-size: 100%;
font-weight: bold;
color: #FFFFFF;
white-space: nowrap;
}


...replace the background image path with the image you want behind the links or just use a background color.

snpri3
12-07-2007, 01:48 PM
thanx for all the help once again. but since you know your stuff, how about telling me this one for the last time.

how do i make the buttons lights up on Rollover with mouse?
and one more
How would i go about making the fly-out part of the menu more closer to each other without any gaps, but yet keep gaps in the other one?
http://i6.tinypic.com/6ynov39.jpg

Cary
12-07-2007, 05:57 PM
Post your complete css stylesheet like you did before so we can see what you've done and what can be changed to move them closer together.

snpri3
12-07-2007, 11:40 PM
Hey thanks allot for this eh, and heres the CSS code i changed some things around including (background: image path) for the Sub menus.

Cary
12-08-2007, 04:38 AM
How would i go about making the fly-out part of the menu more closer to each other without any gaps, but yet keep gaps in the other one?

I misread this before. I thought you wished to remove all gaps. You can't have any gaps because people would have trouble using the menu when their mouses pass over the gap between the menu items. The menu will vanish because the mouse won't be hovering over it anymore.

You can simulate the gap by using a gif image for the link backgrounds and leaving the edges of the gif transparent. Don't use 32bit png or the menu will look really bad in IE6. You can use different backgrounds on different links by making use of classes with the anchor tags, so some will appear to have gaps while others can use a background image without transparent edges.

how do i make the buttons lights up on Rollover with mouse?

The styling below will do this (see the notes for "#menu a:hover"), but I also changed the widths of some things because their widths are important. The comments I left explain how I calculated the width to use.

I also made some other changes so the font size can be increased a little more in Firefox before the menu starts shoving things around.

/* Menu */

/* Fix IE. Hide from IE Mac \*/
* html #menu ul li{
float: left;
height: 1%;
}

* html #menu ul li a{
height: 1%;
}
/* End */

#menu {
float: left;
width: 200px;
height: 200px;
background: url(images/img03.jpg);
position: static;
z-index: 10;
}

#menu a {
display: block;
padding: 8px 12px;
background: url(images/img05.png) repeat-x;
text-decoration: inherit;
font-size: 94%;
height:19px; /* 19px + 16px (the padding top and bottom) = 35px (#menu li's height) */
font-weight: bolder;
color: #FFFFFF;
white-space: nowrap;
}
#menu a:hover {
text-decoration: underline;
background-image: none; /* or whatever background image you wish to change to on hover */
background-color: red; /* whatever background color you want if there is no image. */
}

#menu .first a {
background: none;
}

#menu li
{
list-style-type: none;
height: 35px;
}

#menu ul li
{
position: relative;
}

#menu li ul
{
position: absolute;
top: 0;
left: 160px; /* must equal the width given below */
display: none;
}

div#menu ul {
margin: 0;
padding: 12px 20px 0;
width: 160px; /* 160px plus 40px (left and right padding) must equal 200px (#menu's width) */
}

#menu ul ul, div#menu ul ul ul
{
background: url(images/img06.png) repeat-x;
margin: 0;
padding: 0;
width: 160px; /* must equal the width given above */
}

div#menu ul ul, div#menu ul ul ul, div#menu ul li:hover ul ul, div#menu ul li:hover ul ul ul
{
display: none;
}

div#menu ul li:hover ul, div#menu ul ul li:hover ul, div#menu ul ul ul li:hover ul
{
display: block;
}

snpri3
12-25-2007, 09:11 PM
hey thank you so much cant thank you enough. i basicly finished the menu and came out great. just got a quick question how would i go about seting up the links on the buttons so they work?

also off topic how do i create a List/menu with Dates in it for people to choose when they want to move for ex.

this also from a moving company , and im trying to create a Form for peopel to fill out, but i dont know how to make those drop down lists with information in it.

Important also: When they fill out everything how would i go about collecting all the information and sending it to an email when they click finish for example.
http://i16.tinypic.com/8akv0gi.jpg


Heres what i have so far: i want it so when people click the next button it takes them to the next page , like ^^^ that page

http://i10.tinypic.com/72uzwnp.jpg

Cary
12-26-2007, 03:48 AM
hey thank you so much cant thank you enough. i basicly finished the menu and came out great. just got a quick question how would i go about seting up the links on the buttons so they work?

If you still have href="#", you can change that to href="index.html" or whatever the path and page is you wish to link to.

also off topic how do i create a List/menu with Dates in it for people to choose when they want to move for ex.

You do that with a form using "select" and "option" tags.

Important also: When they fill out everything how would i go about collecting all the information and sending it to an email when they click finish for example.

That can done using PHP.

snpri3
12-26-2007, 07:47 PM
i dont think i am any firmiliar with PHP how does that work. ? is there a tutorial or a how to?

Cary
12-26-2007, 10:37 PM
Well, much like you need javascript to tell a browser to do things, you need a server-side scripting language like PHP or ASP to tell the server to do things like take information and email it. Take a look at Dreamweaver Club's PHP tutorials.

snpri3
01-01-2008, 09:51 PM
Thank you all for the Help, Cary if you need something just hola at me. You can check out the website and see how it came out. www.promoves.ca

Now can you do me a favour go the that website in Internet Explorer and then Firefox, and tell me if you notice something ****ed up, and i dont know why its soo much difference in Firefox and Internet explorer.

Cary
01-02-2008, 04:05 AM
Well, it looks better in IE 7 than it does in IE 6, but only because IE 7 can handle transparent PNG images. IE 6 just makes the transparent areas of 32bit PNG's an opaque grayish color, or it makes them completely clear in the case of 8bit PNG's.

Validating your pages and checking in multiple browsers as you go can prevent a lot of headaches. The fact that the page isn't centering in IE as it does in FF means IE is rendering the page in quirks mode. This can happen if the Doctype is missing, incorrect or preceded by a blank line or any text.

The Validator gives this message, "This page is not Valid (no Doctype found)!"

Since you coded the page in the manner of xhtml you'll need an xhtml Doctype, but your use of align="center" means you'll have to go with transitional. You also need to remove that blank line at the top of the xhtml or your page will still be in quirks mode even when you correct the Doctype.

So hears the head of your page with the correct Doctype:

<!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 http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>ProMoves.ca</title>
...
...

Now the page really looks bad, in IE and FF. One thing at time. First squash the remaining validation errors.

One of the errors involves an img tag which needs to be closed in the xhtml manner.

<img src="images/25.png" alt="asda" width="30" height="15" align="right" />

The other is the presence of a link within ul tags, but outside the li tags. Move the link outside the ul tags.

<div class="content">
<ul class="list">
<li><span class="style20">Put pictures in boxes between sheets, blankets or towels for extra protection</span>.</li>
<li class="style21">Dispose of flammable liquids </li>
<li class="style21">Taking the door of the hinges helps with bigger items. </li>
</ul>
<a href="#" class="style22">Read more&hellip;</a>
</div>

Now onto the styling...

You have this style embedded in the head of your html:

.style22 {
font-size: 12
}

This style was being ignored because the 12 didn't have any units. You probably meant 12px.

You have similar errors in your default.css. You can also validate style sheets to find these kinds of things. I'll just list the problem styles together so you can see what needs to be fixed.

div#menu ul {
margin: 15;
padding: 6 8px;
width: 151px;
}

#menu ul ul, div#menu ul ul ul
{
margin: 1;
padding: 2;
width: 121px;
}

#sidebar ul {
margin: 10;
padding: 0;
list-style: none;
}

#sidebar li li {
margin: 0;
padding: 8px 10;
background: none;
border-top: 1px dotted #CDCDCD;
}

#sidebar h3 {
margin: 5;
}

You also have this styling which needs fixing...
#sidebar li ul {
padding: 10px20px;
font-size: 94.%;
font-size: 10px;
}

...I added the margin to remove IE's default margin.
#sidebar li ul {
margin:0;
padding: 10px 20px;
font-size: 94%;
font-size: 10px;
}

The page should look fairly okay now, at least in IE 6, FF and Opera. I can't check this in IE 7 which I don't have. I'd have to put it online and get snapshot. There's still some tweaking you can do, but it doesn't look like anything too major.

However, there are a couple things you can do for the menu which doesn't work in IE 6.

In your html you have this conditional styling:

<!--[if lt IE 7]>
<style type="text/css" media="screen">
body{behavior:url(csshover.htc);}
</style>
<![endif]-->

However, the csshover.htc file is missing. It needs to be in the same folder as the html. This allows :hover to work with IE 6 on elements other than anchors. If you never downloaded it then you can find a link to it here:

http://www.xs4all.nl/~peterned/csshover.html

You also need to download iepngfix.zip from http://www.twinhelix.com/css/iepngfix/.

You can guess what this does for IE 6 (when it works). Copy both its iepngfix.htc and blank.gif files into the same folder as your html and css.

Add this styling to the top of default.css:

#menu a {
behavior: url(iepngfix.htc);
}

As you can see, the css rollover doesn't work in IE 6 because of the use of transparent PNG's.

Cary
01-02-2008, 04:14 AM
D'oh! I didn't even notice this before. You only need one "font-size" for this styling:

#sidebar li ul {
margin:0;
padding: 10px 20px;
font-size: 94%;
font-size: 10px;
}

I don't know which one you wanted, but it was using the 10px size (which is pretty darn small at high resolutions).