SitePoint Sponsor

User Tag List

Results 1 to 11 of 11
  1. #1
    SitePoint Enthusiast
    Join Date
    Jan 2006
    Posts
    31
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    div elements as border.. help!

    Hi,

    What I'm trying to make is this:



    And I have now accomplished this:

    http://koti.mbnet.fi/f4w/test.html (competely different between IE and Mozilla)

    So you see, I need some help. I'm trying to make the red "borders" expand them selves automatically when the "container" (yellow div) is resized. So that I could put for example 80% as width for the container and the red borders would fill accordingly. Ofcourse the same with height.

    This example is pretty close what I'm trying to do, but in that example, the "borders" go below the corners...

    Any help on this would be greatly appreciated!

  2. #2
    Non-Member Egor's Avatar
    Join Date
    Jan 2004
    Location
    Melbourne, Australia
    Posts
    7,305
    Mentioned
    1 Post(s)
    Tagged
    1 Thread(s)
    Hi,

    Where square.gif is a 20px x 20px .gif:
    HTML Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <title>CSS Sample</title>
    <style type="text/css">
    
    * {
    	margin: 0;
    	padding: 0;
    }
    
    #box {
    	border: 10px solid gray;
    	background: yellow;
    	width: 30%;
    	margin: 0 auto;
    }
    
    #t {
    background: url(square.gif) no-repeat top left;
    margin: -10px 0 0 -10px;
    }
    
    #r {
    background: url(square.gif) no-repeat top right;
    margin: -10px -10px 0 0;
    }
    
    #b {
    background: url(square.gif) no-repeat bottom right;
    margin: 0 0 -10px 0;
    }
    
    #l {
    background: url(square.gif) no-repeat bottom left;
    margin: 0 0 -10px 0;
    padding: 30px;
    }
    
    
    </style>
    </head>
    <body>
    
    <div id="box">
    	<div id="t">
    		<div id="r">
    			<div id="b">
    				<div id="l">
    				<p>Paragraph here. Paragraph here. Paragraph here. Paragraph here. Paragraph here. Paragraph here. Paragraph here. Paragraph here. Paragraph here. Paragraph here. </p>
    				
    				</div>
    			</div>
    		</div>
    	</div>
    </div>
    
    </body>
    </html>
    Although it doesn't seem to work right in IE. hopefully someone else here will point out a fix.

  3. #3
    Non-Member
    Join Date
    Jan 2005
    Location
    Netherlands
    Posts
    4,300
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hello

    Little Puzzel

    works in FF NS Moz Op when you clear the floats
    for IE you have to play with margins so that the bottom 3 containers drop into place

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    
    
    <head>
    <title>test</title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <style type="text/css">
    #container{
    	margin-left:	auto;
    	margin-right:	auto;
    	width:			300px;
    	background:		yellow;
    }
    
    #left-corner{
    	display:		inline;
    	float:			left;
    	background:		blue;
    	height:			25px;
    	width:			25px;
    	font-size:		1px;
    }
    
    #top{
    	display:		inline;
    	float:			left;
    	background:		red;
    	height:			10px;
    	width:			250px;
    	font-size:		1px;
    }
    
    #right-corner{
    	display:		inline;
    	float:			left;
    	background:		blue;
    	height:			25px;
    	width:			25px;
    	font-size:		1px;
    }
    
    #left{
    	display:		inline;
    	clear:			left;
    	float:			left;
    	background:		#ffcc00;
    	height:			100px;
    	width:			10px;
    	font-size:		1px;
    	
    }
    * html #left{margin-right:16px;}
    
    #right{
    	display:		inline;
    	float:			right;
    	background:		#00ff66;
    	height:			100px;
    	width:			10px;
    	font-size:		1px;
    }
    * html #right{margin-left:15px;}
    
    #bottom-left-corner{
    	display:		inline;
    	clear:			left;
    	float:			left;
    	background:		blue;
    	height:			25px;
    	width:			25px;
    	font-size:		1px;
    }
    
    #bottom{
    	display:		inline;
    	float:			left;
    	background:		red;
    	height:			10px;
    	width:			250px;
    	font-size:		1px;
    	margin-top:15px;
    }
    
    #bottom-right-corner{
    	display:		inline;
    	float:			left;
    	background:		blue;
    	height:			25px;
    	width:			25px;
    	font-size:		1px;
    }
    	head+body #container:after{
    	content: "."; 
    	display: block; 
    	height:0; 
    	clear: both; 
    	visibility: hidden;
    	}
    </style>
    </head>
    <body>
    <div id="container">
    	<div id="left-corner"></div>
    	<div id="top"></div>
    	<div id="right-corner"></div>
    	<div id="left"></div>
    	<div id="right"></div>
    	
    	<div id="bottom-left-corner"></div>
    	<div id="bottom"></div>
    	<div id="bottom-right-corner"></div>
    </div>
    </body>
    </html>

  4. #4
    SitePoint Enthusiast
    Join Date
    Jan 2006
    Posts
    31
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Egor
    Hi,
    Where square.gif is a 20px x 20px .gif:
    <code snipped>
    Although it doesn't seem to work right in IE. hopefully someone else here will point out a fix.
    Hey there!

    That's good, exept the borders actually go behind the corners.. the same thing was in the example I linked to. I'm looking a way to do it without the borders going behind the corners, so I can use a transparent image in the corners.. Thanks alot for the reply though!!

    Quote Originally Posted by all4nerds
    Hello

    Little Puzzel

    works in FF NS Moz Op when you clear the floats
    for IE you have to play with margins so that the bottom 3 containers drop into place
    <code snipped>
    Hey!

    Looks good, but I can't think of how to put the width of the whole thing as a percentage in your example? So that the red borders would fill the space automatically.. Also, I definetly need to support IE too on the site. Thanks for the reply!

    EDIT: I'm starting to think that this isn't even possible.. :'(

  5. #5
    Non-Member
    Join Date
    Jan 2005
    Location
    Netherlands
    Posts
    4,300
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hello

    Search google for rounded corner boxes there are lots of tutorials on them

    Here is my dirty example it needs background images on the containers in the right stacking order, you maybe also have to change the position of the corner divís

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
    <head>
    	<title>12345 12345 12345 12345 12345 </title>
    	<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    	<style type="text/css">
    	html{height:100%;}
    	
    	.wra{width:600px;background:#ff6600;}
    	head+body .wra{min-height:200px;}
    	* html .wra{height:200px;}
    	
    	.l,.r,.lb,.rb{width:100%;height:100%;position:relative;}
    	
    	.cl,.cr,.clb,.crb{width:30px;height:30px;background:#ffffcc;position:absolute;overflow:hidden;}
    
    	.cl{background:#ffffcc;left:0;top:0;}
    	.cr{background:#ccff99;right:0;top:0;}
    	.clb{background:#ccffff;}
    	head+body .clb{left:0;bottom:0;}
    	* html .clb{left:0;bottom:-1px;}
    	.crb{background:#ccffcc;}
    	head+body .crb{right:0;bottom:0;}
    	* html .crb{right:0;bottom:-1px;}
    	
    	.wra p{padding:10px;margin:0;position:relative;z-index:100;}
    	</style>
    	<script type="text/javascript">
    
    	</script>
    </head>
    
    <body>
    <div class="wra">
    <div class="l"><div class="cl"></div>
    <div class="r"><div class="cr"></div>
    <div class="lb"><div class="clb"></div>
    <div class="rb"><div class="crb"></div>
    <p>Start
    <br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
    <br /><br /><br /><br /><br /><br />
    End
    </p>
    </div>
    </div>
    </div>
    </div>
    </div>
    </body>
    </html>

  6. #6
    SitePoint Enthusiast
    Join Date
    Jan 2006
    Posts
    31
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by all4nerds
    Hello

    Search google for rounded corner boxes there are lots of tutorials on them

    Here is my dirty example it needs background images on the containers in the right stacking order, you maybe also have to change the position of the corner divís
    <code snipped>
    Hi!
    Thanks for taking the time and helping me. I have searched round corner boxes all day yesterday, but didn't found anything suitable for my needs. Most of the examples I found did just that. Round corners on a box. Like your is too.

    But what I'm looking for is a box just like in the picture on my first post, that can be set to expand automatically. Also the red borders cannot go behind the corners, because there would be a transparent image on the corners. I think I haven't explained it very good, so here's a better picture:



    If I just do the borders in the yellow div and then set the corner pictures to each corner of the box, the div borders will show up at the corners when the pictures are transparent. Is it possible to do this? If not, I'll just have to settle with this.

  7. #7
    Non-Member
    Join Date
    Jan 2005
    Location
    Netherlands
    Posts
    4,300
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hello

    there are lots of ways to do this

    maybe take a break, and ask how the end result haze to look ? just a 1px border and the background transparent or partly transparent ?
    Last edited by all4nerds; Jan 26, 2006 at 18:48.

  8. #8
    SitePoint Enthusiast
    Join Date
    Jan 2006
    Posts
    31
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by all4nerds
    Hello

    there are lots of ways to do this

    maybe take a break, and ask how the end result haze to look ? just a 1px border and the background transparent or parly transparent ?
    I don't quite understand what you are asking? ...the picture above is just an explanation of the structure I'm trying to make. Only the red lines and blue curves at the corners would be visible in the end result (they would be replaced ofcourse with the border textures). The black color in the picture above is just there to visualize the corner divs. The corner divs would have a gif picture as background which has the curve (blue in the above example) and the dashed area would be transparent in the corner curve picture.

    Is this what you were thinking? Or am I totally lost?

  9. #9
    Non-Member
    Join Date
    Jan 2005
    Location
    Netherlands
    Posts
    4,300
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hello

    If you want to read all articles on rounded corner boxes, how to etc, it will take you
    weeks if not months to read them all

    A guess, it haze to look like this
    http://msdn.microsoft.com/vstudio/ PS steal it from Bill

    a design or image and i maybe know an ezy way

  10. #10
    SitePoint Enthusiast
    Join Date
    Jan 2006
    Posts
    31
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by all4nerds
    A guess, it haze to look like this
    http://msdn.microsoft.com/vstudio/ PS steal it from Bill
    Something like that.. but that's done in tables, no no no I guess I'll have to do more research on this.. or to settle by making only the inner side of the corner transparent, and outside with a solid color. But that will limit the site backround alot.. there must be a solid color background behind the corners then..

  11. #11
    Non-Member
    Join Date
    Jan 2005
    Location
    Netherlands
    Posts
    4,300
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hello

    Table or Div thatís no difference for me, its just a container with an other name

    Ok, Sorry i try to be back tomorrow


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •