CSS, Hover-Anzeige um Javascript zu vermeiden

  • Hey ho,


    ich bastel aktuell an einer privaten Homepage und hab meinen Lebenslauf "grafisch" über CSS formatiert.
    Da bin ich schon sehr stolz drauf, da es mich viel Nerven gekostet hat.
    Die Ladezeit lass ich noch von meinen Bruder (Informatiker) überprüfen und optimieren.


    Aber es geht nun um das Layout und ich will dabei hover mit reinbringen. Ich wollte ähnlich wie diese CSS Hover Menüs dies machen.


    CSS
    1. .entry {
    2. border: 1px solid black;
    3. padding: 2px;
    4. position: absolute;
    5. overflow: hidden;
    6. display: block;
    7. float: right;
    8. left: 90px;
    9. z-index: 2;
    10. }



    Als Ausgabe kommt das entsprechend raus!

    Zitat

    2008/09 - 2010/07
    Schulische Ausbildung


    Elektrotechniker - Fachrichtung: Betriebs- und Automatisierungstechnik
    Abschluss: Fachhochschulreife


    Städtische Fachschule für Elektrotechnik in Aschaffenburg


    Wenn nun eine Aktivität nur wenige Wochen/Monate geht werden nur die ersten Zeilen angezeigt und das ist nicht praktisch.
    Ich will wenn ich über diesem ganzen "entry" block bin, dass sich ein Fenster z.b. mit 500x500 pixeln öffnet wo diese Daten alle abbildet.


    Ich hab zahlreiche dinge probiert und bekomm es einfach nicht hin :( egal was ich mache


    Als Navigationsleiste hab ich folgeden code benutzt und angepasst.


    Das hab ich aber nicht hinbekommen darauf anzupassen.
    Wäre echt schön, wenn mir jemand helfen könnte.


    Liebe Grüße
    Thorsten

  • Wenn es um das Layout geht, wäre es besser, das generierte HTML zu sehen an Stelle des PHP. Wenn die Seite online ist, dann poste doch Mal die URL.


    HTML
    1. <ul class="entry" style="background-color:#57f6d6;width:160px;height:460px;left:90px;top:1630px";/><li>2008/09 - 2010/07<br /><b>Schulische Ausbildung</b><br /><br />Elektrotechniker - Fachrichtung: Betriebs- und Automatisierungstechnik<br /><u>Abschluss</u>: <b>Fachhochschulreife </b><br /><br /><li><a target="_blank" href="http://www.berufsschule1ab.de/index.html">Städtische Fachschule für Elektrotechnik in Aschaffenburg</a></li></li></ul>


    sieht doof aus da es in eine Zeile gehauen wird :-/


    HTML
    1. <ul class="entry" style="background-color:#57f6d6;width:160px;height:460px;left:90px;top:1630px";/>
    2. <li>2008/09 - 2010/07<br />
    3. <b>Schulische Ausbildung</b><br /><br />
    4. Elektrotechniker - Fachrichtung: Betriebs- und Automatisierungstechnik<br />
    5. <u>Abschluss</u>: <b>Fachhochschulreife </b><br /><br />
    6. <li><a target="_blank" href="http://www.berufsschule1ab.de/index.html">Städtische Fachschule für Elektrotechnik in Aschaffenburg</a>
    7. </li></li></ul>


    hier vielleicht ein wenig übersichtlicher.
    aktuell tu ich mir echt schwer bzw bekomm es nicht so hin :(
    das hover Fenster was geöffnet wird soll die selben Informationen erhalten. Wie bereits gesagt ist es eben ein wenig Buggy, wenn man nur wenige Monate hat.


    lg Thorsten

  • Da fallen mir zwei Dinge auf:
    1. Dein HTML hat Validierungsfehler. So ist es richtig:

    HTML
    1. <ul class="entry" style="background-color:#57f6d6;width:160px;height:460px;left:90px;top:1630px"> <li>2008/09 - 2010/07<br /> <b>Schulische Ausbildung</b><br /><br /> Elektrotechniker - Fachrichtung: Betriebs- und Automatisierungstechnik<br /> <u>Abschluss</u>: <b>Fachhochschulreife </b><br /><br /></li> <li><a target="_blank" href="http://www.berufsschule1ab.de/index.html">Städtische Fachschule für Elektrotechnik in Aschaffenburg</a> </li> </ul>


    2. Dein hover

    CSS
    1. #navi ul li:hover > ul {

    sagt, dass Du ein Kindelement ul ändern möchtest. Ein solches ul-Element gibt es aber nicht im HTML. Was hast Du hier denn eigentlich vor?

    Dieser Beitrag wurde bereits 1 Mal editiert, zuletzt von Sempervivum ()

  • ich hab ja oben geschrieben, dass der html code per php erzeugt wird (siehe erster post). Muss da auch nochmal schauen.


    der code rund um #navi bezieht sich ausschließlich auf das navigationsmenu welches schon bereits vollständig implementiert ist.
    diese methode mit dem "hover" will ich jetzt auf meinen grafischen lebenslauf anwenden.


    nun erzeuge ich mit dem code einen grafischen eintrag im grafischen lebenslauf. ich will nun, wenn ich darüber bin mit der maus einen hoverfester, wo alle daten angezeigt werden zu dem hover.
    Der Grund liegt daran, dass Einträge mit nur einem oder wenigen Monaten ausschließlich das Datum anzeigen und evtl noch "schulische Ausbildung". Die restlichen Informationen gehen verloren.
    Durch den Hover will ich erwirken, dass definitiv alle Informationen aufrufbar sind.

  • Hallo


    Auch wenn du schon falsch abgebogen und nicht mehr einzufangen bist sollten mögliche Nachahmungstäter folgende Informationen beachten:


    Mit so einem Lebenslauf gehörst du zu den ersten Verlierern, die aussortiert werden.


    Zitat

    Durch den Hover will ich erwirken, dass definitiv alle Informationen aufrufbar sind.


    Das hat mit der Realität nichts zu tun. Es gibt erstaunlich viele Leute die Aufklappmenüs nicht erkennen und denen die Informationen deshalb vorenthalten werden.


    Für die Entscheider ist es zudem unheimlich nervig wenn sie suchen müssen ob noch Informationen versteckt sind und sie diese aufrufen müssen.


    Bewerbungen mit solchen egoistischen Lebensläufe fliegen meist schon raus ohne den restlichen Inhalt überhaupt zu lesen. Besonders kurios wird es meist wenn die Verfasser solcher Lebenläufe sich als Teamplayer bezeichnen - der erste Kontakt sagt ja bereits das Gegenteil aus.


    Zu einem guten Lebenslauf gehört zudem dass der Bewerber in der Lage ist unwichtige von wichtigen Informationen zu trennen und sie so aufzubereiten, dass sie in Schriftform bei normaler Schriftgröße auf eine DIN-A4-Seite passen. Diese Textlänge hat sich auch für Online-Bewerbungen bewährt.


    Von daher lässt auch diese Angabe


    Zitat

    Die Ladezeit lass ich noch von meinen Bruder (Informatiker) überprüfen und optimieren.


    eher schlimmes befürchten. Ein Lebenslauf ist viel Text mit einem kleinen Foto, Ladezeitprobleme können da überhaupt nicht auftauchen. Und ein Informatiker der die Ladezeit von Webseiten optimiert?


    Zitat

    wenn ich darüber bin mit der maus einen hoverfester, wo alle daten angezeigt werden zu dem hover


    Und wieder einer der offensichtlich noch nicht bemerkt hat das Touchscreen-Geräte im Web Desktop-Monitore an Anzahl schon weit überholt haben - und die kennen keinen Hover-Effekt.


    Falls der Lebenslauf einer echten Bewerbung dienen soll - mach ihn besser. Einfach, übersüchtlich ohne jeden SchnickSchnack.


    Gruss


    MrMurphy

    Dieser Beitrag wurde bereits 1 Mal editiert, zuletzt von MrMurphy ()

  • ich versteh was du meinst und genau aus diesem Grund greife ich auf eine Datenbank zu. Wobei ich einen tabellarischen Lebenslauf als auch diesen grafischen Lebenslauf ausgeben kann. Das kann selbst vom Nutzer bestimmt werden.
    Bisher fanden Privatpersonen als auch Unternehmen die Idee genial, da beispielsweise bei Xing die Übersichtlichkeit auf den ersten Blick fehlt WANN es den war. So sieht man genau parallel in welchem Jahr etwas stattgefunden hat.


    Dass ich aussortiert werde halte ich dennoch für unwahrscheinlich, da ich im Schnitt 5 bis 15 Anfragen im Monat von Unternehmen habe. Liegt aber am Bekanntheitsgrad in zwei bestimmten Branchen.


    Wie bereits gesagt gibt es zur Auswahl einen tabellarischen und diesen grafischen Lebenslauf. Und deine Aussagen mit dem Touchscreen ist mir selbst bekannt, diese können problemlos den tabellarischen Lebenslauf aufrufen.
    Das mit den Ladezeiten liegt eher daran, dass ich bisher nur mal einen Prototypen programmiert habe. Da sind sicherlich noch 2-3 Fehler drin, welche die Zeit optimieren können.


    Der Lebenslauf für Unternehmen (online Bewerbung, Bewerbung) sieht anders aus und ist tabellarisch. Aber ich merk schon, dass hier irgendwie nichts bei rum kommt und die Hilfe irgendwie mager ist.

  • Hallo


    Zitat

    Aber ich merk schon, dass hier irgendwie nichts bei rum kommt und die Hilfe irgendwie mager ist.


    Vielleicht solltest du deine Informationspolitik überdenken?


    Erst schreibst du


    Zitat

    ich bastel aktuell an einer privaten Homepage und hab meinen Lebenslauf "grafisch" über CSS formatiert.


    Für mich: Du suchst Arbeit willst dich mit dem Lebenslauf bewerben.


    In den folgenden beiden Beiträgen kommen dazu keine weiteren Informationen.


    Nach meinem Beitrag dann unerwartet:


    Zitat

    Wobei ich einen tabellarischen Lebenslauf als auch diesen grafischen Lebenslauf ausgeben kann. Das kann selbst vom Nutzer bestimmt werden.


    Wobei das natürlich auch extrem benutzerunfreundlich ist. Da die Besucher nicht wissen, welche Informationen sie wo finden, müssen sie beide Möglichkeiten aufrufen und sich dabei mit größtenteils doppeltem Inhalt herumschlagen.


    Und


    Zitat

    Bisher fanden Privatpersonen als auch Unternehmen die Idee genial


    Handelt es sich doch nicht um deinen Lebenslauf wie im ersten Beitrag umschrieben? Und wenn die Idee so genial ist: Warum bist du noch nicht erfolgreich gewesen?


    Außerdem ist es ein großer Unterschied, ob einem eine Idee präsentiert wird oder man später damit arbeiten muss.


    Zitat

    Dass ich aussortiert werde halte ich dennoch für unwahrscheinlich, da ich im Schnitt 5 bis 15 Anfragen im Monat von Unternehmen habe.


    Oder dient der Lebenslauf dazu Aufträge zu bekommen? Dann ist aber ein detailierter Lebenslauf wie einer Bewerbung unsinnig. Außerdem bleibt das Problem, dass die Interessenten nicht wissen, wo sie welche Informationen finden und sich wie schon geschrieben zwangsweise beide Seiten anschauen müssen.


    Und seit wann werden mit einer privaten Homepage berufliche / gewerbliche Aufträge gesucht?


    Zitat

    greife ich auf eine Datenbank


    Wozu überhaupt eine Datenbank mit allen ihren Nachteilen? An einem Lebenslauf ändert sich nachträglich doch nichts mehr? Der wird höchtens noch in sehr großen zeitlichen Abständen erweitert?


    Zitat

    Da bin ich schon sehr stolz drauf, da es mich viel Nerven gekostet hat.


    Da will bei mir kein Mitleid aufkommen. Nach deinen bisherigen Informationen erstellst du den Lebenlauf viel komplizierter als es nötig tut und zusätzlich mit Nachteilen für deine Besucher.


    Gruss


    MrMurphy

    Dieser Beitrag wurde bereits 1 Mal editiert, zuletzt von MrMurphy ()

  • gut ich versuch es dir nochmal ausführlicher darzustellen, auch wenn manche Informationen hier GAR NICHTS zum CSS Problem beitragen.


    Ich studiere, bin angestellt und bin selbstständig - mittlerweile bin ich in der Industrie 13 Jahre tätig und habe sehr viele Kunden über mein Gewerbe. Die Homepage ist einfach nur die ausführliche Darstellung meiner Person und meiner Tätigkeiten in Forum von einemn Lebenslauf.


    Beim Aufbau im Navigationsmenu unter Privat gibt es "Grafischer Lebenslauf" und "Tabellearischer Lebenslauf" und beide greifen auf eine Datenbank zu. Über eine weitere Schnittstelle lässt sich aus dieser Datenbank auch eine passende pdf als Lebenslauf erzeugen!
    Sprich dadurch, dass alles auf die eine Datenbank zugreift sind keine inkonstistente Daten zu erwarten.


    Alle Informationen sind im tabellearischen als auch grafischen Lebenslauf enthalten. Die Anfragen sind neben private Personen, Firmen für einzelne Projekte auch Firmen, welche sich um eine Festanstellung bemühen.
    Bei mir ändert sich im Lebenslauf alle Wochen etwas, da ich auch ehrenamtlich tätig bin oder eben Projekte in Unternehmen als externer Berater über Wochen/Monate betreue.


    Ich weiß zwar nicht was das mit meinem CSS problem zu tun hat, aber damit sollten deine Fragen beantwortet sein.


    Lange rede kurzer Sinn. Ich hab eine Klasse .entry , welche mit <ul> eingebundet wird. Dabei will ich einfach, wenn ich über dieses <ul class="entry"> mit der Maus bin ein Fenster aufgeht, ohne dass ich Java Script nutze.

  • Hallo


    Dein Quelltext ist für mich sachlich falsch. Das ist aber nicht entscheidend.


    Ich habe nur im Ansatz verstanden was du überhaupt erreichen willst: Mittels hover soll Text eingeblendet werden. Den Rest verstehe ich nicht:


    a) Der Text ist komplett unsichtbar und soll durch hover eingeblendet werden


    oder


    b) Es ist nur ein Teil des Textes sichtbar, der Rest soll durch hover eingeblendet werden


    oder


    c) Es ist nur ein Teil des Textes sichbar, der Rest soll durch hover an anderer Stelle eingeblendet werden


    oder


    d) ?


    Ich habe zum Testen mal eine Beispielseite erstellt:


    Beispielseite


    Nachtrag: Ich habe in der Beispieldatei noch eine Möglichkeit zum Auf- und Zuklappen hinzugefügt, die auch auf Touchscreens funktioniert. Natürlich nur mit CSS.


    Gruss


    MrMurphy

    Dieser Beitrag wurde bereits 2 Mal editiert, zuletzt von MrMurphy ()

  • eigentlich sollte es c) sein jedoch scheint mir d) besser gelöst.


    jedoch muss ich sagen, dass ich derzeit noch nicht alles verstehe was da declariert wurde.

  • Link
    Ich wollte euch das mal zeigen wie es aktuell aussieht.


    MrMurphy hatte ja super Beispiele gezeigt!

    Zitat

    Nachtrag: Ich habe in der Beispieldatei noch eine Möglichkeit zum Auf- und Zuklappen hinzugefügt, die auch auf Touchscreens funktioniert. Natürlich nur mit CSS.


    genau das fand ich am besten, habe ich aber nicht hinbekommen mit seinem Code :(


    Auf der oben genannten seite sind alle Informationen enthalten wie auf "Lebenslauf tabellarisch"


    Nun wollte ich, wenn man die Felder anklickt ein Fenster erscheint mit allen Informationen
    alternativ würde auch ein hover gehen für computer, aber wegen der "touchscreens" finde ich Murphys Idee sehr gut.


    Könnt ihr mir da nochmal helfen? Ich hab derzeit Semesterferien und daher wollte ich das jetzzt angreifen!