Hi guys,
I was wondering if someone was willing to help me with a CSS problem I am having. I am trying to create inverse rounded corners for a design.
I need be I can post an image of the design, but would rather not if I can help it right now.
So far I can only think of doing it with the old <div> and <img> system which is rather shoddy. Other way is to use background image within the <div>s but apprently IE doesnt like this, and neither does Opera -
I know how to make rounded edges, but cant seem to flip one corner to round inwards.
Hi, the background images on <div>'s should work just fine :). Post a link to the problem site where the background images isn’t working and we will tell you where you went wrong :).
its a Wordpress theme (custom) but still in the stages of making a static html/css file(s) so nothing is online yet…
Design is @ flickr.com/ photos/nathanbarlow/4340916677/sizes/m/ (take out spaceS)
I have used css to set borders to 2px and then put in a background image just for the odd corner. Problems lay with positioning and also backgroundcolor. Positioning in the right place means that part of thee image is hidden (because have to use negative height placement to get pixels in right place) by the border. Similarly, if you put bgcolor (in css) to white, it covers the background.
For the header div, I ended up using a whole image for the thing, but cant do that for thisdiv, as it is a variable height div.
I can see the rotoract page and they just look like normal round corners with shadows to me. the only inverse corners are where the round rotoract club image is placed and that will create the inverse corners anyway as it will sit on top of the other two divs.
Unless I’m missing something important (I usually do) it just looks like your basic shadowed round box of which there are many variations about.
the Rotaract logo is a seperate DIV - there is a gap between the borders of info panels and this logo, and this gap means that I cant just lay the logo over it, - i kinda want the DIVs with borders to float around and wrap around the logo with like a 10 px gap or so. Shadows arent too much of an issue, but prefer to have them.
I really dont want to end up with multiple images and doing a table-like. Prefer to do it CSS way, as then I can set several stylesheets for different purposes (need to be able to degrade it for accessability for blind etc users)
AS you might have guessed, I did the design in photoshop, and now EVERYONE in the club likes the design and I cant port it to code without breaking it haha
I would just lay the rotoract image on top of those two columns and include the space that’s needed around them all in one image. All elements are rectangular in css and whether you create the cut out on the columns or on the round image itself it makes no difference. Except that of you do it on the round image you only need one image. If you do it on the columns you need three images.
I would cut it as one solid non transparent image with background included. It is always the same distance from the top so the gradient on the body background will alwyas match as long as you place it correctly.
I really dont want to end up with multiple images and doing a table-like. Prefer to do it CSS way, as then I can set several stylesheets for different purposes (need to be able to degrade it for accessability for blind etc users)
Whether you use tables or css makes no difference to the number of images that you use as you still need images for each corner and hooks to hang them on. Of course tables shouldn’t be used for this but the number of images is irrelevant.
To make it easy I would simply top and tail the columns, assuming the columns are fixed widths, and paste the two top corners in one go and the same for the bottom. All images could be contained in one sprite to cut down loading time.
AS you might have guessed, I did the design in photoshop, and now EVERYONE in the club likes the design and I cant port it to code without breaking it haha
I think it’s quite straight forward if you plan it carefully and there are plenty of round corner tutorials about as I linked to above.
You may just have to bite the bullet and puts something temporary up that we can help you with. (I have to rush off now but I’m sure someone else can chip in and help.)
I have managed to get the corners orientated how I need them, but the problem is that I am using CSS to round the other three corners of the div, but cant turn off the css for the corner which has the image…
Also need to limit the length of the border, so it doesnt ‘draw’ over the png’s for the corners.
Finally background color of the div needs to be behind the corner pngs, and also not cover outside the curved line of the images. I cant make the pngs have the brown background colour because we want to beable to change the page background color and also the Div background color (for dyslexics and color blind people etc)
Any help much appreciated
It is online, (cant post link grrr) at nathanbarlow dot vacau dot com
If you want to be able to change the background then you can’t use the method I mentioned as you point out above.
I don’t think you will have any other choice but to make the top part of those column corners as transparent images so that the section under the rotoract logo is transparent.
This means not placing a border on the top of the columns but using an image for the top left corner, and also the border, and also the section around the circle (and vices versa for the right top column).
It would be impossible to rub the border out for the reason you mentioned in that you want the body background to show in the gaps which means you can’t put a solid image on top.
Therefore your only choice is to use transparent images for the whole section so that you can overlay it correctly.
I don’t see any other sensible way to accomplish it.
why not place the image in main div and use negative margins to push it up and over the existing divs and images? Then you make the required APPARENT inverse rounded corners and any shadow effect part of the rotoract club image itself.
No separate div is required that way.
why not place the image in main div and use negative margins to push it up and over the existing divs and images?
For the same reason that my idea was rejected because the space around the round image is transparent and showing the background of the body It can’t be used to rub anything out because the body background is to change on other pages.
It all works well enough, but I was thinking the following:
If I edit the image so the background is transparent (ie no brown in the image) and then either
add another same sized, same position DIV behind the logo and set the z-indexes correctly or
set the background-color of the original DIV to the brown color
Would I then be able to use the idea for colour changing the background - by changing both the body colour and the relevent div colour?
Hope you get my drift, and as always advice is welcomed and appreciated
Nathan
You see this page, because the system administrator of 000webhost.com is currently checking this website for malicious content. This redirect will be removed once we will finish manually checking all files on this account. As far we check over 100 websites, it can take about 2-4 hours to complete. If you are the owner of this website, you will get email confirmation once it’s done. If you are a visitor - please come back later.
Would I then be able to use the idea for colour changing the background - by changing both the body colour and the relevent div colour?
Hope you get my drift, and as always advice is welcomed and appreciated
Nathan
I did think of that earlier but thought it too difficult to explain
If the only transparent part of the round image is the small gap around it then applying a background color to the div underneath that matches the body background colour should work. If you are using a gradient for the body background then you could apply that image also but would need to offset the vertical background position to match.
Yes I think you can just add the background to the #rotaractlogo div ok. As far as I can tell that should work. Sometimes you just have to try it and see
