display:none / display:block
Johannes
- css
Hallo, kann mir bitte jemand sagen warum folgender Code nur in Mozilla ordnungsgemäß funktionert, jedoch im IE (5.5 und 6.0) nicht.
Es sollte eigentlich nur der Text eingeblendet werden.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html lang="de">
<head>
<title>Fertigung</title>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
<style type="text/css">
body {
background-color: #CCCCCC;
color: #808080;
font-size: 1.4em;
font-family: verdana, arial, helvetica, sans-serif;
text-align: left;
}
a {
border-style: none;
text-decoration: none;
display: block;
}
a img {
height: 120px;
border-width: 1px;
border-color: black;
}
a:hover img{
border-color: #808080;
}
a span {
display: none;
}
a:hover span {
position: fixed;
top: 50%;
left: 60%;
display: block;
}
</style>
</head>
<body>
<li>
<a href="#1" style="position: absolute; top: 15%; left: 35%; ">
<img src="images/bend1.jpg">
<span>Kantanlagen</span>
</a>
</li>
<li>
<a href="#1" style="position: absolute; top: 40%; left: 20%;">
<img src="images/laser1.jpg">
<span>Laser</span>
</a>
</li>
<li>
<a href="#1" style="position: absolute; top: 65%; left: 35%;">
<img src="images/weld1.jpg">
<span>Schweißanlagen</span>
</a>
</li>
</body>
</html>
mfg Johannes
Hi Johannes!
Hallo, kann mir bitte jemand sagen warum folgender Code nur in Mozilla ordnungsgemäß funktionert, jedoch im IE (5.5 und 6.0) nicht.
http://de.selfhtml.org/css/eigenschaften/positionierung.htm#position:
"Die Angabe fixed wird vom Internet Explorer für Windows nicht unterstützt [...]"
MfG H☼psel
Wenn ich probeweise anstelle von fixed absolute schreibe geht es trotzdem noch nicht.
Welche Möglichkeit gibt es dann in meinem Fall den Text absolut zum body auszurichten?
mfg Johannes
Hi,
Wenn ich probeweise anstelle von fixed absolute schreibe geht es trotzdem noch nicht.
das liegt daran, daß der IE die Seite nur dann neu rendert, wenn auch eine Änderung für a:hover erforderlich wird.
freundliche Grüße
Ingo
Ich hab jetzt alle temorären Internetdatein gelöscht und es dann nochmal versucht, funktioniert trotzdem noch nicht. Hab so gar Probeweise noch was im a:hover span verändert, hilft aber aucht nichts
Ich dreh bald durch.
mfg Johannes
Hallo Johannes.
Ich hab jetzt alle temorären Internetdatein gelöscht und es dann nochmal versucht, funktioniert trotzdem noch nicht. Hab so gar Probeweise noch was im a:hover span verändert, hilft aber aucht nichts
Einmal abgesehen davon, dass dieser Thread hier eigentlich überflüssig ist, solltest du Ingos Rat befolgen.
Du muss lediglich irgend eine überflüssige Angabe für a:hover machen, die optisch keinerlei Auswirkung hat, den IE aber zum Neurendern bewegt.
Beispiel:
a:hover {
border-width:0;
}
Diese Angabe ist dank der folgenden Angabe im Grunde nutzlos, genügt für den IE aber:
a {
border-style: none;
/* … */
}
Einen schönen Montag noch.
Gruß, Ashura
Jetzt verstehe ich was ihr gemeint habt, ich hab nur was in a:hover span verändert, das war natürlich falsch. Gilt das mit der Änderung in a:hover nur wenn man ein in ebenen unter a:hover ewas verändert, oder muß man das auch zu anderen Zeitpunkten machen.
Das letzte Problem das ich jetzt noch habe ist wie ich den Text für alle Bilder wieder auf der selben Stelle positionieren kann, mit absolute wird der Text ja jetzt relativ zum Link gesetzt, der Link befindet sich aber bei jedem Text ja wo anders. Wie macht man das jetzt?
mfg Johannes
Hi,
mit absolute wird der Text ja jetzt relativ zum Link gesetzt,
nein. Die absolute Positionierung richtet sich nach dem innersten Vorfahrenelement, welches eine von static unterschiedliche position-Angabe besitzt, bei Nichtvorhandensein eines solchen nach dem Viewport.
Cheatah
Ich versteh da so einiges nicht mehr ganz:
Ich versuch gerade die Bilder mit margin-left und margin-top zu positionieren. Da die verwendete Seite in ein Frame soll möchte ich sie gerne so machen das sie einfach skalierbar ist, also die Positionsangaben irgendwie relativ zur größe des sichtbaren Bereich.
Da dachte ich mir dann ich gebe bei margin-top einfach mal 10% an, nur ist mir jetzt nicht so ganz klar von was genau ich da 10% genommen habe. Desweiteren wenn ich das Fenster verkleinere bleibt das Bild trotzdem mit selben abstand nach oben stehen.
Beim horizontalen ausrichten funktioniert alles wunderbar, da beziehen sich die Prozentangaben scheinbar auf die Breite des Fensters.
Als kleine ergänzung wollte ich auch noch nachfragen wie man den Text den ich beim überfahren der Bilder einblende wirklich genau in die Mitte stellen kann. Derzeit mach ich es ja einfach mit position:absolute; top:50%, nur ist dann ja der obere Rand der Schrift genau in der Mitte, aber ich hätte lieber die Mitte des Textes genau in der Mitte.
Vielleicht weiß jemand guten Rat für mich
mfg Johannes
Hi,
Ich versuch gerade die Bilder mit margin-left und margin-top zu positionieren. Da die verwendete Seite in ein Frame soll möchte ich sie gerne so machen das sie einfach skalierbar ist, also die Positionsangaben irgendwie relativ zur größe des sichtbaren Bereich.
Da dachte ich mir dann ich gebe bei margin-top einfach mal 10% an, nur ist mir jetzt nicht so ganz klar von was genau ich da 10% genommen habe.
Ein Blick in die Tabelle http://www.w3.org/TR/REC-CSS2/propidx.html zeigt Dir, worauf sich Prozentwerte bei den verschiedenen Eigenschaften beziehen.
Als kleine ergänzung wollte ich auch noch nachfragen wie man den Text den ich beim überfahren der Bilder einblende wirklich genau in die Mitte stellen kann. Derzeit mach ich es ja einfach mit position:absolute; top:50%, nur ist dann ja der obere Rand der Schrift genau in der Mitte, aber ich hätte lieber die Mitte des Textes genau in der Mitte.
Ein negativer Margin-top hilft.
cu,
Andreas
Hi,
ich hab nur was in a:hover span verändert, das war natürlich falsch.
nein, das war nicht falsch - nur braucht der IE halt einen für ihn verständlichen Grund, um die Seite neu zu rendern. Das liegt vermutlich daran, daß er :hover nur auf a-Alemente mit href-Attribut anwenden kann und er Nachfahren-Elemente deshalb auch nur bei einer Änderung des Links berücksichtigt.
Das letzte Problem das ich jetzt noch habe ist wie ich den Text für alle Bilder wieder auf der selben Stelle positionieren kann, mit absolute wird der Text ja jetzt relativ zum Link gesetzt, der Link befindet sich aber bei jedem Text ja wo anders. Wie macht man das jetzt?
Du mußt nur wissen, daß sich absolute Positionierung an dem Vorfahren-Element orientiert, das nicht static positioniert ist.
freundliche Grüße
Ingo
Hallo Johannes.
Gilt das mit der Änderung in a:hover nur wenn man ein in ebenen unter a:hover ewas verändert, oder muß man das auch zu anderen Zeitpunkten machen.
Es fällt mir schwer, diese Frage (?) zu verstehen.
Im Grunde genügt aber die einmalige Notierung der sinnfreien Angabe für den IE. Wenn diese natürlich einen gewünschten Effekt überschreibt, musst du hier natürlich entgegen wirken, in dem du entweder den gewünschten Effekt nach der Sinnlos-Regel notierst, oder eine andere Eigenschaft für die Sinnlos-Regel wählst.
Das letzte Problem das ich jetzt noch habe ist wie ich den Text für alle Bilder wieder auf der selben Stelle positionieren kann, mit absolute wird der Text ja jetzt relativ zum Link gesetzt,
Natürlich, schließlich hast du ja bereits diesen aus dem Dokumentenfluss genommen und seine absolut positionierten Kindelemente orientieren sich nun daran. Warum hast du die Links eigentlich nicht per margin positioniert?
Einen schönen Montag noch.
Gruß, Ashura