PDA

View Full Version : scaleable boxes



Cliffo
Apr 15th, 2010, 06:05 PM
I recently rewrote my e107 theme to make it w3c compliant, but i can not figure out how to make scalable boxes using <divs> Can someone take a look at this code and tell me what i am doing wrong;



<table width='100%' class='blockwrap' cellpadding='0' cellspacing='0'>
<tr>
<td>
<div class='sidetop'>
<div class='left'>&nbsp;</div>
<div class='right'>&nbsp;</div>
<div class='mid'>
<div class='title'>".$caption."</div>
</div>
</div>
</td>
</tr>
<tr>
<td>
<div class='sidemid'>
<div class='left'>&nbsp;</div>
<div class='right'>&nbsp;</div>
<div class='mid'>
<div class='content'>".$text."</div>
</div>
</div>
</td>
</tr>
<tr>
<td>
<div class='sidebottom'>
<div class='left'>&nbsp;</div>
<div class='right'>&nbsp;</div>
<div class='mid'></div>
</div>
</td>
</tr>
</table>


.sidetop {
width: 100%;
}
.sidetop .left {
background: url(images/side_01.png) no-repeat;
float: left;
height: 42px;
width: 25px;
}
.sidetop .right {
background: url(images/side_03.png) no-repeat;
float: right;
height: 42px;
width: 25px;
}
.sidetop .mid {
background: url(images/side_02.png);
height: 42px;
}
.sidetop .mid .title {
font-size: 11px;
color: #CCCCCC;
font-family: tahoma, arial, sans-serif;
font-weight: bold;
text-align: center;
padding-top: 16px;
}
.sidemid {
width: 100%;
height: 100%;
}
.sidemid .left {
background: url(images/side_04.png) repeat-y;
float: left;
width: 10px;
}
.sidemid .right {
background: url(images/side_06.png) repeat-y;
float: right;
width: 10px;
}
.sidemid .mid {
background: url(images/side_05.png);
}
.sidemid .mid .content {
padding: 5px 10px 0px 10px;
text-align: left;
}
.sidebottom {
width: 100%;
}
.sidebottom .left {
background: url(images/side_07.png) no-repeat;
float: left;
height: 25px;
width: 25px;
}
.sidebottom .right {
background: url(images/side_09.png) no-repeat;
float: right;
height: 25px;
width: 25px;
}
.sidebottom .mid {
background: url(images/side_08.png);
height: 25px;
}


Here is the coding i used to create this box before, which worked fine but obviously isnt proper;


<table cellpadding='0' cellspacing='0'>
<tr>
<td class='side1'><img src='".THEME."images/blank.gif' width='25' height='40' alt='' class='ffimgfix' /></td>
<td class='side2' style='width:100%;white-space:nowrap'>".$caption."</td>
<td class='side3'><img src='".THEME."images/blank.gif' width='25' height='40' alt='' class='ffimgfix' /></td>
</tr>
</table>



<table cellpadding='0' cellspacing='0'>
<tr>
<td class='side4'><img src='".THEME."images/blank.gif' width='25' alt='' />
</td>
<td class='side5' style='width:100%'>".$text."</td>
<td class='side6'><img src='".THEME."images/blank.gif' width='25' alt='' />
</td>
</tr>
</table>


<table style='width:100%' cellspacing='0' cellpadding='0' align='center'>
<tr>
<td class='side7'><img src='".THEME."images/blank.gif' width='25' height='25' alt='' class='ffimgfix' /></td>
<td class='side8' style='width:100%'>
<td class='side9'><img src='".THEME."images/blank.gif' width='25' height='25' alt='' class='ffimgfix' /></td>
</tr>
</table>



.side1 {
background-image: url(images/side_01.png);
}
.side2 {
background-repeat: repeat-x;
background-image: url(images/side_02.png);
font-size: 10px;
color: #B76700;
font-family: tahoma, arial, sans-serif;
font-weight: bold;
text-align: center;
}
.side3 {
background-image: url(images/side_03.png);
}
.side4 {
background-repeat: repeat-y;
background-image: url(images/side_04.png);
}
.side5 {
background-image: url(images/side_05.png);
padding: 4px 5px 5px 4px;
font-size: 9px;
color: #000000;
font-family: verdana, tahoma, arial, sans-serif;
vertical-align:top;
}
.side6 {
background-repeat: repeat-y;
background-image: url(images/side_06.png);
}
.side7 {
background-image: url(images/side_07.png);
}
.side8 {
background-repeat: repeat-x;
background-image: url(images/side_08.png);
}
.side9 {
background-image: url(images/side_09.png);
}

Any help is appreciated!

Excavator
Apr 15th, 2010, 06:43 PM
Hello Cliffo,
That's a very complicated way of doing borders for a box to hold text. You probably already know that is not the place for tables (http://webdesign.about.com/od/layout/a/aa111102a.htm). If you're re-writing to validate, you might as well make it semantic (http://robertnyman.com/2007/10/29/explaining-semantic-mark-up/) as well.

Your left and right border images will not expand with content because they are seperate and don't have content of their own. I don't have any idea what your images look like but that issue is easily fixed with faux columns (http://nopeople.com/CSS/faux_columns/index.html), as long as your images repeat well.

See some examples of boxes to hold text here -
http://nopeople.com/CSS/slider/index.html
http://nopeople.com/CSS/rounded%20corners/index.html

Cliffo
Apr 15th, 2010, 07:09 PM
I think my coding would be considered semantic, i will try out this faux xcolumn stuff, check out the site that is currently running that code, http://www.test.cgshost.com/news.php

Since this is at height 100%;

.sidemid {
width: 100%;
height: 100%;
}

and if i put 100% here;

.sidemid .left {
background: url(images/side_04.png) repeat-y;
float: left;
width: 10px;
height: 100%;
}
.sidemid .right {
background: url(images/side_06.png) repeat-y;
float: right;
width: 10px;
height: 100%;
}

why wont it repeat to fill 100% ?

Excavator
Apr 15th, 2010, 07:17 PM
why wont it repeat to fill 100% ?

Not how it works. It won't repeat to match the height of the content div because it has no content.

Cliffo
Apr 15th, 2010, 07:26 PM
So this faux column guide is the key? I am trying it out an not having much luck, just want to make sure i am not wasting time.

Excavator
Apr 15th, 2010, 11:52 PM
So this faux column guide is the key? I am trying it out an not having much luck, just want to make sure i am not wasting time.

It's one way that works, yes.
Do you have an example of your latest attempt? A link would be best since this is dealing with images.

Cliffo
Apr 16th, 2010, 12:14 AM
I just made them all fixed width, maybe i will figure it out for a later theme.