div positioneren lukt niet

[Verwijderd]

Ik wil op mijn site zoveel mogelijk met divs werken, maar bij het volgende heb ik problemen. Ik heb een content die ik wil laten omringen door afbeeldingen (zodat je een mooi kader krijgt). Met tabellen is dit geen probleem maar tabellen dienen daar niet voor dus ben ik begonnen met divs om het voor elkaar te krijgen.

Ik krijg mijn divs wel juist gepositioneerd als ik een hoogte en een breedte meegeef in de buitenste container. Maar het probleem is nu dat ik dat niet wil omdat de content afbeeldingen zijn die van grootte kunnen varieren. Ik wil en kan ook niet met javascript werken omdat er ook nog tekst onder de afbeelding komt die ook weer kan varieren en waarvoor ik dus geen vooraf gedefinieerde hoogte kan voor geven. Dit is wat ik tot nu toe heb:

code:

<div style="position: relative; width: 200px; height: 200px;">
    <div style="position: relative">
        <div style="position: absolute; top: 0px; left: 0px; height: 34px; width: 34px; background: #808080;"></div>
        <div style="position: absolute; top: 0px; left: 34px; right: 34px; height: 34px; background: #909090;"></div>
        <div style="position: absolute; top: 0px; right: 0px; height: 34px; width: 34px; background: #707070;"></div>
    </div>
    <div style="position: static; ">
        <div style="position: absolute; top: 34px; bottom: 34px; left: 0px; width: 34px; background: #606060;"></div>
        <div style="position: absolute; top: 34px; bottom: 34px; left: 34px; right: 34px; background: #404040;">afbeelding hier</div>
        <div style="position: absolute; top: 34px; bottom: 34px; right: 0px; width: 34px; background: #303030;"></div>
        </div>
    <div style="position: static">
        <div style="position: absolute; bottom: 0px; left: 0px; height: 34px; width: 34px; background: #505050;"></div>
        <div style="position: absolute; bottom: 0px; left: 34px; right: 34px; height: 34px; background: #202020;"></div>
        <div style="position: absolute; bottom: 0px; right: 0px; height: 34px; width: 34px; background: #000000;"></div>
    </div>
</div>

Als je dit test werkt alles prima (de afbeeldingen voor de borders zijn vervangen door kleuren). Maar als je nu de height & de width uit de buitenste container wegneemt wordt het een misselijk boeltje.

Heeft iemand een oplossing ik ben nu al een tijd op het web naar oplossingen aan het zoeken maar ik vind niets...

[Verwijderd]

Kun je mss voor de overzichtelijkheid even een stylesheetje maken? Kwordt helemaal gek als ik naar moet kijken

[Verwijderd]

Het probleem is dat zo'n stylesheetje ook uit 9 verschillende styles zou bestaan en ik denk niet dat dat simpeler gaat zijn .

[chris]

Ik heb even je voorbeeld in een .html-file gezet (doe dat zelf ook even en zet het online, grotere kans dat mensen je helpen). Verder gaat dit inderdaad niet werken als je afbeelding variabele hoogte en breedte heeft, dan is de simpelste oplossing toch een table.

Ik weet dat diet heel vies klinkt, maar het is ook belangrijk dat je praktisch blijft. Als je geen table gaat gebruiken, dan gaat waarschijnlijk je html heel vies worden. Wat misschien een tussenoplossing is: gebruik gewoon een img met een dikke border, en ga er daarna met javascript een table omheen tekenen.

[Blorgg]

Je maakt een denkfout doordat je tabellen 1 op 1 door divs gaat vervangen

Doe het eens anders, maak 3 divs onder elkaar ipv 3x3 'cellen'.

De bovenste en onderste divs krijgen als achtergrond een plaatje met daarin de hoeken en de boven/onderkant van de gewenste layout, achtergrond afbeelding zonder repeat.
De middelste div krijgt een achtergrond die als argument repeat-y mee krijgt. Dit kan dus een plaatje van 1px hoog zijn en dan zo breed als je die container wilt hebben.

[Verwijderd]

Blorgg schreef op zondag 18 februari 2007 @ 22:40:
Je maakt een denkfout doordat je tabellen 1 op 1 door divs gaat vervangen

Doe het eens anders, maak 3 divs onder elkaar ipv 3x3 'cellen'.

De bovenste en onderste divs krijgen als achtergrond een plaatje met daarin de hoeken en de boven/onderkant van de gewenste layout, achtergrond afbeelding zonder repeat.
De middelste div krijgt een achtergrond die als argument repeat-y mee krijgt. Dit kan dus een plaatje van 1px hoog zijn en dan zo breed als je die container wilt hebben.

Dat zou werken moest de breedte niet varieren... Want enkel dan zou je in de onderste en de bovenste div een afbeelding als achtergrond kunnen zetten. Nuja ik zal een table gebruiken want er zijn nog was eisen die het alleen maar moeilijker maken. Bedankt voor de reacties

[Savantas]

Ja kan (afhankelijk van het kader wat je wil gebruiken) ook voor de optie gaan om slechts 2 div's te gebruiken om de afbeelding. Zie voor een voorbeeld bv mijn beginpagina.

HTML:

<div class="sidebox">
  <div class="boxhead"><h2>Mijn projecten</h2></div>
  <div class="boxbody">
    <ul>
      <li><a href="#">Foto's Movie W</a>
        - onder andere foto's voor de maandelijkse folder</li>
      <li><a href="#">Website Movie W</a>
        - Enkele ideetjes voor de website van filmhuis Movie W</li>
      <li><a href="#">Posters Unitas</a>
        - Posters gemaakt op en meestal ook voor jongerenvereniging Unitas, Wageningen</li>
    </ul>
  </div>
</div>

Met de volgende css

Cascading Stylesheet:

.sidebox {
margin: 30px 10px;
max-width: 965px; /* ems so it will grow */
background: url(img/tblborder_04.png) no-repeat bottom right;
font-size: 100%; z-index: 21;
min-width: 37em;
width: 37em;
}
.boxhead {
background: url(img/tblborder_02.png) no-repeat top right;
margin: 0;
padding: 0;
text-align: center;
}
.boxhead h2 {
background: url(img/tblborder_01.png) no-repeat top left;
margin: 0;
padding: 12px 10px 5px;
color: Maroon; font-weight: bold; font-size: 1.2em; line-height: 1em;
}
.boxbody {
background: url(img/tblborder_03.png) no-repeat bottom left;
margin: 0;
padding: 10px 20px;
}