kostenloser Webspace werbefrei: lima-city


hover effekt mit bildern alles verrutscht

lima-cityForumDie eigene HomepageHTML, CSS & Javascript

  1. Autor dieses Themas

    sessin

    Kostenloser Webspace von sessin

    sessin hat kostenlosen Webspace.

    also ich habe folgendes tag/problem">problem:
    habe diesen code benutzt

    .klasse span {
    	display:			none;
    }
    .klasse:link, .klasse:visited {
    	display:			block;
    	width:				100%;
    	height:				100%;
    	background:			url(Bild1);
    }
    .klasse:hover, .klasse:active, .klasse:focus {
    	background-image:		url(Bild2);
    }

    <a href="" class="klasse"><span>Alternativtext</span></a>


    der hat auch funktioniert beim bild. aber jetzt verrutscht mir alles.
    dh die restlichen bilder springen in die nächste zeile obwohl ich alle bilder in den tag <nobr> gesetzt habe.
    hat jemand ne idee wieso das springt?
  2. Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!

    lima-city: Gratis werbefreier Webspace für deine eigene Homepage

  3. w******s

    sessin schrieb: hat jemand ne idee wieso das springt?
    Aus einem Inline-Element machst du ein Block-Element (Zeile 5).

    Ich kann mir nicht vorstellen, was genau das bewirken soll, ne Beispielseite wäre ganz gut.
  4. e********l

    1) Dein Code beim IE erst ab Version 7
    2) 100% Angaben? Gewöhne die absolute Werte an
    3) Siehe 1 und 2

    //edit: In welcher Form verrutscht es denn? Links, rechts, unten? Eventuell die Elemente floaten lassen und direkt mit Block-Elementen arbeiten so wie es sich gehört.

    Beitrag zuletzt geändert: 22.7.2009 17:21:38 von evil-devil
  5. funktioniert visited, active, ... auch bei anderen elementen (z.B. <div>)?

    ich habe auch schon mal probiert sowas in der art zu machen, und es hat auch funktioniert, aber ich würde gerne mehr zu diesem thema erfahren!

    Mfg frmarkus

    Beitrag zuletzt geändert: 22.7.2009 17:44:45 von frmarkus
  6. e********l

    frmarkus schrieb:
    funktioniert visited, active, ... auch bei anderen elementen (z.B. <div>)?

    Gemäß CSS 2 Definition schon, aber das geht im IE erst ab Version 7. Der IE6 versteht das nicht. Die anderen Browser können das soweit alle.
  7. Danke erst mal,

    aber wenn ich bei einer tabelle machen will, dass beim drüberfahren immer die ganze reihe einen anderen hintergrund hat um das ganze übersichtlicher zu machen.

    und gibt es andere programmiersprachen als Html, Php um Websites zu erstellen.

    Danke
    frmarkus
  8. w******s

    frmarkus schrieb: aber wenn ich bei einer tabelle machen will, dass beim drüberfahren immer die ganze reihe einen anderen hintergrund hat um das ganze übersichtlicher zu machen.

    tr:hover td {background:#ccc;}


    frmarkus schrieb: und gibt es andere programmiersprachen als Html, Php um Websites zu erstellen.
    Um Webseiten schön zu gestalten reichen HTML und CSS aus, ggf. sind ein paar Grafikeffekte wissenswert!
  9. Autor dieses Themas

    sessin

    Kostenloser Webspace von sessin

    sessin hat kostenlosen Webspace.

    Also ich hab das chaos mal hochgeladen.

    http://sessin.lima-city.de/content/portfolio.html

    eigentlich sollten die bilder in einer reihe sein, aber das fünfte bild wo ich den hover effekt eingebaut habe, springt in die nächste zeile.

    @werktags ich weiß leider nicht was inline oder block elemente sind aber ich lasse es mir gerne erklären, wenn es daran liegt.

    habe jetzt auch pixelangaben genommen.

    ich habe nur den firefox zum testen installiert, weil das hier linux ist. keine ahnung wie es auf dem IE aussieht..
  10. w******s

    Ich hoffe du verträgst Kritik: Das is ja blödsinn!
    Wenn du Bilder in einem Portfolio verwendest, dann sind das auch Bilder, daher wird der img-Tag benutzt! So ein img-Tag ist wie ein span, small, em, strong, etc. ein Inline-Element. Lies auf selfhtml genau was das ist. Ich kann das nicht so effektiv erklären, aber es ist mehr oder weniger in einer Zeile und es folgt kein Zeilenumbruch. Blockelemente sind sozusagen "Boxen" wie divs, blockquote, etc.

    Eine Möglichkeit müsste sein, dass du bei allen dann ein float:left noch zusätzlich unterbringst.

    Ich würde mir mal ne andere Methode überlegen um solche Effekte zu erzielen. Vllt. sogar JS!
  11. Autor dieses Themas

    sessin

    Kostenloser Webspace von sessin

    sessin hat kostenlosen Webspace.

    ich verstehe nicht so ganz was du meinst. ich habe nachgelesen wegen den inline elementen und eigentlich erzeugen die doch keinen absatz. was genau ist an dem code denn block-element??
    wie der image-tag wird benutzt...für was?

    meinst du ich soll jetzt bei allen imgs float:left sagen? ich kann leider kein javascript.
  12. sessin schrieb:
    ich verstehe nicht so ganz was du meinst. ich habe nachgelesen wegen den inline elementen und eigentlich erzeugen die doch keinen absatz. was genau ist an dem code denn block-element??
    wie der image-tag wird benutzt...für was?

    meinst du ich soll jetzt bei allen imgs float:left sagen? ich kann leider kein javascript.


    Auf js würde ich an Deiner stelle eher verzichten , schafft nur viele neue Probleme für ein , an sich, kleines Problem.

    Guck Dir am besten nochmal die css-befehle float , display und margin genauer an.

    Ein erster Ansatz von mir wäre:
    #arbeitsproben {margin-left: 50px;
                    margin-bottom: 150px;
                    margin-top: 350px;}
    
    a {float: left; margin: 10px; }
    
    p.willkommen {margin-left: 50px;}


    also a {float: left; margin: 10px; } an dieser stelle einsetzen und gucken was passiert..

    Übrigens:

    <meta content="art, homepage, sweet home, kerstin loop, portfolio, erinnerungen an die genesis, genesis, typografie, nelson, kang, Ethel R. Nelson, C.H. Kang, hausarbeit, design, webdesign, schüpfung, schöpfungsbericht," name="keywords"/>

  13. um ehrlich zu sein beim mir kommt nix hover effect

    ich hab mir deinen code angekuckt und bin och n bisl verwirrt
    du versuchst ein hintergrund bild zu verändern
    wärend ein vorder grund bild angezeigt wird (a img) ?!?

    also bei mir passiert gar nix
    da verändert sich nix

    und die hover elemente sind für links ja
    trotzdem passiert bei mir definitiv nix

    ich könnt dir evl helfen aber ich glaub ich geh langsam mal ins bett
    und außerdem versteh ich dein problem nich so recht
    weil da passiert nix
    da reagiert nix und ich hab firefox ...

    gut morgen k ?

    ps: sorry meine heute

    Beitrag zuletzt geändert: 23.7.2009 5:40:11 von aero23
  14. w******s

    sessin schrieb: ich verstehe nicht so ganz was du meinst. ich habe nachgelesen wegen den inline elementen und eigentlich erzeugen die doch keinen absatz. was genau ist an dem code denn block-element??
    Du machst mit CSS "display:block;" aus einem Inline-Element ein Block-Element, daher gibt es diesen Umbruch!

    sessin schrieb: wie der image-tag wird benutzt...für was?
    Ne, der img-Tag wird nicht benutzt. Das ist ja das Schlimme. Die Bilder, wie du sie jetzt verwendest gehören zum Design des Layouts und haben keine inhaltliche Bedeutung. Das ist ja aber semantisch falsch, weil sie ja eine Bedeutung haben!
    Der img-Tag ist ja für sowas gedacht: Bilder auf die Webseite zu bringen.

    simuliertes schrieb: Auf js würde ich an Deiner stelle eher verzichten , schafft nur viele neue Probleme für ein , an sich, kleines Problem.
    Ich bin bestimmt kein Fan von JS, allerdings ist der komplette Ansatz nicht richtig. Und hier schadet JS nicht, wenns ausgeschaltet ist, gibt es eben keinen Effekt, das macht es nämlich nicht deutlich schlimmer!

    Hier findet man ein paar Ansätze wie man das mit dem Hover lösen könnte. Allerdings wurde ich das nicht so machen, da dann wieder zwei Bilder geladen werden müssen, dass ist unnötig und kommt mit Zeitverzögerung bei großen Bildern.

    Oft reichen kleine Effekte aus, die eine große Wirkung haben. Ich könnte mir sowas vorstellen:
    img.portfolio {opacity:0.4;}
    img.portfolio:hover {opacity:1;}
    Wenn man dann noch jQuery benutzt, kann man hier einen weichen Übergangseffekt erzielen zwischen dem teiltransparent und nichttransparent.
  15. Autor dieses Themas

    sessin

    Kostenloser Webspace von sessin

    sessin hat kostenlosen Webspace.

    @simuliertes: vielen dank für die hinweise. habs mal ausprobiert, aber irgendwie verrutscht noch mehr^^

    @werktags: du meinst dadurch das ich die bilder verlinkt habe sind sie inhaltlich nicht mehr von bedeutung? naja aber bilder haben doch gar keinen inhalt, zumindest nicht in html. ausserdem habe ich schon häufig gesehen, dass bilder auf diese art und weise funktionieren. es gibt ja auch viele links die eigentlich bilder sind. wie machen die das denn (falls nicht gerade mit js)?
    auf jeden fall vielen dank für den tipp mit opacity.

    wird bei euch allen kein hover effekt angezeigt?? ich glaube dann muss ich eine ganz neue lösung suchen. scheint sowieso alles ziemlich falsch zu sein^^

    aber ich würde schon gern wissen, wie man so einen hover effekt mit bildern vernünftig hinbekommt..



  16. w******s

    Zuerst einmal zwei Formeln:
    HTML = Inhalt
    CSS = Formatierung
    Das heißt im Klartext, man sollte den kompletten Inhalt genießen können, auch wenn kein Stylesheet vorhanden ist.
    Folglich ist das falsch um ein Bild darzustellen:
    <a href="blah.jpg"><span>alternativtext</span></a>

    Richtig ist und bleibt:
    <a href="blah.jpg" title="Bild zu ..."><img src="laber.jpg" alt="laber" /></a>


    Jetzt kannste überlegen, ob es überhaupt Sinn macht solche einen Hover-Effekt zu benutzen. Denn es bringt dir nichts weiter als mehr zusätzliche Arbeit und dem Benutzer einen kleinen Augeneffekt, nichts besonderes.

    Es gäbe hier zwar JS-Lösungen. So könnte man bei hover die Url des Bildes abändern. (so ähnlich ist es ja jetzt der Fall, nur dass es über CSS passiert). Aber das würde ja ein Nachladen des Bildes bewirken und ist einfach keine gute Möglichkeit.
  17. im grunde genommen müsste

    <div style="white-space:nowrap;">
    link 1.1
    link 1.2
    link 1.3
    </div>
    
    <div style="white-space:nowrap;">
    link 2.1
    link 2.2
    link 2.3
    </div>

    funktionieren

    alternativ hättest auch ne tabelle drum legen können
    dann kann man das auch noch schön ausrichten und formatieren
    gibt natürlich noch viel mehr attribute

    <style type="text/css">
    
    .bilderirwas{
    width:0%;
    background:url(irgendwas);
    }
    
    .bilderirwas td{
    width:0%;
    text-align:center;
    vertical-align:middle;
    }
    
    </style>
    
    <table class="bilderirwas">
    <tr>
    <td>link 1.1</td>
    <td>link 1.2</td>
    <td>link 1.3</td>
    </tr>
    <tr>
    <td>link 2.1</td>
    <td>link 2.2</td>
    <td>link 2.3</td>
    </tr>
    </table>

    aber ich hab gesehen du hast das jetzt mit float gemacht
    das musst du dann aber auch für jedes bild machen
    find ich persönlich nicht so gut

    leider kann man das mit dem hover backimage auch nicht anders machen
    als für jedes bild eine klasse definieren

    ps:
    der name von deinem image is kaputt "evil_opt2.jpe" << sollteste vieleicht in jpg ändern :wink:
    steht aber auch im quell text so drin

    hf

    edit:
    übrigens dein menu layer überlagert den unteren bereich deiner seite
    die bilder werden nicht vollständig angezeigt
    eventuell solltest dann auch den hauptteil als fixed div definieren
    der scrollbalken würde dann auch n bisl kleiner werden

    musste aber dann auch den body auf 100% setzen und overflow:hidden;
    weil sonst hast 2 balken

    Beitrag zuletzt geändert: 23.7.2009 18:40:53 von aero23
  18. Autor dieses Themas

    sessin

    Kostenloser Webspace von sessin

    sessin hat kostenlosen Webspace.

    also das mit dem nowrap hat nicht so geklappt.

    ich habe noch eine möglichkeit im inet gefunden für verlinkte bilder die ich aber nicht ausprobiert habe weil ich dafür jedes bild verändern müsste. aber der vorteil wäre ich müsste nicht mit zwei bildern hantieren.
    müsste quasi zwei bilder aneinanderhängen und bei width/height nur die hälfte des bildes angeben. bei hover schiebt sich die andere hälfte nach links:
    <!-- HTML-TEIL-->
    <body>
    <div class=”huv”>
    <a href=”#”>
    <img src=”das_bild.jpg” alt=”alternativtext” title=”titel” />
    </a>
    </div>
    </body>
    <!--CSS-TEIL-->
    div.huv {width: 210px; height: 200px; overflow: hidden;}
    div.huv {text-decoration: none; display: block; width: 420px;}
    div.huv a img {border: 0;}
    div.huv a:hover {margin-left: -210px;}


    naja ich werde das jetzt erstmal bei dem opacity-effekt belassen und versuchen, eine lightbox hinzubekommen.

    aber probleme habe ich noch mit dem menü unten. hab das jetzt so gemacht wie aero23 das gesagt hat, allerdings ist das ganze jetzt steckengeblieben..?


    Beitrag zuletzt geändert: 23.7.2009 22:37:21 von sessin
  19. lokishomepage

    Kostenloser Webspace von lokishomepage

    lokishomepage hat kostenlosen Webspace.

    ich finds mit js einfacher

    Das in den Head Bereich gepackt:

    <script type="text/javascript">
      <!--
      function rollover(button,bild){
      document.getElementById(button).src=bild;
      }  //-->
      </script>


    Die img Tags sehen dann so aus:

    <a href="URL"><img src="Normal1.jpg" alt="Name" style="border:0px;" id="ID1" onmouseover="rollover('ID1','Beimausover1.jpg')" onmouseout="rollover('ID1','Normal1.jpg')" /></a>
    
    <a href="URL"><img src="Normal2.jpg" alt="Name" style="border:0px;" id="ID2" onmouseover="rollover('ID2','Beimausover2.jpg')" onmouseout="rollover('ID2','Normal2.jpg')" /></a>


    usw...


    Beitrag zuletzt geändert: 23.7.2009 22:51:21 von lokishomepage
  20. sry musste das erstmal live ausprobieren
    also
    dein menu is ca 74 75 px hoch
    hab den bottom mal mit 100 definiert
    und im body muss der overflow raus
    so wie es da steht hauts eig hin kannste ersetzen

    so müsste dat hinhauen
    ich hab übrigens nur ne 1024er auflösung deshalb hab ich n schönen balken ganz unten
    glaub müstest das image im menu als background setzen
    denn müsste es gehen
    achso margin is außenabstand
    hab jetzt einfach mal padding genommen innenabstand ^^
    body {
    background:#000000 url(images/banner.gif) repeat-x scroll 0 0;
    color:#FFFFFF;
    font-family:arial;
    }
    
    #arbeitsproben {
    margin:0;
    overflow:visible;
    padding:350px 50px 100px 25px;
    position:absolute;
    width:100%;
    }

    und dis mach mal anders
    kann fehler auslösen wegen doctype
    <a class="navi" href="portfolio.html">
    <font size="5px">Portfolio</font>
    </a>

    kannst auch font-size:normal; angeben
    <a class="navi" style="font-size:large;" href="portfolio.html">
    Portfolio
    </a>

    und dann nimm mal den doctype
    deiner is xhtml extrem viel zu streng kein wunder dass das bisl spinnt
    der hier is normal html
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">


    hf

    edit:

    hab mir dein menu nochmal angekuckt
    also du hast das als background gesetzt
    aber gleichzeitig als image in deinem layer1 div eingebaut

    hm kann sein das nach dem doctype wechsel und der width:100%; angabe im <div> funzt das es ohne <img> zu sehen is
    aber sicher bin ich mir jetzt nicht
    eventuell hilfts dann wenn du einfach ne leere tabelle mit 100% drüber legst mit background transparent
    <table style="background-color:transparent; width:100%; height:100%;"></table>


    hf

    Beitrag zuletzt geändert: 24.7.2009 0:21:34 von aero23
  21. Autor dieses Themas

    sessin

    Kostenloser Webspace von sessin

    sessin hat kostenlosen Webspace.

    @loki: hey voll hammer das funktioniert! *freu* ich dachte immer js wäre voll kompliziert und lang, aber anscheinend doch nicht. jetzt muss ich nur noch den opacity effekt für das info wegkriegen..

    @aero: naja aber das menü klebt ja immer noch unten? und wegen font size: mit bindestrich funktionierts bei mir nicht..
    stimmt du hast recht das bgimage im css war überflüssig. aber wie neutralisiere ich den opacity-effekt für bestimmte links?

    mal ein fettes lob an euch und das forum! ich bin noch nicht lange hier aber es gibt voll viele hilfsbereite leute die auch anfängern wie mir helfen und man bekommt total schnell antworten :thumb:



    Beitrag zuletzt geändert: 24.7.2009 0:42:39 von sessin
  22. Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!

    lima-city: Gratis werbefreier Webspace für deine eigene Homepage

Dir gefällt dieses Thema?

Über lima-city

Login zum Webhosting ohne Werbung!