action div öffnen?

[Haze]

Heyho

Ich hab jetzt ein container wo ein submit button drin steckt.

Sieht so aus:
<input type='submit' id='open' name='open' value='' size='10' /> <br />

Diesen button versuch ich jetzt mit

#open:active {
              position:relative;
              height:300px;
              width:300px;
              background-color:#000000;
}

dazu zu bringen mir einen container zu öffnen, das tut er auch :=).

Problem:
Man muss die Maustaste gedrückt halten oder der div verschwindet.
Hat jemand eine Lösung parat (AUßer Javascript)
Wie der container constant stehen bleibt ohne dauerhaft die maustaste gedrückt zu halten?

gruß

[gast_42]

nutze statt :active in

#open:active {

irgendetwas anderes (oder lass es einfach ganz weg)

[Malcolm Beck´s]

مرحبا

irgendetwas anderes (oder lass es einfach ganz weg)

Ein ticken tiefer (davon alles)

mfg

[Haze]

Danke leute ihr seid echt die besten ^^

Und ja, die seite ist der burner kommt gleichmal in meinen "wichtig" ordner.

:=)

[Haze]

ähm, wie kann ich den, den container mit Inhalt füllen?
css lässt ja sowas wie <input type="text" nicht zu oder irre ich mich da?

Hab zwar juetzt ein container aber leer bringt mir der ja auch nichts ^^

[Malcolm Beck´s]

مرحبا

ähm, wie kann ich den, den container mit Inhalt füllen?

Wie meinen?

css lässt ja sowas wie <input type="text" nicht zu oder irre ich mich da?

Nicht einmal HTML lässt das zu, warum sollte CSS das tun? ;)

Hab zwar juetzt ein container aber leer bringt mir der ja auch nichts ^^

Was hättest du denn gerne in diesem Container?
Und viel wichtiger, warum blendest du einen Container ein und aus, in dem garnichts drin steht?

mfg

[Haze]

Was hättest du denn gerne in diesem Container?

Der container ist unter meiner anmeldung, wenn ich auf den eigens dafür angefertigten submit button drücke erscheint er ja schonmal :)

Und nun hätte ich eben das dort so etwas drin steht wie:

registrieren
password vergessen?
nickname vergessen

Und viel wichtiger, warum blendest du einen Container ein und aus, in dem

Das ist ja mein Problem, wie schaffe ich das was drin steht :)

In css den container so zu machen wie es mir passt ist nicht das problem,
das problem liegt darin das ich nicht weiß wie ich den jetzt die einzelnen punkte (siehe oben) dort hin bekomme. Ich hab es folglich so ausprobiert.

<div id="meindiv mein submit button der den neuen div öffnet drin steht>
<div id="meinneuergeöffneterdiv><input type='text'><br /></div></div>

ja und dann wollt ich zum ausprobieren ein textfeld einfügen aber das erscheint wer hätte es gedacht nicht in meinem neu geöffneten div sondern einfach unter meinem div wo der submit butten drin steckt.

mfg

[Malcolm Beck´s]

مرحبا

<div id="meindiv mein submit button der den neuen div öffnet drin steht>
<div id="meinneuergeöffneterdiv><input type='text'><br /></div></div>

Sieht so dein HTML aus? Ist das dein Ernst?

mfg

[Haze]

<div id='passf'>
   <input type='submit' id='open' name='open' value='' size='10' /> <br />
        <div id="open2">
            <input type='text' name='' value=''><br />
        </div>
    </div>

so sieht er aus :/

[Haze]

Gut also ich hab das jetzt mit dem Target in 5 Browsern ausprobiert und es funktioniert einwandfrei.

Wenn es hier ein Bewertungssystem geben würde dann würde ich Malcolm Beck´s
ein top rating verpassen :=)

Dank dir funktioniert wirklich gut. :)

[Malcolm Beck´s]

مرحبا

Gut also ich hab das jetzt mit dem Target in 5 Browsern ausprobiert und es funktioniert einwandfrei.

Ältere Browser können es nicht. Aber egal, hast du es schon mal ausprobiert, wenn viel Content auf der Seite ist? Dann ruckelt das ganze recht unschön, wenn der Browser das Ziel anspringt. Es sieht fürchterlich aus.
Mit Jquery lässt sich das noch einfacher und viel Eleganter lösen, siehe hier.

Wenn es hier ein Bewertungssystem geben würde dann würde ich Malcolm Beck´s
ein top rating verpassen :=)

Passt schon ;)

mfg

[Haze]

»» Ältere Browser können es nicht. Aber egal, hast du es schon mal ausprobiert, wenn viel Content auf der Seite ist? Dann ruckelt das ganze recht unschön, wenn der Browser das Ziel anspringt. Es sieht fürchterlich aus.

Da ist allerdings was dran, man wird richtig an den Container hingesaugt.

Mit Jquery lässt sich das noch einfacher und viel Eleganter lösen.

Da wären wir dann wieder bei Javascript, ohh ich komm wohl nicht drum herum?
 Sieht natürlich 100 mal eleganter aus wie so ein css klotz.

Tzja jetzt muss ich wohl abwägen, soll das design unter der Uability leiden,
 oder leiden die User dann am aussehen. ^^

Werd ich mir jetzt erstmal überlegen. :)

[Malcolm Beck´s]

مرحبا

Tzja jetzt muss ich wohl abwägen, soll das design unter der Uability leiden,
oder leiden die User dann am aussehen. ^^

Ich würde keine Sekunde zögern.
Die meisten User, zumindest "normale" User, haben Javascript aktiviert, allein wegen Facebook und Co. Und alle anderen bekommen die Seite ohne die Dynamischen Effekte, also kein Problem.

JQuery kann ja viel mehr, als nur dieses Togglen. Einmal eingebunden kannst du damit alles mögliche erledigen, sehr Praktisch das ganze.

mfg

[Haze]

Ja ein Kollege hat mir das auch geraten gleich mit Javascript zu machen.

Aber ich bin doch eher dafür erstmal alles andere auszuprobieren bis man an die Grenzen stößt wo man dann den übergang machen muss.

Gut damit hat sich das Thema wohl erledigt :) Javascript,Jquery ich komme ^^

[Haze]

<div id='passf'>
     <input type='submit' id='open' name='open' value='' size='10' /> <br />
       <div id="open">
           <input type='text' name='' value=''><br />
        </div>
    </div>

´#passf {
float:left;
margin-left:1px;
height:30px;
width:300px;
background-image:url(images/passf.jpg);
}

#open:focus   {
              position:relative;
              border:none;
              margin-top:30px;
              height:300px;
              width:300px;
              background-color:#000000;
}

[Malcolm Beck´s]

مرحبا

<div id='passf'>
     <input type='submit' id='open' name='open' value='' size='10' /> <br />
       <div id="open">
           <input type='text' name='' value=''><br />
        </div>
    </div>

´#passf {
float:left;
margin-left:1px;
height:30px;
width:300px;
background-image:url(images/passf.jpg);
}

#passf #open {  
 visibility:hidden;  
 position:relative;  
 border:none;  
 margin-top:30px;  
 height:300px;  
 width:300px;  
 background-color:#000000;  
}  
#passf:focus #open,  
#passf:hover #open,  
#passf:active #open {  
 visibility:visible;  
}

mfg

[Malcolm Beck´s]

مرحبا

#passf:focus #open,

Das bringt aber auch nur was, wenn du dem betroffenen Element einen http://de.selfhtml.org/html/verweise/tastatur.htm#tabreihenfolge@title=Tab-Index verpasst, ansonsten kannst du es auch weglassen.

mfg

[Haze]

sorry hab grad heftige internet probleme, jetzt ists grad stabil deshalb hier der ordentliche gesamt code bevor ich wieder jahrelang disc hab...

<div id='passf'>
<input type='submit' id='open' name='open' value='' size='10' /> <br />
<input type='text' name='' value=''><br />
</div>

css
#passf { //Container mit dem submit button
float:left;
margin-left:1px;
height:30px;
width:300px;
background-image:url(images/passf.jpg);
}
#open:focus   { der submit button und das design davon.
              position:relative;
              border:none;
              margin-top:30px;
              height:300px;
              width:300px;
              background-color:#000000;
}

#passf:focus #open,

also wird dann der inhalt von #open bei passf:focus eingetragen?
sprich klicke auf den container dann öffnet sich der container open?

»»Das bringt aber auch nur was, wenn du dem betroffenen Element einen Tab-Index verpasst, ansonsten kannst du es auch weglassen.

ähm was genau kann ich dann weglassen^^?

[Haze]

ah ok, jetzt hab ich es auch verstanden, das gesamte an sich weglassen.

hm dachte man macht das so. Danke

[Malcolm Beck´s]

مرحبا

ähm was genau kann ich dann weglassen^^?

Ich hatte was fertiges gepostet, warum probierst du es nicht aus?

Nur zur Ergänzung: Dein Formular wird nicht per CSS eingebunden in die Seite, wenn du mit der Maus über die Box fährst.
Dein Formular ist die ganze Zeit im HTML und wird mit CSS nur ein und ausgeblendet.

<!-- HTML -->  
<div id='passf'>  
  <p>Hover mich</p>  
       <div id="open">  
           <label>Ihr Name  
               <input type='text' name='name' value=''>  
           </label>  
        </div>  
    </div>  
<!-- HTML ends -->

#passf {  
 padding:10px;  
 border:1px solid blue;  
}  
#passf #open {  
 display:none;  
 border:1px solid red;  
}  
#passf:hover #open,  
#passf:active #open {  
 display:block;  
}

http://jsfiddle.net/Q5EJL/6/

mfg

[Haze]

Bin gerade dabei es auszuprobieren bzw es einzubinden.

also ist es auf diese art in css nicht machbar wenn ich auf den submit button klicke es einzubinden?

<!-- HTML -->
<div id='passf'>
    <input type="submit" id="one" name="one" value="one" /> <br />
       <div id="open">
           <label>Ihr Name
               <input type='text' name='' value=''><br /></label>
        </div>
    </div>
<!-- HTML ends -->
#passf {
 margin:auto;
 width:300px;
 height:30px;
 padding:10px;
 border:1px solid blue;
}
#open {
 position:relative;
 width:300px;
 height:300px;
 visibility:hidden;
 padding:10px;
 border:1px solid red;
}
#one:hover #open,
#one:active #open {
 visibility: visible;
}

Ich habe dein anderes script ausprobiert und ja es funktioniert, allerdings wenn ich auf den container clicke und nicht auf den submit button :/
Darum gings mir ja mit dem submit button das wenn ich Ihn anklicke er mir diesen Container öffnet.

Darum ja auch das :focus.
Nur den inhalt des containers wollt er mir nicht anzeigen.
Jetzt hab ich ein Container mit Inhalt aber kein submit button mehr ^^

[Haze]

oder muss ich das mit container machen? also ein container im container und dem die Grafik als Button zuweisen ohne submit?

Dann wäre das problem auch gelöst?

[Matthias Apsel]

Om nah hoo pez nyeetz, Haze!

Mir scheint, du beschäftigst dich mit Dingen, die deine Fähigkeiten bei weitem überschreiten.

Wenn du HTML und CSS lernen möchtest, backe zunächst deutlich kleinere Brötchen, ehe du dich mit einem Login usw. beschäftigst.

Matthias

[Haze]

yup geh jetzt wieder mit meinen Legos spielen dann hab ich meine ruhe.

[Malcolm Beck´s]

مرحبا

Darum gings mir ja mit dem submit button das wenn ich Ihn anklicke er mir diesen Container öffnet.

Das geht mit CSS nicht, leider.
Du kannst mittels CSS nur auf Kinder eines Elternknoten zugreifen, Bildlich bedeutet das

DIV
1. Kind von DIV
2. Noch ein Kind von DIV
/DIV

FORMULAR
1. Kind von FORMULAR
2. Noch ein Kind von FORMULAR
/FORMULAR

Du kannst jetzt nicht über ein "1. Kind von DIV" auf das "FORMULAR" oder deren Kinder zugreifen. Das geht nur mit Javascript.

oder muss ich das mit container machen?

Kommt drauf an, wie du es haben willst.

Dann wäre das problem auch gelöst?

KA. Evtl. könntest du es auch mit target lösen, aber mir dünkt, das dir einige Grundkenntnisse fehlen. Wie hast du dein Login programmiert?

mfg

[Haze]

Das geht mit CSS nicht, leider.
Du kannst mittels CSS nur auf Kinder eines Elternknoten zugreifen, Bildlich bedeutet das

DIV

1. Kind von DIV
2. Noch ein Kind von DIV
   /DIV

FORMULAR

1. Kind von FORMULAR
2. Noch ein Kind von FORMULAR
   /FORMULAR

Du kannst jetzt nicht über ein "1. Kind von DIV" auf das "FORMULAR" oder deren Kinder zugreifen. Das geht nur mit Javascript.

oh ich habs doch gleich gewusst -.-, hm ja war mir klar aber ich dachte vieleicht weiß ich es auch nicht besser und übersehe irgendetwas.
Im grunde genommen war mein Gedankengang folgender:

Ich hatte den submit button ja schon, und geöffnet hat er mir auch einen container, nur der inhalt eben das formular war folglich nicht da.
Hätte gemeint ich deklariere einen container in html z.b

<div id="1">
<form> <input type="text">.... ect
</form>

Und dann eben den gleichen in css, aber nun ja man kann eben nicht darauf zugreifen, wäre cool wenn irgendjemand in naher Zukunft eine lösung bringt das wäre wirklich praktisch. :)

Kommt drauf an, wie du es haben willst.

nun ja, wie gesagt einfach ein knopf den drückt der User und dann erscheint eben password vergessen? Nicknamen vergessen? usw.
Dumm ist das eben mit Javascript wenn mal ein User kein Javascript hat sieht er eben auch kein neuen Container hab eigentlich schon gehofft das dies mit css noch machbar wäre.
Bzw es ist ja machbar ich werde jetzt einfach eine button grafik anlegen diese in einen winzigen container schieben den dann öffnen und gut ist.

KA. Evtl. könntest du es auch mit target lösen, aber mir dünkt, das dir einige Grundkenntnisse fehlen.

:target derzeit nur von neueren Gecko- (wie Firefox 1.5) und WebKit-Browsern (wie Safari) unterstützt.

Denke nicht das target mir weiterhilft aber gut gemeint, in dem Fall kann ich auch noch zu javascript greifen, das wird besser unterstützt :)

Wie hast du dein Login programmiert?

html und php, warum?

mfg

[Kai345]

[latex]Mae  govannen![/latex]

KA. Evtl. könntest du es auch mit target lösen, aber mir dünkt, das dir einige Grundkenntnisse fehlen.

:target derzeit nur von neueren Gecko- (wie Firefox 1.5) und WebKit-Browsern (wie Safari) unterstützt.

Soll das ein Witz sein? Aktuell ist FF11, FF1.5 ist von Ende November 2005!

Stur lächeln und winken, Männer!
Kai

[Haze]

huh................ohoh mein Fehler hahahaha jetzt muss ich aber Lachen :)

[Haze]

bzw es gibt bestimmt Leute die nicht den aktuellen browser haben aber das ist ja was anderes.

[Malcolm Beck´s]

مرحبا

bzw es gibt bestimmt Leute die nicht den aktuellen browser haben aber das ist ja was anderes.

Mit wievielen Usern rechnest du durchschnittlich? Da sind viele wichtige Fragen vorher zu klären, bevor man sich ans CSS macht.

mfg

[Haze]

Ich weiß, liegt ja nicht nur an dem neuen Div, Optimierung für niedrigere auflösung bis zu hohen.Die Serverleistung, wenn 300 Personen gleichzeitig auf die gleichen Bilder zugreifen.Ich denke es ist eine gute Lösung soviel wie möglich mit html und css zu lösen da man hierbei weniger an Leistung einsteckt und die Seite Benutzerfreundlich bleibt.

[Malcolm Beck´s]

مرحبا

http://jsfiddle.net/Q5EJL/6/

Oder so.

mfg

[Haze]

ja die Target lösung, das wäre es so wie ich mir das auch vorgestellt habe, jetzt ist nur die Frage welcher browser das alles unterstützt ich schau es mir mal an. :) Danke

[Der Martin]

Hallo,

#open:active {
              position:relative;
              height:300px;
              width:300px;
              background-color:#000000;
}

Problem:
Man muss die Maustaste gedrückt halten oder der div verschwindet.

natürlich, so ist die Pseudoklasse :active festgelegt.

Hat jemand eine Lösung parat (AUßer Javascript)

Vielleicht möchtest du :focus anstatt :active verwenden.

Ciao,
 Martin