✔ Probleme mit Grafiklinks

Status
Nicht offen für weitere Antworten.
R

Radagast78

Grünschnabel
Hallo,

soll für die Firma eines Freundes eine Webseite erstellen. Ich komm dabei mit ein paar Problemen, trotz 100fachen suchen und versuchen nicht zurecht.

Es handelt sich um folgende Seite:
http://www.moser-lueftung.at/neu/

Benutzt man den Firefox, wird der erste Grafiklink richtig angezeigt. Mit grauem Rahmen, beim drüberfahren wird der Rahmen schwarz.
Die anderen sehen nicht richtig aus

1. Frage: Wieso passen die anderen Grafiklinks bei Firefox nicht?

Beim IE7 wackelt das Bild beim drüberfahren

2. Frage: Wieso verändert sich die Stärke des Rahmens?

Beim IE7 wird der untere Teil des Himmels nicht angezeigt habe bei einem div margin:-50px auto 0px; angegeben. (bei firefox ist es richtig)

3. Frage: Wieso stellt der IE den Himmel nicht richtig dar?


CSS-Code:
Code: 
body 
{
 font-family: Arial, Verdana, Helvetica, sans-serif;
 font-size: 16px;
 color: #000000;
/* font-weight: bold;*/
 background-color:#DCE1E7;
 text-align:justify;
 line-height:20px;
 margin:0px;
 padding:0px;
}

/* Layer */
#main {
width:760px; 
margin:0px auto;
border-width: 1px 2px 2px 1px; 
border-color: #BBBCC0;
border-style: solid;
}


#box {

width:760px; 
padding:4px 0px;
margin:-50px auto 0px;
background-color: #FFFFFF;
text-align:center;
}



a.menu:link, a.menu:visited
img { 
border:2px solid #CCCCCC;}
a.menu:active, a.menu:hover 
img { 
border:2px solid #000000;
}


HTML-Code:
Code: 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
     "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de" lang="de">

<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Text</title>
</head>

<body style="text-align:center;">


 <div id="main" style="text-align:justify;">
		<img src="Images/Moser-Lueftung-Top2.jpg" alt="text" /><br />



<!-- Inhalt -->

		<div id="box">
			<a href="Tierstall.php" class="menu"><img src="/neu/Images/Navigation/Tierstall.jpg" border="0" alt="Tierstall-Lüftung" /></a>
			<a href="Wohnraum.php" class="menu"><img src="/neu/Images/Navigation/Wohnraum.jpg" border="0" alt="Tierstall-Lüftung" /></a>&nbsp;
			<a href="Friseur.php" class="menu"><img src="/neu/Images/Navigation/Friseur.jpg" border="0" alt="Tierstall-Lüftung" /></a>&nbsp;
			<a href="Gastronomie.php" class="menu"><img src="/neu/Images/Navigation/Gastronomie.jpg" border="0" alt="Tierstall-Lüftung" /></a>&nbsp;
		</div>
			<p class="abstand">&nbsp;</p><p class="abstand">&nbsp;</p><p class="abstand">&nbsp;</p><p class="abstand">&nbsp;</p>
				<h1>Text</h1>
				<p class="abstand">&nbsp;</p>
				<p class="abstand">&nbsp;</p>
				<p class="abstand">Text
				</p>
		</div>

</body>

</html>

Vielen Dank im Vorraus für Eure Antworten!
 
Die Images "springen", als ob sie keinen Border hätten. Sie bekommen Border nur, wenn man mit der Maus drüber fährt. Mach mal den Border rot und wenn :hover, dann schwarz. Nur zu Testzwecken.
 
@Andron

Danke für die Antwort.
Hab ich probiert.
Sieht so aus als ob nicht der schwarze den roten ersetzt, sondern dieser sich innerhalb des roten schiebt.:confused:
 
Da sieht man das schon viel besser.
Der rote Border sehe ich nur im unteren Berech des Images, so gewollt?
Die Images verschieben sich, weil sie Platz für den schwarzen Rahmen freistellen müssen. Somit entsteht das "Wakeln".

Das wird dir bestimmt helfen:

Erläuterung:

Pseudoklassen werden zentral in einem style-Bereich notiert. Die hier beschriebenen Pseudoklassen gelten teilweise nur für das a-Element in HTML, daher wird vor dem Doppelpunkt das a notiert. In den Formatdefinitionen für die einzelnen Pseudoklassen können Sie beliebige, geeignete CSS-Eigenschaften zuweisen. Die folgenden Pseudoklassen bedeuten:

:link = für Verweise zu noch nicht besuchten Seiten
:visited = für Verweise zu bereits besuchten Seiten
:focus = für Elemente, die den Fokus erhalten, z.B. durch "Durchsteppen" mit der Tabulator-Taste (CSS 2.0)
:hover = für Elemente, während der Anwender mit der Maus darüber fährt (CSS 2.0)
:active = für gerade angeklickte Elemente
Beachten Sie:

Um die meist gewünschte Darstellung dieser Pseudoklassen zu erreichen, müssen Sie bei der Notierung die Reihenfolge des Beispiels einhalten.

Netscape 4.x und der Internet Explorer 3.0 interpretieren noch nicht alle Angaben. Insbesondere reagiert Netscape 4.x noch nicht auf die Pseudoklasse a:hover. Der Internet Explorer interpretiert :focus als :active. Opera ignoriert zunächst :focus und wendet die für diesen Zustand definierten Eigenschaften erst bei nachfolgendem :hover zusätzlich an.

Die Pseudoklassen :focus, :hover und :active gelten auch für andere Elemente als Verweise. Wenn Sie beispielsweise für h1:active CSS-Eigenschaften definieren und dann mit der Maus auf eine h1-Überschrift klicken, nimmt diese, solange die Maustaste gedrückt wird die definierten Eigenschaften an. Im Internet Explorer bis einschließlich Version 6 funktioniert keine dieser allgemeingültigen Pseudoklassen und in Version 7 lediglich :hover.
Zum Vergrößern anklicken....
 
ich habe jetzt folgendes geändert:

Code: 
a.menu:active, a.menu:hover 
img { 
border:none; // diese Zeile neu
border:2px solid #000000;
}

hat funktioniert, aber nur beim ersten Bild.
Hab testweise mal das erste Bild 2 mal verwendet.
Beide gehen normal, die anderen nicht!:confused:
 
Hi,

setz mal dieses Stylesheet:

Code: 
/* Die Hyperlinks im Menü */

#box a.menu:link img, #box a.menu:visited img {
border:2px solid #CCCCCC;
}

#box a.menu:hover img, #box a.menu:active img {
border:2px solid #000000;
}
anstelle von diesem hier ein:

Code: 
a.menu:link, a.menu:visited
img { 
border:2px solid #CCCCCC;}
a.menu:active, a.menu:hover 
img { 
border:2px solid #000000;
}
 
Ok, habe es herausgefunden.
Geh im Firefox in Debug-Modus (klick rechts unten auf das grüne Häckchen).
Dann durch alle Elemente bis zum <a>-Element. Wenn du nur über das <a>-Element mit der Maus fährts, siehst du die Grenzen von dem Element.

Sehe Bild im Anhang

jetzt läuft's, aber nicht unter IE6 :)

Du könntest das auch mit JavaScript machen, dann würde es auch unter IE gehen.
 

Anhänge

  • Unbenannt.JPG
    Unbenannt.JPG
    57,9 KB · Aufrufe: 13
Nächster Vorschlag, damit es auch im IE6 (ohne JS) funktioniert:

Code: 
<div id="box" class="clearfix">
     <ul>
         <li><a href="Tierstall.php" class="menu"><img src="http://www.moser-lueftung.at/neu/Images/Navigation/Tierstall.jpg" border="0" alt="Tierstall-Lüftung" /></a></li>
         <li><a href="Wohnraum.php" class="menu"><img src="http://www.moser-lueftung.at/neu/Images/Navigation/Wohnraum.jpg" border="0" alt="Tierstall-Lüftung" /></a></li>
         <li><a href="Friseur.php" class="menu"><img src="http://www.moser-lueftung.at/neu/Images/Navigation/Friseur.jpg" border="0" alt="Tierstall-Lüftung" /></a></li>
         <li><a href="Gastronomie.php" class="menu"><img src="http://www.moser-lueftung.at/neu/Images/Navigation/Gastronomie.jpg" border="0" alt="Tierstall-Lüftung" /></a></li>
     </ul>
</div>
Code: 
#box {
width:760px;
padding:4px 0px;
margin:0 auto 0px;
background-color: #FFFFFF;
text-align:center;
}

#box ul {
list-style:none;
margin:0;
padding:0;
width:590px;
margin:0 auto;
}

#box li {
float:left;
margin:0 2px;
}

#box a img {  border:none; }

/* Die Hyperlinks im Menü */

#box a.menu:link, #box a.menu:visited {
float:left;
border:2px solid #CCCCCC;
}

#box a.menu:hover, #box a.menu:active {
border:2px solid #000000;
}

.clearfix:after {
    content: ".";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden;
}

.clearfix {display: inline-block;}

/* Hides from IE-mac \*/
* html .clearfix {height: 1%;}
.clearfix {display: block;}
/* End hide from IE-mac */
 
Status
Nicht offen für weitere Antworten.

Neue Beiträge

Zurück