After doing Flash stuff for a year I'm back with this new task in web authoring, but would really appreciate some advice because this layout seems really difficult to me
They want the background to stretch across the screen with the main part of the layout fixed at the center. The trouble I have with this is that on of the blue bars on the left side of the BG is actually a button. How would you handle this?
I don't any difference in the "on" and the "off" image, and using images here isn't as much help as seeing actual code. Is this layout online somewhere so the code could be examined? I think I have an idea or two, but should see code first..
I'm really stumped on how to handle that button on the left side. Its a blue bar, you may notice that the colour slightly changes between the two jpegs.
I haven't scripted layouts with expanding backgrounds like you see there. I'd really appreciate some help on this!
"Debugging is twice as hard as writing the code in the first place. Therefore, if you write the code as cleverly as possible, you are, by definition, not smart enough to debug it." Brian W. Kernighan
It's a button, so yes it will be hover behaviour. If anyone thinks part of this layout is impossible please let me know and I'll send it back to the graphic designer.
-I'll have a play at this over the weekend... see if I can emulate this. I'm thinking 3-column faux with a fixed-width center.
What is the intended/expected user's screen resolution? I view this in 1024px width, -do we need to cater to 800-width or, 'close to it'? The fixed-width center content appears to occupy just over 1/3rd the total width so we're only talking about 340-400px center-width, max, and 'percent/auto' the left/right columns. On an 800-width display (760, actually), this means that the left/right columns would be around 180px wide...a bit narrow.. (could go as much as 200px for the left maybe, and a little bit less for the right, to accomodate the left-column 'text' portion of that hover-changing link-bar...).
Okay... now I've got myself motivated here... hmm..
I've been looking over your issue and while I'm really not sure what exactly you're trying to do after looking at the on and off state jpegs that you posted to begin with and then the tables you had for links more recently. It's really hard to say without you sitting down with me and drawing out what you want or need it to do.
But what I do know is that you need that middle section to stay a constant 775 px wide and you need the right and left sides to stay a consistent width as well. So, what I would do if I were you is use a slicing method using Adobe software should you have it. Make your slices of the jpeg images in Adobe ImageReady, optmize them in Adobe Photoshop, then save optmized as in ImageReady again as HTML and Images format and that will make all the tables and such for you in HTML. You will have consistent width for everything you need and it will not stray from those sizes (assuming you don't force anything larger than the table cells). But I don't know if you have access to that software or are familiar with that technique or not. It's just a suggestion that I could see working with that layout.
I see nothing wrong with the layout as you've shown it. The only thing that concerns me is you talking about "expanding backgrounds." I'm not exactly sure what you mean by that. I could see the left side (button as you call it) there expanding downward according to hover effects as if that's the menu area. That wouldn't be a problem. All you would need to do there is make a slice that has enough height to deal with the expansion.
I'm not sure if this helped at all or if I was even in the same ballpark as what you are looking at doing. This was just my interpretation of what I read. Good luck with your project!
hey its more complex than that because I want the sides to stay liquid, expanding to fill the page. since they're different on both sides I just can't make a div and attach a BG image to it.
This can be done with background images along with a negative margin. You specify a width of 775 px - is this just the section with the main images and top navbar, or does this width also include the left menu as well ? - I assume you want the total site including the side menu, centred on the screen ?
What I have come up with so is nothing like your updated images, but is based 'visually' upon the widths of the first "on" & "off" images that you posted. I have the 'button-bar' on the left-column functioning, the 'center content' fixed and populated with 'holder DIVs', and the two-tone background-image of body is a slice of that right-hand column image, positioned down the page and x-repeated the width of the body. The left-navigation will include a "border-top:20px solid white" to occlude the background-image for that section, forming a 'stairs' effect as per your first image...
I am becoming hopeful that this is working out. Right now, I can re-size from 1024px down to about 800px without horizontal scrollbars appearing...
This would continue to work okay for res' in excess of 1024px...
Will work on this more later tonight... (today is my 5th Wedding Anniversary folks... going out for dinner in a bit.. )
Seeing Centauri's take on it, perhaps my interpretation of the size of the images is off. I am using 'screengrabs' of the actual image sizes and they are notably smaller than C's example. My example works for 1024 and a bit less than 800px width w/out horizontal scrollbars which was my main goal..
Right now I am having a time with the 'center content container' not expanding in Firefox to contain some floated items at the bottom, and "overflow:hidden;" isn't fixing this as it should even with no errors/no warnings so far...
I think I'll give this a rest for the night... Irregardless of how you proceed with your code and what's been offered so far, I'd still like to post my kick at this when I get it 'working' for both IE and Fx to some satisfaction..
Reply With Quote
I think I have an idea or two, but should see code first..
Originally Posted by WebJoel
Irregardless of how you proceed with your code and what's been offered so far, I'd still like to post my kick at this when I get it 'working' for both IE and Fx to some satisfaction..
Bookmarks