Html/Css - Navigationsleiste, Swf, Onmouseover
Znol
- html
Hallo,
ich klebe immer noch an der ersten Seite fest.
Ich möchte einfach "nur"
eine Seite erstellen, wo die credits angegeben sind, die ich jedoch erst später einfügen möchte.
Buttons zur Navigation miteinbringen
Hintergrundgrafik
zwei Flashanimationen (könnte es im Notall auch zu einer zusammenfassen)
Jetzt habe ich etliche Tage Verschiedenes ausprobiert, und seitdem ich hier etwas von "validieren" gelesen habe, bin ich noch gleich viel unzufriedener mit dem, was ich gemacht habe.
Wie würdet Ihr da vorgehen?
Ich habe einmal mir die in selfhtml vorgeschriebene horizontale navigationsleiste vorgenommen, was soweit zwar klappt, aber dennoch sehr unzufrieden bin, denn ich habe da eine eigene Schriftart, und die müsste ich jetzt erst noch in eot und pfr umwandeln, und selbst dann scheint es ja doch noch viele zu geben, die es so nicht auf Ihrem Bildschirm sehen würden.
Hatte mir eigentlich auch selbst onmouseoverbuttons erstellt, kann ich die nicht vielleicht anders in dem vorgegebenen Gerüst einbauen?
Habe es auch ganz anders zuvor probiert, und halt jeden einzelnen ausgerichtet, nur wenn ich dann die swf. Datei ausrichten möchte, verzerrt mir jedes Mal das Bild, die Buttons verrutschen an der Hintergrundgrafik.
Die Hintergrundgrafik beinhaltet ein horizontales Rechteck, wo ich die Buttons drauf positionieren möchte oder hatte ich ja auch bereits getan, nur verzerrt mir dann die Animation alles wieder.
Ich lese immer nur am Text ausrichten, doch habe ich ja so keinen Text auf der Seite.
Nur die Ani und die vier Buttons die horizontal auf der Hintergrundgrafik entsprechend positioniert werden sollen.
Ich schaffe das Ausrichten nicht.
Welche Variante ist denn besser gelöst, bzw. wisst Ihr, wie ich diese Dinge zueinander ausrichten kann?
Gruß, Znol
Hallo Znol,
zeige doch mal bitte, was du bisher gemacht hast!
Mit freundlichen Grüßen,
André
Hallo,
hm...gerne...aber..oh je..
das hier ist der Versuch angelehnt an die horizontale Navileiste:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Navigationsleiste</title>
<style type="text/css">
body {font-family:Decrepit (BRK);
background-image:url(file:///H:/Ulis Homepage Gestaltung/Menue Kopie5.jpg);}
ul#Navigation {
margin:0;padding:0.8em;
text-align:center;
background-color:#999966;}
ul#Navigation li {
list-style:none;
display:inline;
margin:0;padding:0;}
ul#Navigation a, ul#Navigation span {
padding: 0.2em 1em;
text-decoration: none;
color:#666600; background-color:#ffcc00;
}
* html ul#Navigation a, * html ul#Navigation span {
width: 1em; /* nur fuer IE 5.0x erforderlich */
width: auto; /* sicherheitshalber fuer IE 6 zurueckgesetzt */
}
ul#Navigation a:hover, ul#Navigation span {
color:#666633; background-color:#ffcc66;
}
</style>
</head>
<body>
<ul id="Navigation">
<li><a href="#Beispiel">Home</a></li>
<li><a href="#Beispiel">Gallery</a></li>
<li><a href="#Beispiel">Resume</a></li>
<li><a href="#Beispiel">Success</a></li>
</ul>
</body>
</html>
</head>
</body>
</html>
Da muss ich wohl bei #Beispiel doch eigentlich meine Datei angeben, nur zeigt er mir dann nichts mehr an. Die swf Datei habe ich da noch nicht mit rein gesetzt, weil ja noch nicht mal die Leiste mit den Buttons richtig positioniert ist, bzw. man die Schrift von mir wohl eh nicht wirklich viele sehen können, sonst würde ich die auch noch in prf und eot wandeln.
Anderer Versuch, wo aber wohl evtl.? die margins total falsch? sind. Ich hatte zuvor die margins mit position:absolut positioniert, jedoch funktionierte da auch nicht das ausrichten der swf.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Unbenanntes Dokument</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<meta http-equiv="Content-Script-Type" content="text/javascript">
<meta http-equiv="Content-Style-Type" content="text/css">
<script type="text/javascript">
Normal1 = new Image();
Normal1.src = "Homeoutbutton1.gif";/* erste Standard-Grafik */
Highlight1 = new Image();
Highlight1.src = "Homeoverbutton1.gif";/* erste Highlight-Grafik */
Normal2 = new Image();
Normal2.src = "Galleryoutbutton1.gif"; /* zweite Standard-Grafik */
Highlight2 = new Image();
Highlight2.src = "Galleryoverbutton1.gif"; /* zweite Highlight-Grafik */
Normal3 = new Image();
Normal3.src = "Resumeoutbutton1.gif"; /* dritte Standard-Grafik */
Highlight3 = new Image();
Highlight3.src = "Resumeoverbutton2.gif"; /* dritte Highlight-Grafik */
Normal4 = new Image();
Normal4.src = "Successoutbutton1.gif"; /* dritte Standard-Grafik */
Highlight4 = new Image();
Highlight4.src = "Successoverbutton1.gif"; /* dritte Highlight-Grafik */
function Bildwechsel (Bildnr, Bildobjekt) {window.document.images[Bildnr].src = Bildobjekt.src;}
</script>
</head>
<body style="background-image:url(Menue Kopie5.jpg);background-repeat:no-repeat;>
<a href="H:\Ulis Homepage Gestaltung\Seite1Menü.htm.htm"
onmouseover="Bildwechsel(0, Highlight1)"
onmouseout="Bildwechsel(0, Normal1)"><img src="Homeoutbutton1.gif"
style="width:155px;height:26px;border:none;margin-top:413px;margin-left:79px"alt="Home"></a><br>
<a href="H:\Ulis Homepage Gestaltung\Seite1Menü.htm.htm"
onmouseover="Bildwechsel(1, Highlight2)"
onmouseout="Bildwechsel(1, Normal2)"><img src="Galleryoutbutton1.gif"
style="width:155px;height:26px;border:none;margin-top:-26px;margin-left:313px"alt="Gallery"></a><br>
<a href="H:\Ulis Homepage Gestaltung\Seite1Menü.htm.htm"
onmouseover="Bildwechsel(2, Highlight3)"
onmouseout="Bildwechsel(2, Normal3)"><img src="Resumeoutbutton1.gif"
style="width:155px;height:26px;border:none;margin-top:-26px;margin-left:547px"alt="Resume"></a><br>
<a href="H:\Ulis Homepage Gestaltung\Seite1Menü.htm.htm"
onmouseover="Bildwechsel(3, Highlight4)"
onmouseout="Bildwechsel(3, Normal4)"><img src="Successoutbutton1.gif"
style="width:155px;height:26px;border:none;margin-top:-26px;margin-left:781px" alt="Success"></a><br>
</body>
</html>
Online ist es noch nicht.
Die Flashani:
<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,29,0" width="880" height="57">
<param name="movie" value="Morphing.swf">
<param name="quality" value="high">
<param name="wmode" value="transparent">
<embed src="Morphing.swf" quality="high" pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash" width="880" height="57"></embed>
</object>
Wobei mir hier gesagt wurde ich solle die mit div id dann positionieren, nur dann komme ich wieder mit meinem background-image nicht klar.
Könnte noch weitere reinsetzen, nur denke ich, dass die beiden hier schon am besten zeigen, was ich so versuche.
Ich hoffe, es sieht nicht allzu schlimm aus, und ist so nicht zuviel.
Gruß, Znol
Oh, sehe gerade im ersten habe ich body doppelt und so, dass ist da natürlich Quatsch.
So, jetzt blicke ich langsam durch, habe mir nochmal angesehen, was ich weggelassen habe. Mit mehr Verständnis denke ich bekomme ich es jetzt auch hoffentlich besser hin.
Werde mal schauen, was ich jetzt noch hinbekomme.
Znol