[HTML/CSS] Boxen verspringen bij hover

[Ronnyrr]

Hallo,

Op mijn website ben ik bezig om een box te maken met tumbnails daarin. Als hover bij de tumbnail moet er een dikke border omheen komen. Echter als ik bij hover een border toevoeg verspringen de rest van de tumbnails. Ik dacht dat dit door een position:relative en display:block wel op te lossen viel, maar dat was niet het geval. Iemand een idee hoe ik dit wel kan oplossen?

Voor als het een beetje onduidelijk is, het ik wat afbeeldingen toegevoegd.





Bij voorbaat dank.

[NMe]

Jij denkt dat het box model genegeerd wordt door een position: relative en een display: block?

Waarom geef je ze niet allemaal een border waarbij de borders van ongeselecteerde elementen dezelfde kleur hebben als de achtergrond?

[TheDane]

Of CSS outline.

Zie tips: http://css-tricks.com/ima...hat-do-not-change-layout/

[noes]

Outline werkt niet in IE.

Ik gebruik dit altijd. Ipv padding kan je in sommige situaties ook margin gebruiken.

Cascading Stylesheet:

element{
  padding: 3px;
}

element:hover{
  padding: 0;
  border: 3px solid #cc0000;
}

[ Voor 25% gewijzigd door noes op 04-03-2011 16:55 ]

[apokalypse]

of zonder een hover een andere padding/margin.

[edit] moet refreshen, zie boven

[ Voor 51% gewijzigd door apokalypse op 03-03-2011 21:40 ]

[MrDummy]

De border heeft eigen pixel ruimte, en dat kan andere boxen wegduwen als je niet rekening houdt met de ruimte met float:left;. De box is dus iets groter met border erbij.

Inderdaad moet je die ruimte alvast reserveren zodat boxen niet meer verspringen. Dat kan door marge maken of zelfde border maar dan andere kleur / zelfde kleur als background.
Of je maakt grootte box meteen iets kleiner zodat totale grootte gelijk blijft met border erbij.

Eigenlijk heel simpel als je even nadenkt waarom. :-)

[R4gnax]

noes schreef op donderdag 03 maart 2011 @ 21:25:
Outline werkt niet in IE.

Kleine nuance: wel in 8, niet in 6 & 7.

[BtM909]

De negatieve margin & border truuk maakt geen gebruik van outline

[gitaarwerk]

@Noes, die werkt voor meeste browsers

Wat het allerbeste werkt zonder versringen, is (alleen mogelijk wanneer je achtergrond effen is )
gewoon een andere kleur border geven... (edit, oh, zie net dat het door NMe al gezegd is :x )

padding/marges kan soms toch wel eens problemen opleveren, tenzij je weer hacks wilt gaan doen, of uitzonderingen maken met andere stylesheets.

Sowieso is het meestal toch wel handig om IE7 nog wel te ondersteunen. (wanneer komt hier een counter voor? ^_^ )

[ Voor 5% gewijzigd door gitaarwerk op 08-03-2011 09:58 ]

[Bosmonster]

Je kunt ook een containertje erinzetten die je zichtbaar maakt on hover en absoluut positioneert binnen de block (die op relative dus). Dan kun je doen wat je wilt. Kun je het ook nog leuk animeren

[ Voor 9% gewijzigd door Bosmonster op 08-03-2011 10:03 ]