- This topic is empty.
August 6, 2010 at 9:50 am #29850
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 6, 2010 at 7:59 pm #81043
You can try using border image to display a repeating image down the left side and have it so it doesnt cut off, but you’re going to have to get a little creative.August 7, 2010 at 7:08 am #81085
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 2:53 am #81136
I wouldn’t know. None of my clients so far have requested any kind of sliding door affect.August 8, 2010 at 5:30 am #81139
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:43 am #81142
I think by playing with the values a little you can improve the look. Should be able to get it perfect somehow.August 8, 2010 at 7:54 am #81143
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 8:05 am #81144
Do you have a link to a test page or site? It’s easier to look at and test things out.August 8, 2010 at 9:57 am #81145Chris CoyierKeymaster
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 2:36 pm #81149
Switch: url("../images/news_border_image.gif") 48 40 48 40 repeat
To: url("../images/news_border_image.gif") 48 40 48 40 round
And you’re all set.August 8, 2010 at 3:23 pm #81150
That did the trick for Firefox, but I seem to still have the same problem in Safari and Chrome Check back on the same url to see for yourself if you have those 3 browsers available.August 8, 2010 at 4:32 pm #81156
Try switching your 48 values to 45August 8, 2010 at 4:41 pm #81157
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!August 8, 2010 at 6:20 pm #81158
Sorry, no break-throughs, but your very welcome.
- The forum ‘CSS’ is closed to new topics and replies.