I have multiple divs where the left side is an image (varying heights per div) that will determine the height of each div.
The right side of the div has a header on top with content below, so header is solid color and content another solid color.
My issue is the right side has rounded corners, so I need to have an image on the top and bottom for all x-broswering. I don't want to adjust the height for every div based on the height of the left image. Is there a way of setting it up so the the right side will match the height of the left image?
does this make sense?
EDIT: Sorry, this wasn't clear. This should help: http://jsfiddle.net/xtian/cMs7m/
I was not able to use PIE because I need only specific corners to be rounded and it only supports all 4 being rounded. I had to just use images, which I would love to get away from but with IE, its not really possible yet.
I'm not sure I understand you exactly, but let's try...
If leaving IE out is not an option, you should look for solutions such as CSS PIE and others that can emulate CSS3 features in IE. I've used PIE and it does the trick marvellously for border radius. Can't quite remember what other things could be used, but I'm pretty sure there were like 2 more solutions that are pretty common. Would using CSS3 instead of rounded corner images solve your problems?
Not quite sure that I understood the question well, but if it's about having rounded corners, I think the time is totally right to stop using images for this and start using CSS3:
http://www.css3.info/preview/rounded-border/
easy...
for old IE's I think there are alternate solutions:
http://msdn.microsoft.com/en-us/library/bb250413%28v=vs.85%29.aspx
Related
Is it at all possible to achive this effect, only using CSS/JS?
http://i.imgur.com/s2RYR.jpg
I'm just wondering as to whether or not this is feasible without images, and any answers would be appreciated.
Thanks in advance.
"Peters out"?? You mean the 2 lines (top and bottom) that fade out to the right and left - yes. If you make a div of a whatever width and height of maybe 1px (or 2) you can apply a css gradient to it (with transparency) and it would work fine. You would have to accept some limitations in the IE world though. You can use the http://www.colorzilla.com/gradient-editor/ to design the gradient.
I've already had a look through some posts and couldn't find what I was after. I'm designing something in PS at the moment and I can foresee an issue when it comes to coding the design into html+css.
Imagine my centre div, it's 960px. It's going to have a semi-transparent .png as a background. The design is “full width” so this div will be contained in a larger div, set to 100% width. This is all ok until I get to the background on this outer div. It's also going to have a .png running the full width of the page. Problem is: I don't want it running through the middle, as it will result in the middle have a double thickness to it, if that makes sense?!
Basically, I need a way to either run a div either side that is elastic, or someway of stopping the background from running across the centre 960px portion of the browser window.
I have NO idea how this can be achieved, apart from using JS to set widths, which I don’t really want to do.
Any ideas?
Ok, I’ve tried to get the basic issue here: http://jsfiddle.net/8Bznc/1/
You can just put a non-transparent background on the center div, so the other background doesn't show through.
See here: http://jsfiddle.net/9bnHD/
Apply the background-image only to the wrapping div.
Alternatively, if the center and sides need to have different images, give the center div a non-transparent background-color as well.
Also, you could fake it by using multiple background-images. Demo
Keep in mind this won't work in old versions of IE, but something as non-essential as background transparency can be excepted as graceful degradation.
Hi I was trying to figure out how to create a border that fades into the background colour of a div and this is the only solution I could come up with.
I've googled around and it seems people suggest CSS3 but I was told it was still "under development" and not fully introduced in modern browsers, correct me if I'm wrong, probably am.
Anyway this is the solution I came up with, are there simpler ways of doing it or is this a reasonable approach?
Created numerous divs for each part of the border (as below), and set their background image according to the part of the border: http://i.imgur.com/sh6Z8.png
HTML & CSS: http://codeviewer.org/view/code:1e4f
(New to webdevelopment and stack overflow, sorry if I'm doing anything unorthodox, thanks).
So as Tim there already said it, if the width of your website is static, you can do something like that ( In fact even if css3 may be good option for your usage case This is super simple... )
http://jsfiddle.net/Xtw84/3/ - this is from a prior answer so the edges are not soft but the idea is the same. ( doesnt matter ) I also added image in the background so you can see how that would work. Theres no need.. actually makes no sense to slice the background image in half.
Heres a bit more stripped down version of it. http://jsfiddle.net/Xtw84/4/
With css3 i would do this with box-shadow and just expand the shadow as much as needed.
Is your layout going to be fluid? e.g. it will grow in width/height? If it isnt going to grow in width, then there is no reason that you can not just set the background image.
For what you are doing, I wouldn't use gradient borders and just stick with the images in the background.
I want something that looks like this http://jsfiddle.net/mazlix/VBzau/3/
But I don't want to have to write the border-radius twice (in the div.left in the CSS). I mean, I can, but I just feel like it's wasteful and a sign that I've structured this wrong.
Please let me know if that seems the only way to properly achieve what I want.
Thanks!
border-radius:15px 0 0 15px;
See here:
http://www.css3.info/preview/rounded-border/
I'm about 98% sure that you can't get around that.
1.
So.. I dont know if it's an option, but you could use background image in the outer container. This background would be the desired width and 1px height and hold 2 desired colors side by side. And it would be repeated vertically.
2.
This however is a css3 option: You could use horizontal gradient. Basically the same as the option above, just maybe a tad more flexible as it doesnt use image but css3 gradient as mentioned. http://jsfiddle.net/VBzau/13/
The gradient was made using http://www.colorzilla.com/gradient-editor/
3.
Then theres the good old masking. To basically use an image or images that are negatives of border radius and are the same color as the background where the box is placed.
Much like what is being used here as a fallback in the main content area with the sliding content http://www.apple.com/imac/
4.
I got thinking about how you mentioned about the structure. So heres what i would recommend. http://jsfiddle.net/VBzau/14/
Basically i have put another container wrapping around the main container. Re-applied overflow: hidden; and taken away the radiuses from the left box. Also i moved the image inside the new outer-container.
I want to layer 4 images on top of each other inside a table cell with css. Here is what I want the final image to look like:
The 4 images are:
The gray rounded corner rectangle
with the red shaded triangle and the
numbers
The blue bar
The lines on top of the bar
The yellow triangular indicator
All these images must be on top of each other within the a table-cell. The bar must be able to stretch (I would draw it with a css div with a variant width property if it's possible) and the triangle indicator to move, so the entire thing can't be one image.
Any ideas how to do this?
Note: any solutions have to work in IE6 and up, Firefox, and Chrome
Would this be what you want to do?: How to let an HTML image overlap another
If this was my challenge, I think I'd be looking at a full-fledged charting solution to make this a quick, painless process and give a better looking (and animated?) result.
Here's a near dead ringer that I found with some quick Google-Fu: http://www.fusioncharts.com/widgets/Gallery/Linear1.html
I've had to do a lot of charting of late for applications I build and I --used-- to hand-roll all my charts and tables. Not any more! Between HighChart, FusionCharts, and JqueryUI, it's all covered, no reason to invent the wheel....and they look better.