Newbie

Hi Andy,
Here's a couple of suggestions to help you on your way.
Use a doctype, it helps browsers display the content closer to the standards and closer to how other browsers display the site.

Keep things as simple as possible, remove any unnecessary code or tags.
On your site you have spans around the links in your menu which aren't really needed.

I haven't had a chance to look at your javascript, and have only had a quick play with your menu.
Try removing all the spans, giving the orange bars a margin bottom of 20px
and removing any spaces between the links and images.

If I get a chance I will have a closer look tomorrow.

Tony

Hi Tony

Look forward to your comments and advice

Cheers
Andy

I removed each of the orange bar from between each icon. I am new to CSS, and couldn't get the orange bar to rise to act as a separator.

I am aiming to set up a template for the site and then proceed with the other pages. I have uploaded a tables version of the site at

http://www.orange-house.co.uk/Preview/NetModsCSS/AboutNetModsTableAD1.htm

And would welcome any comments and vice ion either, or both. I deally I'd like to reformat the tables version in CSS-P.

Cheers

Andy

As if you couldn't guess, the above post was by me.

Andy

Hi Andy,
Here's a tableless version of what you had. It is not an exact replica, you can spend the time lining things up and moving them where you want.
As I was working on it locally, I changed some of the paths to images and left others.
I haven't looked at the javascript as it seems to be working.

A couple more suggestions:
You could use text for the text under the navigation images, this would improve useability, increase load speed and help web spiders index your site a little better.
If you decide to keep the images give them all the same width, and give each of them an alt tag. Give the images around them title tags.

Hope you can work with what I've given you, even if you don't use it you might learn from it.

Hi Tony,

Many thanks for your kind comments and effort. With regards to the JavaScript, I used Dreamweaver to build it and have been told that the images have a lag when cursor is ovber the icons. I wondered if you could confirm this? I haven't been able to find a simple script to do the smae thing but there should be one out there as many sites use the same sort of script in their navigation.

I am off out today but will play with the formatting you so kind offered tomorrow.
Cheers

Andy

I keep forgetting to login.

I fired up the page you posted Tony. I noted that when I used IE (not tried any other browser at the mo) and ran across the links at the bottom of the page, the page contents jumped about. I wondered if this is an IE problem? Any ideas?

I will be away all day today - Cambridge Folk Festival, and no it isn't puipe and slippers - so I'll not be availabale to check any messages.

Is it permissible to link to the forums from my website? I guess it is...

Cheers

Andy

Hey thats a cool jump effect, I might have to charge for that one.

Seems to be something to do with the br in the bottom menu.
If you move your mouse over the last line of links the menu jumps.

Without the br it seems to work alright.

@Andy: In reference to the rollover lag you mentioned, I noticed it right away when looking at the CSS version of your page. You could either keep your current rollover script and add an image preloading script, or create your own rollover script (with which I recommend you preload images as well).

I took a quick look at netmods.js- it has an image preload function for the menu, but I'm not javascript-savvy enough to be able to compare the Dreamweaver preloader to the other preloader. Maybe someone else can offer some insight on that.

Either way, good luck and keep us informed- I like the site a lot, very visually appealing. The scooter's the best part.

HI Guys,
many thanks for the advice. I wondered if either of you would have a JavaScript you know is working for the rollover/link effect I am after? I have one on the front page of the site www.orange-house.co.uk. I wondered if you had a lag with the images on that page?

Trying to get this project finished in CSS/XHTML in the next couple of days as my mate really wants to get his business literature sent to potential customers. I seem to be holding things up a bit, I am led to believe.

It's almost 1am, so I'll have a look at Tony's page without the br effect in the morning.

Cheers

Andy

Did the javascript I linked to in my earlier post not work for you?

HI Knight,

I didn't get around to checking it out, sorry about that. Is there an onClick for that or is it simply a rollover? Many thanks for the links they do look useful - I've added them to my favourites!.... did you change the create your own rollover since the original post?

Cheers

Andy

HI Guys,
I've tried replacing the "text buttons" with real text. I simply deleted the corresponding images, and on my PC anyway, the rollover effect still seems to work, but the MM_JavaScript still, of course, has reference to the old images. I wondered if anyone was aware of how I would adapt the JavaScript now?

I have been trying to play with the line up of text and icons too.
Upoladed to http://www.orange-house.co.uk/Preview/NetModsCSS/TonyVersionBETA.htm

Andy

HI Guys,
I had another try, this time combining the text and icons into one image. I also used Knights site for the new rollover, but I don't seem to have got it to work. Anyone got any ideas...?
This version is at http://www.orange-house.co.uk/Preview/NetModsCSS/TVersion.htm

Cheers

Andy

Hi Andy,
You seem to be calling a function called movepic, I couldn't see where that function is hidden, is it still available?
Here's a simple function you could use.

function swapimg(theid, img1, img2){
   var theimg=document.getElementById(theid).src;
   if(theimg==img1){
      theimg=img2;
   }else{
      theimg=img1;
   }
}

you need to give each image an id and call the function like

<a href="ProtectNetModsTableAD1.htm" border="0"><img di="pro" src="images/protectiongrey2.gif" border="0" name="protection" width="80" height="70" onmouseover="swapimg('pro','images/protectiongrey2.gif' 'images/protectiongrey3.gif')" 
onmouseout="swapimg('pro','images/protectiongrey2.gif' 'images/protectiongrey3.gif')"  alt="protection"></a>

I'm not sure of the image names etc. and haven't tested it.

Hi Tony,

Regards the other JavaScript, I followed the instrucions on the site posted by Knight. I am sure I probably did something incorrectly. It's getting late here so I think I'll be off to bed soon.

Anyway I'll have a look at your post in more detail in the morning. I am trying to wrap up my mates site for mid week. Then he can get his business on the move....

Andy

I wish you wouldn't be allowed to post without login, I keep just posting.. darn

Andy

Should I retain the image 1 to 14 details present in the last JavaScript?
I tried for the ABout US link, without the other image details and nothing happened.

Andy

Hi Andy,
I think you have just left out the movepic function.
Add that in to the js file or between the script tags and things should start working again.

Hi Tony,

I've posted it at http://www.orange-house.co.uk/Preview/NetModsCSS/testscript.htm Some very weird things happening... very strange indeed.
Anyway as I edit this it is 01:20am, and I think I am off to bed. Chat soon.

Andy

Hi Andy,
You just need the correct path to the images.
Add "images/" into each onmouseover and onmouseout event or change the movepic function.

function movepic(img_name,img_src) {
var fsrc="images/"+img_src;
document[img_name].src=fsrc;
}

Hope that helps.

HI Tony,
i went back to dreanweaver, so it seems to be working now. I set up text links and rollovers for the graphics. Wondered if you could have a look? The problem now is trying to line up the text underneath the icons. I had thought of just making and inserting a white bar between each text link as a quickie.. but then again there may be an even quickie with css.
http://www.orange-house.co.uk/Preview/NetModsCSS/TonyVersionBETA.htm

Also posted a Tables version at http://www.orange-house.co.uk/Preview/NetMods/NewFPWeb/AboutNetModsTableAD1.htm
and

I couldn't get the footer links to separate into 2 nice collections of links one above the other... need to have a try at that again. Do you have any lag on download or any other such problems...?

Cheers

Andy

Hi Andy,
Big lag at the moment the server must be down.

For the links at the bottom you could look at using lists http://www.alistapart.com/stories/taminglists/

For the text under the images you could try having a div that covers the whole width, inside that have smaller divs that are floating left and have a width and left margin set.

.therow{width:100%; clear:both;}
.thelinks{width:100px; margin-left:20px; float:left; text-align:center;}

<div class="therow">
   <div class="thelinks"><a href="#">link text</a></div>
    <div class="thelinks"><a href="#">link text</a></div>
     <div class="thelinks"><a href="#">link text</a></div>
</div>

You will have to play around with the values etc.
Hope that helps.

Hey Tony,

This is great. CSS really does have just about everything you need. I am so impressed... just read through the alistapart link you posted. I'll need to get on to that in the morning. It's 00:15 here, on an unusually hot day for the UK (32C in the shade here in Cambridge).
I forgot to add the DTD, looks a bit different now. Now there's tooo much space occuppied by the text.
I'll try the other details too.

Cheers

Andy

HI Tony

I tried to position the page centrally by adding a container box. I am about to upload it to http://www.orange-house.co.uk/Preview/NetModsCSS/TonyVersionBETA.htm and wondered what you thought? I have satill to look at the list option for the navigation at the bottom of the page though.

Andy

HI Tony,

Sorry wrong link... it should be

http://www.orange-house.co.uk/Preview/NetModsCSS/TonyVersionBETA2.htm

I set the container box to text-align: center, and noticed that in IE the contact text seems to be on the next line, but not in Moz.

Reading through the source code I noted this:

#con{width:620px; margin:40px;} /*Container for the two content columns */
#colone{width:300px; float:left;}
#coltwo{width:300px; float:left;}

And wondered whether there would be something wrong as the inclusion of the margin would make the overall size 640, or am I reading it incorrectly?

Just got too many versions going at the same time.... (well 2 anyway, or is it 3..lol)

Andy

Hi Andy,
The two columns seem to be positioned correctly, the margin is outside the containing column, so isn't affecting the two inner columns.
the row width is actually 660px wide as I set the width to 620 with a margin of 40px.
You should be able to reduce the width too 600px just test it out on different browsers to make sure one column isn't pushed below the other.

Adjust widths of the text links or containing row to stop the contact link wrapping in ie.

To remove the underline from the menu links and have it look more like the original. text-decoration:none;

Otherwise a fine job, the site looks good and should load a little quicker.

HI Tony,

Thanks for the comments and the tips. I'm been playing with the design all day, then went to watch some telly.... Anyway it's after midnight here in the UK, and I'm a bit bushed. I'll sort out the page in the morning....

Cheers

Andy

HI Tony,
I have made a few alterations to the beta2 version above and wondered if you would like to offer any comments? The content title seems to be not positioned properly, having moved to the middle when I have tried to centralise the page.

It's on this link
http://www.orange-house.co.uk/Preview/NetModsCSS/VersionBETA2.htm

Andy

Hi Andy,
The heading is centered because of the container div which has text-align set to center.
Floating it left and adding a little margin should help you position it.

You may have to give mrowtext a little extra width to stop the contact us link wrapping to the next line.

I would also set the scooter to stop level with the last icon.

HI Tony,

I'll give it a try.
Regards the Scooter, I had tried to centre the content but it wouldn't work. If that worked then the Scooter wouldmindeed be in the correct position. I may just forget trying to centre the page contents.

Andy

Hey guys,

You guys have been working so hard at this I feel like I'm butting in. I wanted to take a look at this I just didn't have the time before now. With all the difficulty of lining up the buttons and text in two different rows, it seems like it would be easier to just use the images as backgrounds for the links with enough padding to place the text below the image. This would also let you control the rollovers with CSS and get rid of the javascript craziness to highlight both the text and the image seperately. I downloaded your file and threw together a quick example. I referenced the images back to your server.

I hope this helps.

HI d3signmonk3y,

All the icons line up doagonally across and down the page. Exciue my naivety, but does this mean they are not nline? I have started reading Zeldman's "designing with web standards"... and learning from here...

Andy

It means I didn't thouroughly test it before posting it.

Sorry about that.

Add:

ul#navbar li {
	display: inline;
}

and it should fix it in IE pc.

I wanted to take a quick stab at it before I leave for vacation later today. You may have to change some of the graphics to line them up with the text how you want them and tweek a few style definitions, but hopefully it will work out.

HI d3signmonk3y,
Feel free to do what you wish. I look forward to your post. I am sure this must be one of the most useful threads on the site, and hope it is useful to anyone who pops in!

I had a quick look without any problem, then tried a second time and it only saves the link to my desktop.

Andy

Andy

Didn't quite follow that.

I tried looking at your code/page and it was accessed easily, then a few mins later I tried again, but I only got the option to save a link to the page. But it all seems oK now...

So, using this code I would be able to dump the JavaScript would I?

Andy

The rollovers would be taken care of by CSS, so you wouldn't need any javascript for that. You would still need to preload the rollover images, but I think there's probably a way to set that up with the CSS as well. If you move the id from the <a> tag to the <li> tag and then use the orange rollover graphic as the background for the li and the gray graphic as the background for the a tag, the graphic in the li shouldn't be visible, but it will load up with the page.

Sorry if that sounds confusing, I'm kind of thinking as I go so my thoughts aren't very organized.
Before (simplified):

li#ncontact a:link, li#ncontact a:visited { background: url("http://www.orange-house.co.uk/Preview/NetModsCSS/images/customersgrey.gif") no-repeat 0 0; }

After:

li#ncontact { background: url("http://www.orange-house.co.uk/Preview/NetModsCSS/images/customersorange.gif"); }

li#ncontact a:link, li#ncontact a:visited { background: url("http://www.orange-house.co.uk/Preview/NetModsCSS/images/customersgrey.gif") no-repeat 0 0; }

That's brilliant... and it is easy to follow if you take your time and think about it. I am really impressed. You two guys have been no end of help....

Would I have your permission to use this code? I am seeing my mate tomorrow, and I am sure he will be pleased that his site is ,hopefully, finished...

Is it necessary to include the full URL to the graphics or can they be done relative?

Andy

The code is free to the world.

The graphics can be relative, I only made them absolute so I could see them on my local copy.

Like I said, this was done really quickly so be sure to check it on all browsers to make sure there are no little quirks to work through. i looked at it in IE 5 mac, IE 6 pc, NS 6 pc, and Opera 7 pc. I hope it works out for you.

Good luck

Erik

I noticed that one of the graphics was slightly out of line, I presume this would be easy enough to alter.

Also did you add these already and if not where should I add them?

 Code:
li#ncontact a:link, li#ncontact a:visited { background: url("http://www.orange-house.co.uk/Preview/NetModsCSS/images/customersgrey.gif") no-repeat 0 0; }


After:
Code:
li#ncontact { background: url("http://www.orange-house.co.uk/Preview/NetModsCSS/images/customersorange.gif"); }

li#ncontact a:link, li#ncontact a:visited { background: url("http://www.orange-house.co.uk/Preview/NetModsCSS/images/customersgrey.gif") no-repeat 0 0; } 

Sorry but I haven't had a very close look at the code, wanted to get info from you before you disappeared.

Wouldn't I want the opposite as I would like the "off" value to be grey and the "on" value to be orange?

Could I delete the "MM" preload from my body tag?

Who needs Tables....? this is great good stuff!

Andy

PS I have now looked through the code and couldn't see the first example of the code... am I blind?

How could the whole content be centred? I did try this with ane arleir version but only got centreing of the mocve and the Content header. Notably the actual page content and the navbar remained left aligned.

Andy

Hey Andy,

Sorry I didn't respond sooner, It's ribfest in Toledo today, so I was out getting some lunch.

To center the entire layout, it should work if you make the body "text-align: center" and then have a container div around your whole layout with a set width and "margin-right: auto" "margin-left: auto".

body{ text-align: center}

#container{ margin-right: auto; margin-left: auto; width: 700px; text-align: left; }

If you still need help setting up the nav CSS to preload the images let me know, I'll try to post a modified file after lunch.

Ribfest, that sounds interesting.

I will have a go at trying the centreing. I wondered if you could advise on the preloading you mentioned above? Should any details presently on the page be altered or are the "before" and "after" you mentioned above new additions to the page?

Thanks

Andy

** Centreing seems to have worked without the body {text-align: center; } insertion**

I have posted at http://www.orange-house.co.uk/Preview/NetModsCSS/designmonkey.htm
and also at
http://www.orange-house.co.uk/Preview/NetModsCSS/designmonkey2.htm
where I removed both the MM onLoad and the references to the onMouseOver etc.

The text-align: center is so it works in IE 5 I think.

I've attached a modified file that should work for the preload. I set the li background images to start at -50 -50 just to make sure they aren't displayed.

There looks like there's a flicker on the rollover for IE6 pc and NS6 pc. I'm probably not going to be able to post any more till I'm back from vacation in a week, so maybe somebody else can take a look and see if they can figure out what's causing it.

Erik

I noticed the flicker too, when the rollover is active.

Many thanks Erik, have a great vacation.

I presume the onLoad for MM can be deleted as well as all the JavaScripting?

Got any comments Tony?

Andy

Tony,

Do you have any comments on the navigatiopn design proposed by Erik? I think it looks pretty good, but i would like to decrease the size of the orange background bar. I have tried but it didn't wotk... I sent the contact graphic to the next line.
I have posted at
http://www.orange-house.co.uk/Preview/NetModsCSS/AboutCSSDM.htm

Cheers

Andy

Hi Andy,
It's 5.50 am here, sorry I wasn't up all night answering posts
The navigation looks good to me.

Looks like you guy's have it all sorted out.

HI Tony,

It's 00:40 here.... Off to my bed shortly. You do rise early... 5:50am WOW! Didn't know there were 2 in the day!

I think Erik's input was really good. The navigation looks good but there is an issue with the flicker when the icons are first called for the rollover.

I wondered if you could advise on the tidying up of the links at the bottom of the page? I know they can be set up with ul inline tags but that wouldn't allow for the splitting of the links so that they are arranged a bit more neatly, or would it?

I also think that the layout with termination of the orange line at the contact button would look better. I tried playing with that but it just sent the button to the next line.

Cheers

Andy