Zymic Webmaster Forums > Div Problem... -

Zymic Webmaster Forums > Web Design & Development > General Web Design Discussion

Farid Media

Mar 3 2009, 08:43 AM

I've just decided to rebuild a website I almost finished... xD
I want to use DIV's instead of tables...
I had all kinds of "boxes" with rounded corners.
That was pretty easy to make (just slice the image and use it as cell background).
But how do you do that with DIV's?
I managed to make a box with rounded corners, but everytime I type in too many lines the text just floats out of the div... :/
Anyone who can help?

Script

CODE

<html>
<head>
<title></title>
<style>
.box{
width:250px;
height:250px;
border:solid;
border-width:1px;
position:relative;
background-image:url(images/box/bg.png);
}
.box_content{
background-image:url(images/box/bg.png);
width:240;
height:240px;
top:5px;
left:5px;
position:absolute;
float:center;
}
.box_lefttop{
width:5px;
height:5px;
background-image:url(images/box/left_top.png);
position:absolute;
float:left;
}
.box_righttop{
width:5px;
height:5px;
background-image:url(images/box/right_top.png);
position:absolute;
right:0px;
}
.box_leftbottom{
width:5px;
height:5px;
background-image:url(images/box/left_bottom.png);
position:absolute;
left:0px;
bottom:0px;
}
.box_rightbottom{
width:5px;
height:5px;
background-image:url(images/box/right_bottom.png);
position:absolute;
right:0px;
bottom:0px;
}
</style>
</head>

<body>
<div class="box">

	<!-- TOP -->
	<div class="box_lefttop"></div>
  <div class="box_righttop"></div>
	
	<!-- CONTENT -->
	<div class="box_content">All the content comes here...</div>
	<!-- TOP -->
	<div class="box_leftbottom"></div>
	<div class="box_rightbottom"></div>

</div>
</body>
</html>

MrTouz

Mar 3 2009, 11:42 AM

everything needs to be expendable... meaning it must be able to grow.

You want to add content inside the box_content div and have it grow while you type in it... but what happens is that the content goes outside if there is more content than the size of your box_content. Well don't set a size. :

CODE

.box_content{
background-image:url(images/box/bg.png);
width:240;
height:240px;
top:5px;
left:5px;
position:absolute;
float:center;
}

You did not provide any links to previews so this is based on my imagination.

You are putting your content inside this box.. you want it to expend... but you did set a height. You can't set a height to an element you need to 'expend'.

No heights. Plus if you want your background to repeat.. as i believe it's what you are going for... you need to add :

CODE

background-repeat:repeat-y;

_____

That's just a plus... don't forget i am still imaginating... (looks like it's not a word)

CODE

Can't these two be ONE image only ? i mean, you are making them stick together after all aren't you ?

other question... : why are you using position absolute ?

Can you give me a preview of you 'test' because if my imagination is right... i think i can do the same effect by 100x easier.

Also you should put your CSS inside a CSS file... style.css ? and not inside your html document.

Good Luck... !

Farid Media

Mar 3 2009, 02:40 PM

Preview: http://faridmedia.uuuq.com/div/test.htm
This is what happens when I remove the heights: http://faridmedia.uuuq.com/div/noheights.htm

QUOTE

Can't these two be ONE image only ? i mean, you are making them stick together after all aren't you ?

I wanted to do that at first, but I'll probably need to make boxes which are wider...
This way it's just modifying 3 digits...

QUOTE

why are you using position absolute ?

To be honest... I don't know... xD
I was messing around until I got where I am now...

QUOTE

Also you should put your CSS inside a CSS file... style.css ? and not inside your html document.

I usually do that, but this is just some "research"... I'm going to use an external css file when this works...

Andrew

Mar 4 2009, 03:43 PM

The simplest way to do it would be exactly like you would with tables. Have three images, the top part of the box with the rounded corners, the repeating background and the bottom part with rounded corners.

CODE

<img src="topround.png" alt="" />
<div id="roundbox">put your content here, as much as you want!</div>
<img src="topround.png" alt="" />

This is just sample code, and i'm not providing css for it, but I will say that you CAN'T have a height set if you want it to be expandable. You may have to adjust padding or margins to get the div background to line up with the img tags.

Good luck, reply if it's still not working correctly.

Farid Media

Mar 6 2009, 01:30 PM

That would've caused a lot of work (since not all boxes will have the same width).
But that brought me on an idea:
I created a div containing a div for the top, a div for the bottom and a div for the content...
Both top and bottom divs contain 2 divs for the 2 corners, floating on the left or on the right.
Problem solved... : )

Thanks!

Demo: http://faridmedia.uuuq.com/div/

Code:

CODE

<html>
<head>
<title></title>
<style>
body{
background-image:url(images/page_bg.png);
}
.box{
background-image:url(images/box/bg.png);
width:500px;
/*
padding-left:5px;
padding-right:5px;
padding-top:5px;
padding-bottom:5px;
*/
}
.box_content{
background-image:url(images/box/bg.png);
top:5px;
left:5px;
margin-left:5px;
margin-right:5px;
}
.box_bottom{
background-image:url(images/box/bg.png);
width:100%;
height:5px;
}
.box_top{
background-image:url(images/box/bg.png);
width:100%;
height:5px;
}
.left_top{
width:5px;
height:5px;
background-image:url(images/box/left_top.png);
float:left;
top:0px;
}
.right_top{
width:5px;
height:5px;
background-image:url(images/box/right_top.png);
float:right;
top:0px;
}
.left_bottom{
width:5px;
height:5px;
background-image:url(images/box/left_bottom.png);
float:left;
}
.right_bottom{
width:5px;
height:5px;
background-image:url(images/box/right_bottom.png);
float:right;
}
</style>
</head>
<body>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<div class="box">

		<!-- TOP -->
		<div class="box_top">
			<div class="left_top"></div>
			<div class="right_top"></div>
		</div>
		
		<!-- CENTER -->
		<div class="box_content">
			Content<br>
			asdasd<br>
		</div>
		
		<!-- BOTTOM -->
  <div class="box_bottom">
			<div class="left_bottom"></div>
			<div class="right_bottom"></div>
  </div>
		
		
</div>
</body>
</html>

This is a "lo-fi" version of our main content. To view the full version with more information, formatting and images, please click here.