hover effekt mit bildern alles verrutscht
lima-city → Forum → Die eigene Homepage → HTML, CSS & Javascript
arbeitsproben
banner
bild
blocken
code
effekt
element
http
image
index
info
inhalt
portfolio
position
problem
tabelle
tag
text
url
zeile
-
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? -
Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!
lima-city: Gratis werbefreier Webspace für deine eigene Homepage
-
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. -
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 -
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 -
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. -
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 -
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! -
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.. -
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! -
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. -
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"/>
-
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 -
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:
Wenn man dann noch jQuery benutzt, kann man hier einen weichen Übergangseffekt erzielen zwischen dem teiltransparent und nichttransparent.img.portfolio {opacity:0.4;} img.portfolio:hover {opacity:1;} -
@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..
-
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. -
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
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 -
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 -
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 -
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 -
@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
Beitrag zuletzt geändert: 24.7.2009 0:42:39 von sessin -
Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!
lima-city: Gratis werbefreier Webspace für deine eigene Homepage
