Go Back   Computer Forums > Web Design | Website Development > Web Programming
Click Here to Login
Join Computer forums Today


Reply
 
Thread Tools Search this Thread Display Modes
 
Old 03-31-2009, 07:41 AM   #1
Solid State Member
 
Join Date: Mar 2009
Posts: 10
Default Web design/programming basics, help needed.

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

}
.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 8-)..
Can a mod please delete this one as I have copied it over to the Website Design board.

Many Thanks
__________________

luke88 is offline   Reply With Quote
Old 03-31-2009, 08:30 AM   #2
Daemon Poster
 
wmorri's Avatar
 
Join Date: May 2007
Posts: 1,066
Send a message via AIM to wmorri
Default Re: Web design/programming basics, help needed.

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!
__________________

__________________
LEARN BY DOING NOT BY FOLLOWING DIRECTIONS!
Linux Forever!

I thought you were a hispanic/african american? Who is the white guy in the pictures?
wmorri is offline   Reply With Quote
Old 03-31-2009, 10:37 AM   #3
In Runtime
 
Daeva's Avatar
 
Join Date: Dec 2005
Posts: 407
Send a message via AIM to Daeva Send a message via MSN to Daeva Send a message via Yahoo to Daeva
Default Re: Web design/programming basics, help needed.

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.
__________________
**Official Self-proclaimed glorified excessive (insert additional adjectives here) post editor/modifier.
Edit = Best feature ever
http://www.twitter.com/xDaevax
Daeva is offline   Reply With Quote
Old 04-01-2009, 10:43 AM   #4
Solid State Member
 
Join Date: Mar 2009
Posts: 10
Default Re: Web design/programming basics, help needed.

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").getElementsByTagN ame("LI");
for (var i=0; i<sfEls.length; i++) {
sfEls[i].onmouseover=function() {
this.className+=" sfhover";
}
sfEls[i].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
luke88 is offline   Reply With Quote
Old 04-01-2009, 12:38 PM   #5
In Runtime
 
Daeva's Avatar
 
Join Date: Dec 2005
Posts: 407
Send a message via AIM to Daeva Send a message via MSN to Daeva Send a message via Yahoo to Daeva
Default Re: Web design/programming basics, help needed.

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?
__________________
**Official Self-proclaimed glorified excessive (insert additional adjectives here) post editor/modifier.
Edit = Best feature ever
http://www.twitter.com/xDaevax
Daeva is offline   Reply With Quote
Old 04-01-2009, 01:29 PM   #6
Solid State Member
 
Join Date: Mar 2009
Posts: 10
Default Re: Web design/programming basics, help needed.

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
luke88 is offline   Reply With Quote
Old 04-01-2009, 03:03 PM   #7
In Runtime
 
Daeva's Avatar
 
Join Date: Dec 2005
Posts: 407
Send a message via AIM to Daeva Send a message via MSN to Daeva Send a message via Yahoo to Daeva
Default Re: Web design/programming basics, help needed.

Yes, can you paste your full code-listing? I could then tweak it and explain what I did.
__________________
**Official Self-proclaimed glorified excessive (insert additional adjectives here) post editor/modifier.
Edit = Best feature ever
http://www.twitter.com/xDaevax
Daeva is offline   Reply With Quote
Old 04-02-2009, 02:13 PM   #8
Solid State Member
 
Join Date: Mar 2009
Posts: 10
Default Re: Web design/programming basics, help needed.

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").getElementsByTagN ame("LI");
for (var i=0; i<sfEls.length; i++) {
sfEls[i].onmouseover=function() {
this.className+=" sfhover";
}
sfEls[i].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
luke88 is offline   Reply With Quote
Old 04-02-2009, 03:36 PM   #9
In Runtime
 
Daeva's Avatar
 
Join Date: Dec 2005
Posts: 407
Send a message via AIM to Daeva Send a message via MSN to Daeva Send a message via Yahoo to Daeva
Default Re: Web design/programming basics, help needed.

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 &#91;code&#93; &#91;/code&#93; tags and put your html/css in between them.
__________________
**Official Self-proclaimed glorified excessive (insert additional adjectives here) post editor/modifier.
Edit = Best feature ever
http://www.twitter.com/xDaevax
Daeva is offline   Reply With Quote
Old 04-02-2009, 04:50 PM   #10
Solid State Member
 
Join Date: Mar 2009
Posts: 10
Default Re: Web design/programming basics, help needed.

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>&nbsp;</p>
<p>&nbsp;</p>
  <p>&nbsp;</p>
  <p>&nbsp;</p>
<p>&nbsp;</p>
  <p>&nbsp;</p>
  <h2>
    <!-- end #mainContent -->
  </h2>
</div>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</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
__________________

luke88 is offline   Reply With Quote
Reply

Thread Tools Search this Thread
Search this Thread:

Advanced Search
Display Modes

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is Off
Trackbacks are On
Pingbacks are On
Refbacks are Off



All times are GMT -5. The time now is 04:03 PM.


Powered by vBulletin® Version 3.8.8 Beta 4
Copyright ©2000 - 2017, vBulletin Solutions, Inc.
Search Engine Friendly URLs by vBSEO 3.6.0