Fester Header und Mouseover

Neoaxizz · 04. Juni 2007

Hallo Leute,

ich habe ein 2 Fragen.

Ich habe fast alle Grafiken meiner Homepage mit einem Mouseovereffekt belegt. Mein kleines Problem dabei ist nur, das ich Fehler bei der Validierung angezeigt bekomme. Der Effekt findet jedoch ohne Probleme statt.

Code:

class="opacity1" onmouseover="this.className='opacity2'" onmouseout="this.className='opacity1'"

Kann ich es auch anders schreiben, so dass der Effekt der gleiche bleibt mir jedoch keine Fehler mehr angezeigt werden?

-------------------------------------------

Meine 2 Frage beschäftigt sich mit dem Header!
Besteht die Möglichkeit, dass ich den Header festsetze, so dass nur der untere Teil (Fotos/Text) bewegbar/scrollbar ist?

Bsp.: Dance-Tunes.com :: Dance MP3 download portal

Wäre für jede Hilfe dankbar

HP

anna55 · 04. Juni 2007

Neoaxizz schrieb:
Ich habe fast alle Grafiken meiner Homepage mit einem Mouseovereffekt belegt. Mein kleines Problem dabei ist nur, das ich Fehler bei der Validierung angezeigt bekomme. Der Effekt findet jedoch ohne Probleme statt.

Code:

class="opacity1" onmouseover="this.className='opacity2'" onmouseout="this.className='opacity1'"

Kann ich es auch anders schreiben, so dass der Effekt der gleiche bleibt mir jedoch keine Fehler mehr angezeigt werden?

Kann so nichts Falsches feststellen. Der img-Tag braucht bei ner XHTML-Deklaration einen schließenden Slash. Allerdings hast Du auf der geposteten Seite wahlweise überhaupt keinen oder einen falsch notierten Doctype und jede Menge Fehler, die beim Validieren eines Frames angezeigt werden. Lediglich den von Dir oben beschriebenen Fehler konnte ich nicht entdecken.

Neoaxizz schrieb:
Meine 2 Frage beschäftigt sich mit dem Header!
Besteht die Möglichkeit, dass ich den Header festsetze, so dass nur der untere Teil (Fotos/Text) bewegbar/scrollbar ist?

Das Scrollen findet doch im unteren Teil statt (FF2).

Neoaxizz · 04. Juni 2007

Mhh, das ist auch SEHR schlau von mir gewesen...
Habe meine URL net gepostet!

s-Melcer.de - Reisefotografie, Reportagefotografie aus aller Welt

Bezieht sich natürlich auf diese Page

Sry

anna55 · 04. Juni 2007

In Bezug auf die Validierung:

PHP:

<SCRIPT LANGUAGE="JavaScript" type="text/javascript">
if ((navigator.appName.indexOf('Microsoft')+1)) {
document.write('<style type="text/css"> .opacity1 {filter:alpha(opacity=50)} .opacity2 {filter:alpha(opacity=100)} <\/style>'); }
if ((navigator.appName.indexOf('Netscape')+1)) {
document.write('<style type="text/css"> .opacity1 {-moz-opacity:0.5} .opacity2 {-moz-opacity:1} <\/style>'); }
else {
document.write(''); }
</script>

Du musst im Javascript die schließenden Style-Tags mit einem Backslash maskieren.

Außerdem brauchen alle "&" ebenfalls eine Maskierung und heißen dann "&".

Dann darf der img-Tag keinen schließenden Slash haben, da die Seite nicht in XHTML geschrieben ist:

PHP:

<img src="http://banners.webmasterplan.com/view.asp?ref=391998&site=3725&b=25" class="opacity1" onmouseover="this.className='opacity2'" onmouseout="this.className='opacity1'" alt="Jetzt bestellen und sparen!" width="88" height="31" border="1">

Damit kommst Du schon mal ein ganzes Stück weiter.

Edit: Ne CSS-basierte Scroll-Lösung findes Du hier beim CSS-Guru Stu Nicholls.

Edit2: ...und schreib bei den Links "Toplisten" groß.

Neoaxizz · 05. Juni 2007

Das hört sich ja fast alles gut an

Mit dem Mouseover hab ich das jetzt geschnallt, jedoch besteht ein Problem mit den URL´s. Man kann sie leider nicht ändern, da ich sonst nicht mehr als "Partner" zugewiesen werde und mir Klicks etc. flöten gehen.

Was ich jedoch überhaupt nicht schnalle ist

Ne CSS-basierte Scroll-Lösung findes Du hier beim CSS-Guru Stu Nicholls.

CSS peil ich gar nicht... hab schon nen paar mal mein Design damit zerrissen und nur durch Glück wieder hin bekommen.

Gibts da nichts einfacheres?

anna55 · 05. Juni 2007

Neoaxizz schrieb:
Das hört sich ja fast alles gut an
Mit dem Mouseover hab ich das jetzt geschnallt, jedoch besteht ein Problem mit den URL´s. Man kann sie leider nicht ändern, da ich sonst nicht mehr als "Partner" zugewiesen werde und mir Klicks etc. flöten gehen.

Was ich jedoch überhaupt nicht schnalle ist

CSS peil ich gar nicht... hab schon nen paar mal mein Design damit zerrissen und nur durch Glück wieder hin bekommen.

Gibts da nichts einfacheres?

Bist Du sicher mit den URL's? Du änderst die doch nicht. Der Pfad bleibt doch gleich.

In puncto Design wollte ich Dir eigentlich noch The Holy Grill empfehlen, ebenfalls eine CSS-Lösung. Ansonsten bleiben Dir Frames, wie in Deinem geposteten Beispiel.

Vielleicht weiß noch jemand was "Einfacheres"?

Du darfst natürlich nicht Deine Original-Seite "zerreißen". Bau doch z.B. die Grillgeschichte Dir mal zusammen und setzt nach und nach Deine Navi usw. rein. Wenn was gar nicht funktionieren will, frag doch hier mal.

Neoaxizz · 05. Juni 2007

Man man man, ist das ein Act..
fast zu spät zur Arbeit gekommen weil ich die ganze Nacht im Source rumgetickert habe.

Aber es hat sich dank euch gelohnt.
Validierungsfehler alle dank euch weg bekommen (zumindest auf den ersten Seiten.. Rest folgt noch) Das URL Problem hat sich auch gelöst, da ich das ganze erst etwas später gecheckt habe. Man ändert ja nicht die URL sondern schreibt sie nur um

Wartet also nur noch das feststellen des Headers auf mich.
Darf ich bescheidener weise mal Fragen was ihr von der Seite haltet?
Ist sie zu dunkel, spricht sie an, übersichtlich etc...
(Ich persönlich bin recht stolz darauf, da es meine 2te Seite ist und ich nichts von dem ganzen kram gelernt habe, sondern alles per Forenhilfe und leaning by doing gebastelt habe)

jeko · 05. Juni 2007

Neoaxizz schrieb:
Wartet also nur noch das feststellen des Headers auf mich.

position:fixed CSS
Können alle CSS-fähigen Browser (wie z.B. Firefox 1.x/2.x), andere CSS-unfähige Browser halten das anscheinend erst ab Ver. 7.0 für nötig (wie z.B. MSIE).

Die Seite sonst ist eigentlich gut, das dunkle grau belastet jedoch schon sehr. Vor allem der Content-Bereich sollte aufgehellt werden, und dunkelgraue Schrift macht sich auf dem Hintergrund auch nicht wirklich gut.

anna55 · 05. Juni 2007

jeko schrieb:
position:fixed CSS
Können alle CSS-fähigen Browser (wie z.B. Firefox 1.x/2.x), andere CSS-unfähige Browser halten das anscheinend erst ab Ver. 7.0 für nötig (wie z.B. MSIE).

Guter Tipp von jeko. Gleich an dritter Position bekommst Du Input bei SELFHTML. In jedem Fall musst Du das Layout auch auf den IE6 trimmen, da nach der letzten Browserstatistik (April) der IE6 noch einen Anteil von gut 37 % hatte. Die Beispiele von Stu Nicholls berücksichtigen aber diesen 'Pflegefall' ebenfalls.

Noch einen Satz zur Validierung. Du hast Dir viel Mühe gemacht und gewonnen - fast. Bei Deinen ersten beiden DIV's Beginn Partnerprogramm hat Du noch schließende Slash' in den IMG-Tags. Die zeigt - warum auch immer nur der Validome an, den ich bevorzuge, da er genauer die W3C-Richtlinien umsetzt.

Mich spricht das Design Deiner Seite sehr an. Die Fotos, auf deren Präsentation ja der Focus liegt, kommen durch die Farbwahl des Hintergrundes sehr gut zur Geltung. Nur bei "s-melcer.de | Home" sieht man die Schrift wirklich kaum.

-->Edit: Poste doch Deine Site-Check-Anfrage im gleichnamigen Forum. Dann erhöhen sich Deine Chancen, dass Du ein paar Bewertungen und Ideen mehr bekommst.

Rechtschreibung: toplisten auf Homeseite klein, Du wechselst zwischen Du und Sie in der Anrede (alle Seiten checken).

Was mir nicht gefällt, ist der sehr breite Rand unten im IE7, ein schmaler ist im FF2 zu sehen, während im IE6 keiner da ist. Aber das wird im Zusammenhang mit der Scrollsache ja wahrscheinlich sowieso anders.

René · 06. Juni 2007

Das alles löschen:

Code:

<body onLoad="welcometext()">
<script language="JavaScript" type="text/javascript">
<!--
  
var hellotext="s-melcer.de | Reise & Reportagefotografie"		//Starttext in der Anzeige
var started=false				
var step=0				//Start des ersten Schrittes
var times=1					
function welcometext()
{
times--
if (times==0)
{ 
if (started==false)
{
started = true;
window.status = hellotext;			//Aufruf der Message
setTimeout("anim()",1); 			
}
thetext = hellotext;
      }
}
function showstatustext(txt)			
    {
 thetext = txt;					
setTimeout("welcometext()",4000)		//Geschwindigkeit der Animation
times++
    }
function anim()
{
//Anzahl der Textanimation
      step++
      if (step==7) {step=1}
      if (step==1) {window.status='>==='+thetext+'===<'}
      if (step==2) {window.status='=>=='+thetext+'==<='}
      if (step==3) {window.status='>=>='+thetext+'=<=<'}
      if (step==4) {window.status='=>=>'+thetext+'<=<='}
      if (step==5) {window.status='==>='+thetext+'=<=='}
      if (step==6) {window.status='===>'+thetext+'<==='}
      setTimeout("anim()",200);
    }
//-->
</script>
<script type="text/javascript">
function click (e) {
  if (!e)
    e = window.event;
  if ((e.type && e.type == "contextmenu") || (e.button && e.button == 2) || (e.which && e.which == 3)) {
    if (window.opera)
      window.alert("Sorry: Diese Funktion ist deaktiviert.");
    return false;
  }
}
if (document.layers)
  document.captureEvents(Event.MOUSEDOWN);
document.onmousedown = click;
document.oncontextmenu = click;
</script>
<SCRIPT LANGUAGE="JavaScript" type="text/javascript">
if ((navigator.appName.indexOf('Microsoft')+1)) {
document.write('<style type="text/css"> .opacity1 {filter:alpha(opacity=50)} .opacity2 {filter:alpha(opacity=100)} <\/style>'); }
if ((navigator.appName.indexOf('Netscape')+1)) {
document.write('<style type="text/css"> .opacity1 {-moz-opacity:0.5} .opacity2 {-moz-opacity:1} <\/style>'); }
else {
document.write(''); }
</script>

und durch das ersetzen:

Code:

<body>

<style type="text/css" media="screen">
<!--
.opacity1
{
	filter: alpha(opacity = 50);
	-moz-opacity: 0.5;
}

.opacity2
{
	filter: alpha(opacity = 100);
	-moz-opacity: 1;
}
//-->
</style>

Neoaxizz · 06. Juni 2007

Als erstes möchte ich mich für die vielen Post´s und Antworten bedanken.
Man findet selten ein so gutes Board wo man konstruktive Kritik und erstklassige Hilfe bekommt.

DANKE

anna55 schrieb:
Noch einen Satz zur Validierung. Du hast Dir viel Mühe gemacht und gewonnen - fast. Bei Deinen ersten beiden DIV's Beginn Partnerprogramm hat Du noch schließende Slash' in den IMG-Tags. Die zeigt - warum auch immer nur der Validome an, den ich bevorzuge, da er genauer die W3C-Richtlinien umsetzt.

Geändert und beide Validierungen sind nun korrekt.
HTML / XHTML / WML / XML Validator
Result for http://www.s-melcer.de/ - W3C Markup Validator

anna55 schrieb:
-->Edit: Poste doch Deine Site-Check-Anfrage im gleichnamigen Forum. Dann erhöhen sich Deine Chancen, dass Du ein paar Bewertungen und Ideen mehr bekommst.

Werde ich gleich mal tun, klasse TIP

anna55 schrieb:
Rechtschreibung: toplisten auf Homeseite klein, Du wechselst zwischen Du und Sie in der Anrede (alle Seiten checken).

Was mir nicht gefällt, ist der sehr breite Rand unten im IE7, ein schmaler ist im FF2 zu sehen, während im IE6 keiner da ist. Aber das wird im Zusammenhang mit der Scrollsache ja wahrscheinlich sowieso anders.

Rechtschreibung: Muss wirklich anscheinend nochmal alles geprüft werden. (schreit nach setzen 6)

IE 6/7 & FF:
Woran das liegt, versteh ich beim besten Willen nicht. Daran bin ich schon verzweifelt!
Bleibt vorerst nur zu hoffen, dass alle auf FF umsteigen :grin:

@ René
Sry, aber deinen Post kann ich nicht nachvollziehen.
Wenn ich den Teil aus dem Source entferne gehen mir 2 Dinge (Rechtsklickblock und Statusleistenanzeige) flöten, die ich eigentlich behalten wollte.
Nach dem einsetzen von

Code:

<body>

<style type="text/css" media="screen">
<!--
.opacity1
{
	filter: alpha(opacity = 50);
	-moz-opacity: 0.5;
}

.opacity2
{
	filter: alpha(opacity = 100);
	-moz-opacity: 1;
}
//-->
</style>

habe ich ausserdem einen weiteren Fehler!
Was soll das denn bewirken?

René · 06. Juni 2007

Für was soll deine Rechtsklicksperre gut sein und warum "vergewaltigst"

du meine Statuszeile.

Das JavaScript für das opacity brauchst du auch nicht, dafür kannst du es einfach als CSS einfügen die Browser suchen sich dann schon das was sie verstehen. Verstehen sie es nicht, weil zu alt, werden sie es ignorieren.

Und schon bist du 30 Tonnen "Müll" los.

anna55 · 06. Juni 2007

Neoaxizz schrieb:
Nach dem einsetzen von...habe ich ausserdem einen weiteren Fehler!
Was soll das denn bewirken?

Du hast doch nicht etwa den ganzen Code von René genommen? Dann hättest Du nämlich zweimal <body> im Quelltext stehen.

Rechtsklick sperren ist Unsinn, weil jeder, der sich Bilder "ausborgen" will, trotzdem mehrere Möglichkeiten hat, dranzukommen.

Aber mal im Ernst, bei mir (FF2) funktioniert der Rechtsklick und auch meine Statuszeile verhält sich jungfräulich. Ebenso ist es bei Opera9. Der IE7 reagiert nicht auf das Statuszeilenscript, sperrt aber den Rechtsklick. Beide Scripte funktionieren lediglich im IE5.5 und im IE6.

Allein das sollte Dir sagen, dass Du gut beraten bist, beide Scripte in die Tonne zu kloppen.

Und - teste nicht als Erstes im IE. Nimm einen richtigen Browser.

Neoaxizz · 06. Juni 2007

Man man, sollte mal früher nach Hause kommen....
Das dauert immer ewig, bis ich alle Punkte von euch abgearbeitet habe

Recht habt ihr ja, und Bildklau... naja, wenn ich so nachdenke... Wer die quali haben will, der hat sie auch verdient :grin:

Ihr habt gewonnen, mach mich an die Arbeit.
Danke euch

Edit:

Code:

<body>
<style type="text/css" media="screen">
<!--
.opacity1
{
	filter: alpha(opacity = 50);
	-moz-opacity: 0.5;
}

.opacity2
{
	filter: alpha(opacity = 100);
	-moz-opacity: 1;
}
//-->
</style>

<div ><a href="http://www.s-melcer.de"><img src="/hp_pic/Head.jpg" alt="s-Melcer.de - Fotografie Sandra Melcer" width="359" height="113" border="0"></a><iframe src="Leiste/photo.htm" frameborder="0" height="113" scrolling="No" width="635"></iframe></div>

so sieht das ganze nun aus und ich bekomme den Fehler :
Line 30 column 37: document type does not allow element "STYLE" here.

Wer ausprobiert gewinnt....
Hatte das ganze HINTER </head> stehen, daher der Fehler

René · 07. Juni 2007

anna55 schrieb:
Du hast doch nicht etwa den ganzen Code von René genommen? Dann hättest Du nämlich zweimal <body> im Quelltext stehen.

Nein, wenn er alles löscht was ich gezeigt habe und durch das neue ersetzt dann hat er nur einen <body> im Code.

Denn Fehler mit dem Style an der falschen Stelle hat er ja herausgefunden.

Fester Header und Mouseover

Neoaxizz

New member

anna55

Moderator

Neoaxizz

New member

anna55

Moderator

Neoaxizz

New member

anna55

Moderator

Neoaxizz

New member

jeko

Lounge-Member

anna55

Moderator

René

New member

Neoaxizz

New member

René

New member

anna55

Moderator

Neoaxizz

New member

René

New member