9 replies [Last post]
Lautaro
Lautaro's picture
Offline
Regular
Last seen: 9 years 10 weeks ago
Timezone: GMT+2
Joined: 2010-02-22
Posts: 13
Points: 20

I hope thit is not off topic.
Ive been trying to find a css tutorial that teaches me how to make a CSS container without tables. I want a container that is made out of an image sliced into 9 parts.

Something like this.

TopLeft Top TopRight

Left X Right

BottLeft Bott BottRight

The X represente the content.

Left & Right images would repeat verticaly and Top & Bottom images would repeat horizontaly. So the container can be any size.
I know how to produce the graphics. I have not been able to find a tutorial explaining this. Maybe i dont know the correct terms. Any tips?

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 13 hours 39 min ago
Dallas
Timezone: GMT-5
Joined: 2004-06-25
Posts: 9761
Points: 3843

Lautaro wrote:I hope thit is

Lautaro wrote:

I hope thit is not off topic.
Ive been trying to find a css tutorial that teaches me how to make a CSS container without tables. I want a container that is made out of an image sliced into 9 parts. …

Why? What are you wanting to accomplish?

You are asking the wrong question; tell us what you want to do, not how you want to do it*.

cheers,

gary

* Slicing and dicing images is nearly always wrong. I say "nearly" because there may instances where it is the correct approach, but I've not seen them. --gt

If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 5 years 31 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

Sounds like 'Sliding Doors'

Sounds like 'Sliding Doors' to me?

You do not need so many slices with this technique though, 4 cover a fluid element.

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me

Lautaro
Lautaro's picture
Offline
Regular
Last seen: 9 years 10 weeks ago
Timezone: GMT+2
Joined: 2010-02-22
Posts: 13
Points: 20

Ok, thank you. So what i

Ok, thank you.
So what i want is a way to make containers for my Dot Net Nuke websites. I want the containers to be graphical, so no CSS borders and backgroundcolors. I want them to be fluid horizontaly and verticaly, with a header. Here you can see one example.
http://lautaro.se/

(The gray container that at the moment says Welcome Text)

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 13 hours 39 min ago
Dallas
Timezone: GMT-5
Joined: 2004-06-25
Posts: 9761
Points: 3843

The sliding doors algorithm

The sliding doors algorithm Hugo mentioned is exactly what you need. Its implementation for your needs may tax your css experience level, but be sure that someone's already figured it out. For example, search ThrashBox, which uses the sliding door method.

cheers,

gary

If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.

Lautaro
Lautaro's picture
Offline
Regular
Last seen: 9 years 10 weeks ago
Timezone: GMT+2
Joined: 2010-02-22
Posts: 13
Points: 20

Thanks for the tip! But the

Thanks for the tip! But the ThrashBox search result doesnt really give any good tutorial. Most of them end up in a broken link or some discussion on the subject.

Do you please have any specific link or example i could have?

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 13 hours 39 min ago
Dallas
Timezone: GMT-5
Joined: 2004-06-25
Posts: 9761
Points: 3843

Thrash box

The first result, Simple Rounded Corners, has all you need. The method is not readily intuitive, So make a few images and use them in a few boxes 'til you get a feel for what's happening.

Ryan's demo background image is at http://modxcms.com/assets/blogs/ryan/demobox.png.

cheers,

gary

If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 5 years 31 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

Take care with that first

Take care with that first link from Gary's search link 'modxcms.com' as when visited my AV threw up an alert about obscufated JavaScript

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 13 hours 39 min ago
Dallas
Timezone: GMT-5
Joined: 2004-06-25
Posts: 9761
Points: 3843

Warning msg

I think that may be an artifact of the cms's use of scripting. The demo works perfectly with scripting disabled, so no hoo-hah.

cheers,

gary

If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 5 years 31 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

I did initially assume it was

I did initially assume it was a false positive, herusitic checking gone wild; however checking the site again in a safer mode shows a script located at the start of the page before the DTD it looked as though part of the script but not all was attempting to set a cookie. It's, obviously, a worrying place to find a script and indicative of the manner in which injected code is positioned in compromised docs.

Obscufted JavaScript was a very prevalent and annoying exploit many years ago, when I checked around security sites yesterday it's reported as an exploit that has started to come back into fashion with an alarming and sudden rise in number of attacks found towards end of last year.

All in all JS is such a worry it's really not possible to secure it to any great extent and nowadays there is a huge rise in applications that make such a huge use of it that they start to become all but unusable with it disabled.

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me