[HTML] Img aline bij resize scherm fout

[We Are Borg]

Ik wil graag d.m.v. CSS een image uitlijnen. Ik wil de image in het midden met direct daar onder een tabel die ook in het midden is uitgelijnd. Div align is niet erg netjes vind ik zelf en wil zoveel mogelijk met CSS werken. Plaatje kan ik natuurlijk ook in een tabel zetten, maar om een tabel nu te misbruiken voor de layout is niet erg netjes .

Natuurlijk is dit onderwerp al vaker voorgekomen dus de GoT search leverde mij het volgende topic op:

[rml]crisp in "[ CSS] Een plaatje in het midden van de p"[/rml]

Cascading Stylesheet:

.imgheader {
  position: absolute;
  height: 300px;
  width: 300px;
  top: 50%;
  left: 50%;
  margin-top: -150px; /* de helft van je height */
  margin-left: -150px; /* de helft van je width */
}

Dit werkt opzich prima . Het probleem is alleen wanneer ik mijn resolutie veranderen naar bijvoorbeeld 800x600 of ik verklein mijn internet explorer scherm, dan verplaats de image.

Een klein voorbeeld:


_{Rood: header
Tabel: Niet gekleurd(wit)}

Bovenste voorbeeld is dus hoe het nu is op 1280x1024 en mijn explorer scherm gemaximaliseerd. Wanneer ik mijn resolutie dus verander of mijn explorer scherm kleiner maak, krijg je dus het onderste voorbeeld.

Hoe kan ik dit het beste voorkomen ?

[Rickets]

Mij lijkt me het best dat je het plaatje en de tabel in een container zet en die in het midden positioneert

[We Are Borg]

Kan je uitleggen met een voorbeeld wat je bedoelt, want begrijp niet echt waar je naar toe wilt ?

[Rickets]

HTML:

div
   plaatje
   tabel
/div

Cascading Stylesheet:

div {
  position: absolute;
  height: 300px;
  width: 300px;
  top: 50%;
  left: 50%;
  margin-top: -150px;
  margin-left: -150px;
}

Zoiets

[We Are Borg]

Ah kijk, op die manier

Zodat als je scherm resized je tabel dus eigelijk mee schuift. Is idd een oplossing. Probleem is plaatjes die na die tabel en header komen en niet mee worden genomen in de DIV dan weer niet in verhouding staan. Kortom, alles tussen die div plaatsen.

Bedankt voor deze oplossing. Als er niks anders is dan pak ik deze. Al vind ik het 'jammer' dat de tabel ook in de div moet worden opgenomen

Misschien nog andere oplossingen ?

[creative8500]

Hoef je niet jammer te vinden, want als het een opzich staande 'afdeling' is binnen het document is het semantic correct, om deze populaire term maar te gebruiken.

[crisp]

wat ik mis in je verhaal is eigenlijk hoe je je tabellen dan gepositioneerd hebt; als je alles op dezelfde manier doet zou het altijd netjes onder elkaar moeten blijven staan...

[We Are Borg]

crisp schreef op 03 november 2003 @ 11:08:
wat ik mis in je verhaal is eigenlijk hoe je je tabellen dan gepositioneerd hebt; als je alles op dezelfde manier doet zou het altijd netjes onder elkaar moeten blijven staan...

Cascading Stylesheet:

.tablenav {
width: 742px;
margin-left: auto;
margin-right: auto;
}

Op deze manier

[crisp]

We Are Borg schreef op 03 november 2003 @ 12:49:
[...]

Cascading Stylesheet:

.tablenav {
width: 742px;
margin-left: auto;
margin-right: auto;
}

Op deze manier

dat kan je met je image natuurlijk ook doen als je die display:block geeft