Need someone to do coding for pay (Full Version)

All Forums >> [Web Development] >> Cascading Style Sheets



Message

JacieClaeys -> Need someone to do coding for pay (3/21/2008 2:16:46)

Hi all,
You can see my site at http://www.nrgsaver.com I am using a SEO company and they want me to use links on all the top menu items.

I have done the pages that will link to the menu items(ie: Incandescent, Specialty, Decorative etc.).
But have run into problems with the linking. I have tried classes and a whole box full of other things without success.

I believe I am running into conflict with coding that is already in my CSS style sheet due the the "menu a" as it changes the size, color, hover and type when I change the code to link it.

I have done an index page with the boxes lined up across as I want them (they are slightly changed from the original site and can be seen here: http://www.nrgsaver.com/checker/index4.htm

What I need to have done is to fix the CSS style sheet and make the links for the top menu so that the menu works exactly as it does now except the main menu can also be clicked on and that it works cross browser.

If you are interested in doing this job please message me with your availability and price.

Many thanks.
Jacie



Tailslide -> RE: Need someone to do coding for pay (3/21/2008 6:34:36)

Jacie

I'll be frank with you - I think there's way too much stuff in your navigation menu. My personal opinion is that you'd be better off with less stuff in there and then have sub menus on the parent pages listing the sub-content - sort of like Amazon does where you've just got the top level categories across the top and a list of the sub-content down the side. But, you know - that's just my opinion, many may well disagree with me!

So, that said - here's a version that might work for you: http://www.littleblueplane.com/test/bulbs/test.html It works in modern browsers and IE back to IE5.5. Doesn't work properly in IE5.

It's Javascript enhanced but works without it in modern browsers and the top level works in older browsers. It's also keyboard accessible which is unusual.

Your page code is quite convoluted - lots of inline styling etc which will make your life really harder in the long term. I really like the "Keep it simple" school of thought because, lets face it you've got better things to do than go through page after page changing a font tag! Placing the navigation absolutely will be interesting - double check that you've got enough space in case people make the text larger as the menu will expand and may cover some of your text.

If you want to make a donation then make it to the guy that wrote the dropdown script itself here as he's the one that did the hard work: http://www.twinhelix.com/dhtml/fsmenu/

edit: btw - I left off the actual links - you'd need to add those back into the link tags.



jaybee -> RE: Need someone to do coding for pay (3/21/2008 8:54:55)

Wow! Tail that is nice. There are others around but that is just smooth.

Jacie you need to shrink the font size, on my Mac it's huge and runs off the dropdown background.



d a v e -> RE: Need someone to do coding for pay (3/21/2008 10:11:04)

that is a nice system!



Tailslide -> RE: Need someone to do coding for pay (3/21/2008 12:14:29)

I think it was Womble that found it first actually. I just quite like it as it's keyboard accessible which is a big advantage over most of the other dropdowns plus it's snazzier looking than the accessible version of Suckerfish.



JacieClaeys -> RE: Need someone to do coding for pay (3/21/2008 12:34:53)

Hi Tailside,

Thanks for the test. I really like how it looks.

However, I had a javascript menu before and got rid of it because of SEO. Since I am adding these pages strictly for SEO purposes ( the link-to pages have regular links to all the pages in the drop down menu) I want to use only CSS.

One of the pages I will be linking to in the main menu is:
http://www.nrgsaver.com/checker/decorative-light-bulbs.htm

I found a nice straight-forward CSS menu here: http://sperling.com/examples/menuh/

I have played with it for a week and because I don't know enough about CSS I am not having any success in adapting it to my page.

My current( the one that is on my site now- NOT the test) CSS menu is:

/* Begin CSS Popout Menu */

#centermenu{
width:775px;
margin-left: auto;
margin-right: auto;
}
#menuwrap{
background:none;
width:775px;
border-width: 0px;
border-style:solid;
border-color:#D56A00 #FFE7CE #FFD2A6 #FFE7CE;
position:absolute;
top: 170px;
}

#menu{
float: center;

}

#menu h2{
font:bold 11px/16px arial,helvetica,sans-serif;
display:block;
border-width:1px;
border-style:solid;
border-color:#FFD2A6 #FFE7CE #D56A00 #FFE7CE;
white-space:nowrap;
margin:0;
padding:7px 3px 7px 3px;
}

#menu a{
display:block;
border-width:1px;
border-style:solid;
border-color:#FFD2A6 #FFE7CE #D56A00 #FFE7CE;
white-space:nowrap;
margin:0;
padding:0px 2px 0px 2px;
}

#menu h2{
font:bold 11px/16px arial,helvetica,sans-serif;
color:#fff;
background:#74898F url('../images/expand4.gif') no-repeat 100% 100%;
text-align: center;
text-transform:uppercase
}

#menu a{
background:#E2E9E8;
text-decoration:none;
}

#menu a, #menu a:visited{
color:#0C393C;
}

#menu a:hover{
color:#FFE7CE;
background:#A1B5B6;

}

#menu a:active{
color:#023838;
background:#FFE7CE;
}

#menu ul{
list-style:none;
margin:0;
padding:0;
float:left;

}
#menu li:hover{z-index:1;}

#menu li{
position:relative;
}

#menu ul ul{
position:absolute;
z-index:500;
top:auto;
display:none;
}

#menu ul ul ul{
top:0;
left:100%;
}

/* Begin non-anchor hover selectors */

/* Enter the more specific element (div) selector
on non-anchor hovers for IE5.x to comply with the
older version of csshover.htc - V1.21.041022. It
improves IE's performance speed to use the older
file and this method */

div#menu h2:hover{
background:#74898F url('../images/expand4.gif') no-repeat -999px -9999px;
}

div#menu li:hover{
cursor:pointer;
z-index:100;
}

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

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

/* End of non-anchor hover selectors */

/* Styling for Expand */

#menu a.x, #menu a.x:visited{
font-weight:normal;
color:#FFFFFF;
background:#5E8081 url('../images/expand4.gif') no-repeat 100% 100%;
}

#menu a.x:hover{
color:#FFE7CE;
background:#A1B5B6;
}

#menu a.x:active{
color:#FFE7CE;
background:#A1B5B6;
}

/* End CSS Popout Menu */
#m1h {position: relative;
width: 38px;
height: 100%;
float:left;}

#m1 {position: relative;
width: 61px;
height: 100%;
float:left;}

#m2 {position: relative;
width: 89px;
float:left;}

#m3 {position: relative;
width: 76px;
float:left;}

#m4 {position: relative;
width: 97px;
float:left;}

#m5 {position: relative;
width: 141px;
float:left;}

#m6 {position: relative;
width: 82px;
float:left;}

#m7 {position: relative;
width: 74px;
float:left;}

#m8 {position: relative;
width: 49px;
float:left;}

#m9 {position: relative;
width: 51px;
float:left;}

I have reread all the tutorials, all the forums and because of "a href " can't seem to find what to strip out or change to stop it from changing my menu when I add the links. The #m1h thru #m9 are critical to making the menu fit. Which is why I am willing to pay for someone who knows more than I do to make it right for me.

Jacie



Tailslide -> RE: Need someone to do coding for pay (3/21/2008 12:41:05)

No this isn't a typical javascript menu Jacie - it won't affect SEO whatsoever.

What we tend to refer to as "javascript menus" is when the link only exists inside a bit of javascript - with this version you've got full proper links. So good for SEO!



JacieClaeys -> RE: Need someone to do coding for pay (3/21/2008 13:07:54)

Ok, I will give it a shot. It looked like that was the case when I looked at the source code but javascript just meant one thing to me.

Since I don't do this for a living ( the world breathes a sigh of relief[:D]) I am just dreading playing with this thing anymore. I really need to get on with the rest of my life (just turned 70 last week) for whatever is left of it.

Thanks for the help.



Tailslide -> RE: Need someone to do coding for pay (3/21/2008 14:03:57)

Keep a copy of what you've got before you start messing with it all - that way if everything goes wrong...



JacieClaeys -> RE: Need someone to do coding for pay (3/21/2008 17:08:55)

Tailside.
[;)]I haven't learned much about coding, BUT I sure have learned to SAVE. SAVE and I are best friends. There is actually an index13.htm and a menuhc13.css. It has saved me from going back and starting from scratch, hundreds of times. I really think of "save' as the eraser on my pencil.

I will let you know how it all turns out. Looks like me and the easter bunny are not going to connect this year, as I will be too busy with the new menu.

Thanks for your help. You always seem to come through for me.
Jacie



JacieClaeys -> RE: Need someone to do coding for pay (3/24/2008 7:48:23)


quote:

ORIGINAL: Tailslide
So, that said - here's a version that might work for you: http://www.littleblueplane.com/test/bulbs/test.html It works in modern browsers and IE back to IE5.5. Doesn't work properly in IE5.

Hi Tailside,

I have downloaded the folder from twinhelix and have a question. There are 10 files in this folder. Is the divmenu.css the one you changed and call menu.css and is this the css file you use for positioning?

Another question I have, is will I be able to position with css and still have the content at the top of the page for SEO?
Thanks



Tailslide -> RE: Need someone to do coding for pay (3/24/2008 8:10:03)

No yes and yes.

You're probably better off using the css file from my example as that has your styling in it. If you use the stylesheet from the site then you'll have to start all the styling over from the start. Then just add your positioning into the div#menu rule to put it all where you want it.




JacieClaeys -> RE: Need someone to do coding for pay (3/24/2008 13:31:18)

Thanks,
I have grabbed your menu.css file.
What a help you always are and want you to know how grateful I am.



TravelswCharlie -> RE: Need someone to do coding for pay (3/25/2008 16:17:38)

quote:

ORIGINAL: JacieClaeys

I haven't learned much about coding, BUT I sure have learned to SAVE. SAVE and I are best friends. There is actually an index13.htm and a menuhc13.css. It has saved me from going back and starting from scratch, hundreds of times. I really think of "save' as the eraser on my pencil.

Jacie


Jacie, if you are using FrontPage or Expression Web, there's an easier and better (IMHO) way to SAVE.

Just "Publish" to your own disk instead of to your host site.

Then, you have all your pages as well as images, styles sheets, and all, saved and identified.

I have my entire web site saved several times, named with dates so they are easy to identify... such as "PUBLISH 08 03 01"; "PUBLISH 08 03 14", "PUBLISH 08 03 22", etc I can choose the most recent SAVE, or if I changed my mind about some change I made and want to go back to some earlier date, I can easily do that.

To get to the right place, start to "Publish" in the usual way, then "Cancel", then "change web site properties". I don't remember the exact wording or position of that last command, but it will be right there somewhere.


CJ



JacieClaeys -> RE: Need someone to do coding for pay (3/26/2008 3:41:56)

What a great idea. And the timing is perfect for me. Once I get these pages up and working I have been talking to my host about moving to one of their new servers. I didn't want to do it until this was all worked out, and I will have to back up my whole site to do so. I have a bunch of backups but wow this would be great to have them separate on disk and save PC space too.

I have run into a few glitches on the new menu:

http://www.nrgsaver.com/checker/energy_saving_light_bulbs.htm

I can't seem to get the background to come to the top of the page in IE. It works fine in FF. Also, even though I copied Tails menu (just changed the "more" to "side" on the arrows... none of the arrows show on the menu unless you hover.

But the biggest problem is that my menus don't pop-out like the test, even though I copied and pasted .

I'm sure I have missed some coding somewhere just have to find it. I really like this menu so much better than the old one. It is so much cleaner.

Thanks for the "publish" tip -I will start using it immediately.



Tailslide -> RE: Need someone to do coding for pay (3/26/2008 3:56:19)

Hi Jacie

The problem with the arrows and the menu.js is that they don't appear to be where the stylesheet or the markup is looking for them. Make sure the paths are correct to where the images of the arrows and the script actually are and you should be fine.

There is some other stuff going on there too - you've got two body tags which may or may not confuse a browser so better to remove the one.

Also, for reasons I'm not sure I understand, the top level menu is wrapping in Firefox - must be some conflicting rule there but I can't see it. reducing the padding by a tiny amount fixes it so change the following rule in the menu.css to this: 

/* Links inside the menu */
.menulist a, .menulist a:visited {
 display: block;
 padding: 0.5em 0.4em;
 color: #fff;
 text-decoration: none;
 border-bottom:none;
}



JacieClaeys -> RE: Need someone to do coding for pay (3/26/2008 7:56:13)

Will make those changes. At least I now know where to look for the problem. Daddy always said I could screw up a one car funeral, but what no one realizes is that one must work very hard at it, to achieve such spectacular results. I know I make it look easy but its not.[:D]



JacieClaeys -> RE: Need someone to do coding for pay (3/27/2008 16:05:56)

Hi Tailside,

The problem wasn't with the links to the arrows but that I had neglected to grab the menu.js file.

I thought I had everything I needed and then I saw that little "script" code at the end of your menu and reread your notes to me.

Viola'. Once I had that it was all working great....EXCEPT......

The only problem I am having is with the background on the home page. I took out the extra "body" I had in there and here is what I still get:

http://www.nrgsaver.com/checker/energy_saving_light_bulbs.htm

This page is the only page on the site that I use the background on.

Using exactly the same copy as is on the above page except using the all CSS menu from before it looks like this:
http://www.nrgsaver.com/

However, if I use a second div on the "energy_saving_light_bulb.htm" page it will move the background up to the top and then I have to add a color to the second div. It then looks like this:

http://www.nrgsaver.com/checker/index.htm

What I can't figure out is why it won't use just one div and a /div but will use two div's. Is it possible I need to change something in the menu.css file?

Thanks

PS: I really, really love this new menu. It is so easy and looks so much cleaner. It all works fine on all the other pages thank heaven.

DUH!
All I had to do was make the background picture longer and now it works fine. I am ready now to put the menu on all the pages.

When I changed to .5em to .4 em it shortened the menu some. I need to look at that in a bunch of browsers to see what happens.



Tailslide -> RE: Need someone to do coding for pay (3/27/2008 18:00:59)

Is that everything sorted now?

It's late here so I'm off to bed but if there's anything left I'll have a look in the morning.



jaybee -> RE: Need someone to do coding for pay (3/27/2008 19:07:07)

Looking good but the text in the pop-ups is still too large and it seems you've gone out of business. [;)]

quote:

Copyright 1997-2007 All Rights Reserved


Having had a quick look at the code you'll need to change the css from

#menu{
float: center;
}

to

#menu{
float: center;
font-size:12px;
}

or whatever font size you choose.



jaybee -> RE: Need someone to do coding for pay (3/27/2008 19:08:34)

You'll need to shorten some of those names or make the flyout boxes wider. Even at 10px the text overflows.



JacieClaeys -> RE: Need someone to do coding for pay (3/28/2008 3:05:33)


quote:

Copyright 1997-2007 All Rights Reserved


Thanks for the heads-up I have fixed it[>:]
quote:


Having had a quick look at the code you'll need to change the css from

#menu{
float: center;
}

to

#menu{
float: center;
font-size:12px;
}


I think you might be looking at the "old" index page.

The one you want to see with Tailside's wonderful js/css menu is here
http://www.nrgsaver.com/checker/index.htm

The code for this new menu is:
* html, body, ul, li {margin:0;padding:0;font-family:Arial, sans-serif;}
body {font-size:100%;}
/************** FS Menu dropdowns ***********/
#menu {font-size:76%;width:775px;margin:0 auto;font-weight:bold;}
#menu #listMenuRoot {width:775px; background-color:#74898f; font-weight:bold;height:2.4em;margin:0 auto;
position:absolute;top:166px;}

/* All <ul> tags in the menu including the first level */
.menulist, .menulist ul {
margin: 0;
padding: 0;
list-style: none;
}

/* Submenus (<ul> tags) are hidden and absolutely positioned downwards from their parent */
/* Submenus (<ul> tags) are hidden and absolutely positioned downwards from their parent */
.menulist ul {
display: none;
position: absolute;
top: 1.2em; margin-top: 13px; /* I'm using ems and px to allow people to zoom their font */
left: -1px;
width: 12em;
}

Let me know if you still see a problem on the "new" index page, as I was hoping this would take care of your mac's large front.

I tried to take a look at the page today here:
http://www.thesitewizard.com/webdesign/multiplebrowsers.shtml

but got rushed with other things and didn't have alot of time to figure it out.



JacieClaeys -> RE: Need someone to do coding for pay (3/28/2008 3:15:03)


quote:

ORIGINAL: Tailslide

Is that everything sorted now?

It's late here so I'm off to bed but if there's anything left I'll have a look in the morning.


I'm as happy as a pig in slop. [:D]

Can't thank you enough for the help and this great menu. I hope it looks good on everything-browsers and O/S whatever they might be.

Hope to have the whole site finished by this weekend. Then maybe I'll have a chance to do some gardening[:)]



JacieClaeys -> RE: Need someone to do coding for pay (3/29/2008 1:45:32)


quote:

ORIGINAL: Tailslide

Is that everything sorted now?


I thought everything was sorted out until I changed one of the product pages. I can't figure out why it has changed the product page tables (.asp) but didn't change the tables on the .htm pages it did.

The top code in the menu.css file seems to be affecting the rest of my page type and spacing:

* html, body, ul, li {margin:0;padding:0;font-family:Arial, sans-serif;}
body {font-size:100%;}

I have played around with it, like adding Verdana to the font-family: and can make it change the page heading.

But the spacing in the product table is what is really making me crazy.

If you look at the new page here:
http://www.nrgsaver.com/checker/appliance-light-bulb-new.asp

Then look at how it is supposed to look here:
http://www.nrgsaver.com/mall/appliance-light-bulb.asp

you will see what I mean. The only thing I have changed on the page are the files in the head that it needs and the menu listing.

Any suggestions?




Tailslide -> RE: Need someone to do coding for pay (3/29/2008 3:28:52)

The css rule mentioned removes all of the default padding and margins for all browsers - I use this so that I've got a "level playingfield" for getting stuff in the right place but if it's causing more trouble then just remove the "margin:0;padding:0" bit.



TravelswCharlie -> RE: Need someone to do coding for pay (3/29/2008 11:46:26)


quote:

ORIGINAL: JacieClaeys


I'm as happy as a pig in slop. [:D]



WOW, Jacie!

I just looked at it again just now, and am amazed to see the improvements you've made.

I know it must be rewarding to the people who helped you to see how you dug in and put their suggestions to work.

Congratulations!



JacieClaeys -> RE: Need someone to do coding for pay (3/29/2008 12:38:15)


quote:

ORIGINAL: Tailslide

The css rule mentioned removes all of the default padding and margins for all browsers - I use this so that I've got a "level playing field" for getting stuff in the right place but if it's causing more trouble then just remove the "margin:0;padding:0" bit.


I don't think the above is the problem and removing the margin doesn't change anything. In fact, removing one piece at a time or all of it doesn't change anything. But I do think it might be creating a conflict with my layout coding in my "homestylec2.css file.

The other option is my "convoluted" code you mentioned in your first post.

I guess this is why I wanted to pay someone to do this for me. I am such a dunce at this. I have looked at it six ways to Sunday and changed a dozen things one at a time and I can't seem to find it. I am sure it is something simple, so simple I can't find it.



JacieClaeys -> RE: Need someone to do coding for pay (3/29/2008 12:45:18)

Thanks TravelswCharlie,

But I am a long way from "THERE" yet. It is a journey of trial and errorwith error being the cognitive word.[:'(]



Ryokotsusai -> RE: Need someone to do coding for pay (3/29/2008 13:13:32)

Hello :D

at the top of menu2.css add a coma after the asterisk,
or copy this: 
*, html, body, ul, li {margin:0;padding:0;font-family:Arial, sans-serif;}

I'm not sure if it will help, but it seemed to when I tried it, so it's worth a shot...



JacieClaeys -> RE: Need someone to do coding for pay (3/29/2008 20:01:45)


quote:

ORIGINAL: Ryokotsusai

Hello :D

at the top of menu2.css add a coma after the asterisk,
or copy this: 
*, html, body, ul, li {margin:0;padding:0;font-family:Arial, sans-serif;}

I'm not sure if it will help, but it seemed to when I tried it, so it's worth a shot...


WOW double WOW.

That sure did the trick.

This forum is absolutely amazing. Many heads are sure better than one.

Thank you, thank you. That was the last hurdle I had to cross and now I am on my way and I am excited.



Page: [1]

Valid CSS!




Forum Software © ASPPlayground.NET Advanced Edition 2.4.5 ANSI
0.125