Beiträge von Jav

Jav · 16. Dezember 2016

Ich denke, der Fehler liegt in der Vorladen-Funktion. Die Seite mit dem Beispiel hatte ich auch gefunden, weil mich die Zuweisung eines Bildes an ein Array stutzig gemacht hatte. Aber so sollte es funktionieren:

edit:
alte Version, nicht so schön:

JavaScript

function Vorladen01()
{
 for(var i=0; i<BildListe.length; i++)
 {
  var Bild = new Image();
  Bild.src = BildListe[i];
  Bilder[i] = Bild;
 }
}

neue Version:

JavaScript

function Vorladen01()
{
 var Bild;
 for(var i=0; i<BildListe.length; i++)
 {
  Bild = new Image();
  Bild.src = BildListe[i];
  Bilder[i] = Bild;
 }
}

Jav · 16. Dezember 2016

Beim Android Chrome soll wohl
background-attachment:fixed;
als letztes kommen, damit es funktioniert.
Ausserdem width und height auf 100%.
Habe das aber eben im Netz gefunden und nicht selber getestet. Vielleicht hilft's ja trotzdem.

Jav · 15. Dezember 2016

Ich hatte jetzt an eine setDefaults-Funktion gedacht, die bei onmouseout in jedem Link aufgerufen wird. Da aber meine Tests nicht wirklich zufriedenstellend waren (das Zurücksetzen geschieht dann natürlich auch, wenn die Maus auf die Border kommt und bevor ein anderer Link das Bild neu setzt, was zu unschönem Geflackere führt), hätte mich der Ansatz jetzt auch interessiert.

Jav · 15. Dezember 2016

Aufgefallen ist mir, dass der Input zum Absenden in die Form muss.
Ausserdem fehlt das Schliessen einer Tabelle, was dann zu einigen Aufräumarbeiten führt.

Jav · 12. Dezember 2016

Also, da auch bei mir die 4px stimmen, lautet meine Problemlösung: Monitor entsorgen.

Jav · 12. Dezember 2016

Ja. Einfach die Funktionen hintereinander schreiben, also z. B.:

onmouseover="funktion1(); funktion2();"

Die Reihenfolge wird dabei eingehalten.

Jav · 12. Dezember 2016

Klingt sehr engagiert Da gehört einiges Standvermögen dazu, um das durchzuhalten, bis die Seite "läuft". Ich drücke dir jedenfalls alle Daumen!

Jav · 11. Dezember 2016

Falls es um die Lupe geht:
Du verwendest ein Bild, das 24 x 24 Pixel gross ist, als Hintergrundbild für einen 20x20-Pixel-Button. Bilder werden zwar beim <img>-Tag mit Grössenangaben skaliert, aber nicht bei Angabe als Hintergrundbild (ok, bei <body> ist es wieder was anderes).
Durch die Angabe von "center" wird das Bild im Button zentriert, aber an allen Seiten fehlen 2 Pixel ("fehlen" natürlich nicht, sondern werden nicht angezeigt).

Jav · 10. Dezember 2016

Auch dafür +1, MrMurphy Geht wirklich ohne JS. Wenn man den Container in die Nav steckt. Wo er in diesem Fall ja auch hingehört, ist ja zu Demozwecken. Also mit Geschwister- und Nachfahren-Selektoren kann man das machen, wenn man dem Aufbau nicht weiter Beachtung schenken muss.

edit:
Weil mich das jetzt so fasziniert hat und obwohl der TE explizit auf JS verzichten möchte, habe ich das mal mit einer winzigen JS-Funktion umgesetzt. Für mich ist einfach die Struktur übersichtlicher, und der CSS-Aufwand hält sich auch sehr in Grenzen.

HTML

<!DOCTYPE html>
<html>
<head>
<style type="text/css">




#nav a {
 padding-left: 3px;
 width: 125px;
 height: 35px;
 line-height: 35px;
 color:black;
 display: block;
}




#container{
 float: left;
 width: 400px;
 height:400px;
 background: blue;
}




#link1:hover { background:green; }
#link2:hover { background:red; }
#link3:hover { background:magenta; }
#link4:hover { background:yellow; }
#link5:hover { background:lightblue; }
#link6:hover { background:orange; }
</style>
<script>
function faerbe(id)
{
 var farben = new Array('#aa3','#aa6','#aa9','#aac','#aaf','#abf');
 document.getElementById('container').style.backgroundColor=farben[id];
}
</script>
</head>




<body>
<div id="nav">
 <ul>
  <li>
   <a id="link1" href="#" onmouseover="faerbe(0);">Seite 1 </a>
   <ul>
    <li>
     <a id="link2" href="#" onmouseover="faerbe(1);">Seite 2 </a>
    </li>
    <li>
     <a id="link3" href="#" onmouseover="faerbe(2);">Seite 3 </a>
    </li>
    <li>
     <a id="link4" href="#" onmouseover="faerbe(3);">Seite 4 </a>
     <ul>
      <li>
       <a id="link5" href="#" onmouseover="faerbe(4);">Thema 4.1 </a>
      </li>
      <li>
       <a id="link6" href="#" onmouseover="faerbe(5);">Thema 4.2 </a>
      </li>
     </ul>
    </li>
   </ul>
  </li>
 </ul>
</div> <!-- ENDE #nav -->




<div id="container"></div>




</body>
</html>

Alles anzeigen

Jav · 10. Dezember 2016

Zitat von Jochen

Wenn ich die Gliederung erstelle indem ich mit Li die Unterseiten einschliesse funktioniert es leider nicht mehr

Zunächst ein +1 djheke für die Lösung. (Schade, dass es hier im Forum keine "Bedanken"-Funktion o. ä. gibt.)

Die Lösung von djheke beruht auf dem Geschwister-Selektor. Das bedeutet, die auslösenden Elemente und die Zielelemente müssen auf der gleichen Ebene sein. Daher hatte die Lösung auch den Umbau in der Struktur mit Verzicht auf das Listen-Element nötig gemacht.

Wenn Du dir deine gewünschte Struktur mit Einrückungen ansiehst, wobei jede Einrückung einer Ebene entspricht, wird das Problem deutlich, da sich mit CSS de facto nur Elemente auf gleicher oder untergeordneter Ebene ansprechen lassen.
Um deinen gewünschten Efekt umzusetzen, wird wohl JavaScript zum Einsatz kommen müssen.

HTML

<!DOCTYPE html>
<html>
<head>
<style type="text/css">




#nav a {
 padding-left: 3px;
 width: 125px;
 height: 35px;
 line-height: 35px;
 color:black;
 display: block;
}




#container{
 float: left;
 width: 400px;
 height:400px;
 background: blue;
}




#link1:hover { background:green; }
#link2:hover { background:red; }
#link3:hover { background:magenta; }




/* alt: #container auf gleicher Ebene wie #link1 etc.
#nav #link1:hover ~ #container { background:#ada;}
#nav #link2:hover ~ #container { background:#ad0;}
#nav #link3:hover ~ #container { background:#a3a;}
*/




</style>
</head>




<body>
<div id="nav">
 <ul>
  <li>
   <a href="#">Seite 1 </a>
   <ul>
    <li>
     <a href="#">Seite 2 </a>
    </li>
    <li>
     <a href="#">Seite 3 </a>
    </li>
    <li>
     <a href="#">Seite 4 </a>
     <ul>
      <li>
       <a href="#">Thema 4.1 </a>
      </li>
      <li>
       <a href="#">Thema 4.2 </a>
      </li>
     </ul>
    </li>
   </ul>
  </li>
 </ul>




 <div id="container"></div>




</div> <!-- ENDE #nav -->




</body>
</html>

Alles anzeigen

Jav · 9. Dezember 2016

TE hat zwar einen workaround gefunden, dennoch:
$_GET ist eine Superglobale Variable. Überall. Da gibt es keine lokale Version. Das Problem wird also woanders verursacht worden sein.

Jav · 9. Dezember 2016

MrMurphy: Das stimmt so nicht ganz. Es gibt zwar Parent-Selektoren, die werden jedoch noch nicht von allen Browsern unterstützt, z. B. nicht vom FireFox.

Jav · 9. Dezember 2016

Ich habe mir gerade die Desktop-Version kurz angesehen. Die Seite scheint ausgelegt für Monitore mit mindestens 1600 Pixel Breite, denn bei meiner 1024er-Auflösung habe ich nur ca. die Hälfte im Blickfeld und muss horizontal scrollen.
aktueller FireFox, Zoom normal.

Jav · 9. Dezember 2016

setz doch einfach ein <br> nach dem zweiten Bild, wird doch dann automatisch die nächste Zeile.

Jav · 9. Dezember 2016

Im Code waren noch einige Fehler, die ich rausgenommen habe. Nun funktioniert zwar das, was oben angedacht war, aber es waren nicht die Links gemeint, sondern das grosse Container-DIV. Also ein anderes Element soll geändert werden als das, was die Aktion auslöst. Mir fällt dazu auch gerade nichts ein. Kennst Du eine Seite, auf der das so ist, mit CSS umgesetzt?

HTML

<!DOCTYPE html>
<html>
<head>
<style type="text/css">




#nav a {
 padding-left: 3px;
 width: 125px;
 height: 35px;
 line-height: 35px;
 color:black;
 display: block;
}




#container{
 float: left;
 width: 400px;
 height:400px;
 background: blue;
}




#link1:hover { background:green; }
#link2:hover { background:red; }
#link3:hover { background:magenta; }




</style>
</head>




<body>




<div id="nav">
 <ul>
  <li><a id="link1" href="#Seite1">Bild 1</a></li>
  <li><a id="link2" href="#Seite2">Bild 2</a></li>
  <li><a id="link3" href="#Seite3">Bild 3</a></li>
 </ul>
</div>




<div id="container"></div>




</body>
</html>

Alles anzeigen

Jav · 9. Dezember 2016

Da komme ich wohl ein Jahr zu spät - Seite gibt es nicht mehr.

Jav · 9. Dezember 2016

Danke für den Hinweis, Sempervivum. Ich werde mir das mal genauer ansehen.

Jav · 9. Dezember 2016

Ich habe das Problem jetzt erstmal durch Vergleich zweier Zeitstempel gelöst; recht clever eigentlich

Falls es aber eine bessere Alternative gibt, wäre ich glücklich, davon zu erfahren.

Jav · 9. Dezember 2016

Wofür sind die 20 Sekunden? Damit die Werbung gezählt wird?

Jav · 9. Dezember 2016

Eine Möglichkeit per CSS wäre in etwa so;

#Link1 { width: 100px; height: 40px; background:url(img-link1.jpg); }
#Link1:hover { background:url(img-link1-hover.jpg); }

#Link2 { width: 100px; height: 40px; background:url(img-link2.jpg); }
#Link2:hover { background:url(img-link2-hover.jpg); }

etc.

Beiträge von Jav

Bild erscheint nicht

Responded Webdesign: Hintergrundbild wird in Chrome nicht verkleinert

Ausgangszustand (Bild Farbe) wiederherstellen

Formular zum suchen von Einträgen

TOP funzt nicht

Zwei Anweisungen über einen Link

Zitate, Zitate, Zitate und Zitate

Button in Inputfeld

Blider mit Links verknüpfen

Blider mit Links verknüpfen

Super Globale Variable löschen

Blider mit Links verknüpfen

Feedback vor allem zur Bedienung

Galerie - Viel Whitespace bei Bilder in einer Galerie

Blider mit Links verknüpfen

Ich stelle mich und mein Projekt vor

[erledigt] Weitergabe von Klicks unterbinden

[erledigt] Weitergabe von Klicks unterbinden

Button der Befehl an Vserver weitergibt

Blider mit Links verknüpfen