Anzeige

Seitliche Buttons einbinden?

Seitliche Buttons einbinden? | PSD-Tutorials.de

Erstellt von Stromer_83, 16.06.2012.

  1. Stromer_83

    Stromer_83 Noch nicht viel geschrieben

    Dabei seit:
    05.05.2012
    Beiträge:
    9
    Geschlecht:
    männlich
    Ort:
    Tholey
    Software:
    Adobe Dreamweaver CS6
    Seitliche Buttons einbinden?
    Ich würde gerne auf meiner Seite in paar Buttons an dem Browser Rand einbinden.

    Beispiel:
    http://www.databecker.de/shop/index.php

    Ich weiß das es auf der Seite über eine Software gemacht ist, welche von Data Becker ist, allerdings muss es ja auch ne Möglichkeit geben dieses selbst zu erstellen.
    Auf vielen anderen Seiten gibt es ja ähnliches.

    Kennt sich von euch jemand damit aus? Ich suche jetzt schon tagelang aber leider ohne Erfolg.
     
    #1      
  2. Bauer_Lindemann

    Bauer_Lindemann Hat es drauf

    Dabei seit:
    16.01.2010
    Beiträge:
    2.152
    Geschlecht:
    männlich
    Ort:
    Dresden
    Kameratyp:
    Kodak Easyshare CX 6330
    Seitliche Buttons einbinden?
    #2      
  3. Stromer_83

    Stromer_83 Noch nicht viel geschrieben

    Dabei seit:
    05.05.2012
    Beiträge:
    9
    Geschlecht:
    männlich
    Ort:
    Tholey
    Software:
    Adobe Dreamweaver CS6
    Seitliche Buttons einbinden?
    AW: Seitliche Buttons einbinden?

    Sorry, hab ich vergessen dabei zu schreiben, DW CS6 habe ich.
     
    #3      
  4. Fidelis_jpg

    Fidelis_jpg Aktives Mitglied

    Dabei seit:
    02.09.2009
    Beiträge:
    252
    Geschlecht:
    männlich
    Ort:
    Nürnberg
    Software:
    Adobe Creative Suite CS6; Maya 2014; Nuke
    Kameratyp:
    Canon EOS 600D
    Seitliche Buttons einbinden?
    AW: Seitliche Buttons einbinden?

    Bauer_Lindemann meinte glaube ich eher, mit welchem Webseiten-Template oder welchem Content-Management-System du arbeitest.
    Anscheinend codest du aber alles selber ohne Umgebung. :)

    Solche Buttons gehen freilich auch für dich, ist schließlich nur HTML und CSS. (evtl. noch ein bisschen Javascript)

    Erstmal würde ich dir raten, die passenden Bilder (+ Hover-Bilder) zu erstellen, oder die Buttons alternativ mit HTML und CSS zu gestalten, was aber schnell beim Schrift-drehen schiefgehen kann, wenn deine Website browserübergreifend funktionieren soll.

    HTML:
    HTML:
    1.  
    2. <div class="button" onclick="javascript:window.location='http://deinlink.de/'"></div>
    3.  
    Mehr Code brauchst du hier nicht!
    Die Style-Definitionen der Buttons sehen recht einfach aus:

    CSS:
    Code (Text):
    1.  
    2. div.button{
    3.   position:fixed;
    4.   right:0px;
    5.   background-image:url('button-normal.png');
    6. }
    7.  
    8. div.button:hover{
    9.   background-image:url('button-hover.png');
    10. }
    11.  
    So der grobe Aufbau.
    Der Button ist also jetzt ein leeres DIV mit Hintergrundbild und einem onlick()-Event, da ein normaler Link hier nicht valide wäre.
    Ich habe das jetzt erst geschrieben und dann die Buttons von deinem Link oben untersucht und die dort machen es genau so ;)

    Grüße, Fidelis
     
    #4      
  5. Stromer_83

    Stromer_83 Noch nicht viel geschrieben

    Dabei seit:
    05.05.2012
    Beiträge:
    9
    Geschlecht:
    männlich
    Ort:
    Tholey
    Software:
    Adobe Dreamweaver CS6
    Seitliche Buttons einbinden?
    AW: Seitliche Buttons einbinden?

    Jepp alles selbst geschrieben :)

    Danke für die Tipps ich werde das die Tage mal probieren so wie sich die Zeit ergibt und mich dann wieder melden!

    Danke
     
    #5      
  6. Tr3icio

    Tr3icio Nicht mehr ganz neu hier

    Dabei seit:
    03.04.2011
    Beiträge:
    53
    Geschlecht:
    männlich
    Ort:
    Hude
    Software:
    Jetbrains PhpStorm
    Seitliche Buttons einbinden?
    AW: Seitliche Buttons einbinden?

    HTML:
    1.  
    2. <div class="button" onclick="javascript:window.location='http://deinlink.de/'"></div>
    3.  
    1. Man kann direkt ein <a> nehmen und per CSS display auf block oder inline-block setzen.
    2. onclick fügt einen JS Eventhändler hinzu. javascript: reinzuschreiben ist sogesehen falsch/veraltet. (javascript: in Attributen sollte gar nicht mehr genutzt werden, wird aber noch unterstützt, da viele alte Websites/Skripte existieren, die diesen noch nutzen)
     
    #6      
  7. Stromer_83

    Stromer_83 Noch nicht viel geschrieben

    Dabei seit:
    05.05.2012
    Beiträge:
    9
    Geschlecht:
    männlich
    Ort:
    Tholey
    Software:
    Adobe Dreamweaver CS6
    Seitliche Buttons einbinden?
    AW: Seitliche Buttons einbinden?

    Super, danke es funktioniert!

    Das Leben kann auch einfacher sein als man denkt ;-)
     
    #7      
  8. Fidelis_jpg

    Fidelis_jpg Aktives Mitglied

    Dabei seit:
    02.09.2009
    Beiträge:
    252
    Geschlecht:
    männlich
    Ort:
    Nürnberg
    Software:
    Adobe Creative Suite CS6; Maya 2014; Nuke
    Kameratyp:
    Canon EOS 600D
    Seitliche Buttons einbinden?
    AW: Seitliche Buttons einbinden?

    Yup, hast natürlich Recht :D
    Bis man alle Möglichkeiten durchdacht hat dauert es immer ein wenig ;)
     
    #8      
  9. Stromer_83

    Stromer_83 Noch nicht viel geschrieben

    Dabei seit:
    05.05.2012
    Beiträge:
    9
    Geschlecht:
    männlich
    Ort:
    Tholey
    Software:
    Adobe Dreamweaver CS6
    Seitliche Buttons einbinden?
    #9      
  10. Stromer_83

    Stromer_83 Noch nicht viel geschrieben

    Dabei seit:
    05.05.2012
    Beiträge:
    9
    Geschlecht:
    männlich
    Ort:
    Tholey
    Software:
    Adobe Dreamweaver CS6
    Seitliche Buttons einbinden?
    AW: Seitliche Buttons einbinden?

    Ich habe aktuell ein Problem mit dem IE8 (beim 9er gehts)
    Wegen dem Hintergrundbild.

    Auf der Test Seite von einem Beitrag über diesen kann man das auch feststellen. Die Seite scrollt nur ganz langsam.

    Gibt es eine Möglichkeit dem IE8 klar zu machen eine andere CSS Datei zu nehmen? Oder vielleicht kann mir sogar jemand weiterhelfen woran das Problem überhaupt liegt?

    Ich bin wirklich ratlos, mein Code ist sicher alles andere als sauber, funktioniert aber bis auf das besagte Problem.


    Ich wäre wirklich für Hilfe dankbar!
     
    #10      
  11. simonpicos

    simonpicos Mod | Forum

    Dabei seit:
    16.02.2011
    Beiträge:
    2.468
    Geschlecht:
    männlich
    Ort:
    Taunus
    Software:
    Adobe CC (PS, Lightroom, Illustrator, Premiere, After Effects)
    Kameratyp:
    Canon EOS 600D + div. Linsen
    Seitliche Buttons einbinden?
    AW: Seitliche Buttons einbinden?

    Stichwort "conditional comments"
     
    #11      
  12. Stromer_83

    Stromer_83 Noch nicht viel geschrieben

    Dabei seit:
    05.05.2012
    Beiträge:
    9
    Geschlecht:
    männlich
    Ort:
    Tholey
    Software:
    Adobe Dreamweaver CS6
    Seitliche Buttons einbinden?
    AW: Seitliche Buttons einbinden?

    Das scheint ein generelles IE8 Problem zu sein?!

    http://www.top-gst.ch/Links_Fe.htm

    Da passiert das gleiche wie bei mir.

    Also bringt mir leider nur die CSS zu ignorieren nicht viel.
    Ganz anderes gefragt.

    Hab ich eine Möglichkeit dem IE8 mitzuteilen das er eine Zeile, in meinem Falle

    <img src="test.jpg" class="bg">

    komplett ignoriert? Dann hab ich zwar bei IE kein Hintergrundbild, aber das wäre ok für mich.
     
    #12      
  13. Stromer_83

    Stromer_83 Noch nicht viel geschrieben

    Dabei seit:
    05.05.2012
    Beiträge:
    9
    Geschlecht:
    männlich
    Ort:
    Tholey
    Software:
    Adobe Dreamweaver CS6
    Seitliche Buttons einbinden?
    AW: Seitliche Buttons einbinden?

    <!--[if !IE 8]><!--> <img src="../grafik/hintergrund_1.jpg" class="bg"> <![endif]-->

    Scheint zu funktionieren, nur was passiert mit den älteren IE´s ? :)
     
    #13      
x
×
×