Basic CSS troubles again

HTML & CSS
1

Hi,

I haven’t touched CSS much in a while so I’m having troubles again. :confused:

http://ehydrant.com/safety/master.html

(original: http://flowplayer.org/tools/demos/tabs/skin4.htm)

I took a nice jQuery content loader and tried to scale it up to a full page and affect the layout. It will be run on a local network on a large screen and reside in a browser window fixed to 1752px wide x 1080px tall. In the main content (top) instead of images, there will be flash videos. I popped a video in the first content position and that knocked my text styling that is supposed to be to the right below it. I just can’t get it to go back to the right of the video.

Also, I’m trying to get the row of 9 thumbnails at the bottom centered horizontally w/o messing up the required absolute positioning. It should be easy because I know the browser is fixed at 1752px wide, but I can’t do it.

All help is appreciated!

Thanks guys.

2

Thank you guys! I just got back to this now and appreciate you helping me get it solved.

One of these days I have to completely stop trying to do CSS myself and focus on what I do best: keeping my mouth shut and having someone else do it right the first time…:smiley:

3

That’s an odd resolution – can I assume this is going to be a browser that supports KIOSK mode like Opera?

Given the rather narrow target what you are asking to do isn’t too tough, though I’d pitch the “jquery for nothing” in the trash – but then I find animations like fade annoying and would prefer the page just did it NOW, instead of a few seconds from now after some goofy effect runs.

Try this on for size:
http://www.cutcodedown.com/for_others/smarsh/template.html

as with all my examples the directory is unlocked:
http://www.cutcodedown.com/for_others/smarsh

so you can get at the bits and pieces. Unfortunately you deleted the :hover state image before I could apply it, so I set the code up to use it if present, but if not just do a simple colored background.

The select buttons don’t stick - that would require a little (but not much) javascript if that’s your desired behavior… otherwise it needs no scripting to work.

That SHOULD work in Opera, FF and IE if 1760x1080 is the available space. I would suggest Opera for that due to its nice Kiosk fullscreen mode.

4

As far as the display:none; on the #panes div, I’m sure the js is setting it as display:block; when you select one of the list items. It will also be setting display:block on the inital div that shows on page load.

In other words, the script is just swapping out the panels when you click a thumbnail in the list. If they weren’t set to display:none they would all be stacked on top each other.

The nav needs to have the height removed for one thing, regardless of the fact that you are trying to get it all on line. The reason you can’t move it up is because the div above it is set as RP and it creates a new stacking order. Do the same with the nav, since it is lower in the page source it will auto stack with RP.

You dont’ need to set width:100% on everything either. If your not dealing with IE then you don’t need it for haslayout and divs default to 100% width anyways. It causes problems when you add borders,margins, and paddings on 100% width.


/* navigation */
#nav {
    background:#ddd url(graphics/safety-bkgrd.jpg);
    border-bottom:1px solid #CCC;
    [COLOR=Blue]margin-top:-100px; /*or whatever you want*/
    position:relative; /*layer above top element*/[/COLOR]
}
#nav ul {
[COLOR=Blue]    overflow:hidden; /*contain floats*/
    margin:0 0 0 40px;
    padding:0;[/COLOR]
}
5

Okay, I see what you are saying now. When you were testing without the flash files it looks like you may have been using a floated image as a placehloder.

If you float your <object> like you were floating the test image (if that was the case) your text will position to the right of the flash file.

#panes div {
        display:none;        
        position:absolute;
        top:193px;
        left:250px;
        font-size:13px;
        color:#444;    
        width:1252px;
    }
    
    #panes [B]object[/B] { /*this was [COLOR=Red]img[/COLOR]*/
        [COLOR=Blue]float:left;[/COLOR]
        margin-right:20px;
        width:640px;
        height:518px; 
    }
6

No.

Not text below the video. To the right of the video (side by side) so that the video and text are horiz. centered.

7

Thanks Ray.

I don’t understand why there’s a

#panes div {
        [COLOR=Blue]display:none;[/COLOR]

but I kinda get the rest when I see it.

To get the nav centered in the 1752 width, I had to cheat and put

    #nav ul {
        width:100%;
        margin:0 auto;
        [COLOR=Blue]margin-left:40px;[/COLOR]
    }

but I’ll bet there’s a proper way.

There’s only one silly thing that I can’t figure: how to raise the entire nav bar (with the “nav system” intact)? Nothing works for me…:frowning:

8

Also, I’m trying to get the row of 9 thumbnails at the bottom centered horizontally w/o messing up the required absolute positioning. It should be easy because I know the browser is fixed at 1752px wide, but I can’t do it.
I would ditch the floated thumbnails (LI) and use inline-blocks with text-align to center them.

Inline-Block Image Captions

9

I popped a video in the first content position and that knocked my text styling that is supposed to be to the right below it. I just can’t get it to go back to the right of the video.
Am I right in assuming that you want the video centered in the viewport with the text below it on the right side?

If so then set the width on the #panes div the same as the object width (640px) Then center it just like you do with any other AP element.


#panes div {
    display:none;        
    position:absolute;
    [COLOR=Blue]width:640px;[/COLOR]
    top:193px;
    [COLOR=Blue]left:50&#37;;
    margin-left:-320px;[/COLOR]
    font-size:13px;
    color:#444;    
}

Then style the text in that div accordingly to get it to the right.

Float right on the UL along with zeroing out margin/padding would be a good start.

ul.topics {
    float:right;
    margin:0;
    padding:0;
}
10

bump

11

Few questions. Should the entire site be centred or the way it is now to the left? And what is the desired width of your page because I can’t figure that out.

12

Hi Guys,

It’s a mess. It’s essentially supposed to be the original flowplay example expanded to fill the fixed width 1752 x 1080 frame, w/no page margin (like a real application). It will play in our town hall with safety videos from a touch screen. No accessibility or browser compatibility concerns on this one.

The nine thumbnail positions are supposed to be centered on one line at the bottom. Unless your PC/monitor is set to accommodate the 1752 x 1080 frame (for the page itself) it’s going to wrap on your system.

In the upper portion, the stock photo will be replaced w/a flash video and a tiltle and bullet points to the right. The title and bullet points are now wrapping under for some reason.

Rather simple if you know what you’re doing… I guess I shouldn’t have volunteered after all.

13

Sorry if you see it that way. I look at the original flowplayer site and at your design and couldn’t figure out which way you want to go. See that your nav is 100%. You further more say that you want the row of 9 thumbnails centered while there are two rows so sorry if that is confusing :rolleyes:

14

Wow, that’s not just a miserable accessibility /FAIL/, but talk about a overcomplicated incompatible layout to boot…

I can’t even think of advice apart from throw it all away and build a site that’s actually navigable.