CSS - Custom borders and corners — OZONE Asylum, home of the Mad Scientists

XML - XSL - XSLT - XHTML - CSS - DOM

CSS - Custom borders and corners

This page's ID: 11182

Edit Post

Who can edit a post?	The poster and administrators may edit a post. The poster can only edit it for a short while after the initial post.

Your User Name:
Your Password:
Login Options:	Remember Me On This Computer

Your Text: Insert Slimies » Insert UBB Code » Close Last Tag \| All Tags UBB Help	I'm looking to do a CSS layout with custom borders and corners...we're looking at the good ol 'box with rounded corners' here. Only problem is, I have a vague idea on how to achieve it, but it isn't working out properly. My two columns are getting listed one under the other, and I'm getting mysterious white chunks everywhere. Here's my style sheet and page layout as they stand: CSS: [code]body {height: 100%; width: 100%; margin: 0px; padding: 0px;} p {font-family: verdana, arial, sans-serif; font-size: 10px; margin: 10px; color: black;} #head {width: 100%; height: 10%; margin: 0px; padding: 10px; background-color: #0072BC; background-image: url("header.jpg"); background-repeat: repeat-x; background-position: bottom;} #page-wrap {width: 100%; height: 90%; margin: 0px; padding: 0px; border: 0px; background: #004A80;} #menu-wrap {width: 20%; height: 90%; margin-left: 20px; margin-top: 20px; padding: 0px; background: white url("div-left.jpg") repeat-y left; float: left;} #menu-wrap-2 {width: 100%; height: 100%; margin: 0px; background: url("div-right.jpg") repeat-y right;} #menu-body {width: 100%; height: 95%; margin-left: 0px; padding-left: 0px;} #menu-head {width: 100%; height: 2.5%; background: url("div-top.jpg") repeat-x top; margin: 0px; padding: 0px; align: left;} #menu-foot {width: 100%; height: 2.5%; background: #004A80 url("div-bottom.jpg") repeat-x top; margin: 0px; padding: 0px; vertical-align: bottom;} #menu-wrap img {margin-left: -1.25%; margin-right: 0px; margin-top: 0px; margin-bottom: 0px; align: left; vertical-align: top; padding: 0px; border: 0px; float: left; z-index: 2;} #menu-head img {margin: 0px; align: right; vertical-align: top; padding: 0px; border: 0px; float: right; margin-right: -1.25%} #menu-foot img#left {float: left; margin-bottom: -1.25%;} #menu-foot img#right{float: right; margin-right: -1.25%;} #content-wrap {width: 75%; height: 90%; margin-left: 3%; margin-right: 20px; margin-top: 20px; padding: 0px; background: white url("div-left.jpg") repeat-y left; float: left;} #content-wrap-2 {width: 100%; height: 100%; margin: 0px; background: url("div-right.jpg") repeat-y right;} #content-body {width: 100%; height: 95%; margin-left: 0px; padding-left: 0px;} #content-head {width: 100%; height: 2.5%; background: url("div-top.jpg") repeat-x top; margin: 0px; padding: 0px; align: left;} #content-foot {width: 100%; height: 2.5%; background: #004A80 url("div-bottom.jpg") repeat-x top; margin: 0px; padding: 0px; vertical-align: bottom;} #content-wrap img {margin-left: -1.25%; margin-right: 0px; margin-top: 0px; margin-bottom: 0px; align: left; vertical-align: top; padding: 0px; border: 0px; float: left; z-index: 2;} #content-head img {margin: 0px; align: right; vertical-align: top; padding: 0px; border: 0px; float: right; margin-right: -1.25%}[/code] HTML: [code]<HTML> <HEAD> <TITLE>Untitled</TITLE> <LINK rel=stylesheet type="text/css" href="styles/blue-box.css"> </HEAD> <BODY> <DIV ID="head"></DIV> <DIV ID="page-wrap"> <DIV ID="menu-wrap"> <IMG SRC="styles/div-t-corn-l.jpg"> <DIV ID="menu-wrap-2"> <DIV ID="menu-head"><IMG SRC="styles/div-t-corn-r.jpg"></DIV> <DIV ID="menu-body"><P>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nulla ornare, elit nec elementum vehicula, lacus augue laoreet leo, vitae auctor felis nulla vitae lacus. Nulla facilisi. Aliquam et arcu. Duis lobortis tortor ut magna. Sed mattis. Morbi ligula arcu, ornare eget, ultricies et, auctor dignissim, nisl. Pellentesque diam. Nam diam. Nulla facilisi. Nullam tellus. Proin sem massa, pharetra posuere, sollicitudin id, vestibulum vitae, magna. Praesent ac enim. Mauris facilisis ornare tortor. Sed eget enim. </P> <P>Morbi ornare feugiat lacus. Aenean placerat. Etiam gravida congue massa. Etiam justo ligula, ornare vitae, congue eget, gravida id, purus. Duis eu mi. Etiam interdum ligula sit amet magna imperdiet vulputate. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Aenean tempor. Integer pellentesque metus sed justo. Praesent eget elit. Pellentesque faucibus nonummy nulla. Donec ante quam, hendrerit eget, malesuada ac, dignissim ut, lectus.</P> </DIV> </DIV> <DIV ID="menu-foot"><IMG ID="left" SRC="styles/div-b-corn-l.jpg"><IMG ID="right" SRC="styles/div-b-corn-r.jpg"></DIV> </DIV> <DIV ID="content-wrap"> <IMG SRC="styles/div-t-corn-l.jpg"> <DIV ID="content-wrap-2"> <DIV ID="content-head"><IMG SRC="styles/div-t-corn-r.jpg"></DIV> <DIV ID="content-body"><br><br><br></DIV> </DIV> <DIV ID="content-foot"><IMG ID="left" SRC="styles/div-b-corn-l.jpg"><IMG ID="right" SRC="styles/div-b-corn-r.jpg"></DIV> </DIV> </DIV> </BODY> </HTML> [/code] I hope someone can point out to me where I'm going wrong/have gone utterly wrong/fucked the whole thing and here's what you should have done. Any of those would be acceptable ;) Thanks Justice 4 [url=http://www.justice4pat.com]Pat Richard[/url] Loading...
Options:	Enable Slimies Enable Linkwords

« Backwards — Onwards »

Show Forum Drop Down Menu