• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

Lightbox

also, wenn das wirklich dein html ist, das oben steht, kann das eigentlich nur der #content-div sein.

dann probier mal:

#content {
padding:40px;
background-color:transparent;
border:0px solid #ccc;
min-height:350px;
}

wars das?
 
ja geil, juhuu, super, danke,

hehe.....noch ne klitzekleine frage wie mache ich das wenn ich nen link direkt neben regestrieren machen möchte und we krieg ich dann wieder dasselbe hin wie beim regestrieren ???

Lg

Ben
 
Ich glaub, der Thread wird geschlossen, wenn deine Seite fertig ist ;)

Du würdest dein div mit der id="registrierung" kopieren und neu einfügen, also duplizieren - vom starttag <div... bis zum endtag </div>
Dann dessen Inhalt einfügen, was auch immer da rein soll, und dem eine neue/andere id geben.
Das ist dann dein neuer versteckter Inhalt.

Dann würdest du den Link "Registrieren" kopieren, evtl inklusive des divs, der ihn umschliesst, und im link-href-Attribut, das die Funktion aufruft, die neue id einsetzen, damit auch klar ist, welches element eingeblendet werden soll.

Nun noch das CSS für #registrierung kopieren und dafür die neue id angeben: #neueID {...erstmal das gleiche wie für #registrierung...}

Das wärs.

Ich würde dir noch raten, mal bei google "firebug deutsch" einzugeben, das ist ein add-on für firefox, mit dem man im browser die Webseite bzw deren html/css direkt editieren kann (und noch mehr).
Das ist eine grosse Hilfe, auch für Anfänger. Beim googlen findest du auch Anleitungen und sogar Videos wie man damit umgeht.
So kannst du zB schnell herausfinden, welches Element wo sitzt und warum.
 
nee, das ist das: #registrierung-div:
HTML: 
<div id="registrierung" style="display:none;"> <!-- Hier gehts auf-->

<form method="post" action="form.php">
<fieldset>
<legend> Felder mit * sind erforderlich </legend>

<label for="name"> Spielername* </label>
<input id="name" type="text" name="name" size="30" /><br />

<label for="email"> Emailadresse* </label>
<input id="email" type="text" name="email" size="30" /><br />

<label for="passwort"> Passwort* </label>
<input type="password" id="passwort" name="passwort" size="30" /><br />

<label for="passwort"> Passwort Wiederholen* </label>
<input type="password" id="passwort" name="passwort" size="30" /><br />

<input type="checkbox" id="agb" name="agb" />
<label for="agb">Ich akzeptiere die AGB und die Nutzungsbedingungen</label>

<input id="Senden" type="submit" name="senden" value="Senden" />
</fieldset>
</form>
<text><b> Die Anmeldung bei Draconica ist natuerlich kostenlos</b></text>

</div> <!-- hier gehts zu -->

Es wird ja auch nur dieses per
HTML: 
javascript:toggleDiv('registrierung');
eingeblendet.
 
drüber ist der Link im #content-div:

HTML: 
<div id="content">
<a href="javascript:toggleDiv('registrierung');">Registrieren</a>
</div>

den musst du ja auch kopieren, zb:
HTML: 
<div id="content">
   <a href="javascript:toggleDiv('registrierung');">Registrieren</a>
</div>
<div id="content2">
    <a href="javascript:toggleDiv('IDdesneuenDivs');">Linktext</a>
 </div>

...oder einfach den zweiten Link mit rein:
HTML: 
 <div id="content">
   <a href="javascript:toggleDiv('registrierung');">Registrieren</a>
   <br/>
   <a href="javascript:toggleDiv('IDdesneuenDivs');">Linktext</a>
 </div>

dann dein neues verstecktes div, das ich mit "Kopie von #registrierung" meinte. Das dessen Inhalt gelöscht/ersetzt wird, war hoffentlich klar.
...was einfach so aussieht:
HTML: 
<div id="IDdesneuenDivs">
  blabla
</div>
und zB unterhalb von #registrierung eingefügt wird.

und dann noch das CSS:
HTML: 
#IDdesneuenDivs{
    background-color: transparent;
    border: 1px solid #CCCCCC;
    bottom: 83px;
    display: none;
    left: 22px;
    padding: 10px;
    position: absolute;
    width: 915px;
    z-index: 999;
}
 
ich habs hingekriegt nur wird die seite dafür verändert, d.h. wenn ich dann auf news klicke wird das nit wie bei regestrieren auf dem bild angezeigt sondern unten beim schwazen und dat is doof da man irgendwann dann immer weiter runterscrollen muss.

Lg

ben

PS:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">


<head>

<title> Draconica </title>

<!-- Meta Tags -->
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<meta name="robots" content="index, follow" />

<!-- CSS -->
<link rel="stylesheet" href="Draconica.css" media="screen,projection" type="text/css" />

<style type="text/css">
#main {
background:transparent url(hintergrund.jpg) no-repeat top left scroll;
position:relative;
width:960px;
border:1px solid #ccc;
margin:0 auto;
padding:10px;
}
#content {
padding:40px;
background-color:transparent;
border:0px solid #ccc;
min-height:350px;
}

#regestrierung {
background-color: transparent;
border: 1px solid #CCCCCC;
bottom: 83px;
display: none;
left: 22px;
padding: 10px;
position: absolute;
width: 915px;
z-index: 999;
}

#news {
background-color: transparent;
border: 1px solid #CCCCCC;
bottom: 83px;
display: none;
left: 22px;
padding: 10px;
position: center;
width: 915px;
z-index: 999;



}


</style>

<!-- JavaScript -->

<script type="text/javascript">
// die funktion, die ich im ersten thread vorgeschlagen hatte:

function toggleDiv(element) { // Aufruf: toggleDiv('ID_des_Elements')
if(document.getElementById(element).style.display == 'none') // wenns nicht zu sehen ist,

{ // wirds eingeblendet
document.getElementById(element).style.display = 'block';
}
else
{ // ansonsten ausgeblendet
document.getElementById(element).style.display = 'none';
}
}
</script>
</head>

<body>

<div id="main">

<div id="content">

<a href="javascript:toggleDiv('regestrierung');">Regestrieren</a>
<a href="http://draconica.xobor.de">Forum</a>
<a href="javascript:toggleDiv('news');">News</a>
</div>
<!-- Hier muss der inline-style drin sein,weil wir den im js abfragen,sonst klappt der erste Klick nicht -->
<div id="regestrierung" style="display:none;">
<a href="javascript:toggleDiv('regestrierung');">Close</a>



<form method="post" action="form.php">
<fieldset>


<legend> Felder mit * sind erforderlich </legend>

<label for="name"> Username* </label>
<input id="name" type="text" name="name" size="30" /><br />

<label for="email"> Email-Adresse* </label>
<input id="email" type="text" name="email" size="30" /><br />

<label for="passwort"> Passwort* </label>
<input type="password" id="passwort" name="passwort" size="30" /><br />

<label for="passwort"> Passwort Wiederholen* </label>
<input type="password" id="passwort" name="passwort" size="30" /><br />

<input type="checkbox" id="agb" name="agb" />
<label for="agb">Ich akzeptiere die AGB und die Nutzungsbedingungen</label>

<input id="Senden" type="submit" name="senden" value="Regestrieren" />
</fieldset>
</form>
<p><b> Die Anmeldung bei Draconica ist natuerlich kostenlos</b></p>

</div>

<div id="content">

</div>
<!-- Hier muss der inline-style drin sein,weil wir den im js abfragen,sonst klappt der erste Klick nicht -->
<div id="news" style="display:none;">
<a href="javascript:toggleDiv('news');">Close</a>

<fieldset>

das ist lustig

</fieldset>




</div> <!-- end #main -->

</body>

</html>

So hab ichs gemacht
 
HTML: 
<div id="news" style="display:none;">
    <a href="javascript:toggleDiv('news');">Close</a>
 
    <fieldset>
 
    das ist lustig
 
    </fieldset>
 
    </div> <!-- end #main -->


...dein #news-div geht nicht zu. </div> fehlt.

Positionen und Abmessungen kannst du ja im CSS bei #news{} bestimmen.
Wenn du nicht weisst, was die CSS-befehle wie width,height, top,bottom,position etc bedeuten - google hilft.

Und probier den firebug mal aus.
 
.......Ich brauch noch ma deine hilfe auch wenn du jetzt denkst ich wär bescheuert und würde ein bisschen dumm sein :D

Ich hab heut morgen versuch noch sonen link zumachen aber ich hab alles versucht und es klappt nit und jetzt hab ihc die agb einfach zu regestrieren getan, bitte bitte erklärs mir nochmal......

Html Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">


<head>

<title> Draconica </title>

<!-- Meta Tags -->
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<meta name="robots" content="index, follow" />

<!-- CSS -->
<link rel="stylesheet" href="Draconica.css" media="screen,projection" type="text/css" />

<style type="text/css">
#main {
background:transparent url(hintergrund.jpg) no-repeat top left scroll;
position: relative;
width:960px;
border:1px solid #ccc;
margin:0 auto;
padding:10px;
}
#content {
padding:40px;
background-color:transparent;
border:0px solid #ccc;
min-height:350px;
}

#regestrierung {
background-color: transparent;
border: 1px solid #CCCCCC;
bottom: 83px;
display: none;
left: 22px;
padding: 10px;
position: bottom;
width: 915px;
z-index: 999;
}


#agb {
background-color: transparent;
border: 1px solid #CCCCCC;
bottom: 83px;
display: none;
left: 22px;
padding: 10px;
position: center;
width: 915px;
z-index: 999;
}

body {
font-family: arial;
font-size: 100%;
color: #fff;
line-height: 180%;
text-align: center;
background-color: #000000;
background-color: #000000
}

a,a:active,a:visited {
color: #CCFF99;
}

a:hover {
color: #CCFFFF;
}

h1 {
font-size: 3em;
color: #FFCC99;
}

#container {
width: 50%;
margin: 0 auto;
text-align: left;
}




</style>

<!-- JavaScript -->

<script type="text/javascript">
// die funktion, die ich im ersten thread vorgeschlagen hatte:

function toggleDiv(element) { // Aufruf: toggleDiv('ID_des_Elements')
if(document.getElementById(element).style.display == 'none') // wenns nicht zu sehen ist,

{ // wirds eingeblendet
document.getElementById(element).style.display = 'block';
}
else
{ // ansonsten ausgeblendet
document.getElementById(element).style.display = 'none';
}
}
</script>
</head>

<body>

<div id="main">

<div id="content">

<form>
<fieldset>

<inpur id="name"><b>Username</b></label>
<input id="name" type="text" name="name" size="30" name="name" lenght="20" /><br />

<label for="passwort"><b>Passwort</b></label>
<input type="password" id="passwort" name="passwort" size="30" password="password" lenght="20" /><br />

<label for="Senden"> </label>
<input id="Senden" type="submit" name="senden" value="Einloggen" />

</fieldset>
</form>


<a href="javascript:toggleDiv('regestrierung');">Regestrieren/</a>
<a href="http://draconica.xobor.de">Forum/</a>
<a href="javascript:toggleDiv('agb');">AGB/</a>
</div>
<!-- Hier muss der inline-style drin sein,weil wir den im js abfragen,sonst klappt der erste Klick nicht -->
<div id="regestrierung" style="display:none;">
<a href="javascript:toggleDiv('regestrierung');">Close</a>



<form method="post" action="form.php">
<fieldset>


<legend> Felder mit * sind erforderlich </legend>

<label for="name"> Username* </label>
<input id="name" type="text" name="name" size="30" /><br />

<label for="email"> Email-Adresse* </label>
<input id="email" type="text" name="email" size="30" /><br />

<label for="passwort"> Passwort* </label>
<input type="password" id="passwort" name="passwort" size="30" /><br />

<label for="passwort"> Passwort Wiederholen* </label>
<input type="password" id="passwort" name="passwort" size="30" /><br />

<input type="checkbox" id="regestrierung" name="regestrierung" />
<label for="agb">Ich akzeptiere die AGB und die Nutzungsbedingungen*</label>

<input id="Senden" type="submit" name="senden" value="Regestrieren" />
</fieldset>
</form>
<p><b> Die Anmeldung bei Draconica ist natuerlich kostenlos</b></p>

<p><b>
<!-- Hier muss der inline-style drin sein,weil wir den im js abfragen,sonst klappt der erste Klick nicht -->
<div id="Impressum" style="display:none;">
<a href="javascript:toggleDiv('Impressum');">Close</a>
</div>


</body>

</html>

Lg Ben

PS: zwischen <p> und </p> war der text mit der agb aber sonst wär der text zu lang gewesen deswegen ist da nichts....
 
dein Link zum einblenden der AGBs ist völlig korrekt:
HTML: 
<a href="javascript:toggleDiv('agb');">AGB/</a>
toggleDiv('agb') bedeutet wie gesagt: div mit ID "agb" einblenden/ausblenden.



Dann gibts aber kein div mit der ID "agb", stattdessen machst du das:
HTML: 
<div id="Impressum" style="display:none;">
  <a href="javascript:toggleDiv('Impressum');">Close</a>
  </div>

du musst dich also erstmal zwischen Impressum und AGB entscheiden, oder beides einfügen,jeweils ein div mit der ID und Inhalt,und jeweils ein Link.
 
ok hab ich gemacht, nur wird jetzt regestriern schon angezeigt ohne das icha uf den link klicke und wenn ich auf den link klicke erscheint impressum

html Code
<a href="javascript:toggleDiv('regestrierung');">Regestrieren/</a>
<a href="http://draconica.xobor.de">Forum/</a>
<a href="javascript:toggleDiv('impressum');">Impressum/</a>
</div>
<!-- Hier muss der inline-style drin sein,weil wir den im js abfragen,sonst klappt der erste Klick nicht -->
<div id="regestrierung" style="display:none;">
<a href="javascript:toggleDiv('regestrierung');">Close</a>


<div id="Impressum" style="display:none;">
<a href="javascript:toggleDiv('Impressum');">Close</a>
</div>
<fieldset>

<h1><b> Impressum </b></h1>

Diese Seite wird betrieben von Ben Kirmse

Stad Köln, 50935

Inbetriebnahme am TT.MM.JJJJ

</div>

</fieldset>
 
schau mal, wo <div id="regestrierung" style="display:none;"> steht.

Da geht das div "auf", soll bedeuten, das alles bis zum schliessenden </div> darin eingesperrt ist.

Dein verstecktes "Impressum"-div ist also im versteckten "regestrierung" div drin, das ist falsch.

Div "Impressum" machst du hingegen zu, bevor sein Inhalt anfängt:
check.jpg

Edit: Bild leider verkleinert worden beim hochladen, hoffe man sieht was
 
endlich, danke, aber jetzt weiß ich wie ich das mit den anderen menüpunkten mache, übrigens, das is vil besser als sone lightbox:D, danke.

Nicht verzagen, vast fragen.:twisted::mrgreen:

Lg

Ben
 
Du musst dich einloggen oder registrieren, um hier zu antworten.

Neueste Beiträge

Zurück
Oben