Possible to tile this difficult image?
# August 6, 2010 at 9:50 am
So I have a little problem, because I want to achieve this effect:
As you can see it looks ok with fixed height, but I would like to have this effect on boxes that could be different of length. The line-height on this thing is not perfect (as I did not keep that in mind while designing), but could be changed to have 2-3 lines for each repeating part.
I have a good knowledge of using sprites, so if that would be a solution, the only thing I’d have to know is how I could get a dynamic margin beneath the main text and the details on the bottom, which is – I think – where the problem is located.
Hope anyone here can help :)# August 7, 2010 at 7:08 am
That might do the trick indeed
I doesn’t look that hard, perhaps only the first time, so I’ll fix this for sure!
Do you have any idea how I can get this to fall back on a regular sliding-door technique just for IE (since all the other browser that are supposed to be supported can display border-image)? I’ve been using that throughout the rest of the website to have the rounded corners and hard drop shadow effect.# August 8, 2010 at 5:30 am
So this is how I got it looking with border-image:
I do have to try out some negative margins for the paragraph to get rid of the extra whitespace surrounding it (as borders had to be 40×48 rather than the regular 15px padding), so don’t pay attention to that
It’s almost good as you can see, and I’m thinking of leaving it this way if it solves any variable height problems, but I think this property has a long way to go before it’s useable for difficult images..# August 8, 2010 at 7:54 am
I thought that too when I first looked at it, but I have practically no control over how the left part repeats itself.. The corners are all as they should be, but the only thing I can to is tell the center part to either stretch or repeat..
This is the image I’m using right now:
And this is the css (again, without having paid attention to padding or negative margins to contract the whitespace):Code:#news li
border-width:48px 40px 48px 40px;
-moz-border-image:url("../images/news_border_image.gif") 48 40 48 40 repeat;
-webkit-border-image:url("../images/news_border_image.gif") 48 40 48 40 repeat;
border-image:url("../images/news_border_image.gif") 48 40 48 40 repeat;
text-shadow: #E5E5E5 0 1px 0;
}# August 8, 2010 at 9:57 am
Here’s the live version of the page:
http://student.devine.be/florian.vanthu … ?page=news
Not everything is functional on the website, so if you want to go exploring, keep that in mind
Too bad most of the things that are revolutionary aren’t supported (enough)
I’ll take a look at doing this with js, but my teachers expect this to function without it as well, so that’s where I might consider losing a bit of quality in the representation of the notes..# August 8, 2010 at 4:41 pm
That fixed the first two notes, but the latter one is still a bit messed up.
Either way, I think I’m going to keep the messages short (in between first and second note), perhaps trim down the line-height a bit, and there’s a "read more" link anyways, so perhaps I can automatically limit the length of the paragraph in php
So unless you’ve made another breakthrough, thanks a bunch for your help and insight!
You must be logged in to reply to this topic.