Web design/programming basics, help needed.

luke88

Solid State Member
Messages
10
Hi all,

Im currently doing a project for college which is designing and implementing a website. Im only in pretty early stages so far although have had big problems implementing vertical rollover buttons with a drop down menu. I seem to be able to either have the rollover buttons working with no drop down menu showing, or have the drop down menu with no rollover buttons, does anyone know if I could have both of these and why it may be causing problems?

The code I have for the menu is as follows so far and this is showing the menu with the rollover working but no drop down. Oh and im using Dreamweaver CS4. Please be gentle as im pretty new to this :rolleyes:

}
.mmenu, mmenu ul{
width: 90%;
padding: 0;
margin: 0;
}

.mmenu a {
background: url(images/menubackground1.gif) repeat-x top left;
margin:0px;
font-size:14px;
font-family:Arial, Helvetica, sans-serif;
font-style:normal;
font-weight:bold;
display: block;
width: 90%;
color: #fff;
text-decoration: none;
border-top: 2px solid #EEE;
border-bottom: 2px solid #333;
border-left: 2px solid #333;
border-right: 2px solid #EEE;
padding-top: 12px;
padding-bottom: 12px;
padding-left: 10%;
float: left
}
.mmenu a:hover {
color: #CCFFCC;
background-image: url(images/menubackground1.gif);
background-repeat: repeat-x;
background-position: left bottom;
list-style-type: none;
}
.mmenu li ul {
position: absolute;
width: 20%;
left: -999em;
}
.mmenu li:hover ul, .mmenu li.sfhover ul {
left: auto;
}
.mwrapper{
padding:0px
}

Many Thanks,,

Luke

Oh im also using javascript to implement the drop down. Thanks

I think ive put this in the wrong part of the forum :cool:..
Can a mod please delete this one as I have copied it over to the Website Design board.

Many Thanks
 
Hi,

I don't see anything that is html or javascript in that post. All that looks like to me is CSS. Do you have any html or javascript written yet? If so please post it up here with the
HTML:
 codes that is for space saving. 

Cheers!
 
FYI, you are in the right section with this question here.

I would avoid using javascript for the dropdown if you are allowed. Search engines can't read it as hyperlinks. It's better to stick with hover attributes for list items.

Also, avoid using absolute positioning in hover type menus because it won't typically work cross-browser. Here is a quick example of a css hover menu I did. It should be enough to give you a general idea.
Code:
<?xml version="1.0" encoding="utf-8"?>
<!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" xml:lang="en-us" lang="en-us" dir="ltr">
 <head>
  <title>CSS Float menu</title>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <style type="text/css">
   #mainMenu
   {
     margin: 0px auto;
     width: 80%;
     padding: 0px;
     list-style-type: none;
     clear: both;
     line-height: 20px;
   }
   .mainItem
   {
     list-style-type: none;
     padding: 0px 0px;
   }
   #mainMenu LI
   {
     float: left;
     clear: none;
     margin: 0px;
     display: inline;
   }
   #mainMenu LI A
   {
     background-color: #cdcdfe;
     display: block;
     border: solid 1px #454545;
     border-collapse: collapse;
     color: #454545;
     padding: 0px 5px;
     min-width: 100px;
     margin: 0px;
     text-align: center;
     text-decoration: none;
   }
   #mainMenu LI A:HOVER
   {
     background-color: #dedeff;
     color: #232323;
   }
   #mainMenu LI UL LI A
   {
     background-color: #cdfecd;
     text-decoration: none;
   }
   #mainMenu LI UL LI A:HOVER
   {
     background-color: #deffde;
   }
   #subMenu1
   {
     min-width: 100px;
     display: block;
     border: none;
   }
   #mainMenu .mainItem UL LI
   {
     float: none;
     clear: none;
     margin: 1px 0px;
   }
   #link1Menu
   {
     display: none;
     list-style-type: none;
     margin-left: 0px;
     padding: 0px;

   }
   #mainMenu #subMenu1:HOVER #link1Menu
   {
     display: block;
     width: 100px;
   }
  </style>
 </head>
 <body>
  <ul id="mainMenu">
   <li class="mainItem"><a href="#">Home</a></li>
   <li class="mainItem" id="subMenu1"><a href="#">Link 1</a>
    <ul id="link1Menu">
     <li><a href="#">SubLink 1</a></li>
     <li><a href="#">SubLink 2</a></li>
     <li><a href="#">SubLink 3</a></li>
    </ul>
   </li>
   <li>
   </li>
  </ul>
 </body>
</html>
I did not test it to see if it's valid, but it should be.

To implement the rollovers in the menus. Set the default background-image of the A's to one image, and set the background image to something else on the hover attribute.

Hope this helps.
 
Argh I just wrote a whole reply and my internet went off and I lost it all :/

Anyway.. Many Thanks for the replies first of all.

Sorry for any inconveniance with the CSS. I didnt even realise I did that.

So far I've managed to get the rollover menu working better and the submenu is better now. Although Daeva do you recommend that I scrap all that i've done and go without javascript? the only slight problem is that I dont really have any experience with Dreamweaver prior to this project, im just looking around the internet and using bits and pieces pretty much.

Anyway, below is the html that I have used.

<div id="sidebar1">
<div>
<ul class="mmenu">
<li><a href="http://www.freecssmenus.co.uk">Home</a></li>
<li><a href="#"><span class="mwrapper">Treatment Details</span></a>
<ul>
<li><a href="#">Full Body Swedish Massage</a></li>
<li><a href="#">Half Body Massage</a></li>
<li><a href="#">Reiki Healing</a></li>
<li><a href="#">Indian Head Massage</a></li>
<li><a href="#">Foot Massage</a></li>
</ul>
</li>
<li><a href="http://www.freecssmenus.co.uk"><span class="mwrapper">Price List</span></a></li>
<li><a href="#"><span class="mwrapper">Staff Details</span></a>
<ul>
<li><a href="#">Marcus</a></li>
<li><a href="#">Sharona</a></li>
</ul>
<li><a href="http://www.freecssmenus.co.uk"><span class="mwrapper">Contact Us</span></a></li>
<li class="clearfloat">
<!-- end #sidebar1 -->

And below is the javascript that I have used.

sfHover = function() {
var sfEls = document.getElementById("mmenu").getElementsByTagName("LI");
for (var i=0; i<sfEls.length; i++) {
sfEls.onmouseover=function() {
this.className+=" sfhover";
}
sfEls.onmouseout=function() {
this.className=this.className.replace(new RegExp(" sfhover\\b"), "");
}
}
}
if (window.attachEvent) window.attachEvent("onload", sfHover);

And also below ive put up the image of what the menu looks like now, I simply changed a small amount of the CSS, again I was lucky because my knowledge of CSS is next to none..


One thing I would like to do is that the menu currently when you put the mouse over the main menu tab the submenu comes up, im thinking it would be better if the submenu came up upon a mouse click. Is this possible?

Many Thanks

Luke

Also I was thinking maybe not a mouse click to bring the submenu up but for the submenu to come directly next to the menu button. Although after hours of playing Im a bit stuck.

Thanks alot,,

Luke
 
You can't have the menu open on mouse click using only css. The reason I say to avoid javascript is if a user doesn't have javascript, or their browser doesn't support the functionality you're using (this happens more often than not), they will not be able to fully navigate the site. In terms of it requiring another mouseclick, you would also then have to consider how long before it dissapears ( or whether or not is should dissapear if they don't use it), and how to implement that not to mention that you want your users to have to click as little as possible to get the information they want.

My philosophy is to use javascript only when there is no other more "widely accepted" method of solving the problem. For example, displaying a timer on the page and updating it every second can only be accomplished using javascript. Hovering menu's however can be accomplished using only html and css.

(Getting more knowledge in CSS will serve you better in the long run than javascript anyway).

When you ask about the submenu opening up to the right, are you referring to your code or mine?
 
Thank you very much for the reply..

Im starting to understand now, and the code i meant for putting the submenus to the right is mine.

So, is there a way I can use my current set-up for the menu but taking away the java?

Thanks

Luke
 
Yes, can you paste your full code-listing? I could then tweak it and explain what I did.
 
Yeah sure, thank you very much :)
Do you mean just all my coding for the menu?
Anyway, here it is :)
Firstly the CSS..

.twoColLiqLtHdr #sidebar1 {
float: left;
width: 24%; /* since this element is floated, a width must be given */
background: #892276; /* the background color will be displayed for the length of the content in the column, but no further */
padding: 15px 0; /* top and bottom padding create visual space within this div */
}
.twoColLiqLtHdr #sidebar1 h3, .twoColLiqLt #sidebar1 p {
margin-left: 10px; /* the left and right margin should be given to every element that will be placed in the side columns */
margin-right: 10px;
}
.mmenu, mmenu ul{
width: 90%;
padding: 0;
margin: 0;
list-style-type: none;
}
.mmenu a {
background: url(images/menubackground1.gif) repeat-x top left;
margin:0px;
font-size:14px;
font-family:Arial, Helvetica, sans-serif;
font-style:normal;
font-weight:bold;
display: block;
width: 90%;
color: #fff;
text-decoration: none;
border-top: 2px solid #EEE;
border-bottom: 2px solid #333;
border-left: 2px solid #333;
border-right: 2px solid #EEE;
padding-top: 12px;
padding-bottom: 12px;
padding-left: 10%;
float:none;
list-style-type: none;
}
.mmenu li ul {
position: absolute;
width: 20%;
left: -999em;
}
.mmenu a:hover {
color: #CCFFCC;
background-image: url(images/menubackground1.gif);
background-repeat: repeat-x;
background-position: left bottom;
list-style-type: none;
}
.mmenu li:hover ul, .mmenu li.sfhover ul {
left: auto;
}
.mwrapper{
padding:0px
}

Secondly the .HTML

<div id="sidebar1">
<div>
<ul class="mmenu">
<li><a href="http://www.freecssmenus.co.uk">Home</a></li>
<li><a href="#"><span class="mwrapper">Treatment Details</span></a>
<ul>
<li><a href="#">Full Body Swedish Massage</a></li>
<li><a href="#">Half Body Massage</a></li>
<li><a href="#">Reiki Healing</a></li>
<li><a href="#">Indian Head Massage</a></li>
<li><a href="#">Foot Massage</a></li>
</ul>
</li>
<li><a href="http://www.freecssmenus.co.uk"><span class="mwrapper">Price List</span></a></li>
<li><a href="#"><span class="mwrapper">Staff Details</span></a>
<ul>
<li><a href="#">Marcus</a></li>
<li><a href="#">Sharona</a></li>
</ul>
<li><a href="http://www.freecssmenus.co.uk"><span class="mwrapper">Contact Us</span></a></li>
<li class="clearfloat">
<!-- end #sidebar1 -->

and thirdly the javascript I used.

sfHover = function() {
var sfEls = document.getElementById("mmenu").getElementsByTagName("LI");
for (var i=0; i<sfEls.length; i++) {
sfEls.onmouseover=function() {
this.className+=" sfhover";
}
sfEls.onmouseout=function() {
this.className=this.className.replace(new RegExp(" sfhover\\b"), "");
}
}
}
if (window.attachEvent) window.attachEvent("onload", sfHover);

I hope this is enough:)

Thanks alot Daeva.. Much appreciated. If you could find away for the submenu to appear to the right of the original menu I would be very appreciative!!

Luke
 
Your welcome for the help, glad to do it!

Unfortunately, I'm still missing some pieces of your code. Do you have them in separate files?

For example, in your CSS you refer to an element class named "twoColLiqLtHdr". But I can't fully test this because it's not in the html you provided.

The complete HTML document would help me a great deal, from <html> to </html>.
The more of a duplicate I have of what you're doing, the easier it will be for me to re-create and solve the issue, thanks.


Also, to save space, when you are pasting code use the
Code:
tags and put your html/css in between them.
 
Oh sorry Daeva. I just pasted my code for the menu.

Right here goes again :)
Firstly the CSS:

Code:
@charset "utf-8";
body  {
	font: 100% Verdana, Arial, Helvetica, sans-serif;
	background: #892276;
	margin: 0; /* it's good practice to zero the margin and padding of the body element to account for differing browser defaults */
	padding: 0;
	text-align: left; /* this centers the container in IE 5* browsers. The text is then set to the left aligned default in the #container selector */
	color: #ffffff;
}
.twoColLiqLtHdr #container {
	width: 100%;  
	background: #892276;
	margin: 0 auto; /* the auto margins (in conjunction with a width) center the page */
	border: 1px solid #000000;
	text-align: left; /* this overrides the text-align: center on the body element. */
	font-size: 100%;
	font-family: Verdana, Arial, Helvetica, sans-serif;
} 
.twoColLiqLtHdr #header { 
	background: #B70094;   /* this padding matches the left alignment of the elements in the divs that appear beneath it. If an image is used in the #header instead of text, you may want to remove the padding. */
	font-size: larger;
	border-bottom:solid #000;
} 
.twoColLiqLtHdr #header h1 {
	margin: 0; /* zeroing the margin of the last element in the #header div will avoid margin collapse - an unexplainable space between divs. If the div has a border around it, this is not necessary as that also avoids the margin collapse */
	padding: 10px 0; /* using padding instead of margin will allow you to keep the element away from the edges of the div */
	font-family: Arial, Helvetica, sans-serif;
}

/* Tips for sidebar1:
1. since we are working in percentages, it's best not to use padding on the sidebar. It will be added to the width for standards compliant browsers creating an unknown actual width. 
2. Space between the side of the div and the elements within it can be created by placing a left and right margin on those elements as seen in the ".twoColLiqLtHdr #sidebar1 p" rule.
3. Since Explorer calculates widths after the parent element is rendered, you may occasionally run into unexplained bugs with percentage-based columns. If you need more predictable results, you may choose to change to pixel sized columns.
*/
.twoColLiqLtHdr #sidebar1 {
	float: left; 
	width: 24%; /* since this element is floated, a width must be given */
	background: #892276; /* the background color will be displayed for the length of the content in the column, but no further */
	padding: 15px 0; /* top and bottom padding create visual space within this div  */
}
.twoColLiqLtHdr #sidebar1 h3, .twoColLiqLt #sidebar1 p {
	margin-left: 10px; /* the left and right margin should be given to every element that will be placed in the side columns */
	margin-right: 10px;
}
.mmenu, mmenu ul{ 
width: 90%;
padding: 0;
margin: 0;
list-style-type: none;
}
.mmenu a {
background: url(images/menubackground1.gif) repeat-x top left;
margin:0px;
font-size:14px;
font-family:Arial, Helvetica, sans-serif;
font-style:normal;
font-weight:bold;
display: block;
width: 90%;
color: #fff;
text-decoration: none;
border-top: 2px solid #EEE;
border-bottom: 2px solid #333;
border-left: 2px solid #333;
border-right: 2px solid #EEE;
padding-top: 12px;
padding-bottom: 12px;
padding-left: 10%;
float:none;
list-style-type: none;
}
.mmenu li ul {
position: absolute;
width: 20%;
left: -999em;
}
.mmenu a:hover {
color: #CCFFCC;
background-image: url(images/menubackground1.gif);
background-repeat: repeat-x;
background-position: left bottom;
list-style-type: none;
}
.mmenu li:hover ul, .mmenu li.sfhover ul {
left: auto;
}
.mwrapper{
padding:0px
}

/* Tips for mainContent:
1. the space between the mainContent and sidebar1 is created with the left margin on the mainContent div.  No matter how much content the sidebar1 div contains, the column space will remain. You can remove this left margin if you want the #mainContent div's text to fill the #sidebar1 space when the content in #sidebar1 ends.
2. to avoid float drop at a supported minimum 800 x 600 resolution, elements within the mainContent div should be 430px or smaller (this includes images).
3. in the Internet Explorer Conditional Comment below, the zoom property is used to give the mainContent "hasLayout." This avoids several IE-specific bugs.
*/
.twoColLiqLtHdr #mainContent {
	margin: 0 20px 0 26%;
	text-align: left;
} 
.twoColLiqLtHdr #footer { 
	padding: 0 10px; /* this padding matches the left alignment of the elements in the divs that appear above it. */
	background:#B70094;
	border-bottom:thin;
	border-top:thin;
	border-top-color:#000;
	border-color:#000;
	border-width:thin;
} 
.twoColLiqLtHdr #footer p {
	margin: 0; /* zeroing the margins of the first element in the footer will avoid the possibility of margin collapse - a space between divs */
	padding: 10px 0; /* padding on this element will create space, just as the the margin would have, without the margin collapse issue */
	text-align: right;
}

/* Miscellaneous classes for reuse */
.fltrt { /* this class can be used to float an element right in your page. The floated element must precede the element it should be next to on the page. */
	float: right;
	margin-left: 8px;
}
.fltlft { /* this class can be used to float an element left in your page */
	float: left;
	margin-right: 8px;
}
.clearfloat { /* this class should be placed on a div or break element and should be the final element before the close of a container that should fully contain a float */
	clear:both;
    height:0;
    font-size: 1px;
    line-height: 0px;
}

Secondly, the html :)

Code:
<!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>Massage4U</title>
<script type="text/javascript" src="menu.js"></script>
<link href="massage4u.css" rel="stylesheet" type="text/css" /><!--[if IE]>
<style type="text/css"> 
/* place css fixes for all versions of IE in this conditional comment */
.twoColLiqLtHdr #sidebar1 { padding-top: 30px; }
.twoColLiqLtHdr #mainContent { zoom: 1; padding-top: 15px; }
/* the above proprietary zoom property gives IE the hasLayout it needs to avoid several bugs */
</style>
<![endif]-->
</head>

<body class="twoColLiqLtHdr">
<div id="container">
<div id="header">
  <h1>  	<img src="images/colourbar.gif" width="1017" height="48" /><img src="images/header.gif" width="524" height="78" /></h1>
  <!-- end #header --></div>
<div id="sidebar1">
  <div>
      <ul class="mmenu">
      <li><a href="http://www.freecssmenus.co.uk">Home</a></li>
      <li><a href="#"><span class="mwrapper">Treatment Details</span></a>
 		<ul>     
      		<li><a href="#">Full Body Swedish Massage</a></li>
            <li><a href="#">Half Body Massage</a></li>
            <li><a href="#">Reiki Healing</a></li>
            <li><a href="#">Indian Head Massage</a></li>
            <li><a href="#">Foot Massage</a></li>
        </ul>
      </li>
      <li><a href="http://www.freecssmenus.co.uk"><span class="mwrapper">Price List</span></a></li>
      <li><a href="#"><span class="mwrapper">Staff Details</span></a>
      	<ul>
        	<li><a href="#">Marcus</a></li>
            <li><a href="#">Sharona</a></li>
        </ul>
    <li><a href="http://www.freecssmenus.co.uk"><span class="mwrapper">Contact Us</span></a></li>
    <li class="clearfloat">
      <!-- end #sidebar1 -->
    </li></ul>
    <!-- end #container -->
</div>
</div>
<div id="mainContent">
  <p1> </p1>
  <h1>Welcome to Massage4U</h1>
  <p>We all feel stress from the pressure of every day life and here at Massage4U we offer a range of holistic therapies and treatments which can ease your mind and soothe your body.</p>
  <p>Our treatments can help calm the body, boost energy levels and indulge the mind.</p>
  <p> </p>
<p> </p>
  <p> </p>
  <p> </p>
<p> </p>
  <p> </p>
  <h2>
    <!-- end #mainContent -->
  </h2>
</div>
<p> </p>
<p> </p>
<p> </p>
<div id="footer">
  <p>
    High Street, Manford, MA9 9QQ. Tel. 07987654321 Email. <a href="mailto:marcus-massage4u@hotmail.co.uk">marcus-massage4u@hotmail.co.uk</a></p>
</div>
</body>
</html>

The java is in my other post :)

Many Thanks Daeva.

Luke
 
Back
Top Bottom