Creating a contact form using divs with 4 extra divs for "Corners"?

Posted by mark smith on Stack Overflow See other posts from Stack Overflow or by mark smith
Published on 2009-12-10T12:20:16Z Indexed on 2010/04/16 0:03 UTC
Read the original article Hit count: 215

Filed under:

css-layout

|

rounded-corners

|

div

Hi there,

i have tried to create a contact form (a standard form, square in nature but with rounded corners)... I can't use the CSS3 specs so i have an image for each corner..

I have set the images on the background-image and no repeat but it seems if the div is empty then it doesn't display, is there a hack - although prefer an alternative clean method :-)

So on the top level i presume i have 1 div for the Upper-Left (corner) and then the upper-middle (just has a color assigned) and then a div for the upper-right (corner) .. so i presume i need to float all these to the left???

Or am i missing something?

Thanks in advance

© Stack Overflow or respective owner

Related posts about css-layout

CSS layout that fills available space

as seen on Stack Overflow - Search for 'Stack Overflow'
I'm trying to do a seemingly simple webpage layout, but I'm hitting a wall. I'd like to do everything purely with CSS (no tables to much things up, and no javascript dynamically resizing things) I'd like to have: A heading with a fixed height A footer with a fixed height Left sidebar with a… >>> More
CSS layout with 2 columns, taking up all width of browser, where left column can collapse

as seen on Stack Overflow - Search for 'Stack Overflow'
I want to have a 2 column layout, and have the left column able to be 200 px at first, and have a "shrink" button to shrink it down to 10px, and have the right column expand to fill all the rest of the available space. Then if they click on the "show" button (which will be all they see in the now… >>> More
Tricky CSS Layout

as seen on Stack Overflow - Search for 'Stack Overflow'
So I am making a website with quite a problematic layout. There are four corner images TL, TR, BL and BR indicated by black blocks. The dark orange area is the main content (to a width of 960px), with the outside area denoted by the green arrow as the browser window. See diagram: The top image… >>> More
Advanced CSS layout problem

as seen on Stack Overflow - Search for 'Stack Overflow'
Hi, I want to create a dialog with a title, borders (left, right, bottom) as well as the content. The current source code: <html> <body> <div style="background: #0ff; width: 152px; height: 112px; position: absolute; top: 24px; left: 128px; display: table"> <div style="display:… >>> More
Relative width for a CSS layout, fixed and fluid mix

as seen on Stack Overflow - Search for 'Stack Overflow'
Hello, I am trying to make a chatroom layout like the following: Now my problem is that I am not sure how to have the container box occupy the whole width and height (with valid doctype) and then make the center div grow if the window grows keeping the rest constant. i am well aware of js/css… >>> More

Related posts about rounded-corners

Best jQuery rounded corners script?

as seen on Stack Overflow - Search for 'Stack Overflow'
Hi, I've been looking at varios scripts for adding automatic rounded corners to a div using jQuery but there are loads of plugins available, none of which seem perfect. So, does anybody know of a script that is quick to render, supports IE6, anti-aliases and supports opacity? Any help would really… >>> More
How to only round selected corners in a fancytitle box with Tikz

as seen on Stack Overflow - Search for 'Stack Overflow'
If you take a look at http://www.texample.net/tikz/examples/boxes-with-text-and-math/ the boxes there are with rounded corners. In the examples, both the box itself and the title is a box. I want the title box to not have the bottom corners rounded. On page 120 in the manual, there is a description… >>> More
UITableViewCell rounded corners and clip subviews

as seen on Stack Overflow - Search for 'Stack Overflow'
I can't find anything anywhere(search engines, docs, here, etc) that shows how to create rounded corners (esp. in a grouped table view) on an element that also clips the subviews. I have code that properly creates a rounded rectangle out of a path with 4 arcs(the rounded corners) that has been tested… >>> More
Custom UITableViewCell rounded corners (grouped style)

as seen on Stack Overflow - Search for 'Stack Overflow'
When creating a custom UITableViewCell I notice that it looks as expected in 'plain' style but that the corners of the cells are not rounded if the table view is displayed in 'grouped' style: i.e. the corners are square. I have searched but cannot find any real explanation of why this happens and… >>> More
How to make an ImageView to have rounded corners

as seen on Stack Overflow - Search for 'Stack Overflow'
Hi, In android, ImageView is a rectangle by default. Is it possible to make it a rounded rectangle (clipped off all 4 corners of my Bitmap to be rounded rectangles) in the ImageView? If yes, can you please tell me now can I do that? Thank you. >>> More