Anzeige

CSS Rahmen versetzt sich

CSS Rahmen versetzt sich | PSD-Tutorials.de

Erstellt von Foos, 05.11.2008.

  1. Foos

    Foos Member

    1
    Dabei seit:
    31.01.2007
    Beiträge:
    1.034
    Geschlecht:
    männlich
    Software:
    Photoshop, Dreamweaver, Indesign, Illustrator
    Kameratyp:
    Sony A7R/A7S
    CSS Rahmen versetzt sich
    Hallo, vielleicht könnte mir jemand bei einem kleinen Problem helfen.
    Ich habe um meine Bilder - beim darüberfahren - orangenen Rahmen mit CSS erstellt.
    Allerdings versetzt sich dieser immer so komisch um ein paar pixel nach rechts und unten.
    kann ich das abstellen? also ohne versatz?
    hier wäre es domdesign - Dominik Geisler - Mediendesign - Onlineportfolio
     
    #1      
  2. tombeat

    tombeat Filter Vergewalitger >)

    Dabei seit:
    04.06.2007
    Beiträge:
    246
    Geschlecht:
    männlich
    Ort:
    Graz/Puntigam|er Bier
    Software:
    PS CS2, Macromedia DW8
    CSS Rahmen versetzt sich
    AW: CSS Rahmen versetzt sich

    Am einfachsten wäre es, wenn du dem img ein margin mit genau der breite wie der boarder ist gibst, das du dann beim hover wieder wegnimmst!

    Das hier....
    Code (Text):
    1.  
    2. img{
    3.     border: 0px;
    4. }
    5.  
    6. .imghover:hover
    7. {
    8.     border:3px solid orange;
    9.  
    ...ändern in
    Code (Text):
    1.  
    2. img {
    3.   border: 0px;
    4.   margin: 3px;
    5. }
    6. .imghover:hover
    7. {
    8.     border:3px solid orange;
    9.         margin: 0px;
    10. }
    11.  
    Müsste funktionieren ;)
     
    #2      
  3. Foos

    Foos Member

    1
    Dabei seit:
    31.01.2007
    Beiträge:
    1.034
    Geschlecht:
    männlich
    Software:
    Photoshop, Dreamweaver, Indesign, Illustrator
    Kameratyp:
    Sony A7R/A7S
    CSS Rahmen versetzt sich
    AW: CSS Rahmen versetzt sich

    wow klappt echt perfekt :)
    wenn du mir jetzt noch sagen könntest, wie ich in diesem Rahmen das Bild "schimmern" lassen kann, also das ich irgendwie einen transparenten Kasten oder ähnliches drüberlegen kann - wärste mein Held :D
     
    #3      
  4. tombeat

    tombeat Filter Vergewalitger >)

    Dabei seit:
    04.06.2007
    Beiträge:
    246
    Geschlecht:
    männlich
    Ort:
    Graz/Puntigam|er Bier
    Software:
    PS CS2, Macromedia DW8
    CSS Rahmen versetzt sich
    #4      
  5. alinker

    alinker Noch nicht viel geschrieben

    Dabei seit:
    08.08.2008
    Beiträge:
    11
    Geschlecht:
    männlich
    CSS Rahmen versetzt sich
    AW: CSS Rahmen versetzt sich

    ein guter tip ist auch selfhtml
     
    #5      
  6. jackprince

    jackprince xHTML & CSS Junkie

    Dabei seit:
    12.07.2007
    Beiträge:
    528
    Geschlecht:
    männlich
    Ort:
    Leipzig
    Software:
    Putty, PS, DW, N++, Filezilla, Editor, ID, AI
    Kameratyp:
    Lumix
    CSS Rahmen versetzt sich
    AW: CSS Rahmen versetzt sich

    Für einen Lösungsvorschlag wäre eine Spezifizierung der
    Frage/des Zeils hilfreich.

    Soll das ganze z.B. mit Transparenz arbeiten?
    Also erst nur halbe Sättigung haben und beim
    überfahren mit der maus dann voll zu sehen sein.

    Oder eher ne art glas schimmern am oberen Rand des Bildes?

    Davon abhängig gibt es verschiedene Wege das zu realisieren.

    Im übrigen wäre für das ganze eigentlich eine liste (ul/ol) oder
    eine definitions liste (dl) das eigentlich passende Element.
    Es handelt sich ja wie zu sehen um eine Liste von Referenzen.
     
    #6      
  7. Foos

    Foos Member

    1
    Dabei seit:
    31.01.2007
    Beiträge:
    1.034
    Geschlecht:
    männlich
    Software:
    Photoshop, Dreamweaver, Indesign, Illustrator
    Kameratyp:
    Sony A7R/A7S
    CSS Rahmen versetzt sich
    AW: CSS Rahmen versetzt sich

    Also da blick ich irgendwie nich so richtig durch :) *peinlich*

    @jackprince:

    So würd ichs mir vorstellen:

    [​IMG][​IMG]

    also sobald man über einen kasten mit der maus fährt, wird dieser heller bzw. etwas transparent!


    @alinker: da wär ich fast nich draufgekommen ;) ne mal im ernst, dort bin ich auch nicht weitergekommen, deshalb stell ich die Frage ja auch hier!
     
    #7      
  8. jackprince

    jackprince xHTML & CSS Junkie

    Dabei seit:
    12.07.2007
    Beiträge:
    528
    Geschlecht:
    männlich
    Ort:
    Leipzig
    Software:
    Putty, PS, DW, N++, Filezilla, Editor, ID, AI
    Kameratyp:
    Lumix
    CSS Rahmen versetzt sich
    AW: CSS Rahmen versetzt sich

    Sollten alle Bilder gleich groß sein kannst du es eventl. wie folgt machen ...

    HTML:
    1.  
    2. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    3. <html xmlns="http://www.w3.org/1999/xhtml">
    4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    5. <title>Untitled Document</title>
    6. body {
    7.  text-align: center;
    8. }
    9. .img_box {
    10.  width: 468px;
    11.  height: 351px;
    12.  border: 2px solid red;
    13.  margin: auto auto;
    14. }
    15. .img_box img {
    16.  border: none;
    17. }
    18. a:link .img_overlay, a:visited .img_overlay {
    19.  background: #000;
    20.  filter:alpha(opacity=50);
    21.  -moz-opacity:.50;
    22.  opacity:.50;
    23.  width: 468px;
    24.  height: 351px;
    25.  display:block;
    26.  position: absolute;
    27. }
    28. a:hover .img_overlay {
    29.  filter:alpha(opacity=10);
    30.  -moz-opacity:.10;
    31.  opacity:.10;
    32. }
    33. </head>
    34.  
    35. <div class="img_box">
    36. <a href="#">
    37. <span class="img_overlay"></span>
    38. <img src="http://www.wayodd.com/funny-pictures2/funny-pictures-this-cat-will-kill-you-1YX.jpg"  />
    39. </a>
    40. </div>
    41. </body>
    42. </html>
    43.  
    Das gute an der Variante ist, das du dem overlay auch ein Bild verpassen
    kannst, welches du auswechselst. So kannst du z.B. ein PNG etc. über
    das eigentlich Bild setzen um den Effekt zu erzielen.

    Derzeit arbeitet das mit opacity bzw. -moz-opacity

    Eidth sagt:
    Du kannst den Quelltext einfach in eine datei abspeichern und
    im browser ansehen, dann siehst du wie das aussieht derzeit.
    Weiterhin kannst du einfach mal mit den Werten herumspielen.

    http://www.mandarindesign.com/opacity.html
     
    Zuletzt bearbeitet: 06.11.2008
    #8      
  9. Foos

    Foos Member

    1
    Dabei seit:
    31.01.2007
    Beiträge:
    1.034
    Geschlecht:
    männlich
    Software:
    Photoshop, Dreamweaver, Indesign, Illustrator
    Kameratyp:
    Sony A7R/A7S
    CSS Rahmen versetzt sich
    AW: CSS Rahmen versetzt sich

    danke für deine Hilfe!
    Aber irgendwie ist mir das ein wenig zu komplex. Wenn ich das mit meinen Bildern versuche, bekomme ich nur einen roten Rahmen.
    Ich dachte ich kann das vl. mit einem einfachen CSS code regeln. :)
     
    #9      
  10. jackprince

    jackprince xHTML & CSS Junkie

    Dabei seit:
    12.07.2007
    Beiträge:
    528
    Geschlecht:
    männlich
    Ort:
    Leipzig
    Software:
    Putty, PS, DW, N++, Filezilla, Editor, ID, AI
    Kameratyp:
    Lumix
    CSS Rahmen versetzt sich
    AW: CSS Rahmen versetzt sich

    ich poste dir morgen mal wie das mit deinen Bildern aussehen würde
     
    #10      
  11. Foos

    Foos Member

    1
    Dabei seit:
    31.01.2007
    Beiträge:
    1.034
    Geschlecht:
    männlich
    Software:
    Photoshop, Dreamweaver, Indesign, Illustrator
    Kameratyp:
    Sony A7R/A7S
    CSS Rahmen versetzt sich
    AW: CSS Rahmen versetzt sich

    sau cool. ich danke dir
     
    #11      
  12. jackprince

    jackprince xHTML & CSS Junkie

    Dabei seit:
    12.07.2007
    Beiträge:
    528
    Geschlecht:
    männlich
    Ort:
    Leipzig
    Software:
    Putty, PS, DW, N++, Filezilla, Editor, ID, AI
    Kameratyp:
    Lumix
    CSS Rahmen versetzt sich
    AW: CSS Rahmen versetzt sich

    heut leider zeitlich nichts geworden ... muss dich auf morgen vertrösten
     
    #12      
  13. tombeat

    tombeat Filter Vergewalitger >)

    Dabei seit:
    04.06.2007
    Beiträge:
    246
    Geschlecht:
    männlich
    Ort:
    Graz/Puntigam|er Bier
    Software:
    PS CS2, Macromedia DW8
    CSS Rahmen versetzt sich
    AW: CSS Rahmen versetzt sich

    Schau dir mal dieses Tut an... das is auch ganz gut, und kommt auch ohne Bilder vorausladen aus!

    Aber es hat nichts mit transparenz zu tun, sondern du kannst einfach nur 2 Bilder voneinander abwechseln! Ein helles und ein normales zB.

    http://www.webkrauts.de/2007/10/20/hovereffekte-mit-css-sprites/
     
    #13      
  14. Foos

    Foos Member

    1
    Dabei seit:
    31.01.2007
    Beiträge:
    1.034
    Geschlecht:
    männlich
    Software:
    Photoshop, Dreamweaver, Indesign, Illustrator
    Kameratyp:
    Sony A7R/A7S
    CSS Rahmen versetzt sich
    AW: CSS Rahmen versetzt sich

    hast dus vergessn oder keine Zeit? :)

    @tombeat: danke, aber meine bilder sind teils unterschiedlich weit auseinander
     
    #14      
  15. jackprince

    jackprince xHTML & CSS Junkie

    Dabei seit:
    12.07.2007
    Beiträge:
    528
    Geschlecht:
    männlich
    Ort:
    Leipzig
    Software:
    Putty, PS, DW, N++, Filezilla, Editor, ID, AI
    Kameratyp:
    Lumix
    CSS Rahmen versetzt sich
    AW: CSS Rahmen versetzt sich

    Ich wollte erstmal abwarten ob tombeat's Lösung dir eventl. schon genügt.
    LÖsung schieb ich dir heut abend mal hier rein. ;)


    Tante EDITH sagt:

    Tut mir leid doch bissl viel um die Ohren, ich denke aber bis zum Wochenende
    bekomm ichs mal hin.

    MfG jacK
     
    Zuletzt bearbeitet: 13.11.2008
    #15      
  16. tombeat

    tombeat Filter Vergewalitger >)

    Dabei seit:
    04.06.2007
    Beiträge:
    246
    Geschlecht:
    männlich
    Ort:
    Graz/Puntigam|er Bier
    Software:
    PS CS2, Macromedia DW8
    CSS Rahmen versetzt sich
    AW: CSS Rahmen versetzt sich

    Macht ja nichts^^
    Du musst sowieso jedes Bild extra ansprechen, da jedes Bild ja ein anderes ist ;)
    Dann kannst ihnen ja auch gleich die passende Breite verpassen:D
     
    #16      
x
×
×
teststefan