[HTML, CSS] Absolute positionering

[Devilly]

Op het moment ben ik bezig met een website en heb hierin een aantal elementen die ik wil positioneren ten opzichte van het bovenliggende element. Er staat bijvoorbeeld een diagram op de pagina en ik wil de gebruiker de mogelijkheid geven om in en uit te zoomen. Het diagram staat in een div en in de rechterbovenhoek wil ik voor deze functionaliteit twee knoppen toevoegen. Deze knoppen zijn afbeeldingen met een click event.

HTML:

<div>
    <img src="a"></img>
    <img src="b"></img>
</div>

Als ik de div position:relative meegeef en de afbeeldingen position:absolute en right:5px werkt dit naar behoren. Als ik echter top:5px toevoeg, berekent hij die 5px opeens vanaf de top van de pagina in plaats van vanaf de top van de div. Ik heb zelf al een tijdje gespeeld met de HTML en CSS om de logica te ontdekken en ik heb een fiddle gemaakt om het gedrag te reproduceren, maar daarmee werkt het wel naar behoren. Kan iemand mij wijzen op de denkfout die ik maak?

[ETzPliskin]

Voeg je de top:5px toe aan de div of aan de img? Al geprobeerd om eventueel padding-top:5px te gebruiken?
Heb je overigens een link naar je fiddle? Ik begrijp de bedoeling niet helemaal

[ Voor 28% gewijzigd door ETzPliskin op 24-11-2013 10:17 ]

[Morrar]

Je geeft aan dat je relatief ten opzichte van andere elementen wilt positioneren. Dan lijkt me die position: absolute niet handig; dan positioneer je namelijk op absolute coordinaten, dus ten opzichte van de viewport.

Overigens lijkt me dit meer een topic voor Webdesign.

[ Voor 11% gewijzigd door Morrar op 24-11-2013 10:25 ]

[Leon-]

Als je de parent-div een position:relative geeft werkt de "top: 5px" op child-divs.

[Creepy]

Een tikje door naar Webdesign, Markup & Clientside Scripting

[incaz]

Morrar: dat klopt niet hoor.

Devilly: img-tags hoeven niet gesloten te worden. Ik denk niet dat het je probleem is, maar check zeker je html even op validiteit, wat verkeerd geneste divs bv kunnen zeker wel rare effecten geven.

Het moet gewoon mogelijk zijn met absolute en relative. Kun je de code uit de webpagina stapje voor stapje reduceren totdat je ofwel een goede testcase hebt die je hier kunt tonen, ofwel het probleem hebt opgelost?

[BasieP]

Een img-tag is niet een tag die je hoeft te sluiten. Het zijn zogenaamde void elements.

Verder is het semantischer correct als je een knop toevoegt wanneer je een knop wilt toevoegen. Dus niet een plaatje met een onclick.

HTML:

<input type="image" src="rainbow.gif" name="image" width="60" height="60" />

kun je daarvoor gebruiken.

[DJMaze]

Dit zou moeten werken in elke webbrowser. Zo niet, dan welke browser gebruik je?

Cascading Stylesheet:

div { position: relative; width: 500px; height: 500px; }
div img { position: absolute; right: 5px; top: 5px; }
div img + img { position: absolute; right: 20px; top: 5px; }

[ Voor 5% gewijzigd door DJMaze op 25-11-2013 00:46 ]

[Bosmonster]

BasieP schreef op zondag 24 november 2013 @ 20:05:
Een img-tag is niet een tag die je hoeft te sluiten. Het zijn zogenaamde void elements.

Verder is het semantischer correct als je een knop toevoegt wanneer je een knop wilt toevoegen. Dus niet een plaatje met een onclick.

HTML:

<input type="image" src="rainbow.gif" name="image" width="60" height="60" />

kun je daarvoor gebruiken.

Gebruik dan gewoon een

HTML:

<button type="button">Doe iets</button>

De type="image" is een submit button namelijk (eigenlijk is het zelfs voor een serverside imagemap ). En dan moet je dus de default actie al gaan cancellen.

Bovenstaande button kun je prima stylen als image en dan heb je die styling (de afbeelding) ook netjes in je CSS ipv in je html.

Als ik echter top:5px toevoeg, berekent hij die 5px opeens vanaf de top van de pagina in plaats van vanaf de top van de div.

Dan is de div waarin je wilt positioneren OF geen position:relative, OF hij is een stuk groter dan je denkt.

[ Voor 15% gewijzigd door Bosmonster op 25-11-2013 09:46 ]

[Devilly]

Bosmonster schreef op maandag 25 november 2013 @ 09:43:
Dan is de div waarin je wilt positioneren OF geen position:relative, OF hij is een stuk groter dan je denkt.

Of de display:table-row en later display:table-cell van de div waarin ik wilde positioneren gooide roet in het eten. Ervoor zorgen dat dat niet op de div zit waarin ik positioneer, heeft het probleem opgelost.

[Bosmonster]

position:relative werkt ook niet op een table-cell, dus das optie 1 dan

[Devilly]

Het kan wel werken. Je weet alleen niet of dat zo is. Firefox had er niets over te mekkeren en ik had hier nog geen kennis van.

[ Voor 6% gewijzigd door Devilly op 25-11-2013 12:58 ]

[incaz]

Da's inderdaad een hele irritante ja, daar ben ik ook al eens onzacht mee in aanraking gekomen.

[R4gnax]

Devilly schreef op maandag 25 november 2013 @ 12:58:
Het kan wel werken. Je weet alleen niet of dat zo is. Firefox had er niets over te mekkeren en ik had hier nog geen kennis van.

Nee. Het is niet een optioneel te implementeren gedrag; het is een ongedefinieerd gedrag.
Het is dus niet zo dat het een simpel geval van wel of niet werken is. Het is zo dat er letterlijk van alles gebeuren kan en mag als je position:relative combineert met tables. Dat kan dus bijv. ook een 'corrupte' rendering van de pagina inhouden waarbij content op compleet andere, verkeere en (op het eerste zicht) willekeurige plekken gaat verschijnen.

[Devilly]

Dat begreep ik. Wil je daarmee zeggen dat het niet kan werken? Daar zou ik het namelijk niet mee eens zijn.

[Bosmonster]

Voordat je iets kunt bestempelen als "het werkt", moet het gedrag gedefinieerd zijn. Want ik kan het feit dat relative op een table-element juist niet functioneert wel bestempelen als juist gedrag en dus "werkend"

Als er volgens de standaarden dus geen gedrag gedefinieerd is, kun je onmogelijk stellen dat het werkt, aangezien dat gebaseerd is op je persoonlijke interpretatie van wat het zou moeten doen.

[ Voor 67% gewijzigd door Bosmonster op 26-11-2013 10:28 ]

[Devilly]

Daar heb ik maar één reactie op: 1-0 voor jou!

[ Voor 3% gewijzigd door Devilly op 26-11-2013 12:07 ]

[Fontini]

Door div {position:relative;) te gebruiken maak je alle div's relatief. Misschien moet je wat specifieker te werk gaan (ik gebruik even dummy names en misschien niet supernette css =P).

HTML:

<div class="relative-div"> 
    <img src="a" class="button-left"></img> 
    <img src="b" class="button-right"></img> 
</div>

Cascading Stylesheet:

.relative-div {
  position:relative;
}

.relative-div img {
  position:absolute;
  top:5px;
}

.relative-div .button-left {
   left:5px;
}

.relative-div .button-right {
  right:5px;
}

Dit zou sowieso moeten werken. Van hieruit kun je verder troubleshooten/nettere code maken denk ik =).

[ Voor 3% gewijzigd door Fontini op 26-11-2013 16:44 . Reden: code tag bijgevoegd ]