#wrapper komplett als button verwenden

[MiTsch]

Hallo Community,

ich habe eine Webseite (Vorschaltseite) und diese beinhaltet einen Wrapper und einen Container.
Beide werden mittels CSS auf der Webseite sowohl Horizontal als auch Vertikal zentriert.

Der Container beinhaltet ein Überschriftelement (Firmenname) und ein Textelement (Slogan).
Wrapper und Container sind gerade so groß das die beiden Elemente darin platz haben.

Beim variablen Skalieren des Fensters mit der Maus bleiben die Elemente so immer in der Mitte des Fensters.

Nun möchte ich das wenn einen Besucher irgendwo innerhalb der Seite (#wrapper ?) mit der Maus klickt, das dann ein Link auf eine andere Seite (Home) ausgeführt wird.


Hat jemand eine Idee?

Leider brachten mich meine bisherigen Versuche mit onclick und onmousedown nicht weiter.


Viele Grüße
MiTsch

​

 

[struppi]

Usability: Vorschaltseiten (splash pages)

Anders als ihre sinnentleerte Verwandte ist die Brückenseite, auch „Führungsseite“ oder „routing page“ genannt, mit einem Minimum an Existenzberechtigung gesegnet, da sie Besucher an die richtige Stelle einer Website führt.

Als Beispiel wird eine Pornoseite genannt.

Was waren denn deine bisherigen Versuche?

 

[Cheffchen]

Hallo,

@struppi wie immer recht.
am besten noch um Schwerpunkte der Firma zu trennen "Schuster" Links und "Fleicherei" Rechts lang, da hoft man das man die richtige Sohle auf dem Grill bekommt :O)
Wenn man da überhaupt kauft :O)

Bewerten tu ich das jetzt nicht weiter ohne mehr Infos und Sinn oder Unsinn aber mach halt ein durchsichtiges div drüber mit einem gif und verlinke das gif.

Cheffchen

 

[MiTsch]

Hallo struppi,
hallo Cheffchen,

auch wenn Ihr wohl keine bekennenden Anhänger von Vorschaltseiten seit, so freue ich mich darüber das trotz der Pornografischen Randbemerkung noch soviel Toleranz besteht das ich nicht gleich "ohne mehr Infos oder Sinn" des ganzen Vorhabens erläutert zu haben
ich bei euch in diese Ecke lande.

Sorry, ich war der Annahme das hier Problemorientiert gefachsimpelt und sich ausgetauscht wird.
Daher hatte ich versucht mein Anliegen auch entsprechend kurz darzustellen.
Das es gleich Anlaß dazu bot das ganze zu bewerten hatte ich so nicht erwartet.

Gleich noch eins vorweg, um jetzt nicht wieder über den Sinn, die derzeitige Mode oder gar über die Usability
von Webseiten Anlaß zu geben, sei eine kleine Randbemerkung von mir erlaubt:
Wer die Musik bestellt, der bestimmt was sie spielt !

Aber, na gut! Also werde ich dann das ganze doch näher erläutern müssen.


Sicherlich hätte ich auch von einer Vorschaltseite abgeraten, aber in diesen Fall macht es evtl. sogar soweit Sinn.

Bei dem Projekt handelt es sich um eine Website für ein Alten- und Pflegeheim.
Die Heimleitung ist soweit wie ich das beurteilen kann sehr engagiert und legt großen Wert auf die Umsetzung
des Leitbildes im täglichen Umgang mit den Bewohnern.


Um dieses Leitbild (Slogan) entsprechend hervor zu heben und dessen Bedeutung zu unterstreichen wurde diese Form gewählt.
Dies soll auch ein Statement sein an dem sich die Einrichtung messen lassen will.

Die "Vorschaltseite" ist die Startseite der Website und beinhaltet ein Überschriftelement (Firmenname) und ein Textelement (Slogan).
Wie schon im ersten Posting erwähnt, werden beide Elemente immer mittig auf der Seite zentriert.

Um den Besucher nicht ratlos sich selbst zu überlassen; da er ja erstmal offensichtlich keinen Link zum anklicken angeboten bekommt,
wird er automatisch auch wenn er nichts anklickt durch <meta http-equiv="refresh" content="5; {{link_url::2}}> nach 5 Sek. auf die HomeSeite weiter geleitet.

Es wäre zwar ein leichtes beide Elemente als Link zu definieren, jedoch würde der Besucher nur dann weitergeleitet
wenn er auf eines der Elemente klickt.

Dies würde nicht auch zuletzt bedeuten das der Firmenname und Slogen auch vom Design wie ein Link
(Unterstrichen und z.B. in blauer Farbe) gestaltet werden müsste. Damit wäre aber dann den Charakter der Elemente zunichte gemacht

Um dem Besucher der Site die Möglichkeit zu bieten die Wartezeit zu überspringen, wollte ich ihm somit die ganze Seite als "Button" anzubieten.

Da die Seite variabel skalierbar ist käme ein starres durchsichtiges gif oder png wohl nicht in Frage.
Außerdem ginge eine transparent drüber gelegte Grafik zu lasten der Ladezeiten, da schon ein transparentes png in der Größe
1024 x 768 auf über 7 MB und ein transparentes gif auf über 1,5 MB ansteigt.

Da ja "nur" ein Mausklick benötigt wird hatte ich die Überlegung angestellt dies mit onclick oder onmousedown abzufangen.
Nun trage ich die Hoffnung das Ihr, da ihr ja den Status eines HTML-Gurus erreicht habt dies sicherlich locker mittels onclick
oder onmousedown bewerkstelligen könnt.

Über konstruktive Lösungen würde ich mich freuen.

Viele Grüße
MiTsch

 

[htmltyp]

Versuch mal das, ist zwar jetzt nur so schnell hingeschrieben aber sowas meintest du oder?

<a href="deineseite.php">
      <div id="wrapper">
          
      </div>
</a>

 

[MiTsch]

Hallo htmltyp,

danke für deinen Code, aber leider tut sich bei einem Mouseclick schlicht weg nichts.
Die definierte HomeSeite wird nicht aufgerufen.

Viele Grüße
MiTsch

 

[htmltyp]

Komisch bei mir hat das super geklappt.

 

[threadi]

Der Code von htmltyp ist falsch. <div> darf nicht innerhalb von Links stehen. Wenn ein Browser sowas unterstützen sollte wäre es reines Glück.

Wenn man die ganze Seite verlinken will, gäbe es noch die Möglichkeit eines Elements, welches absolut über die ganze Seite gelegt wird. Dafür reicht schon ein Link direkt innerhalb von <body> mit folgenden Eigenschaften:

html, body { height: 100%; }
a#verlinktalles {
 display: block;
 height: 100%;
 left: 0;
 position: absolute;
 top: 0;
 width: 100%;
}

 

[mermshaus]

Du kannst aber eigentlich keine Block-Elemente (div) in Inline-Elemente (a) schachteln. (Edit: Huch, hatte ich das Tab wirklich so lange offen? ;) Das war ebenfalls @htmltyp gemeint.)

Ein Ansatz mit JavaScript:

<!DOCTYPE html>

<html lang="en">

    <head>
        <meta charset="utf-8" />
        <title>New</title>
        <script type="text/javascript">
        /*<![CDATA[*/

        window.onload = function () {
            document.getElementsByTagName('html')[0].onclick = function () {
                window.location = 'http://www.html.de/';
            };
        };

        /*]]>*/
        </script>
    </head>

    <body>

    </body>

</html>

Nur im Firefox 5 getestet.

 

[struppi]

oder gleich:

<script type="text/javascript">
document.onclick = function () {
window.location = 'http://www.html.de/';
};
</script>

(Muss bei HTML5 der Skriptblock auch als CDATA markiert werden?)

Die Begründung für die Vorschlatseite finde ich nicht schlüssig, aber wie du schon sagst, wer die Musik bestellt.... kriegt halt dann Misstöne vorgespielt, wenn er das wünscht. Warum ein Slogan oder Leitbild nicht auf einer normalen Startseite Platz haben soll erschliesst sich mir aber nicht und welche Argumente dagegen sprechen, kannst du ja auf der von mir verlinkten Seiten lesen.

Ich finde das übringens "problemorientiert gefachsimpelt".

 

[mermshaus]

(Muss bei HTML5 der Skriptblock auch als CDATA markiert werden?)

Ne, muss er nur bei XHTML-Varianten (die vermutlich auch als XML ausgeliefert werden müssen). But I am a rebel. :twisted:

 

[struppi]

Ne, muss er nur bei XHTML-Varianten (die vermutlich auch als XML ausgeliefert werden müssen). But I am a rebel. :twisted:

Ein Grund mehr das Internet zu lieben - man kann ein HTML Rebell sein :-)
und ich werd zu einem Nörgler ;ugl :-)

 

[MiTsch]

Teilerfolg !

Der Ansatz von mermshaus und auch die kürzere Variante von struppi,
funktionieren sowohl unter FF, Opera, Chrome und dem IE.

Was jedoch dann nicht mehr funktioniert ist die automatische Weiterleitung wenn kein Mausklick ausgeführt wird.
Mein bisher funktionierender Code dazu lautet:
</script> <meta http-equiv="refresh" content="5; {{link_url::2}}>

Ich suche nun noch einen Weg die beiden Möglichkeiten zu vereinen.

Viele Grüße
MiTsch

 

[mermshaus]

Na ja, schreib das einfach zusätzlich rein. ;)

 

[MiTsch]

Super es funktioniert!

Zuerst mal ein großes Dankeschön an alle die, die sich über mein Problem Gedanken gemacht und ihre Zeit investiert haben.

mermshaus: Na ja, schreib das einfach zusätzlich rein.

Das hatte ich, sogar in verschiedenen Versionen. Hmm... vielleicht liegts auch an der Uhrzeit!

Ich habs jetzt nicht mehr getestet aber ich glaube auch die Reihenfolge der Anweisungen ist entscheidend.

Das ganze sieht jetzt so aus:

<script type="text/javascript">
document.onclick = function () {
window.location = '{{link_url::2}}';
};
</script><meta http-equiv="refresh" content="5; {{link_url::2}}>

Vielen Dank nochmals
und eine gute N8

MiTsch

 

[mermshaus]

Ich denke nicht, dass es von der Reihenfolge abhängt. (Bei deinem gerade geposteten Code fehlt übrigens wohl ein schließendes Anführungszeichen ganz hinten im meta-Element.)

Was genau deine Template Engine (?) treibt (wodurch etwa "{{link_url::2}}" ersetzt wird), ist aber für uns schwer zu sagen. Möglicherweise hat das Einfluss.

 

[MiTsch]

Danke für den Hinweis!

Ich habs ergänzt, obwohl es keinen Einfluß auf die Funktion hat. :?

</script><meta http-equiv="refresh" content="5; {{link_url::2}}">

 

[struppi]

Die Reihenfolge spielt an sich keine Rolle, wenn es bei dir so ist, dann ist etwas falsch. Was, das könnten wir aber nur sagen, wenn wir den echten Code sehen, nicht den Template Code. Du könntest aber auch selbst einfach mal die Seite validieren The W3C Markup Validation Service vielleicht findest du den Fehler selbst.