13 replies to this topic

[Dat]

I have worked with Table's for all of my previous layout's but recently I started fidgeting with DIV's and CSS. There some basic and complex thing's that I can do with DIV's but I can't for some reason make Div's that will expand when text is added.
It's better if I just showed you an image and an example.

Here is what I currently have with DIV's
 Screenshot_3.jpg   97.79K   98 downloads

This is a Table sample

<table border="0" cellspacing="0" cellpadding="0">
  <tr>
	<td background="images/bg_left.png"> </td>
	<td background="images/bg_back.jpg"> </td>
	<td background="images/bg_right.png"> </td>
  </tr>
</table>

I want that to turn into Div's and CSS

I am currently using this CSS code

#BG_container {
	margin-right: auto;
	margin-left: auto;
	width: 930px;
}
#BG_back {
	background-repeat: repeat-x;
	margin-right: auto;
	margin-left: auto;
	height: 100px;
	background-image: url(images/bg_back.jpg);
	width: 900px;
}
#BG_back-left {
	display: block;
	height: 100px;
	float: left; overflow: hidden;
	width: 15px;
	background-repeat: repeat-y;
	background-image: url(images/bg_left.png);
}
#BG_back-right {
	display: block;
	float: right; overflow: hidden;
	background-repeat: repeat-y;
	height: 100px;
	background-image: url(images/bg_right.png);
	width: 15px;
}

Html:

<div id="BG_container">
<div id="BG_back-left">left</div>
<div id="BG_back-right">right</div>
<div id="BG_back">hi<br>hi2</div>

I can easily do this with table's but how can I do this with DIV's and CSS

[GiggleStick69]

Well couldn't you just add text, and every time you see the text going off, wouldn't it be easier to just resize the div?

[Dat]

GiggleStick69, on Oct 1 2007, 05:42 PM, said:

Well couldn't you just add text, and every time you see the text going off, wouldn't it be easier to just resize the div?

I draw text from my database so I need the div's to expand automatically.

Creative Insanity, on Oct 1 2007, 05:44 PM, said:

Add some padding to your text and it will always show.
You can also try inline display. Both work.

I tried adding padding to .text but it didn't work

.text {
	padding: 100%;
}

 Screenshot_2.jpg   25.87K   93 downloads
I add inline but didn't do anything actually it just made the BG disappear. Or I did it wrong.

#BG_back {
	display: inline;
	background-repeat: repeat-x;
	margin-right: auto;
	margin-left: auto;
	height: 100px;
	background-image: url(images/bg_back.jpg);
	width: 900px;
}

 Screenshot_1.jpg   42.84K   65 downloads

Html:

<div id="BG_navi"></div>
<div id="BG_container">
<div id="BG_back-left">left</div>
<div id="BG_back-right">right</div>
<div id="BG_back"><div id="text">hi<br>hi2<br><br><br><br><br>4</div></div>
</div>

[CoryMathews]

First off remove all the heights. if its gonna expand you cant set a height. as for the shadow try setting in your body css tag

background-position:top;

this worked for me on aligning a bg image with another image in my container that stretched to fit.

[Dat]

CoryMathews, on Oct 1 2007, 09:17 PM, said:

First off remove all the heights. if its gonna expand you cant set a height. as for the shadow try setting in your body css tag

background-position:top;

this worked for me on aligning a bg image with another image in my container that stretched to fit.

body {
	text-align: center;
	font-family: "Trebuchet MS", Arial, Verdana, sans-serif;
	margin: 0 auto;
	background-image: url(images/bg.jpg);
	background-repeat: repeat-x;
	background-position:top;
}

Didn't work.

Update: Removed Div height's.

[CoryMathews]

So now it just scales with the content but the dropshadow image just doesnt match?

[Dat]

CoryMathews, on Oct 2 2007, 05:29 AM, said:

So now it just scales with the content but the dropshadow image just doesnt match?

Yes, I thought I mentioned that, that was the problem?! It seems that I failed to do so, sorry.

[Dat]

Should I just resolve this by creating table's?

But I am also curious about how to do this.

[PaintingBlack]

http://www.alistapar.../cssdropshadows

[CoryMathews]

ye a css dropshadow might work. never done it but this issue would come up with or without tables.

[Dat]

*sigh* what if there weren't shadowing, I'm kind of looking for answer where I can make a div that act's like a table. With the preferences that I want. I'm having doubt's about the ease us of div's but I have seen sites that has done this. www.AnimeNewsNetwork.com is an example, the div's expand depending on the user's resolution as well.

[PaintingBlack]

Dat, on Oct 3 2007, 01:32 AM, said:

*sigh* what if there weren't shadowing, I'm kind of looking for answer where I can make a div that act's like a table. With the preferences that I want. I'm having doubt's about the ease us of div's but I have seen sites that has done this. www.AnimeNewsNetwork.com is an example, the div's expand depending on the user's resolution as well.

I really don't see the problem here. The CSS drop shadows will most likely work fine, and using spans and divs inside of divs will act "table-like". It's a matter of learning to do things through trial and error, not giving up because you're not doing too well.

[Dat]

I'm still testing (trial and error) but with no result's. So if anyone has a solution please reply.