✔ einblenden eines Layer zwischen zwei links

G

girl2005

Erfahrenes Mitglied
Hallo!

ich habe ein Problem mit dem Ein-/Ausblenden von Layern. Soll der Layer zwischen zwei linke (< a href >) eingeblendet werden,

wenn ich auf den ersten link klickewird der Layer eingeblendet werden.

Gibt es eine Möglichkeit, dass bei Einblenden des Layers, der nachfolgende statische Text nach unten "rutscht"?

Vielen Dank!
 
Stell das Element einfach als Block-Level-Element dar (display:block). Damit wird ein automatischer Umbruch erzeugt.
Aber wahrscheinlich werden wir dir mit einem Einblick in den Quellcode besser helfen können.
 
hi,

hier ist mein code:

PHP: 
<?php
?>
<html>
<head>
<script type="text/javascript">
function swap(targetID) {

  	obj = document.getElementById(targetID);
  	obj.style.display = (obj.style.display == 'none') ? 'block' : 'none';
  }

</script>
<style type = "text/css">
#titel1 {
  width:650px; height : 100px; border : 1px solid black; margin : 0px ; text-align : left; padding : 6px; top:100px; left : opx;
position:absolute;
}

#titel2{
  width:650px; height : 100px; border : 1px solid black; margin : 0px ; text-align : left; padding : 6px; top:200px; left : opx;
position:absolute;
}
</style>
</head>
<body>
<a   href="#"  onClick="javascript:swap('titel1')"><h1>1.titel1</h1></a>
<div id= titel1 style="display:none;"><?php echo "ttttttttttttttt" ; ?></div>
<a   href="#"  onClick="javascript:swap('titel2)"><h1>2.titel2</h1></a>
<div id= titel2 style="display:none;"><?php echo "text" ; ?></div>
</body>
</html>
 
Hier der fehlerbereinigte HTML-Quelltext:

HTML: 
<a href="#" onclick="swap('titel1')">1.titel1</a> 
<div id="titel1" style="display:none;"><?php echo "ttttttttttttttt" ; ?></div> 
<a href="#" onclick="swap('titel2')">2.titel2</a> 
<div id="titel2" style="display:none;"><?php echo "text" ; ?></div>
und hier das CSS ohne Positionierung der Ebenen, damit die nachfolgenden Menüpunkte (Links) nach unten wandern, wenn eine Subebene geöffnet wird:

Code: 
a {
display:block;
}

#titel1, #titel2 { 
width:650px; 
height:100px; 
border:1px solid black; 
margin:0px; 
text-align:left; 
padding:6px; 
}

Das ganze liesse sich auch mit einer nummerierten Liste strukturieren, die das manuelle Nummerieren der Links (1.titel1, 2.titel, usw.) erübrigt:

HTML: 
<ol>
    <li><a href="#" onclick="swap('titel1')">titel1</a>
           <div class="titel" id="titel1" style="display:none;">test1</div>
    </li>
    <li><a href="#" onclick="swap('titel2')">titel2</a>
           <div class="titel" id="titel2" style="display:none;">test2</div>
    </li>
</ol>
Zudem kann anstelle der ID-Selektoren #titel1, #titel2 ein Klassen-Selektor .titel zum CSS-Formatieren der Ebenen verwendet werden, da sie ja die gleichen CSS-Eigenschaftswerte besitzen:

HTML: 
<style type="text/css">
div.titel {
width:650px;
height:100px;
border:1px solid black;
margin:0px;
text-align:left;
padding:6px;
}
</style>
Der Aufruf erfolgt dann über das class-Attribut:

HTML: 
<div class="titel" id="titel1" style="display:none;">test1</div>
 
hallo zusammen , vielen vielen Danke :-) das fonktionniert prima!

wenn ich auf einen Link klicke , möchte ich das das Layer von den anderen Liks ausgeblendet werden..wie geht das?
 
Verwende hierfür mal dieses Script:

HTML: 
<script type="text/javascript">
function swap(divid) {
if (document.getElementById(divid).style.display == 'block')
   {
      document.getElementById(divid).style.display='none';
   }
   else
   {
    document.getElementById('titel1').style.display='none';
    document.getElementById('titel2').style.display='none';

    document.getElementById(divid).style.display='block';
   }
}
</script>
 
Hi,

ich weiss der Thread hier ist schon was älter, aber ich fange gerade erst an mich mit der Thematik zubefassen. Ich habe jetzt in einem Flashgames Script den bereinigten Code für das Einblenden der Layer verwendet, habe aber das Problem das ich beim setzen der ID leider immer nur den gesamten Block einer Kategorie mit der gleichen ID versehen kann, da sich das script selbst die entsprechenden "Layer" in der Seite aus einem Template erstellt. Als ID verwende ich die Kategorievariable und dem Zusatz "box", hier der aufruf innerhalb des Templates:
Code: 
$templates['category'] = '<div class=\"header\"><a name=\"{$category[\'cName\']}\" id=\"{$category[\'cName\']}\">{$category[\'cName\']}</a></div><link rel=\"stylesheet\" type=\"text/css\" href=\"tooltip.css\" />
{$gamedata}';

$templates['game'] = '<div class=\"game\">
<p class=\"img\" id=\"{$category[\'cName\']}box\">
<a  class=\"tooltip\" href=\"index.php?act=play&id={$game[\'gId\']}\"><strong>{$game[\'gName\']}</strong><img src=\"{$this->imgdir}/{$game[\'gThumb\']}\" alt=\"{$game[\'gName\']}\" /><span><strong>Beschreibung:</strong><br />{$game[\'gDescription\']}</span></a>
</p>
<div style=\"clear:both\">
</div></div></div>';


Hier der Aufruf in der PHP Datei selbst:
PHP: 
<div class="header"><a href="#" onclick="swap('Aktionbox')"><img src="http://www.tutorials.de/forum/images/einblenden.gif" alt="Einblenden" border="0" />&nbsp;Kategorie ein-/ausblenden</a></div><link rel="stylesheet" type="text/css" href="tooltip.css" /><&nbsp;<?=$sys->makeGamesList(); ?></div>

Hier ein Link zur Seite auf der eigentlich ALLE Icons für die Spiele einer Kategorie per Click ein/ausgeblendet werden sollen, aber es geht jeweils nur mit dem ersten Spiel.
gruss
M@trix
 
Zuletzt bearbeitet:
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück