Ik heb DMV 9 plaatjes (10 inclusief de content) een form weten te maken, en alles linkt dmv DIV's die worden vastgesteld in CSS aan elkaar (in FF tenminste), echter moet ik voor de fill plaatjes een waarde instellen en dit is niet wat ik er mee van plan was.
De bedoeling was namelijk om het geheel een DIV genaamd Form te zetten en in deze DIV de width en height ingeven die door een PHP-Functie word ingevuld, echter wanneer ik de waardes weglaat wil hij niet meer meestretchen en blijft hij gewoon innieminie staan en ziet het geheel er gewoon gek uit.
Ik heb zowel Auto als Percentage ingave geprobeerd echter werkt het allebei niet zoals ik het in gedachte had.
Page
<?php
include('top.php');
?>
<div class="form">
<div class="form_l_top"></div>
<div class="form_top_fill"></div>
<div class="form_r_top"></div>
<div class="form_l_fill"></div>
<div class="form_content">Doormiddel van deze test probeer ik een voorbeeld te krijgen van de mogelijkheden met divs, en je raad het al, de mogelijkheden
zijn eindeloos</div>
<div class="form_r_fill"></div>
<div class="form_l_bottom"></div>
<div class="form_bottom_fill"></div>
<div class="form_r_bottom"></div>
</div>
<?php
include('bottom.php');
?>
CSS (Static):
/*Form Settings*/
.form {
width:400px;
}
.form_l_top {
width:7px;
height:6px;
float:left;
background:url('images/form/l_top.jpg') no-repeat;
}
.form_top_fill {
width:387px;
height:6px;
float:left;
background:url('images/form/top_fill.jpg') repeat-x;
}
.form_r_top {
width:6px;
height:6px;
float:right;
background:url('images/form/r_top.jpg') no-repeat;
}
.form_l_fill {
width:7px;
height:200px;
float:left;
background:url('images/form/l_fill.jpg') repeat-y;
}
.form_content {
width:387px;
height:200px;
float:left;
background:#660000;
}
.form_r_fill {
width:6px;
height:200px;
float:left;
background:url('images/form/r_fill.jpg') repeat-y;
}
.form_l_bottom {
width:7px;
height:7px;
float:left;
background:url('images/form/l_bottom.jpg') no-repeat;
}
.form_bottom_fill {
width:387px;
height:7px;
float:left;
background:url('images/form/bottom_fill.jpg') repeat-x;
}
.form_r_bottom {
width:6px;
height:7px;
float:left;
background:url('images/form/r_bottom.jpg') no-repeat;
}
CSS (Dynamic)
/*Form Settings*/
.form {
width:400px;
height:200px;
}
.form_l_top {
width:7px;
height:6px;
float:left;
background:url('images/form/l_top.jpg') no-repeat;
}
.form_top_fill {
height:6px;
float:left;
background:url('images/form/top_fill.jpg') repeat-x;
}
.form_r_top {
width:6px;
height:6px;
float:right;
background:url('images/form/r_top.jpg') no-repeat;
}
.form_l_fill {
width:7px;
float:left;
background:url('images/form/l_fill.jpg') repeat-y;
}
.form_content {
float:left;
background:#660000;
}
.form_r_fill {
width:6px;
float:left;
background:url('images/form/r_fill.jpg') repeat-y;
}
.form_l_bottom {
width:7px;
height:7px;
float:left;
background:url('images/form/l_bottom.jpg') no-repeat;
}
.form_bottom_fill {
height:7px;
float:left;
background:url('images/form/bottom_fill.jpg') repeat-x;
}
.form_r_bottom {
width:6px;
height:7px;
float:left;
background:url('images/form/r_bottom.jpg') no-repeat;
}
PS. Hoe krijg ik de tussenruimte die in IE ontstaat weg, is er iets mis met mijn Code of is het de world famous IE Bug.