[CSS] Image overlay zonder margin

[MG-studios]

Ik zit met een css-probleempje dat ik na lang proberen, helaas nog steeds niet heb opgelost.
Om jullie wat inzicht te geven in de situatie, hieronder wat uitleg:

Het is een stukje van een gallery, en in dit geval gaat het om de weergave van de thumbnails. Deze worden geplaatst d.m.v. PHP:

PHP: thumb.php

<a href="javascript:jah('<?php $mg2->output(link) ?>','columns');"><img src="<?php $mg2->output(thumbfile) ?>" alt="thumb" title="Bekijk in volledig formaat..." class="thumb" /><?php include("thumbcomment.php"); ?></a>

Als er commentaar op een bepaalde afbeelding is toegevoegd komt de file thumbcomment.php in actie:

PHP: thumbcomment.php

<?php 
$filename = "pictures/" . $result[$i][1] . ".comment"; 
     $count = 0; 
if (is_file($filename)){ 
      $fd = fopen($filename,"r"); 
      $file = file($filename); 
      fclose($fd); 
  
     $count = count($file); 
    } 
if($count > 0) echo '<img src="images/comment.png" class="comment">'; 
?>

Het stukje css voor de bovenstaande onderdelen ziet er als volgt uit:

Cascading Stylesheet: style.css

DIV#gallery-thumbs .comment {
 BACKGROUND: transparent; MARGIN: 0px 2px 35px -55px; WIDTH: 66px; HEIGHT: 66px; PADDING-RIGHT: 4px;
}
DIV#gallery-thumbs .thumb {
 BACKGROUND: #000000; MARGIN: 0px 0px 0px 0px; WIDTH: 126px; HEIGHT: 95px; PADDING-RIGHT: 1px; PADDING-LEFT: 1px; PADDING-BOTTOM: 1px; MARGIN: 0px; PADDING-TOP: 1px;
}
DIV#gallery-thumbs .thumb:hover {
 BACKGROUND: #FFFFFF; MARGIN: 0px 0px 0px 0px; WIDTH: 126px; HEIGHT: 95px; PADDING-RIGHT: 1px; PADDING-LEFT: 1px; PADDING-BOTTOM: 1px; MARGIN: 0px; PADDING-TOP: 1px
}

Hoe ziet dat er dan precies uit?



Hé dat gaat niet helemaal zoals de bedoeling was. Het comment-plaatje zorgt ervoor dat de andere thumbnails worden opgeschoven aan zowel de rechter als aan de bovenkant. Opzich logisch, maargoed, hoe kan ik het voorkomen? Hoe moet het er dan wel uitzien?



Zo dus. De afmetingen van de comment-afbeelding zouden dus eigenlijk moet worden genegeerd en het plaatje zou inprincipe moeten 'zweven' boven de rest van de content. Maar dat is ietswat mij nog niet gelukt is.

Ik denk dat de case zo wel een beetje duidelijk is en ik hoop dat er mensen zijn die ervaring hebben met iets dergelijks! Zodat ik met jullie tips de boel wél op kan lossen

[Verwijderd]

Je moet even klooien met het element 'position'. Dan krijg de note een vaste plek op het plaatje. Ik weet niet precies welke je moet hebben, denk:

}
position: relative;
right: 0px;
top: 0px;
z-index: 1000;
}

Right en Top is om de layer te positioneren. Z-index om hem boven de thumbnail te plaatsen, alhoewel deze niet eens per sé nodig is. Als position: relative niet werkt moet je even een andere proberen.

Als alles goed gaat zal je div op een vaste positie boven de thumbnail zweven.

[MG-studios]

Toch blijf ik rechts een 'margin' houden. (helaas!) Ongeveer ter grootte van de comment-afbeelding.

CSS:

Cascading Stylesheet: style.css

DIV#gallery-thumbs .comment {
 BACKGROUND: transparent; POSITION: relative; RIGHT: 50px; BOTTOM: 36px;
}

Resultaat:


Het lost iig wel het probleem van de bovenste 'margin' op...

[ Voor 8% gewijzigd door MG-studios op 12-06-2007 18:10 ]

[Verwijderd]

DIV#gallery-thumbs .comment {
BACKGROUND: transparent; POSITION: relative; RIGHT: 50px; BOTTOM: 36px margin-right: -50px;
}

werkt ie zo?

[dB90]

als je gewoon die right:50px; weg laat?

[MG-studios]

Verwijderd schreef op dinsdag 12 juni 2007 @ 18:31:
DIV#gallery-thumbs .comment {
BACKGROUND: transparent; POSITION: relative; RIGHT: 50px; BOTTOM: 36px margin-right: -50px;
}

werkt ie zo?

Nope. Maar margin-right: -66px (afmeting van de afbeelding) wel!
Heel erg bedankt voor de hulp!

Problem solved

[ Voor 7% gewijzigd door MG-studios op 12-06-2007 21:20 ]

[crisp]

ik zou hier gewoon absolute positioning voor gebruiken ipv geklooi met negatieve margins en relatieve positionering...

[MG-studios]

crisp schreef op dinsdag 12 juni 2007 @ 21:15:
ik zou hier gewoon absolute positioning voor gebruiken ipv geklooi met negatieve margins en relatieve positionering...

Absolute positioning blijft zich maar aan de body koppelen, ook met een relative container...?

[crisp]

MG-studios schreef op dinsdag 12 juni 2007 @ 21:19:
[...]


Absolute positioning blijft zich maar aan de body koppelen, ook met een relative container...?

Dat zou niet moeten, heb je daar een voorbeeld van (gegenereerde HTML+CSS)?

[MG-studios]

crisp schreef op dinsdag 12 juni 2007 @ 21:24:
[...]

Dat zou niet moeten, heb je daar een voorbeeld van (gegenereerde HTML+CSS)?

Heb helaas geen voorbeeld online. Maar als je de CSS in startpost bekijkt:
Dan zou 'thumb' de container zijn (relatief) en 'comment' absoluut gepositioneerd.
Gevolg is dat 'comment' alsnog absoluut word gepositioneerd aan de body...?

[crisp]

Ik zie geen position:relative staan bij .thumb hoor? en is .comment wel een child van .thumb?

[MG-studios]

Nee klopt. Maar dat was het geval toen ik de absolute positioning probeerde.
In principe valt .comment binnen de a href met de class .thumb. Telt dat als child?

[crisp]

MG-studios schreef op dinsdag 12 juni 2007 @ 21:40:
Nee klopt. Maar dat was het geval toen ik de absolute positioning probeerde.
In principe valt .comment binnen de a href met de class .thumb. Telt dat als child?

Je A-element heeft geen class, de .comment is een sibling van .thumb maar geen child

[MG-studios]

crisp schreef op dinsdag 12 juni 2007 @ 22:11:
[...]

Je A-element heeft geen class, de .comment is een sibling van .thumb maar geen child

Hmm.. nu zie ik het inderdaad Maar als het A-element wel een class zou hebben die relatief gepositioneerd is zou .comment dus wel een child zijn en zou het absoluut positioneren wel moeten werken als ik het goed begrijp. Stom. Gewoon niet goed gekeken. Zal het zo even proberen.

EDIT: dat werkt ook, maar... dan komt de volgende thumbnail over de comment-afbeelding.

[ Voor 10% gewijzigd door MG-studios op 12-06-2007 23:07 ]

[crisp]

z-index gebruiken

[MG-studios]

crisp schreef op woensdag 13 juni 2007 @ 00:51:
z-index gebruiken

Als ik .comment een z-index van bijv. 1000 geef blijft de naastliggende thumbnail hem overlappen?

[Cavorka]

z-index dynamisch laten aflopen?

Zo heb ik ook iets gedaan op mijn website zodat het plaatje links iets over het plaatje er rechts van heeft staan..