zurück zur Startseite
  


Zurück XHTMLforum > (X)HTML und CSS > CSS
Seite neu laden Mouseover Bild Zentrieren

Antwort
 
LinkBack Themen-Optionen Ansicht
  #1 (permalink)  
Alt 13.07.2008, 10:53
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 13.07.2008
Beiträge: 3
superwasi befindet sich auf einem aufstrebenden Ast
Standard Mouseover Bild Zentrieren

Hallo zusammen.

Ich bin der neue hier. Ich komme aus dem Süden von Deutschland und mache eine Ausbildung als Informatiker. In CSS bin ich ein Anfänger.

Ich hoffe jemand von euch kann mir helfen.

Wie schaffe ich es ein Bild das ich mit CSS, mit einem Mouseover Effeckt vergrössere, zentriert auf dem Bildschirm auszugeben.

Hier erstmal mein Qelltext:

<html>

<head>

<style type="text/css">
a.info{
position:relative;
z-index:1;
color:#000;
text-decoration:none}

a.info:hover{z-index:2;}

a.info span{
display: none;
}

a.info:hover span{
display:block;
position:absolute;
background-image: url(http://www.s-wasi.de/bilder/EbayBilder/graka1_gr.jpg);
top:100px; left:200px;width:800px; height:600px;
border:5px solid #000;
}
</style>

</head>
<body>
<table align="center"><tr>
<td><h1>Mouseover effeckt!</h1></td>
<td><div id="menuImg_inner">
<a class=info href="#"><img src="http://www.s-wasi.de/bilder/EbayBilder/graka1_gr.jpg" width="252" border="0" alt="">
<span></span></a></div></td>
</tr></table>

</body>

</html>






Ich weiss, das ich mit top:100px; left:200px; die Position mauell bestimmen kann, aber ich möchte, dass das Bild generel in der Mitte des Bildschirms ist.

Danke für eure Antworten im voraus.

Geändert von superwasi (13.07.2008 um 11:05 Uhr)
Mit Zitat antworten
Sponsored Links
  #2 (permalink)  
Alt 13.07.2008, 16:55
Benutzerbild von aboleo
OperaRueles!
XHTMLforum-Mitglied
 
Registriert seit: 23.04.2008
Ort: Erlangen
Beiträge: 139
aboleo befindet sich auf einem aufstrebenden Ast
Standard

Was genau moechtest du denn zentriert haben?!
Hier geht nicht ganz genau hervor ob du nun das Bild oder deinen hover zentrieren willst.

Generell zentriert man normalerweise mit
Code:
margin:0 auto;
oder einfach auch nur auto.

Evtl. helfen dir auch die FAQ, in denen es beim Punkt 5 um die Thematik Vertikal zentrieren geht.

Da du deinen hover absolut positionieren musst, nimmst du margin fuer den hover und ziehst in in die gewuenschte Richtung.
Margin deshalb weil man sich nicht direkt am Nullpunkt orientieren will, was man mit den anderen Eigenschaften tun wuerde.

Bei evtl. Fehlinformation bitte berichtigen, ich lern ja gern dazu.

~leo
__________________
Ad pedem litterae
Mit Zitat antworten
Sponsored Links
  #3 (permalink)  
Alt 13.07.2008, 17:11
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 13.07.2008
Beiträge: 3
superwasi befindet sich auf einem aufstrebenden Ast
Standard Hallo leo

Danke für deine schnelle Antwort.

Ich möchte, dass das vergrösserte Bild (hover) auf dem Bildschirm zentriert dargestellt wird.

Könntest du mir eventuell ein Beispielcode zeigen wie ich das machen müsste.
Natürlich nur wenn es keine Mühe macht.

Danke im voraus.
Mit Zitat antworten
  #4 (permalink)  
Alt 13.07.2008, 19:06
Benutzerbild von aboleo
OperaRueles!
XHTMLforum-Mitglied
 
Registriert seit: 23.04.2008
Ort: Erlangen
Beiträge: 139
aboleo befindet sich auf einem aufstrebenden Ast
Standard

So weit ich weiss, wird dir nichts anderes als rechnen uebrig bleiben.

Quellcode bzw. ein Beispiel, wuerde sich auch eruebrigen oder?!
Aber hier mal trotzdem ein dirty-quickie:
Code:
<style type="text/css"> 
* {
  margin:0;
  padding:0;
}

#outer {
  margin:0 auto;
  width:800px;
  height:600px;
  border:1px solid red;
}
#menuImg_inner {
  margin:25% auto;
  width:250px;
  height:190px;
  border:1px solid blue;
}

a.info span; { 
  display:block;
  position:relative;
} 
  
a.info:hover span {
   position:absolute;
   background-image: url(http://www.s-wasi.de/bilder/EbayBilder/graka1_gr.jpg); 
   width:800px;
   height:600px;
   margin:-390px 0 0 -275px; 
}

img {
  border:none;
  display:block;
}

</style>

</head>
<body>

<h1>Mouseover effeckt!</h1>
<div id="outer">
  <div id="menuImg_inner">
    <a class=info href="#"><img src="http://www.s-wasi.de/bilder/EbayBilder/graka1_gr.jpg" width="252" height="189" alt=""><span></span></a>
  <!--end menuImg_inner--></div>
<!--end outer--></div>
Oder weiss jemand, wie das "automatisiert" werden koennte?!
Dann haette ich all die Jahre immer mehr gemacht als ueberhaupt notwenig
__________________
Ad pedem litterae
Mit Zitat antworten
  #5 (permalink)  
Alt 13.07.2008, 20:45
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 13.07.2008
Beiträge: 3
superwasi befindet sich auf einem aufstrebenden Ast
Standard Dankeschön

Alles klar dann muss ich halt rechnen.

Ich war mir nur nicht sicher ob es da was eleganteres gibt.

Danke für das Beispiel.

Ich wünsache dir noch nen schönen Abend.

Bye.
Mit Zitat antworten
Antwort

Themen-Optionen
Ansicht

Forumregeln
Es ist Ihnen nicht erlaubt, neue Themen zu verfassen.
Es ist Ihnen nicht erlaubt, auf Beiträge zu antworten.
Es ist Ihnen nicht erlaubt, Anhänge hochzuladen.
Es ist Ihnen nicht erlaubt, Ihre Beiträge zu bearbeiten.

BB-Code ist an.
Smileys sind an.
[IMG] Code ist an.
HTML-Code ist aus.
Trackbacks are an
Pingbacks are an
Refbacks are aus


Ähnliche Themen
Thema Autor Forum Antworten Letzter Beitrag
Mouseover -wie kann ich ein Bild verändern wenn ich mit der Maus über ein Wort fahre? hrhr87 (X)HTML 3 16.03.2010 11:47
bild zentrieren razz CSS 1 16.12.2009 18:22
Bild & Text vertikal zentrieren Flux CSS 6 23.08.2009 01:14
Bild in der Navigationsleiste zentrieren sumica CSS 8 19.06.2009 12:53
Bild vertikal zentrieren in Blockelement in IE nur m. TABLE AndreasB CSS 11 13.03.2006 18:05


Alle Zeitangaben in WEZ +2. Es ist jetzt 15:38 Uhr.