Na het nodige onderzoek ben ik er ondertussen wel achter dat ik beter een Fieldset kon gebruiken voor dergelijke zaken, maar nu ik in DIV's begonnen ben wil ik ook weten hoe ik het af moet maken in DIV's.

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.
Padding = buitenkant
Margin = binnenkant
(Als je de ruimte wil wegahalen.)
Dit is niet wat ik zoek, ik heb het in verschillende onderdelen van mijn Div proberen te zetten maar dat had allemaal geen effect.

Reageren