css stylesheet question (not construct related)

For questions about using Classic.

Post » Wed Mar 10, 2010 8:50 pm

I know, this help section is for construct. But with a whole bunch of people claiming they know their css and stuff. I figured I'd try my luck with this question here too (I've been posting it elsewhere in the hope someone on the net knows how to get it working). Normally have no trouble with stylesheets, but it seems doing what I'm wanting to do is not as simple as I'd hoped. I hate asking for help so obviously I've tried everything I know before asking at all.

Ok here's the thing, I've tried everything I know and hunted the net trying to find an answer, and just when I think I have, another issue crops up. Sorry about the title but I just don't know what to call what it is I'm trying to do. But it SHOULD be possible, and it SHOULD be really simple, which is frustrating the heck out of me because I cannot get this to work! :(

Here is what I'm trying to do, complete with a picture to help visualize things.

Example
This shows how I want my site layout to appear. A regular width site so it can be displayed on low res desktops, BUT with extra artwork on the left and right, complete with a couple of flash animations to the sides.



The red outline shows a typical 800x600 display, as you can see, they should only be able to see what's in the center of the page.

The dark blue outline shows a much higher resolution display

The light blue color shows the extra artwork only revealed to higher resolutions

The flash boxes contain flash elements which should remain fixed in those locations regardless of the resolution the user is using (they'd be setup to match the background image, so must not move)

The dark blue outline shows how the same site would look on a much higher resolution. Instead of black space to the left or right, or the actual site stretching to fit (not looking for a liquid layout in this case), they get to see the rest of the artwork, plus the flash elements.

The purpose of this is so it will look fine on low resolution displays, but also, when viewed on higher resolution displays, will then show the extra artwork instead of blackness.


Problems
Just when it looks like it might work, I find that each browser displays things incorrectly, pixels, picas, ems, etc. and so on. How do I get it to work across the board? I don't want to be unprofessional and do the "This site should only be viewed in X browser".

The flash enabled parts always wrap and refuse to appear off screen, how do I fix this? When I place them, I want them to stay exactly where they are (which is offscreen on a low resolution, but visible on a higher resolution), not bunch up and move out of place.

I can get the actual background to appear correctly, so when resizing the browser, it remains fixed in the center and reveals the rest of the artwork both left and right. But other elements simply refuse to behave correctly (see first problem, this happens especially with browsers not rendering the same things the same, such as pixels etc. being done differently in each browser).


If you want a real world example of what I'm trying to achieve, please view the following website:

Diablo III Website

Unfortunately I have no idea what language they used and it looks unreadable to me, so borrowing from view source isn't an option for me in this case (I use Dreamweaver, css and php, and have no understanding of xml or whatever it is they're using, neither do I have the time to learn another language) This should be possible with css, I see no reason why it shouldn't be. But I'll be damned if I can work out what's not going right.

Is there anyone who can help me here, cause this is REALLY frustrating me now, it should be incredibly simple but it's not, and I feel as if I'm being forced to abandon everyone who doesn't have X display and X browser. Which I don't want to do.
B
3
S
2
G
3
Posts: 628
Reputation: 2,531

Post » Wed Mar 10, 2010 10:51 pm

Nevermind, someone else replied, looks to be working now!
B
3
S
2
G
3
Posts: 628
Reputation: 2,531

Post » Thu Mar 11, 2010 6:56 am

Well first off, the Diablo site doesn't look that much like what you're describing so it's sort of hard to visualize what you want to achieve.

If I get this straight, you want a fixed 800px column in the middle of the page with two dynamic Flash objects on the sides? If so, you're best off using JavaScript to resize your Flash elements (swffit seems like a good option) and having two separate background images in each of the side columns that are aligned so that they snap to and match the Flash object visually.

Or, you could just explort your Flash animations to GIF format and use them as background images on the sides.
B
2
S
1
G
3
Posts: 71
Reputation: 1,142

Post » Thu Mar 11, 2010 11:45 am

Yeah the problem was, it wasn't keeping the elements in their correct positions when those elements went off screen. The fix was to use both a div id and a class, which works perfectly. I wasn't aware both could be used at once on a single div.. well, replace wasn't aware, with I'd forgotten.. :) Works like a charm now though.
B
3
S
2
G
3
Posts: 628
Reputation: 2,531


Return to Help & Support using Construct Classic

Who is online

Users browsing this forum: No registered users and 6 guests