Topic: CSS - Custom borders and corners (Page 1 of 1) Pages that link to <a href="https://ozoneasylum.com/backlink?for=11182" title="Pages that link to Topic: CSS - Custom borders and corners (Page 1 of 1)" rel="nofollow" >Topic: CSS - Custom borders and corners <span class="small">(Page 1 of 1)</span>\
 
Skaarjj
Maniac (V) Mad Scientist

From: :morF
Insane since: May 2000

 posted posted 04-02-2004 04:13

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%}



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>



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 Pat Richard
smonkey
Paranoid (IV) Inmate

From: Northumberland, England
Insane since: Apr 2003

 posted posted 04-02-2004 17:55

http://www.alistapart.com/articles/customcorners2/

<A HREF="http://www.cryokinesis.co.uk" TARGET=_blank>visit
JKMabry
Maniac (V) Inmate

From: out of a sleepy funk
Insane since: Aug 2000

 posted posted 04-02-2004 22:58

I really dunno what method you're using but I c&p'd your CSS into notepad and ran a find for "float" and "position" to see how you were trying to do this and I found neither. I would think it very hard to accomplish what you seem to want without either of those

Suho1004
Maniac (V) Inmate

From: Seoul, Korea
Insane since: Apr 2002

 posted posted 04-03-2004 05:01

Actually, a quick glance at the CSS shows at least two "floats"... perhaps you were doing whole word searches?

I'll try to take a look at this later and see if I can find anything wrong...

[Edit: Hmm... I guess it would help to actually see what's going wrong on the page... do you have a link?]

___________________________
Suho: www.liminality.org
JKMabry
Maniac (V) Inmate

From: out of a sleepy funk
Insane since: Aug 2000

 posted posted 04-03-2004 16:47

yes I see plenty now that I look straight at it. Makes me wonder what I typed in the find box =)

yeah, put that sucker up as a page with the images! That'd be a bit easier to look at
Skaarjj
Maniac (V) Mad Scientist

From: :morF
Insane since: May 2000

 posted posted 04-05-2004 03:06

OK...here's another version of it that I ALA-ified, using the uttorial linked to above. Everything, as far as I can see, should display perfectly...but it doesn't.

Here it is online, using the webspace that I just discovered my ISP provides
http://members.ii.net/~skaarjj/blue-box.html

Unfortunatly for me, they don't provide MySQL and PHP...but I'll just have to survive

Justice 4 Pat Richard
Suho1004
Maniac (V) Inmate

From: Seoul, Korea
Insane since: Apr 2002

 posted posted 04-08-2004 03:16

I'm assuming that the lack of replies here means that everyone else is having the same difficulties with this that I am--and if not, maybe this will bump it up so people smarter than I can take a look at it.

The whole customs corners thing is quite complex, and I'm not even really sure I understand what's going on in the ALA article. I'm afraid I'm not going to be much help here.
Skaarjj
Maniac (V) Mad Scientist

From: :morF
Insane since: May 2000

 posted posted 04-08-2004 11:20

And I would like to happily annouce to the asylum in general that:

I've done it! It works perfectly!

In IE only, of course, but...eh...that's the only place I need it to work

Check out the working version (note: for this to work you must use IE 5.5 or greater) here : http://members.ii.net/~skaarjj/blue-box.html

Justice 4 Pat Richard

[This message has been edited by Skaarjj (edited 04-08-2004).]
Suho1004
Maniac (V) Inmate

From: Seoul, Korea
Insane since: Apr 2002

 posted posted 04-08-2004 15:28

Hmm... it doesn't work in my browser (IE 6.0). Then again, the ALA page didn't work in my browser either (I think it might have been the one that was supposed to be compatible with NS 4 or something--I'm not sure, but it was one of the pages that didn't work...).


Post Reply
 
Your User Name:
Your Password:
Login Options:
 
Your Text:
Loading...
Options:


« Backwards — Onwards »

Show Forum Drop Down Menu
Maximum Security
OZONE
DHTML/Javascript
Server-Side Scripting - Oh my!
CSS - DOM - XHTML - XML - XSL - XSLT
Stupid Basic HTML
Visual Therapy
Photoshop
Photoshop Pong, Anyone?
***WARNING*** BIG SIG APPROACHING
Photography
3D Modelling & Rendering
Multimedia/Animation
Print Graphics
Holding Pens
Philosophy and other Silliness
Outpatient Counseling
Site reviews!
Mad Scientists' Laboratory
Getting to know the Grail