Unoffical empeg BBS

Quick Links: Empeg FAQ | RioCar.Org | Hijack | BigDisk Builder | jEmplode | emphatic
Repairs: Repairs

Topic Options
#323863 - 30/06/2009 14:10 Web Design - What Am I Doing Wrong? At the end of my tether!!!
Cris
pooh-bah

Registered: 06/02/2002
Posts: 1904
Loc: Leeds, UK
I am just about pulling my hair out here. I have a simple problem to solve on a website I am designing but it's turning out to be not that simple at all.

This all started when I was asked to refresh a site I built years and years ago, it's turned into something much bigger and is really beyond my current capabilities and understanding. I have to put a shot video clip on the front page that autoplays and loops, simple I am trying to use quicktime and you can see how far I have got here.

It seems to work ok in IE7 and Safari, but in Firefox the video is stuck up in the top left corner. I have been searching Google all afternoon and I am sure this is a simple fix but I'll be buggered if I can find the answer. Whatever I do breaks it on one of the other browsers, or breaks something on the page itself.

As a slight warning the code is still really messy, I want to show my client the look etc... before making a final version. A kind of proof of concept if you like. I am already using a variety of technologies on the page and would hope to simplify it all once everything is agreed.

I would also welcome any feedback (good or bad) and bug reports etc.... It's only a simple site should only take about 1 minute to see everything.

Cheers

Cris.


Edited by Cris (30/06/2009 14:10)

Top
#323864 - 30/06/2009 14:22 Re: Web Design - What Am I Doing Wrong? At the end of my tether!!! [Re: Cris]
tman
carpal tunnel

Registered: 24/12/2001
Posts: 5528
You've got an extra </div> which might be making it go weird. The logo at the top is 500KB which is pretty big BTW.

Top
#323865 - 30/06/2009 14:31 Re: Web Design - What Am I Doing Wrong? At the end of my tether!!! [Re: Cris]
JBjorgen
carpal tunnel

Registered: 19/01/2002
Posts: 3584
Loc: Columbus, OH
You've got an extra closing div tag on line 91. Not sure if that's causing your problem or not.
_________________________
~ John

Top
#323867 - 30/06/2009 15:53 Re: Web Design - What Am I Doing Wrong? At the end of my tether!!! [Re: JBjorgen]
Cris
pooh-bah

Registered: 06/02/2002
Posts: 1904
Loc: Leeds, UK
Originally Posted By: JBjorgen
You've got an extra closing div tag on line 91. Not sure if that's causing your problem or not.



Thanks for spotting that, but it doesn't seem to be the root of the problem.

It's really starting to bug me, as it seems so simple. I have tried using a flash player but that breaks the menu system on the page as it uses a different version of swfobject.js.

Cheers

Cris.

Top
#323868 - 30/06/2009 15:54 Re: Web Design - What Am I Doing Wrong? At the end of my tether!!! [Re: tman]
Cris
pooh-bah

Registered: 06/02/2002
Posts: 1904
Loc: Leeds, UK
Originally Posted By: tman
The logo at the top is 500KB which is pretty big BTW.


Yea, I was wondering why it was so large. I am using a PNG as I need the transparent corners. Any suggestions to a solution to that?

Cheers

Cris.

Top
#323869 - 30/06/2009 16:00 Re: Web Design - What Am I Doing Wrong? At the end of my tether!!! [Re: Cris]
Cris
pooh-bah

Registered: 06/02/2002
Posts: 1904
Loc: Leeds, UK
Hmmmm Firefox 3.5 has solved the problem. I don't think I can take much more of trying to find a solution so all old Firefox users will have to suffer smile

Cheers

Cris.

Top
#323870 - 30/06/2009 16:05 Re: Web Design - What Am I Doing Wrong? At the end of my tether!!! [Re: Cris]
hybrid8
carpal tunnel

Registered: 12/11/2001
Posts: 7738
Loc: Toronto, CANADA
Originally Posted By: Cris
Yea, I was wondering why it was so large. I am using a PNG as I need the transparent corners. Any suggestions to a solution to that?


1. Use a JPEG and include the corner background within each image.

or

2. Use a JPEG and superimpose PNG corners (which will each have a transparent area showing through to the JPG. Position the corners using CSS.

I'm assuming you're going to have a different page background rather than solid grey, but the above can still be made to work.

With regards to positioning the movie container...

Code:
<div style="height: 300px; width: 400px; top: 500px; left: 50%; margin-left: 20px; position: absolute; background-color:black">


This is the line you're playing with right? Have you tried not specifying the left attribute as a percentage and also not using both left and margin-left, but only one of them instead? Maybe try floating the container to the right and then bring it back a little to the left to leave you an appropriate margin on the right.

Browsers still don't seem to all implement CSS regions/boxes consistently. It doesn't help that the CSS spec made some pretty poor design choices in how widths, margins and padding are specified either.

I would suggest using a CSS editor that can do live (in place) replacement and then try different values while continuing to preview the page online. This would be made easier if you moved all your CSS into a single CSS block instead of using inline and also getting rid of all font tags and replacing them with style classes.
_________________________
Bruno
Twisted Melon : Fine Mac OS Software

Top
#323871 - 30/06/2009 16:35 Re: Web Design - What Am I Doing Wrong? At the end of my tether!!! [Re: hybrid8]
Cris
pooh-bah

Registered: 06/02/2002
Posts: 1904
Loc: Leeds, UK
Thanks Bruno,

I thought about using jpgs and png corners but the slideshow would then be very hard to implement I think?

Yea that's the line I am playing with, I haven't tried messing with the margins as not even the top: 500px; seems to be working. I assume it's a problem Firefox has with that type of content and <div> as if you remove the quicktime code and replace with text it works fine ???

I just can't get away from the habit of using a text editor, I tried using Dreamweaver for the first time earlier, blew my mind! It just seems so over complex but I really should look at setting up style classes smile

Cheers

Cris.

Top
#323873 - 30/06/2009 17:23 Re: Web Design - What Am I Doing Wrong? At the end of my tether!!! [Re: Cris]
drakino
carpal tunnel

Registered: 08/06/1999
Posts: 7868
I'd recommend looking into a better way of playing the video. Having to use the Quicktime plugin means potentially a lot of people who won't see it.

Ideally, you could toss in some HTML 5 video tags for people on Firefox 3.5 and Safari 4, then put a flash video embed inside the video tag for other browsers (Including the so called "standards" based IE8).

Top
#323874 - 30/06/2009 17:39 Re: Web Design - What Am I Doing Wrong? At the end of my tether!!! [Re: Cris]
hybrid8
carpal tunnel

Registered: 12/11/2001
Posts: 7738
Loc: Toronto, CANADA
Oh, I write my pages in a text editor as well. But I write my CSS using a CSS editor that provides styled selector listing, auto-completion and indenting as well as a GUI panel for making parameter changes/edits without having to write the CSS by hand.

I must have missed the fact that the content displays properly if not a mov. Interesting. You might also try relative positioning. It will be relative to the containing block, so you'll have to adjust the offset.

With regards to the corners... Neither of my suggestions should make animating any more difficult. In the first instance each image would have the corner built-in. So no change to any animation or page code. In the second, you would set the Z position of the corners higher than the animated content. That's an easy way to make them always appear over top. Make sure to set position relative on the elements.


Edited by hybrid8 (30/06/2009 17:42)
_________________________
Bruno
Twisted Melon : Fine Mac OS Software

Top
#323877 - 30/06/2009 19:30 Re: Web Design - What Am I Doing Wrong? At the end of my tether!!! [Re: hybrid8]
tman
carpal tunnel

Registered: 24/12/2001
Posts: 5528
You're missing a " in the line just before the object tag.

Originally Posted By: cris
<div style="height: 300px; width: 400px;>


Adding in the " should fix it.

You need to do something about that banner because you're making the viewer load 5x500KB just for the rotating banner at the top.

Running it through validator produces quite a few errors as well.

Top
#323879 - 30/06/2009 21:24 Re: Web Design - What Am I Doing Wrong? At the end of my tether!!! [Re: tman]
Cris
pooh-bah

Registered: 06/02/2002
Posts: 1904
Loc: Leeds, UK
Trevor, you are a true genius smile

A simple error on my part, strange how the content seemed to make a difference though. Although I wonder if I put the text in the previous object, I bet I did.

Sometime you just can't see the wood for the trees I guess, what a dumbass I am, I have looked this over and over today too smile

I still don't know what to do about the banner, I am aware it's a bit daft but I like the look. I think I will also look for a method that doesn't pre load all 5 images first, that should at least speed things up a little. At the same time I think I will look for a flash player based on Tom's suggestion. But at least it seems to all work well enough to show my client and they can tell me all the changes they'll no doubt want before I waste anymore time on it.

Proof that the empegbbs is still able to help in times of need, thanks again smile

Cheers

Cris.

Top
#323880 - 30/06/2009 21:45 Re: Web Design - What Am I Doing Wrong? At the end of my tether!!! [Re: Cris]
wfaulk
carpal tunnel

Registered: 25/12/2000
Posts: 16706
Loc: Raleigh, NC US
IMO, you should always run it through the validator. You might decide that you don't want to fix certain things, but it would have certainly shown that missing quotation mark.
_________________________
Bitt Faulk

Top
#323881 - 30/06/2009 21:46 Re: Web Design - What Am I Doing Wrong? At the end of my tether!!! [Re: Cris]
tman
carpal tunnel

Registered: 24/12/2001
Posts: 5528
Do what hybrid8 suggested and make JPEGs with the corners part of the JPEG. The JPEG would actually be rectangular with no transparency but it'd just look like it did because you put the corners in. That should shrink the file size of each banner image significantly.

PNG alpha transparency is badly broken on earlier versions of IE anyway.

Top
#323882 - 30/06/2009 21:47 Re: Web Design - What Am I Doing Wrong? At the end of my tether!!! [Re: tman]
tman
carpal tunnel

Registered: 24/12/2001
Posts: 5528
As you're using <font> tags and various others, you should change your DTD to something other than XHTML 1.0 Strict.

Top
#323883 - 30/06/2009 22:41 Re: Web Design - What Am I Doing Wrong? At the end of my tether!!! [Re: Cris]
andym
carpal tunnel

Registered: 17/01/2002
Posts: 3996
Loc: Manchester UK
If you need some FLV's encoding give me a shout. I can run it through Flip Factory at work. It creates really good quality vp6 encoded clips.
_________________________
Cheers,

Andy M

Top
#323886 - 01/07/2009 04:24 Re: Web Design - What Am I Doing Wrong? At the end of my tether!!! [Re: andym]
Cris
pooh-bah

Registered: 06/02/2002
Posts: 1904
Loc: Leeds, UK
Originally Posted By: andym
If you need some FLV's encoding give me a shout. I can run it through Flip Factory at work. It creates really good quality vp6 encoded clips.


Thanks I might have to take you up on that smile

I think this highlights to me the down falls of working on your own, if I had someone here to have a quick look through I am sure they would have spotted my mistake. I will also make more use of the validator in future.

I think it's also time to learn to use Dreamweaver or something similar, I do very little web design and I think my methods were fine 10 years ago or more, but the whole thing is just getting too complex. Sure if I were doing it every day it wouldn't be so bad.

Thanks again for all your help guys smile

Cheers

Cris.

Top