PDA

View Full Version : here is my menu script



lauren
02-22-2004, 03:20 PM
you can see this menu in action at this page

http://minnesotarenting.com/listings/index.php

all you need to do is completely edit out the current menu.php page and then put this code in....

naturally, youll want to change the links....


<td align="center" valign="top" bgcolor="#FFFFFF"><div
align="left"><table border="1" cellpadding="4"
cellspacing="3" width="180" bordercolor="#42557B"
bordercolordark="#FFFFFF" bordercolorlight="#C0C0C0">
<tr>
<td width="180" bgcolor="#A6B3CF"
bordercolor="#42557B" bordercolordark="#42557B"
bordercolorlight="#42557B"
onmouseout="this.style.backgroundColor='#A6B3CF'"
onmouseover="this.style.backgroundColor='#FFFFFF'"><a
href="http://minnesotarenting.com/listings/listing_browse.php"><font
color="#42557B" size="1" face="verdana"><strong>Browse
All Rentals</strong></font></a></td>
</tr>
<tr>
<td width="180" bgcolor="#A6B3CF"
bordercolor="#42557B" bordercolordark="#42557B"
bordercolorlight="#42557B"
onmouseout="this.style.backgroundColor='#A6B3CF'"
onmouseover="this.style.backgroundColor='#FFFFFF'"><a
href="http://minnesotarenting.com/listings/listingsearch.php"><font
color="#42557B" size="1" face="verdana"><strong>Rental
Search</strong></font></a></td>
</tr>
<tr>
<td width="180" bgcolor="#A6B3CF"
bordercolor="#42557B" bordercolordark="#42557B"
bordercolorlight="#42557B"
onmouseout="this.style.backgroundColor='#A6B3CF'"
onmouseover="this.style.backgroundColor='#FFFFFF'"><a
href="http://minnesotarenting.com/listings/members/listfavorites.php"><font
color="#42557B" size="1" face="verdana"><strong>Saved
Listings</strong></font></a></td>
</tr>
<tr>
<td width="180" bgcolor="#A6B3CF"
bordercolor="#42557B" bordercolordark="#42557B"
bordercolorlight="#42557B"
onmouseout="this.style.backgroundColor='#A6B3CF'"
onmouseover="this.style.backgroundColor='#FFFFFF'"><a
href="http://minnesotarenting.com/listings/members/listsavedsearches.php"><font
color="#42557B" size="1" face="verdana"><strong>Saved
Searches</strong></font></a></td>
</tr>
<tr>
<td width="180" bgcolor="#A6B3CF"
bordercolor="#42557B" bordercolordark="#42557B"
bordercolorlight="#42557B"
onmouseout="this.style.backgroundColor='#A6B3CF'"
onmouseover="this.style.backgroundColor='#FFFFFF'"><a
href="http://minnesotarenting.com/minnesota-maps.html"
target="_blank"><font color="#42557B" size="1"
face="verdana"><strong>Maps Of Minnesota</strong></font></a></td>
</tr>
<tr>
<td width="180" bgcolor="#A6B3CF"
bordercolor="#42557B" bordercolordark="#42557B"
bordercolorlight="#42557B"
onmouseout="this.style.backgroundColor='#A6B3CF'"
onmouseover="this.style.backgroundColor='#FFFFFF'"><a
href="http://minnesotarenting.com/minnesota-information.html"><font
color="#42557B" size="1" face="verdana"><strong>Minnesota
Information</strong></font></a></td>
</tr>
<tr>
<td width="180" bgcolor="#A6B3CF"
bordercolor="#42557B" bordercolordark="#42557B"
bordercolorlight="#42557B"
onmouseout="this.style.backgroundColor='#A6B3CF'"
onmouseover="this.style.backgroundColor='#FFFFFF'"><a
href="http://minnesotarenting.com/store.html"><font
color="#42557B" size="1" face="verdana"><strong>Minnesota
Store</strong></font></a></td>
</tr>
<tr>
<td width="180" bgcolor="#A6B3CF"
bordercolor="#42557B" bordercolordark="#42557B"
bordercolorlight="#42557B"
onmouseout="this.style.backgroundColor='#A6B3CF'"
onmouseover="this.style.backgroundColor='#FFFFFF'"><a
href="http://minnesotarenting.com/apartment-guide.html"><font
color="#42557B" size="1" face="verdana"><strong>Books
And Guides</strong></font></a></td>
</tr>
<tr>
<td width="180" bgcolor="#A6B3CF"
bordercolor="#42557B" bordercolordark="#42557B"
bordercolorlight="#42557B"
onmouseout="this.style.backgroundColor='#A6B3CF'"
onmouseover="this.style.backgroundColor='#FFFFFF'"><a
href="http://minnesotarenting.com/free-classifieds/"><font
color="#42557B" size="1" face="verdana"><strong>Free
Classifieds</strong></font></a></td>
</tr>
<tr>
<td width="180" bgcolor="#A6B3CF"
bordercolor="#42557B" bordercolordark="#42557B"
bordercolorlight="#42557B"
onmouseout="this.style.backgroundColor='#A6B3CF'"
onmouseover="this.style.backgroundColor='#FFFFFF'"><a
href="http://minnesotarenting.com/forums/"
target="_blank"><font color="#42557B" size="1"
face="verdana"><strong>Forum Boards</strong></font></a></td>
</tr>
<tr>
<td width="180" bgcolor="#A6B3CF"
bordercolor="#42557B" bordercolordark="#42557B"
bordercolorlight="#42557B"
onmouseout="this.style.backgroundColor='#A6B3CF'"
onmouseover="this.style.backgroundColor='#FFFFFF'"><a
href="http://minnesotarenting.com/advertisers/index.html"><font
color="#42557B" size="1" face="verdana"><strong>Advertiser
Center</strong></font></a></td>
</tr>
<tr>
<td width="180" bgcolor="#A6B3CF"
bordercolor="#42557B" bordercolordark="#42557B"
bordercolorlight="#42557B"
onmouseout="this.style.backgroundColor='#A6B3CF'"
onmouseover="this.style.backgroundColor='#FFFFFF'"><a
href="http://minnesotarenting.com/listings/aboutus.php"><font
color="#42557B" size="1" face="verdana"><strong>About
Us</strong></font></a></td>
</tr>
<tr>
<td width="180" bgcolor="#A6B3CF"
bordercolor="#42557B" bordercolordark="#42557B"
bordercolorlight="#42557B"
onmouseout="this.style.backgroundColor='#A6B3CF'"
onmouseover="this.style.backgroundColor='#FFFFFF'"><a
href="http://minnesotarenting.com/listings/contactus.php"><font
color="#42557B" size="1" face="verdana"><strong>Contact
Us</strong></font></a></td>
</tr>
<tr>
<td width="180" bgcolor="#A6B3CF"
bordercolor="#42557B" bordercolordark="#42557B"
bordercolorlight="#42557B"
onmouseout="this.style.backgroundColor='#A6B3CF'"
onmouseover="this.style.backgroundColor='#FFFFFF'"><a
href="http://minnesotarenting.com/privacy.html"><font
color="#42557B" size="1" face="verdana"><strong>Privacy
Policy</strong></font></a></td>
</tr>
<tr>
<td width="180" bgcolor="#A6B3CF"
bordercolor="#42557B" bordercolordark="#42557B"
bordercolorlight="#42557B"
onmouseout="this.style.backgroundColor='#A6B3CF'"
onmouseover="this.style.backgroundColor='#FFFFFF'"><a
href="http://minnesotarenting.com/terms.html"><font
color="#42557B" size="1" face="verdana"><strong>Terms
Of Use</strong></font></a></td>
</tr>
<tr>
<td width="180" bgcolor="#A6B3CF"
bordercolor="#42557B" bordercolordark="#42557B"
bordercolorlight="#42557B"
onmouseout="this.style.backgroundColor='#A6B3CF'"
onmouseover="this.style.backgroundColor='#FFFFFF'"><a
href="http://minnesotarenting.com/listings/index.php"><font
color="#42557B" size="1" face="verdana"><strong>Rental
Listing Main Page</strong></font></a></td>
</tr>
<tr>
<td width="180" bgcolor="#A6B3CF"
bordercolor="#42557B" bordercolordark="#42557B"
bordercolorlight="#42557B"
onmouseout="this.style.backgroundColor='#A6B3CF'"
onmouseover="this.style.backgroundColor='#FFFFFF'"><a
href="http://minnesotarenting.com/index.html"><font
color="#42557B" size="1" face="verdana"><strong>MinnesotaRenting.com</strong></font></a></td>
</tr>
</table>
</div></td>

RealtyOne
02-23-2004, 04:35 PM
Lauren:
if you make use of the lang and config stuff your menu would need no alterations by anyone to use.

sample:

<tr>
<td width="180" bgcolor="#A6B3CF"
bordercolor="#42557B" bordercolordark="#42557B"
bordercolorlight="#42557B"
onmouseout="this.style.backgroundColor='#A6B3CF'"
onmouseover="this.style.backgroundColor='#FFFFFF'"><a
href="<?php echo $config&#91;'baseurl'&#93; ?>/listing_browse.php"><font
color="#42557B" size="1" face="verdana"><strong><?php echo $lang&#91;'browse_all_'rentals'&#93; ?></strong></font></a></td>
</tr>

lauren
02-23-2004, 04:43 PM
but that would suck for the search engines... less php more html

RealtyOne
02-23-2004, 05:45 PM
Search engines open the page not the scripts that write the page.
<?php echo this is script ?> the result is html and is read by search engines.
Search engines should not be allowed access to the template folder for any reason (robots.txt.)
The sugestion was an attempt to make your code useable by anyone without requiring changes. Its your code and your choice!

lauren
02-23-2004, 05:59 PM
most of my pages are html

frobn
02-25-2004, 02:11 PM
Here is an easy way to get the same effect using css and its search engine friendly:

Put this in a css file or between <head> tags:


<style type="text/css">
<!--
#navcontainer &#123; width&#58; 200px; &#125;

#navcontainer ul
&#123;
margin-left&#58; 0;
padding-left&#58; 0;
list-style-type&#58; none;
font-family&#58; Arial, Helvetica, sans-serif;
font-size&#58; 11px;
font-weight&#58; bold;
&#125;

#navcontainer a
&#123;
display&#58; block;
padding&#58; 3px;
width&#58; 160px;
background-color&#58; #A6B3CF;
border&#58; 1px solid #42557B;
text-align&#58; left;
&#125;

#navcontainer a&#58;link, #navlist a&#58;visited
&#123;
color&#58; #42557B;
text-decoration&#58; none;
&#125;

#navcontainer a&#58;hover
&#123;
background-color&#58; #fff;
color&#58; #42557B;
&#125;

-->
</style>

Here is the code for the menu. Just add menu items and links as list items:



<div id="navcontainer">
<ul id="navlist">
<li><a href="listings/listing_browse.php" title="Browse All Rentals">Browse All Rentals</a></li>
<li><a href="" title="">Contact</a></li>
<li><a href="" title="">About Us</a></li>
<li><a href="" title="">Links</a></li>
<li><a href="" title="">Terms</a></li>
</ul>
</div>


Make changes to suit in the css code.

ltp
02-25-2004, 04:10 PM
but that would suck for the search engines... less php more html

theres also a handy thing called mod_rewrite in apache servers. for IIS you can get isapi_rewrite.

what you do with this is you can turn:
something.php?blah-balh
or
something.php
or
another-something-123.php

into something.html or if you have the blah blah ending something_blah-blah.html

this is no where near a good explaination but look at the apache docs. this might save you sometime. then you could modify open-realty to spit out the corresponding links.

also use the css suggested above. that table hell is just a mess and it doesn't validate to anything.

lauren
02-25-2004, 08:28 PM
thank you seriously, but i do all my pages in html and only have about 4 pages in php so therefore it is much simpler for me to do it in html :)

also, im guessing there are quite a few people here who havent any clue about css and modrewrites...

thanks!

ltp
02-25-2004, 09:03 PM
thank you seriously, but i do all my pages in html and only have about 4 pages in php so therefore it is much simpler for me to do it in html :)

also, im guessing there are quite a few people here who havent any clue about css and modrewrites...

thanks!

css goes hand in hand with html. you may have html but what you have is not valid html. mod_rewrite isn't a bit deal at all its basically routing one page to another.

the reason i posted things about it is to inform the others so dont take that the wrong way.

gwmbox
02-26-2004, 03:24 AM
The menu idea is something I toyed with myself a while ago and not having javascript knowledge sort of gave up. but in gerenel your idea is good but I think to make it truelly effective you need to;

a) take in the ideas as above by using the language files etc that are provided so anyone can plug it in (so to speak) into their mod with having to edit too much else and also the use of style sheets - very important.

b) when hovering over the cell for a menu item but not over the actual text of the link and then clicking nothing happens, to be more effective the cell itself should be clickable without the need to actually hover over the text. As said I tried this and gave up and went back to image rollovers - slower but worked better. If someone knows how to fix this with the hovering over the cell I'd be happy to complete a full mod for all O-R users.

Greg

lauren
02-26-2004, 05:32 AM
understood, and im NOT being defensive in the least i am trying to encourage a healthy debate on this subject...

i have used this same navigation structure for years and basically the same layout, a few changes here and there

i have almost always had all my sites in HTML rather than use any php

nearly all my sites (35+) rank consistently #1-5 on google specifically for what i place in that navigation and always have, HOWEVER all my php based sites have nearly NO visible ranks at all!

NOW here is what i want to know, IF someone were to do as some here have suggested and use css for the navigation how will EACH page be readable (in that specific area)?

obviously, my "formula" is not somethign i want to mess with UNLESS someone guaratees that the page displays the code the exact same way every time on each page. i dont see that happening...

also, for this particular site, i only have the basic few php pages that are necessary, the rest of the site is html

so, what do you guys think about this?

also, to the guy who say the clickability of the menu is confusing.... hmmm, i can say that no one has ever commented on that for the several years ive used it.... however... maybe thats because they couldnt figure out how to click the "contact us"?? haha JK, seriously though, i see NO benefit in loading up the navigation with unnecessary images that WILL slow people down.... but thats just a personal preference and it is also why i specifically designed it to "look like" buttons, kinda...

if youve seen my sites, they are all very simple, very easy to navigate and are not frilly... i know some people are into flash and photshop templates, but the day that aol/google/yahoo/etc etc find this to be necessary is the day ill reconsider... i know that certain sites "need" that extra ooomph.... but i think that with a site like this it isnt needed

having said that, i also want to state that this is not my finalized design. right now im waiting for some image releases so i can add photos to the site and stuff like that

gwmbox
02-26-2004, 06:45 AM
Lauren

Please be assured I was not having a dig at your menu and the clickable/unclickable areas, i.e. text and cells of the menu, just simply working out ways to slightly improve it, whether that be with html or php. It's also not confusing, it was just a case of suggesting if the cell could also be clickable (hey just like this forums cells are) then that would be far better.

I also appreciate your understanding of a 'healthy debate' which this is :)

I think its also a case of preference to use html or php - I myself prefer php as i gives me greater control (IMHO) and less to modify if i want to make any further changes ot the site (like just change the language or config file) and as others have pointed out when search bots such as Google index the page it loads it and indexes it as if it were a html page, it does not display or index the php code itself.


NOW here is what i want to know, IF someone were to do as some here have suggested and use css for the navigation how will EACH page be readable (in that specific area)?

I'm not 100% sure what you mean here, css will load as the page loads, the styles within it simply set the styles of teh page and do not alter the text at al, have a look at teh source code of a site using css and you will see the formatting quite happily siting in there (if done right) it just formats it on the fly so to speak and gives greater control on site design and redesign if wanted at a later date. As for eac page being readable it woudl be like any other page, as it loads as Google or any other search engine loads teh page to spider it the page is generated and indexed accordingly, whether it is using css or not. - not sure what you mean by 'readable'


obviously, my "formula" is not somethign i want to mess with UNLESS someone guaratees that the page displays the code the exact same way every time on each page. i dont see that happening...

Why would it not display as you want it using php and css with html built in the code - not sure why you say 'I don;t see this happening...' maybe you can explain to me what you mean.

And yes for your sites it must work well, well done, hop eit continues to do well for you, but I had a client recenlty where I did just what you did and they wanted the whole cell clickable, which I did but did not work the way they wanted to and hence used images - their choice not mine.

Your menu still looks good and functions well, it is fast loading and effective, I have no complaints or issues there, as said just looking at ways to improve on it.

Hope all continues to go well for you.

Greg

frobn
02-26-2004, 08:45 AM
Lauren, I admit that I have a prejudice for css, but have you actually looked at the css code that I posted? I am for php but there is no php code in it. There is no java script code, which is turned off in many browsers. There are no tables either. As to ease of use the css code posted gives the same effect with about 1/3 of the code and just one line of code for each link where it really counts. Now suppose you want to change a color, how many lines do you need to change in HTML as opposed to one line in css. How many lines of code to add a link? Only one in the css menu code. Less code results in quicker rendering. Similar code to what I have posted has been tested in many browsers from N4, to Mozilla to Opera to IE6 and will render correctly each and every time. CSS is search engine friendly because content and layout are separate. I won't get into the advantages of CSS as a web standard. I agree you should use what you are comfortable with but please keep an open mind for emerging technologies.

You can view a CSS version of teh OR vertical-menu at http://asiteabove.com/realty
and it is available for download at:

http://www.open-realty.org/phpBB2/viewtopic.php?t=1910

Frank[/url]

gwmbox
02-26-2004, 10:20 AM
Wow! :D

I need to do some more CSS reading - never knew you could do that - thanks for the tips and off I go to learn some more CSS to dump all my javascript hover buttons stuff.

Thanks heaps

Greg

Andre
02-26-2004, 12:39 PM
CSS is great. The rollover effects for the menu uses CSS. I also tried to build it using flexible pages without using tables as much as possible.

ltp
02-26-2004, 02:20 PM
Wow! :D

I need to do some more CSS reading - never knew you could do that - thanks for the tips and off I go to learn some more CSS to dump all my javascript hover buttons stuff.

Thanks heaps

Greg

Just to throw this out to you on your journey...
one hell of a good resource to look at is:
ALA (alistapart.com)
- They have basically everything from navigation style menus above to CSS image maps (very cool!).

also use the w3school and w3 specifications. They all help. CSS is a very powerful tool.. still has some limitations but streaches far beyond the normal use.

Take a look at the following page where you can actually build a template system with a small peice of javascript and alternative stylesheets... if you know how to use alternative stylesheets to switch in your browser it is also helpful.

http://phpidereviews.com/beta/

lauren
02-26-2004, 05:01 PM
hmmmm, i DO see that when you view source (which is what i assume google reads off of) you CAN see the entire menu viewed!

naturally, this is a good thing.

now that ive looked at the source though, ill be SURE to remove that java clock, as it is way up in the code and will be read before anything else. not a good thing to have happen!

ok so now that it APPEARS that google and assumably other SEs can read this, im not really sure how i would fit it into my html..mainly because i use a wysiwyg editor (mostly)

lauren
02-26-2004, 05:07 PM
oooops, stupid me... of course it shows up, its in html....

grrrr, does anyone here have a nav bar they want to let me see so i can take a look at the source?

darkvader
02-26-2004, 05:46 PM
grrrr, does anyone here have a nav bar they want to let me see so i can take a look at the source?

I have several nav bar generators on my site you can use for free (generates code and swf file, if using flash generator and you copy and paste):

http://iredellinternet.com/webmasters.htm

Theres also several other useful tools (dhtml and java css generators, drop down menus, flash menus and nav bars, pop-up coders, toltip coders, etc.)
Have fun,
Mike

frobn
02-26-2004, 06:09 PM
Java and flash menus look great but leave much to be desired in the usability and accessibility department. Its often a hard sell to help clients realize that the true cost is not in the extra development time for such things as java and flash but in the lost sale because someone can not access their site or gets frustrated with "Click here to get the plug-in" or the long wait for the site to load.

Irronically I was unable to load the css nav generator, probably because I don't have java tuned on.

Check out "Benefits of Accessible Web Design" at: http://www.w3.org/WAI/bcase/benefits.html

Frank

lauren
02-26-2004, 06:15 PM
hello frank, while essentially i agree with what you are saying, because i like to keep things basic myself, i must say that this is 2004

teh page you linked us to says:

Last Updated: 24 March, 2002

nearly two years ago

having said that, ill say that i too had problems accessing his links. in fact, the one link didnt work at all!

my sites are basic, but they work and i like them :)

ltp
02-26-2004, 06:55 PM
hello frank, while essentially i agree with what you are saying, because i like to keep things basic myself, i must say that this is 2004

teh page you linked us to says:

Last Updated: 24 March, 2002

nearly two years ago

having said that, ill say that i too had problems accessing his links. in fact, the one link didnt work at all!

my sites are basic, but they work and i like them :)

It is 2004 but search engines cant see use javascript, flash, java applets, almost all of the same things apply that are in that document.

did you know that the html you use the actual release canidate was before 1998? The html 4.01 was drafted in 1998 and the xhtml was a recommendation in 2000.

not to make this into something like a pointing fingers but you have contridicted yourself by stating that is so old while using most of your code from the html 3.2-4.01 specs that were drafted at or around the same time as that document.

frobn
02-26-2004, 08:41 PM
When the page was written makes little difference, it is there to point out the Business Benefits for Accessibility. Its up to us as web designers to keep up with emerging technologies. As ltp has pointed out the recommended html is now xhtml. The problem with editors is that they don't handle css very well. Dreamwearer is improving. I teach web design at the college level and I am required by the department to use a particular web editor, its a constant struggle with the students to get them to think in concepts outside of wysiswyg.

I agree with Lauren that design should be keep lean and basic but what is more basic than css and xhtml for layout and structure and keeping it separate from the content.

I believe that the next version of OR will incorporate more css and xhmtl.

Frank

ltp
02-26-2004, 08:59 PM
When the page was written makes little difference, it is there to point out the Business Benefits for Accessibility. Its up to us as web designers to keep up with emerging technologies. As ltp has pointed out the recommended html is now xhtml. The problem with editors is that they don't handle css very well. Dreamwearer is improving. I teach web design at the college level and I am required by the department to use a particular web editor, its a constant struggle with the students to get them to think in concepts outside of wysiswyg.

I agree with Lauren that design should be keep lean and basic but what is more basic than css and xhtml for layout and structure and keeping it separate from the content.

I believe that the next version of OR will incorporate more css and xhmtl.

Frank

We've already made it xhtml compliant :)

trevors
03-12-2004, 12:20 AM
Here is an easy way to get the same effect using css and its search engine friendly:

Put this in a css file or between <head> tags:


What changes need to be made to the CSS to display vertical?

Trevor

frobn
03-12-2004, 09:39 AM
What changes need to be made to the CSS to display vertical?

Try this, you don't have to change the menu items.


<style type="text/css"><style type="text/css">
#navlist ul
&#123;
margin-left&#58; 0;
padding-left&#58; 0;
white-space&#58; nowrap;
&#125;

#navlist li
&#123;
display&#58; inline;
list-style-type&#58; none;
&#125;

#navlist a &#123; padding&#58; 3px 10px; &#125;

#navlist a&#58;link, #navlist a&#58;visited
&#123;
color&#58; #fff;
background-color&#58; #A6B3CF;
text-decoration&#58; none;
&#125;

#navlist a&#58;hover
&#123;
color&#58; #fff;
background-color&#58; #369;
text-decoration&#58; none;
&#125;
</style>

DepecheNode
03-23-2004, 06:34 PM
b) when hovering over the cell for a menu item but not over the actual text of the link and then clicking nothing happens, to be more effective the cell itself should be clickable without the need to actually hover over the text. As said I tried this and gave up and went back to image rollovers - slower but worked better. If someone knows how to fix this with the hovering over the cell I'd be happy to complete a full mod for all O-R users.

Greg

Go here

http://www.homesofminnesota.com/clickabledivtags2.html

Hope it helps.

-D

frobn
03-25-2004, 11:15 AM
Here is a link I found in Google. http://www.forrester.com/ER/Research/Brief/0,1317,33737,FF.html Unfortunately I didn't read the article because Forrester is charging $195.00 to read the two page article, but the summary makes it clear that there are problems with js rollovers.


Forrester Research: Rollover Menus Can Work But Usually Don't... When Forrester recently graded the user experience at 20 major sites, we found five that made users struggle with poorly executed rollover menus. ...

So if js rollover is problematic why not switch to standards like CSS.

gwmbox wrote:


...when hovering over the cell for a menu item but not over the actual text of the link and then clicking nothing happens, to be more effective the cell itself should be clickable without the need to actually hover over the text. As said I tried this and gave up and went back to image rollovers - slower but worked better. If someone knows how to fix this with the hovering over the cell I'd be happy to complete a full mod for all O-R users.

With CSS the whole block is clickable. The added benefit is whether you use a background image or background color or no background you are using text making it search engine friendly.

Yes, I am a CSS and standards enthusiast.

DepecheNode
03-26-2004, 12:02 AM
So if js rollover is problematic why not switch to standards like CSS.

With CSS the whole block is clickable. The added benefit is whether you use a background image or background color or no background you are using text making it search engine friendly.

I have created a javascript 'roll-over' type menu that contains only one repeated image that is 43 bytes in size http://www.homesofminnesota.com/clickabledivtags2.html . All of the rest of the menu is html text and colors with JS to switch the div tags (view source). Because it is html and not image based, it loads super-fast, and when the JS (which is only 16 small lines) is shunted to an external .js sheet (much like an external or 'linked' .css sheet) operates the calls almost flawlessly, with the whole box being clickable. When you shunt the rest of the chaff (like formatting and colors) to a .css sheet, it creates very lean code which is highly viewable and cross-compatible (although I haven't done the div tag testing on this particular menu.)

Don't get me wrong, I LOVE where .css is going and I think the more I bend it to my will, the better it behaves. However, when a person uses a defined stylesheet, or you come across other problems like 508 compatibility issues (remember, realtors take money from the government in the form of VHA and FHA backed loans, the day's coming when 508 is going to be an issue for all of us) .css has unresolved issues.

I think that notwithstanding .css (I am using it more than ever, myself) we should not toss out .js with the proverbial 'baby's bathwater'. The OR engine should be ported to both .css and .js.

(btw, thanks Frank, I've learned more about .css since I've begun using OR for the past 2 months than I have in the past 2 years.)

- peace -- Depeche

ResaleBroker
10-04-2004, 12:38 AM
Thanks for the code Lauren. It works great.

Caleb
10-04-2004, 04:03 AM
thank you seriously, but i do all my pages in html and only have about 4 pages in php so therefore it is much simpler for me to do it in html :)

also, im guessing there are quite a few people here who havent any clue about css and modrewrites...

thanks!

but my mommy told me it's mean to call people names!

jonglob
10-04-2004, 05:49 AM
Hey Lauren,
I've put your code,
I like it,
Problem:
check out in different places it goes over them, such as tems of use page in my site:
http://www.abagada.com/legal.php
why is this?
Jon
other pages happends the same....

pbflash
10-04-2004, 09:43 AM
It looks like your contact us and terms of use pages are too wide which is forcing them down in order to fit. Try resizing the pagewidth.

I would have to agree that css is the way to go over any other method.


also, im guessing there are quite a few people here who havent any clue about css
I was one of these people less than a week ago. Now my site, http://www.autoappraisalsunlimited.com is all controlled by css (except the photo gallery which I'm working on). The menu uses 1 small file for the button. The center column is fluid and will resize to adjust for different resolutions.

I was leary about getting into css but when I did, I realized how easy it actually is.

frobn
10-04-2004, 10:14 AM
Its not the pagewidth but there are a couple things wrong.

First, the js menu is set at 180 the leftcol is 150px. Change the menu to avoid problems with the content width. Better still use a CSS menu that will provide the same look and feel. I think it is Sunfilly that has an excellent example of one.

Second, on the contact page the table width in the php file should be set to "" or "100%"

Both of these are forced errors because of our tendency to comingle layout and content. I am hoping that Caleb's developer's mod will alleviate this type of problem. I wish I knew more about programming so that I could help him.

Regards,
Frank

ResaleBroker
10-04-2004, 10:25 AM
Here is a link to a CSS menu generator in case anyone is interested: http://www.webmaster-toolkit.com/css-menu-generator.shtml

jonglob
10-04-2004, 09:19 PM
and frank thanks for the help again,
but when I put your code that written in this thread in the first page, when-ever - "mouse over" occurs - and the the square turns white, the text is gone....

I am struggeling so hard in this php/css world, and yet i come out with nothing, solution: find another job... problem: not many jobs in Hawaii....
but at least I got the weather :cool:
jon
www.abagada.com

frobn
10-05-2004, 06:38 AM
Hi Jon,

It takes a little effort to learn css but it is worth it. You were getting the blank on hover because there was a conflict between code in the css file and in the html file.

Take all the nav* stuff out of both the html file and the css file. Then put sunfully's code in the css file and you are done.



#navcontainer { width: 140px; }

#navcontainer ul { margin-left: 0pt; padding-left: 0pt; list-style-type: none; font-family: Arial,Helvetica,sans-serif; font-size: 11px; font-weight: bold; }

#navcontainer a { border: 1px solid rgb(66, 85, 123); padding: 3px 0;
text-indent: 4px;
display: block; width: 140px; background-color: rgb(166, 179, 207); text-align: left; }

#navcontainer a:link, #navlist a:visited { color: rgb(66, 85, 123); text-decoration: none; }

#navcontainer a:hover { color: rgb(66, 85, 123); background-color: #fff;}



I made some minor changes to the padding and added the text-indent so it will render the same in both IE and Mozilla/FF. Mozill and FF are making a come back so developers can't ignor them any longer.

Regards,
Frank

jonglob
10-07-2004, 12:56 AM
Thanks it worked!
;)
Jonathan