Pop up grafiks
wannabe
- css
Moin Alle,
erstmal, Ich bin einen Kaugummitechniker und meinen Deutsch ist nicht d. beste.
Hintergrund:
Ich bauen einen Website indem keinen JAVA verwendet werde.
Statdesen, habe Ich CSS stark benutzt.
Nächste Aufgabe, einen pop-up für grafiks zu erstellen. Pop-up soll erscheinen in ein andere Stelle bei Mouse-over an einen Text.
Ist Situation:
Ich habe hier einen gute CSS Script gesehen, geändert und verwendet um einen "bewegliche" Nav-Leiste z realizieren. Funktioniert gut.
/* CSS Script für Nav*/
/* ============== */
div#Rahmen {width: 1020px; height: 20px; padding: 0px; border: 0px solid #5B5B5B; background-color: #CCFF66; }
* html div#Rahmen { /* Corrections for IE 5.x */ width: 1020px; w\idth: 1020px; }
div#Rahmen div { clear: center; }
ul#Navigation { margin: 0; padding: 0; text-align: center; }
ul#Navigation li { list-style: none; float: left; width: 204px; position: relative; margin: 0px; padding: 0px; }
* html ul#Navigation li { /* Corrections for IE 5 and 6 */ margin-bottom: -5px; }
*:first-child+html ul#Navigation li { /* Corrections for IE 7 */ margin-bottom: 0px; }
ul#Navigation li ul { margin: 0; padding: 0; position: absolute; top: 1px; left: 1px; }
* html ul#Navigation li ul { /* Corrections for IE 5.x */ left: 1px; lef\t: 1px; }
ul#Navigation li ul li { float: none; display: block; margin-bottom: 1px; }
ul#Navigation a, ul#Navigation span { display: block; padding: 1px 1px; text-decoration: none; font-weight: bold; border: 1px solid #5B5B5B; border-left-color: #BBBBBB; border-top-color: #BBBBBB; color: black; background-color: #CCFF66; }
* html ul#Navigation a, * html ul#Navigation span { /* Nesseccary only for IE */ width: 100%; w\idth: 6em; }
ul#Navigation a:hover, ul#Navigation span, li a#aktuell { border-color: #BBBBBB; border-left-color: #5B5B5B; border-top-color: #5B5B5B; color: #E7002A; background-color: #CCFF66; }
li a#aktuell { /* aktuelle Rubrik kennzeichnen */ color: #E7002A; background-color: #CCFF66; }
ul#Navigation li ul span { /* Actual 2nd level highlights */ background-color: #E7002A; }
ul#Navigation li>ul { display: none; top: 1.8em; }
ul#Navigation li:hover>ul, ul#Navigation li>a#aktuell+ul { display: block; }
Workaround for IE 7
*:first-child+html ul#Navigation ul { background-color:clear; padding-bottom:0px; }
/* HTML script */
/* =========== */
<div id="Rahmen" align="center">
<ul id="Navigation">
<li>
<a href="#.html">page1</a>
</li>
<ul>
<li><a href="#.html">page2</a></li>
<li><a href="#.html">page3</a></li>
</ul>
<li><a href="#.html">page4</a></li>
<li><a href="#.html">page5</a></li>
<li><a href="#.html">page6</a>
<ul>
<li><a href="#.html">page7</a></li>
<li><a href="#.html">üage8</a></li>
</ul>
</li>
<li><a href="#.html">page9</a></li>
<ul><li><a href="#.html">page10</a></li></ul></ul><div></div></div>
In diese Script spurre ich d. Antwort. Ich vermüte das es in diese Zeilen legt.
/* Vermütung */
/* ========= */
ul#Navigation li ul span { /* Actual 2nd level highlights */ background-color: #E7002A; }
ul#Navigation li>ul { display: none; top: 1.8em; }
ul#Navigation li:hover>ul, ul#Navigation li>a#aktuell+ul { display: block; }
Ich werde mich freuen für einen "solution".
Hallo wannabe!
erstmal, Ich bin einen Kaugummitechniker
Ist es jetzt eine hübsche Umschreibung für einen Techniker, der mal an einem Ende der Firma gebraucht wird und gleichzeitig am anderen Ende? ;)
Oder ist Dein Job wirklich die Erstellung von Kaumasse bzw. Überwachung der Produktion o.Ä.?
und meinen Deutsch ist nicht d. beste.
Keine Sorge, es gibt hier getrennt schreibende Türken, Passwort vergessende lettische Frauen und immer wieder mir und mich verwechselnde Franzosen ;)
Ich bauen einen Website indem keinen JAVA verwendet werde.
Du meinst sicher: »Kein JavaScript« (Java verhält sich zu JavaScript in etwa wie Pferd zu Pferdeäpfel [C] by ich-weiß-nicht-mehr).
Nächste Aufgabe, einen pop-up für grafiks zu erstellen. Pop-up soll erscheinen in ein andere Stelle bei Mouse-over an einen Text.
Suchst Du vielleicht so etwas wie die Infobox?
Ich habe hier einen gute CSS Script gesehen, geändert und verwendet um einen "bewegliche" Nav-Leiste z realizieren. Funktioniert gut.
Ich werde mich freuen für einen "solution".
Was funktioniert? Und _wenn_ es funktioniert, wozu brauchst Du eine Lösung?
Ich habe Dein Code etwas übersichtlicher eingerückt:
<div id="Rahmen" align="center">
<ul id="Navigation">
<li><a href="#.html">page1</a></li>
<ul>
<li><a href="#.html">page2</a></li>
<li><a href="#.html">page3</a></li>
</ul>
<li><a href="#.html">page4</a></li>
<li><a href="#.html">page5</a></li>
<li><a href="#.html">page6</a>
<ul>
<li><a href="#.html">page7</a></li>
<li><a href="#.html">üage8</a></li>
</ul>
</li>
<li><a href="#.html">page9</a></li>
<ul>
<li><a href="#.html">page10</a></li>
</ul><
/ul>
<div>
</div>
</div>
Wenn es eine verschachtelte Liste werden soll, ist sie, so wie sie hier aussieht, fehlerhaft.
Viele Grüße aus Frankfurt/Main,
Patrick
Hi Patrick,
stimmt, Fehler sind behoben. Sogar d. unnotwendigen DIVs.
Ich bin noch am recherchieren bei:
http://motuweb.com/techstuff/2x_css_rollover_demo.htm
für einen Antwort.
"Kaugummitechniker", Muttersprache ist Englisch.
Korrekt
Du meinst sicher: »Kein JavaScript« (Java verhält sich zu JavaScript in etwa wie Pferd zu Pferdeäpfel [C] by ich-weiß-nicht-mehr).
Gruß
wannabe / Mark
Hallo wannabe!
erstmal, Ich bin einen Kaugummitechniker
Ist es jetzt eine hübsche Umschreibung für einen Techniker, der mal an einem Ende der Firma gebraucht wird und gleichzeitig am anderen Ende? ;)
Oder ist Dein Job wirklich die Erstellung von Kaumasse bzw. Überwachung der Produktion o.Ä.?
und meinen Deutsch ist nicht d. beste.
Keine Sorge, es gibt hier getrennt schreibende Türken, Passwort vergessende lettische Frauen und immer wieder mir und mich verwechselnde Franzosen ;)
Ich bauen einen Website indem keinen JAVA verwendet werde.
Du meinst sicher: »Kein JavaScript« (Java verhält sich zu JavaScript in etwa wie Pferd zu Pferdeäpfel [C] by ich-weiß-nicht-mehr).
Nächste Aufgabe, einen pop-up für grafiks zu erstellen. Pop-up soll erscheinen in ein andere Stelle bei Mouse-over an einen Text.
Suchst Du vielleicht so etwas wie die Infobox?
Ich habe hier einen gute CSS Script gesehen, geändert und verwendet um einen "bewegliche" Nav-Leiste z realizieren. Funktioniert gut.
Ich werde mich freuen für einen "solution".Was funktioniert? Und _wenn_ es funktioniert, wozu brauchst Du eine Lösung?
Ich habe Dein Code etwas übersichtlicher eingerückt:
<div id="Rahmen" align="center">
<ul id="Navigation">
<li><a href="#.html">page1</a></li>
<ul>
<li><a href="#.html">page2</a></li>
<li><a href="#.html">page3</a></li>
</ul>
<li><a href="#.html">page4</a></li>
<li><a href="#.html">page5</a></li>
<li><a href="#.html">page6</a>
<ul>
<li><a href="#.html">page7</a></li>
<li><a href="#.html">üage8</a></li>
</ul>
</li>
<li><a href="#.html">page9</a></li>
<ul>
<li><a href="#.html">page10</a></li>
</ul><
/ul>
<div>
</div>
</div>
>
>
> Wenn es eine verschachtelte Liste werden soll, ist sie, so wie sie hier aussieht, fehlerhaft.
>
>
> Viele Grüße aus Frankfurt/Main,
> Patrick
Hi Patrick,
success. Jedoch kleine Feinheiten notwendig. Aber funzt.
/* In CSS */
img {
border:none;
}
#Arepas {
color: #C7BA87;
font-size: 13px;
font-family: Comic Sans MS;
font-weight:bold;
}
#Arepas div {display:none;}
#Arepas:hover div {
display:block;
width:150px;
position:absolute; top:50px; left:50px;
}
/* In HTML */
<div id="Arepas">Empanadas,
<div>
<p>
<img src="#" width="270" height="129" alt="">
</p>
</div>
</div>
Gruß
wannabe / Mark
Nächste Aufgabe, einen pop-up für grafiks zu erstellen. Pop-up soll erscheinen in ein andere Stelle bei Mouse-over an einen Text.
Suchst Du vielleicht so etwas wie die Infobox?
Genau
Gruß
wannabe / Mark