geneste div's [SOLVED]

Anon5710 · **Geplaatst:** 17 Sep 2007 19:02

Okey,

Om't probleem uit te leggen ga ik gewoon het laten zien eh

http://www.highvoltage.be/kevin/index.php?page=leiding (hier is het fout)

http://www.highvoltage.be/kevin/index.php?page=kapoenen
En hier (en andere links ook ze ) werkt het wel.

Bon, die blauwe kader moet normaal gezien over die 2 foto'tjes komen.
Maar ik heb geen idee hoe dat te doen zonder float: left; (voor de foto's) uit te schakelen.
Als iemand een elegante oplossing heeft ? (eentje dat xhtml strict en css juist is ? )

De relevante css code :

Code:

.latest_new_post{
position: relative;
margin-left: 250px;
margin-top: 40px;
margin-right: 150px;
}

.header{
color: white;
font-weight: bold;
background-color: #66a0cc;
padding-top: 0.4em;
padding-right: 0.4em;
padding-left: 0.4em;
border-style: solid;
border-width: thin;
border-bottom: none;
border-color: black
}

.wanneer{
color: white;
font-style: italic;
font-size: x-small;
background-color: #66a0cc;
padding-bottom: 0.4em;
padding-right: 0.4em;
padding-left: 0.4em;
border-style: solid;
border-width: thin;
border-top: none;
border-bottom: none;
border-color: black;
}


.tekst{
padding-left: 15px;
padding-right: 15px;
background-color: #accde6;
border-style: solid;
border-width: thin;
border-top: none;
border-color: black;
font: normal 90% 'Trebuchet MS', 'Lucida Grande', Arial, sans-serif;
}

.leiding
{
  margin: 2px;
  height: auto;
  width: auto;
  float: left;
  text-align: center;
}   
.leiding img
{
  display: inline;
  margin: 3px;
  border: 1px solid #ffffff;
}

.adress
{
  text-align: center;
  font-weight: normal;
  width: 120px;
  margin: 2px;
}

En de relevante html code:

Code:

   <div>
      <div>Leiding</div>   
      <div> Gepost door Deckx Kevin op maandag 3 september om 20:45u</div>   
         <div>
            <br>
               
            <div>
               <img>
                <div>Els haar straat <br> 2550 Kontich <br> telefoon</div>
            </div>               
            
            <div>
               <img>
                <div>Els haar straat <br> 2550 Kontich <br> telefoon</div>
            </div>
                        

         </div>
   </div>

Natrium · **Geregistreerd:** 22 Mrt 2005 0:00 **Berichten:** 353

misschien handig dat ge bij in uw html zet welke css-klasse uw div's gebruiken

en dan nog een muffeziftopmerking: als je graag xhtml-dingen wil, gebruik dan <br />

Anon5710 · **Geplaatst:** 18 Sep 2007 10:40

Code:

   <div class="latest_new_post">
      <div class="header">Leiding</div>   
      <div class="wanneer"> Gepost door Deckx Kevin op maandag 3 september om 20:45u</div>   
         <div class="tekst">
            <br />
               
            <div class="leiding">
               <img src="images/foto/leiding/els.jpg" alt="Els" width="150" height="150" />
                <div class="adress">Els haar straat <br /> 2550 Kontich <br /> telefoon</div>
            </div>               
            
            <div class="leiding">
               <img src="images/foto/leiding/els.jpg" alt="Els" width="150" height="150" />
                <div class="adress">Els haar straat <br /> 2550 Kontich <br /> telefoon</div>
            </div>
                        

         </div>
   </div>

Vergeten html uit te schakelen in dit bericht

Anon5710 · **Geplaatst:** 18 Sep 2007 19:06

Het probleem dat ik had was blijkbaar een vaak voorkomend probleem.
Floats hebben percies de neiging om lastig te doen in een block element

Ik heb het kunnen oplossen door in men block element.

Code:

width: inherit;
overflow: hidden;

Toe te voegen.

Maar waarom de overflow statement nodig is weet ik niet.
Normaal gezien kan dat geen invloed hebben hier. :?:

Natrium · **Geregistreerd:** 22 Mrt 2005 0:00 **Berichten:** 353

amai, wie dat die hack gevonden heeft, mag zich terecht 1337 noemen.

Scoutnet vzw

geneste div's [SOLVED]

Wie is er online?