css stylesheet question (not construct related)

This forum is currently in read-only mode.
  • 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.

    <img src="http://img708.imageshack.us/img708/2458/layoutstyle.jpg">

    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.

  • Try Construct 3

    Develop games in your browser. Powerful, performant & highly capable.

    Try Now Construct 3 users don't see these ads
  • Nevermind, someone else replied, looks to be working now!

  • 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.

  • 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.

Jump to:
Active Users
There are 1 visitors browsing this topic (0 users and 1 guests)