Newbie

Hi Tony,

Just a few pionts I hoped you could advise upon? From the number of different versions I have been working on, although the uimportant ones are the XHTML/CSS.

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

XHTML/CSS version with the links courtesy of MM JavaScripting.

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

An improved XHTML/CSS page rollover provided by CSS UL tags,
although initial rollover suffers from a "blink" effect.
MM onMouse Over etc is still intact, surely this can be removed?
I'd like to reduce the length of the orange bar behind the rollover images
such that it ends with the "contact" rollover image.
I tried but it merely moved the image to the next line and had no effect upon the orange bar length itself.
In IE the right arrows are inset rather thna inline with the text above.
I would like to have the footer links more neatly arranged. Tried this but couldn't get it to work.
Need to adjust position of the "home" text.

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

Looks OK in both IE and Moz, on my PC at least. But need to reduce size of the
scooter in static image as it is larger that that in the Movie ("Home" page).

Cheers
Andy

Hi Andy,
To simplify things I will comment on the page with most of the questions:
http://www.orange-house.co.uk/Preview/NetModsCSS/AboutCSSDM.htm

The blink effect is from the images not preloading.

To shorten the length of the orange bar firstly you will need to remove the extra bit on the end of the last link image, then if you can't shorten the bar without having the last item wrap try placing a white image at the end.
Try things out, experiment until you find what works.

For the right arrows try playing with margin and padding settings, you may have to use negative values.

For the footer just reduce the width available by wrapping in a div like:
<div style="text-align:center; margin-left:auto; margin-right:auto; width:500px;">
Hope that helps.

HI Tony,

Thanks for the help.. has this site just been changed...? Icons/colours all look a bit different.

I presume it would be safe enough to remove the MM code that is present in the navigation.

Andy

Hi Andy,
Yes you can remove the MM JavaScript code.

This site has had a few minor changes, gald you noticed.

HI tony,

Would you know of a way to preload the mages so that the "blink" when the rollover is activated could be avoided?

Cheers

Andy

Hi Andy,
What you could do is include the images and set the visibility to none.

One way of doing this would be to use the hover image as a background-image and the other image on top. Then on mouseover you would set the visibilty of the top image to none.

Andy please don't direct your questions to me, there are many others here who can help that may not respond if you directly ask me.

Tony

Understood, regards direct questions.
I suppose that may have been why Erik didn't suggest anything sooner.

Anyway, I'll try out the rollover method you suggested...
However, if anyone else has any ideas they would be gratefully appreciated.

Andy

With regards to the orange bar that is the background to my navigation, I guess I have to alter the css below:
ul#navbar {
width: 700px;
height: 60px;
background: #FFF url("http://www.orange-house.co.uk/Preview/NetModsCSS/index_files/image005.gif") repeat-x 4px 19px;
}

but not exactly sure what to change... haven't got that far in Zeldman's bok yet..lol. Once the formatting and lkayout is sorted, I'll make all the graphics relatively sourced so there's less hazard in transferring to another server.

Andy

I altered the ul#navbar {
width: 660px;
height: 60px;
background: #FFF url("http://www.orange-house.co.uk/Preview/NetModsCSS/index_files/image005.gif") repeat-x 4px 19px;
}
changing the width to 660px, and it almost worked, i.e. brought the size of the orange horiz bar almost to the "contact us" image. If I reduce any smaller then the contactus icon and part of the orange line move to the next line.

Andy

I just checked the site in IE, and the last link goes to the next line. Any ideas on how to solve this?

Andy

I don't seem to be able to change the CSS so that it is OK in both IE and Moz at the presnet size, so I may have to resort to increasing the menu bar to its original size...

Andy

Hi Andy,
if you are using a repeated background image at the moment you could change it to one long bar of the correct width.

I managed to sort it by deleting the width by one pix at a time. So it looked OK in IE but I then had excessive orange bar in Moz.....? I thought CSS was accepted cross browser compatible...?

I then tried a different version in which I moved all the layout to an external style sheet , but the icons would not appear.
http://www.orange-house.co.uk/Preview/NetModsCSS/AboutCSSDMLOCAL.htm

I wondered if anyone reading this knows what is wrong with the background orange line in Moz? It seems to poke beyond the Contact icon?

I have been playing with the width in:

ul#navbar {
width: 683px;
height: 60px;
background: #FFF url("/Preview/NetModsCSS/index_files/image006.gif") repeat-x 4px 19px;
}

which managed to fix my problem of the contact icon falling tot he next line in IE.

Andy

PS Off on holiday on Saturday so (1) you will all have some respite (2) wanted to get this site out of the way.

HI All,
Wondered if anyone cared to offer comments on the site so far. I thnk it is about complete... don't you? Many thanks for the advice adn assistance so afr guys.

Just wondered if any hints could be offered regards the relative positioning of text and arrows on http://www.orange-house.co.uk/Preview/NetModsCSS/ConnectionCSSDM.htm

Cheers

Andy =D>

I really like your design - neat and clean. Nice choice of colours, too.

Only comments I have are:

* Can you preload the icon images, so that the come up straight away on mouseover, without a delay?

* It would be nice to have different icon images for each option.

As for the arrows, I think they look fine. I wouldn't have looked twice at them, in fact, if you hadn't specifically mentioned it. If you're worried about the positioning and/or the wrapping, you could always implement that as an unordered list.

Great site, though!

PS: Would it be possible to have the scrolling banner only appear on the home page, and have the other pages just display a static version. I found it a bit distracting after the first time

HI Sven,

Many thanks for your kind comments.
I am not exactly sure how to preload the images, but thought they had been set up to do so, but perhaps not.

I do intend to change the banner to a static image on all pages except the "Home" page, and then see how my mate feels about that. Was there any particular lag for the movie? I had tried to use the Satay Method on www.alistapart.com but don't know how to add the requisite ActionScript.

Andy

HI All,

I have been palying with the UL tag for the orange arrow thingy, but get different appearances in Moz and IE for the UL.
Not able to sort it out, no matter how much playing I do.

Used a vertical align to line up text and arrow, but doesn't seem to be working in Moz, although Moz doesn't have the excessive space between multiple lines observed in IE.

I'll have to close up soon and get things ready for my hols.

Off on hols in about 17 hours....

Andy

I am finalising the design of the site at....

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

Any additional comments would be welcomed. I will not be able to respond though as I am going on hols this morning.. back on the 26th...

Andy

Excellent job Andy.
Looks good to me in Netscape 7 and IE 6.

Enjoy your well earned holiday.

HI Tony,

Just about to leave.. trying to drag myself away from the comp... 10 days without it... what will I do...?

It has been suggested to me that I should change the rollovers, getting rid of the -50 positioning... but still waiting for suggestions for alternatives.

Andy

HI All,
Back from my hols. Had a nice 10 days in the South and South West of England. Now back to try and sort out my mate's site... he is now pretty desperate to have it finished.
I received an email from a chap on another site regards the site he says

Eg. remove the entire bold line:

ul#navbar li#nprotect { background: url("/Preview/NetModsCSS/images/protectionorange.gif") no-repeat -50 -50; }
ul#navbar li#nprotect a:link, ul#navbar li#nprotect a:visited { background: url("/Preview/NetModsCSS/images/protectiongrey.gif") no-repeat 0 0; }
ul#navbar li#nprotect a:hover, ul#navbar li#nprotect a:active { background: url("/Preview/NetModsCSS/images/protectionorange.gif") no-repeat 0 0; }

One last thing I haven't been able to figure out yet is why the hover state doesn't show properly until a link has been clicked and the alternative image loaded/cached during the active state.

You could try preloading those by having them in image tags set inside a div set to display: none; or maybe visibility: hidden; -- the latter will affect layout, so you'd have to position it somewhere where it won't affect anything else - say at the foot of the page as the last item, with the images set to have 1px width and height so that they don't affect layout too much.
I wondered what comments anyone had before I start to play around with the design.

Andy

Hi Andy Downie,
It would only take a few minutes to copy the files and try it out.
The preloding images idea was mentioned earlier but maybe not as clearly.

HI All,
Many thanks for ALL the help and advice.

Andy

Andy, it seems I cannot open your website..

HI there ryon,
I have tried to access too but can't. have emailed my host.

Cheers

Andy