selfhtml.de - Alles für den Webmaster!

Anzeige: united-domains - Die ganze Welt der Domains

Divbox ähnlich wie IFrame

Autor: siriussmarty
Datum: 06.07.2010 11:01:51

Hallo,
ich suche etwas dringend, weiß auch ehrlich gesagt nicht wie ich das nennen soll was ich suche, deswegen habe ich ein Bild angefügt.

Der Slider unten ist schon vorhanden. Jetzt suche ich noch etwas wie über den Slider. Etwas zum klicken das dann in einer extra Box angezeigt wird.

Auf der Rechten Seite werden Webdesign/Templates in verschiedenen Farben dargestellt die Klickbar sein sollen. Wenn man davon eins anklickt soll es groß  erscheinen in der Box daneben dran.

Kann mir da jemand einen Tipp/Rat geben Bitte?

MFG und vielen dank im voraus

• Screen
  
  

Re: Divbox ähnlich wie IFrame

Autor: Freddy
Datum: 06.07.2010 17:11:53

Hallo,

> Kann mir da jemand einen Tipp/Rat geben Bitte?

So richtig weiß außer Dir wahrscheinlich keiner, was Du genau suchst. :-)

Also mit AJAX / JS sollte es kein Problem sein, auf einen Link zu klicken, der eine Box einblendet. Wo diese »auftaucht« kannst Du mit CSS bestimmen. Beispiel: bei Klick auf den Link (oder whatever) »erschaffst« Du einen Container (createElement()) mit einer Klasse (setAttribute() oder DOM-Pendant), die bereits im Stylesheet (ist IMHO performanter als per JS das Style-Objekt zu bemühen) hinterlegt ist.


Gruß,
Freddy

Re: Divbox ähnlich wie IFrame

Autor: siriussmarty
Datum: 07.07.2010 07:34:06

Hallo,
ich habe das mit html und css geregelt, nur habe ich jetzt ein weiteres Problem. Unzwar geht es um Bilder die dann in der Divbox angezeigt werden soll.

ich habe 4 kleine Bilder, wenn man darauf klickt soll 1 davon ( was man angeklickt hat ) groß in der Divbox erscheinen ( wie eine Slideshow )

Die Bilder muss ich aber mit "#" verlinken. Verlinke ich die aber mit "#" passiert folgendes:

Die Seite springt zum Anfang nach Oben sobald man das Bild geklickt hat. Das soll nicht mein Plan sein. Also habe ich versuchst, das die Seite bis zum Anfang der Bilder springt also habe ich die bilder zu meiner Divbox verlinkt "#gallery".

Nun taucht problem 2 auf: Die Bilder werden nur kurz beim Klicken eingeblendet nach dem loslassen wird die Box wieder weiß.

Jemand eine Lösung?
Demolink: http://www.dentalprint.de/praxis_homepage.php

Vielen dank im voraus

Re: Divbox ähnlich wie IFrame

Autor: netinja
Datum: 07.07.2010 09:47:56

> ich habe 4 kleine Bilder, wenn man darauf klickt
> soll 1 davon ( was man angeklickt hat ) groß in
> der Divbox erscheinen ( wie eine Slideshow )


Hast du dir schon mal das Beispiel von Eric Meyer angeschaut?

http://meyerweb.com/eric/css/edge/popups/demo2.html

Da werden die Bilder bei Hover über den Links angezeigt.
Du mußt den Code also nur noch insoweit ändern, daß die Bilder *bei Klick* angezeigt werden.


LG
Netinja

Re: Divbox ähnlich wie IFrame

Autor: siriussmarty
Datum: 07.07.2010 09:59:01

Hallo, danke Ninja für deine Hilfe,
jedoch weiß ich nicht wieso meine Bilder nur bei "Click" angezeigt werden.

Obwohl nix in der CSS bzw in der PHP Datei stehen *grübbeL*
Wie ist den der Befehl um ein Bild beim klick anzeigen zu lassen?

Re: Divbox ähnlich wie IFrame

Autor: Netinja
Datum: 07.07.2010 10:27:22

> Wie ist den der Befehl um ein Bild beim klick
> anzeigen zu lassen?

Nimm das Beispiel, das ich verlinkt habe, und baue dir den Code nach der Anleitung zusammen.
Die Methode nennt sich CSS-Popup.

Wenn du dann noch a-focus und a:active hinzufügst, werden die großen Bilder nicht nur bei Hover angezeigt, sondern auch bei Klick.

Das wolltest du doch so, oder?


LG
Netinja

Re: Divbox ähnlich wie IFrame

Autor: siriussmarty
Datum: 07.07.2010 10:43:09

Aber woher weis die Stylesheet bzw das a:focus und das a:activ was für Bild geladen werden muss? Muss das als Background-images auch eingefügt werden in die Stylesheet?

Re: Divbox ähnlich wie IFrame

Autor: Netinja
Datum: 07.07.2010 11:05:26

> Aber woher weis die Stylesheet bzw das a:focus
> und das a:activ was für Bild geladen werden muss?
> Muss das als Background-images auch eingefügt
> werden in die Stylesheet?


Dann schau doch bitte mal in den Quellcode der Seite.

Außerdem erklärt Eric Meyer doch auch noch, wie das CSS-Popup aufgebaut wird:

Zitat:
"From SPAN to IMG

In every case, the "icon" is an img element inside the actual hyperlinks. Here's one example from the source of this document: "

usw.


Netinja

Re: Divbox ähnlich wie IFrame

Autor: siriussmarty
Datum: 07.07.2010 13:24:10

Hallo,
ich ahbe das doch soweit hinbekommen, vielleicht drücke ich mich auch blöde aus :D

Ich habe mal die Seite online
http://www.dentalprint.de/praxis_homepage.php

Der Switscht die Bilder komisch, wenn es geklickt ist, geht das Bild weg. Das möchte ich nicht,

habe auch versucht jeden eine ID zu vergeben und die stylesheet angepasst mit Focus funktioniert aber nicht wirklich.

Re: Divbox ähnlich wie IFrame

Autor: siriussmarty
Datum: 07.07.2010 15:42:38

Hallo Gaby,
Das mit dem Switschen funktioniert generell mit a.focus und a.active nicht. Das ist mein Hauptproblem habe das mit einer anderen Variante gelöst. Jetzt habe ich ein ganz anderes Problem. Die Bilder sind mit "#" verlinkt. Das Problem die Webbrowser erkennen dies als Seitenanfang :/

Kann man die anders Verlinken
2. Variante mit Verlinken, habe die ID Angegeben von Content #gallery_content

jetzige Problem, bilder werden in der großansicht nicht angezeigt.


Zum Thema Webentwickler
1.) Bin ich ein Praktikant in einer Werbeagentur um meine Lehre dieses Jahr in der Firma zu beginnen
2.) Das ist meine Aufgabe dies so zu Gestalten
3.) Hilfen sind erlaubt
4.) Komme ich trotzdem nicht so weiter. Mir fehlt nur noch das mit der Verlinkung den Rest habe ich ja relativ gut hin bekommen, dank eurer Denkanstöße.

Re: Divbox ähnlich wie IFrame

Autor: Freddy
Datum: 07.07.2010 16:16:04

Hallo,

> Das mit dem Switschen funktioniert generell mit
> a.focus und a.active nicht. Das ist mein
> Hauptproblem habe das mit einer anderen Variante
> gelöst. Jetzt habe ich ein ganz anderes Problem.
> Die Bilder sind mit "#" verlinkt. Das Problem die
> Webbrowser erkennen dies als Seitenanfang :/

Versuche mal statt "#" das hier "javascript:void(0);".


HTH + Gruß,
Freddy

Re: Divbox ähnlich wie IFrame

Autor: siriussmarty
Datum: 07.07.2010 19:25:12

Habe das Problem gelöst mit
href="#^#"

Habe bissel rumprobiert einfache Sonderzeichen eingefügt, und es funktioniert, fazenierend hihi

Re: Divbox ähnlich wie IFrame

Autor: gaby
Datum: 07.07.2010 22:28:10

Bevor die 56 Syntaxfehler nicht korrigiert sind, braucht man erst gar nicht versuchen, Fehldarstellungen im Design in den Griff zu bekommen.
http://validator.w3.org/check?verbose=1&uri=http://www.dentalprint.de/praxis_homepage.php


> Der Switscht die Bilder komisch, wenn es geklickt
> ist, geht das Bild weg.

Ja, ich sehe es.

> Das möchte ich nicht,

Dann nimm das Beispiel von Netinja, das funktioniert!

> habe auch versucht jeden eine ID zu vergeben und
> die stylesheet angepasst mit Focus funktioniert
> aber nicht wirklich.

Netinja meint bestimmt, daß du deine Galerie mit der Methode aufbauen sollst, die auf der von ihr verlinkten Site beschrieben wird, und dort noch a:focus und a:active ergänzen, _nicht_ bei deinem Code.

Wenn du künftig deine Dienstleistungen als Webentwickler anbieten willst, solltest du aber schon in der Lage sein, zu copy-pasten, und dann nur noch den Pfad zum Bild auszutauschen.

Grüße
gaby