Antworten auf deine Fragen:
Neues Thema erstellen

Infotexte

fakerer

Aktives Mitglied

Hallo,
wie schaff ich es Infotexte immer im obersten layout anzuzeigen?
HTML:
        <div class="help_wrap">
            <div>info_symbol</div>
            <div class="helptext">Lorem ipsum</div>
        </div>
        <br/>
        <div class="help_wrap">
            <div>info_symbol</div>
            <div class="helptext">Lorem ipsum</div>
das help_wrap div soll überall inkludiert werden können wo ein infofeld benötigt wird.
info_symbol ist ein bild das bei mouseover dann das helptext div einblendet

wenn ich die help_warp mit absolute positioniere und dann darauf das symbol und den text hab ich das problem das wenn der text grösser ist und über ein andres infosymbol geht das bild darüber ist.
Das ganze soll ie6+ kompatiebel sein.

ich hoff man versteht was ich bezwecken will :)
 

Myhar

Hat es drauf

AW: Infotexte

Ich habe nicht verstanden, was du bezwecken willst. Einen Infotext überall einblenden? Wie willst du den Infotext anzeigen lassen? Werden zwei Infofelder auch gleichzeitig angezeigt?
Der Code für deinen Infotext ist mal schön und gut, nur sagt der nichts darüber aus, wie der Code verwendet wird.
Man könnte mutmaßen, dass du einen Tooltip erstellen willst... Nur warum ist dann das Problem, dass die Infotexte sich überlappen? Wie können dnan zwei Infotexte gleichzeitig angezeigt werden? Oder suchst du einfach nur eine Möglichkeit, zwei Elemente nebeneinander mit CSS zu positionieren?
So viele Fragen für mich...

L. G.
 

Pixelaner

Der Pixelaner

AW: Infotexte

Da bin ich mal gespannt ob ich richtig liege :)

Das Hilfe-Icon wird an einer Stelle im Layout eingebunden. Sobald man mit der Maus über das Icon fährt, blendet sich der Hilfetext darunter ein.

Meine Lösung: JQuery.

Der Hilfetext wird vorerst versteckt. Sobald man mit der Maus über das Icon fährt, wird der Hilfetext sanft "eingefadet".

Geht meine Lösung wenigstens ein wenig in die richtige Richtung ?
 

fakerer

Aktives Mitglied

AW: Infotexte

@pixelaner gold richtig genau so hab ich es eigentlich auch gemacht

mein Problem dabei war denk ich mein falsches Verständnis für die z-index
Dachte eigentlich ich will versuchen mit so wenig wie möglich z-indexes auszukommen, aber das geht anscheinend nicht so ganz.

vielen Dank für eure Mühe, bin auch erst leider heute wieder dazukommen mich damit zu beschäftigen.
Ich hoff ich bekomm es jetzt hin :)
 

Pixelaner

Der Pixelaner

AW: Infotexte

Eigentlich musst du ja keinen z-index verwenden. Mein Aufbau würde wie folgt aussehen: Div erstellen mit der Klasse Info. Darin enthalten das Icon und ein verstecker Div mit der Klasse Infotext. Der Div Info erhält position:relative; und der Div Infotext position:absolute; top:20px; left:0;. Die Werte kannst du beliebig anpassen, hierbei geht es nur um die Ausrichtung des Infotextes an dem Container mit der Klasse Info.

Und dann erfolgt die JQuery Anweisung (Mouseover auf das Icon --> div.infotext einblenden--> Ansonsten ausblenden
 

Pixelaner

Der Pixelaner

AW: Infotexte

Sooo...bin heute dazu gekommen dir das mal eben zu bauen:



Ich denke damit solltest du zurecht kommen. Ich bitte um eine kurze Bestätigung wenn ich die Dokumente wieder löschen kann.

Mfg
 
Bilder bitte hier hochladen und danach über das Bild-Icon (Direktlink vorher kopieren) platzieren.
Antworten auf deine Fragen:
Neues Thema erstellen

Willkommen auf PSD-Tutorials.de

In unseren Foren vernetzt du dich mit anderen Personen, um dich rund um die Themen Fotografie, Grafik, Gestaltung, Bildbearbeitung und 3D auszutauschen. Außerdem schalten wir für dich regelmäßig kostenlose Inhalte frei. Liebe Grüße senden dir die PSD-Gründer Stefan und Matthias Petri aus Waren an der Müritz. Hier erfährst du mehr über uns.

Stefan und Matthias Petri von PSD-Tutorials.de

Nächster neuer Gratisinhalt

03
Stunden
:
:
25
Minuten
:
:
19
Sekunden

Neueste Themen & Antworten

Flatrate für Tutorials, Assets, Vorlagen

Zurzeit aktive Besucher

Statistik des Forums

Themen
118.635
Beiträge
1.538.449
Mitglieder
67.556
Neuestes Mitglied
Ggirl
Oben