Dynamic / fluid design with background image 3

[1DMF]

Hello,

I was wondering if anyone could advise the best way of producing a page using a backround image to create encapsulated border effect.

I'm assuming you still cannot size a background image using percentages, plus obviously if you could the image would pixelate and blur if streathced too much!

I also know you can do the old 'rounded corners' method with 20+ divs inside of each other and a repeating middle image.

Is the 'rounded corners' still the only solution to this problem when wanting to use a background image / border and a fluid design?

All those superflous divs seem to me at odds with semantics, especially when the tags are there purely for design and not content.

Any one else found a good solution to this problem?

Cheers, 1DMF.

"In complete darkness we are all the same, only our knowledge and wisdom separates us, don't let your eyes deceive you."

"If a shortcut was meant to be easy, it wouldn't be a shortcut, it would be the way!

 

[vacunita]

Unfortunately, its hard to produce a short, functional solution, that incorporates round borders.

You can if you are handy with an image editor. slice your background into about 9 pieces, and create the illusion of a background that stretches and reduces itself wit the browser.

Basically you end up with static border panels and only the large center piece actually grows or shrinks.


Yout other choice is, to offer BG images for different resolutions. Like one for 800*600 one 1024*768, 1600*1200, 1280*1024, 1280*720 etc...


We'll have to wait until CSS has a property that can determine the roundness of a div's corners.

* radius:25px; *






----------------------------------
Ignorance is not necessarily Bliss, case in point:
Unknown has caused an Unknown Error on Unknown and must be shutdown to prevent damage to Unknown.

 

[audiopro]

Split the image into 3, a fixed top and bottom and a repeatable centre image which stretches with the page.

Keith

http://www.studiosoft.co.uk

 

[vacunita]

Yeah, not if you want different resolutions.

A fixed top and bottom, only lets you get a certain width. which would vary between someone with a resolution of 1024*768 and someone with a resolution of 1600*1200


With your solution you just get a centered rectangle, with bars to either side. The point here it to have it be fluid, cover the entire browser window, and still look rounded.

----------------------------------
Ignorance is not necessarily Bliss, case in point:
Unknown has caused an Unknown Error on Unknown and must be shutdown to prevent damage to Unknown.

 

[BillyRayPreachersSon]

At

http://www.codecouch.com,

I've opted for one a 9-container solution (one per corner, one per side, plus the middle). This gives full scalability both width-wise and height-wise.

Granted, it might have been possible with less, but due to IE6 and rendering alpha-transparent PNGs, I don't think I really had a choice.

In the end, I made some handy server-side functions to output the relevant markup around the content to save having to render all the SPANs, etc.

Dan



Coedit Limited - Delivering standards compliant, accessible web solutions

Dan's Page [blue]@[/blue] Code Couch:

http://www.codecouch.com/dan/

Code Couch Tech Snippets & Info:

http://www.codecouch.com/

 

[1DMF]

Thanks Dan, I'll check it out.

( I was exagerating when I said 20+ , but you knew that right ;-) )

I need the bosses to decide if they want a fluid design or not, they cannot decide on how many menu buttons the want, the graphic design fixed it at 800 wide with 5 buttons, now they might want 8.

So I thought right, fluid design will solve that, though fluid does mean it always stretches to full width doesn't it.

I'm not sure they know what they want, which never makes our lives any easier does it!

"In complete darkness we are all the same, only our knowledge and wisdom separates us, don't let your eyes deceive you."

"If a shortcut was meant to be easy, it wouldn't be a shortcut, it would be the way!

 

[vacunita]

So I thought right, fluid design will solve that, though fluid does mean it always stretches to full width doesn't it.

Not necessarily.
You can have a fluid design that only takes up say 80% of the browser window. but its always 80% regardless of how large the window is.

You'd need an additional container div that determines the max width you want to work with.

----------------------------------
Ignorance is not necessarily Bliss, case in point:
Unknown has caused an Unknown Error on Unknown and must be shutdown to prevent damage to Unknown.

 

[1DMF]

They decided thet they would stick with the fixed width layout I had already designed using the three image technique 'AudioPro' mentioned.

They decided to have the menu tabs shrunk to fit an extra one, but keep the overall fixed with, phew!!

Makes life easier for me

"In complete darkness we are all the same, only our knowledge and wisdom separates us, don't let your eyes deceive you."

"If a shortcut was meant to be easy, it wouldn't be a shortcut, it would be the way!

 

[Foamcow]

If you can live with not giving round corners to IE there's always

-moz-corner-radius:10px;
-webkit-corner-radius:10px;

I agree with the semantics thing but I do find that the jquery rounded corners plugin is really handy. Since the extra divs only get thrown in by Javascript it feels slighly less dirty.

--
Tek-Tips Forums is Member Supported. Click Here to donate

<honk>*:O)</honk>

Tyres: Mine's a pint of the black stuff.
Mike: You can't drink a pint of Bovril.

 

[vacunita]

If your going for a fixed width, you can always use a scrollable menu, that way you can keep adding items to it, without affecting the rest of the layout.

----------------------------------
Ignorance is not necessarily Bliss, case in point:
Unknown has caused an Unknown Error on Unknown and must be shutdown to prevent damage to Unknown.

 

[1DMF]

scrollable menu

Can you show me an example , i'm having trouble visualising what you mean!

Do you mean like a select list [drop down] menu?

If you can live with not giving round corners to IE there's always

that statement makes me laugh foamy... because the one thing IE does better than FF (as long as you don't touch the style) is display the round edges on a fieldset legend!

lol , will we ever get a 100% compliant, design friendly , semantic browser!





"In complete darkness we are all the same, only our knowledge and wisdom separates us, don't let your eyes deceive you."

"If a shortcut was meant to be easy, it wouldn't be a shortcut, it would be the way!

 

[vacunita]

Make the DIV that holds your menu, scrollable. That is for example: If you have 5 elements in your menu, and assuming that's about all your specified width can accommodate, make the div that holds them scrollable and you can keep adding more menu items without upsetting the rest of the layout.

<div id="menu" style="width:600px; height:100px; overflow:auto;">
<span class="menuitem">One Menu item</span>
<span class="menuitem">One Menu item</span>
<span class="menuitem">One Menu item</span>
<span class="menuitem">One Menu item</span>
...
</div>

This is very simplified, but in essence you should get a horizontally scrolling menu.

Where in you can keep adding menu items.

----------------------------------
Ignorance is not necessarily Bliss, case in point:
Unknown has caused an Unknown Error on Unknown and must be shutdown to prevent damage to Unknown.

 

[1DMF]

got ya!

Thanks.

"In complete darkness we are all the same, only our knowledge and wisdom separates us, don't let your eyes deceive you."

"If a shortcut was meant to be easy, it wouldn't be a shortcut, it would be the way!