Beiträge von DummerTroll

Gerade ist mir was komisches passiert...

Im FireFox schauts so aus:

und in Chrome so:

Was kann da der Fehler sein?

So ich habs nochmal geupdated. http://christophkreibich.de/sandbox/0007/V2/
Problem ist jetzt:
Wie kann ich alle Kreise zentrieren, sprich so wie wenn ich eine Text mit text-align:center positioniere?

Ich versteh nicht ganz was du meinst...

Ich habe etwas weiter versucht. Leider klappt es nur bei ein paar wenigen Kreisen

Ah absolute ist perfekt Scheint jetzt erstmal zu funktionieren. Dankeschön

Nächstes Problem:
Mein schwarzer Kreis im Hintergrund gibt jetzt dem eigentlichen Bild einen Rahmen. Den möchte ich aber nicht... Größe verändern hilft leider nicht und Positionierung hat mich auch noch nicht zum richtigen Ergebnis gebracht.

Edit 2:
Mit mehreren Bildern funktioniert es leider nicht mehr Ich hab die Datei nochmals aktualisiert.

Habe die Seite mal kurz hochgeladen: http://christophkreibich.de/sandbox/0007/V2/

Eigentlich nutze ich HTML 5...

Css ist in einer extra Datei.
Leider haben sich die Beiden Spans nicht verschoben und hängen immer noch wie im Bild

Hallo,
ich habe ein kleines Problem. Ich lasse mir ein Bild in einem Kreis ausgeben, mit border-radius gelöst. Jetzt möchte ich, dass wenn man über das Bild fährt, das Bild transparenter wird und dass sich dann ein anderes Element eingefadet wird. Es sollen also 2 Elemente übereinander liegen und je nach dem eins eingeblendet bzw. ausgeblendet werden.

Mein Problem ist die Positionierung. Der Container der ausgeblendet werden soll, liegt immer drüber.

Code sieht wie folgt aus:

HTML:

<a href="detail/anja.php">                            
<div class="image-container">                                
<span class="image-info">Anja</span>                                
<span class="image-wrap " style="position:relative; display:inline-block; background:url(bilder/gallery-1/0.jpg) no-repeat center center; width: 17em; height: 17em;">                                    
<img class="circle" src="bilder/gallery-1/0.jpg" style="opacity: 0;">                                
</span>                            
</div>                        
</a>

Jquery:

$(document).ready(function(){              
$(".circle").load(function() {
                    $(this).wrap(function(){
                          return '<span class="image-wrap ' + $(this).attr('class') + '" style="position:relative; display:inline-block; background:url(' + $(this).attr('src') + ') no-repeat center top; width: ' + $(this).width() + 'px; height: ' + $(this).height() + 'px;" />';
                    });
                    $(this).css("opacity","0");
              });

CSS:

.circle {    width:17em;
    height:17em;
}




.image-wrap {
    -webkit-border-radius: 50em;
    -moz-border-radius: 50em;
    border-radius: 50em;
}




.image-container {
    width:17em;
    height:17em;
}




.image-info {
    position:relative;
    background:black no-repeat center center;
    width:17em;
    height:17em;
    -webkit-border-radius: 50em;
    -moz-border-radius: 50em;
    border-radius: 50em;
    opacity:1;    
}




.circle-list {
    text-align:center;
}




.circle-list li {
    display:inline;
    line-height:5em;
    margin-left:1em;
    margin-right:1em;
}

Hoffentlich kann mir jemand helfen