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

divs aufeinander positionieren

M

mote

Mitglied
Hallo,

da sich bei einem anderen Thema herausstellte dass ich nun ganz was anderes suche, erstelle ich lieber ein neues Topic ;)

Gesucht ist eine Browserkompaktible Methode verschiedene divs aufeinander zu positionieren. Und diese mittels link "erscheinen" zu lassen. Jemand eine Idee?

LG
 
Werbung:
schau dir mal die css eigenschaften: position, z-index und display an.
für das erscheinen empfehle ich dir jquerys css(), class(), attr(), toggle(), show(), hide()...
 
Werbung:
Erkläre "aufeinander erscheinen zu lassen" mal bitte genauer?
Zum Vergrößern anklicken....

Ich habe eine Liste von Spielern und wenn ich diese anklicke sollen auf einem anderen Bereich der Seite die Details über diese angezeigt werden. Das möchte ich so lösen, dass verschiedene divs (die Details) aufeinander gespapelt werden und bei klick auf einen Spielername der passende div angezeigt wird.
 
Herangehensweise

Vielleicht wäre es sinnvoll statt eines neuen Topics zum gleichen Thema mal die Sichtweise zu überdenken.

Es gibt bestimmt viele Lösungen für das "Problem" - warum "soll" das so kompliziert funktionieren?

Divs übereinander sind niemals unkomplizert - gerade wenn es im IE funktionieren soll.
Damit sich das ganze einigermaßen elegant "anfühlt" ist auch hier wieder Javascript notwendig ( theoretisch müsste das auch mit CSS funktionieren, wird aber wahrscheinlich komplizierter...)

Vielleicht beschreibst du einfach mal verständlich das zu erreichende Ziel - da wird es sicher viele taugliche Lösungsansätze geben (wie schon im anderen Thread) anstatt nach ultrakomplizierten Möglichkeiten für ein banales "Problem" zu suchen...

Vorschlag:

Startseite:
Liste
- Spieler 1 (Link zu Seite A)
- Spieler 2 (Link zu Seite B)
- ...
-------------------------------------
Seite A
Spielerliste wie oben
Infos zu Spieler 1
-------------------------------------
Seite B
Spielerliste wie oben
Infos zu Spieler 2
-------------------------------------
usw...

alle anderen (eleganteren) Lösungen wurden auch bereits in dem anderen Thread angesprochen (Datenbank, PHP, JS, Ajax, etc)...
 
wegundguck wird ein und ausgeblendet. über die positions angaben wird der div an position x50:y20 absolut zum div spielerfeld positioniert. das funktioniert weil #spielerfeld z.b. relativ positioniert ist, anonsten würde sich #wegundguck absolut zum body(?) bzw browserrand positionieren:
Code: 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<div id="spielerfeld" style="position:relative">
<a onclick="$('#wegundguck').toggle();">Spieler</a>
<div id="wegundguck" class="wegundgucks" style="position:absolute;top:20px;left:50px;display:none;">div der erscheint</div>
</div>

EDIT:
was dir jetzt noch fehlt sind mehere #wegundguck an der gleichen stelle. beim klick auf den spieler benötigst du ein $("#spielerfeld .wegundgucks").hide(); oder ein $(".wegundgucks").each()...

wie dom manipulation mit normalem javascipt geht kannst du dir hier abschaun: http://fun-fox.de/init.js
jquery ist hier aber die erste wahl!
 
Werbung:
ok danke erstmal..

ich wollte ja eine css basierte lösung und keine mit js. hab mir das jetzt so gedacht - es funktioniert auch :)

Code: 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de" lang="de">
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <title>Spieler</title>
    <link rel="stylesheet" type="text/css" href="stylesheet.css"/>
  </head>
  <body>
    <h1>Spieler Artikel</h1>
    <ol>
      <li><a href="#artikel1">Artikel 1</a></li>
      <li><a href="#artikel2">Artikel 2</a></li>
      <li><a href="#artikel3">Artikel 3</a></li>
      <li><a href="#artikel4">Artikel 4</a></li>
      <li><a href="#artikel5">Artikel 5</a></li>
    </ol>


    <div id="artikel1">
      <h2>Artikel 1</h2>
      <p></p>
    </div>


    <div id="artikel2">
      <h2>Artikel 2</h2>
      <p></p>
    </div>


    <div id="artikel3">
      <h2>Artikel 3</h2>
      <p></p>
    </div>


    <div id="artikel4">
      <h2>Artikel 4</h2>
      <p></p>
    </div>


    <div id="artikel5">
      <h2>Artikel 5</h2>
      <p></p>
    </div>
  </body>
</html>




div
{
        display: none;
}


div:target
{
        display: block;
}


eigentlich ganz simpel und funktioniert ;)
 
:target ist css3 und ein #anker hat ein sprungverhalten. eine indexierung bei google erfolgt ohne #anker. ein feld das beim aufrufen der seite sichtbar ist, lässt sich so nicht definieren.
find die lösung echt chic, aber irgendwie sträubt sich alles bei mir^^
 
Aber bis auf den ie6 sollte es doch überall funktionieren oder?

ein feld das beim aufrufen der seite sichtbar ist, lässt sich so nicht definieren.
Zum Vergrößern anklicken....
das soll es eh nicht.


HMMM....

also beim Code wie ich ihn oben beschrieben habe funktioniert alles. Hab das jetzt in meiner Seite eingebaut und da taucht ein Fehler auf. Die divs werden alle angezeigt. also kein display:none effekt. Was hab ich da jetzt falsch gemacht?? :(

kurzform: html

Code: 
	<h3>Information der Spieler</h3>






<div id="spieler1">
      <h2>Spieler 1</h2>
      <p>Das sind die Informationen von Spieler 1</p>
</div>
<div id="spieler2">
      <h2>Spieler 2</h2>
      <p>Das sind die Informationen von Spieler 2</p>
</div>
<div id="spieler3">
      <h2>Spieler 3</h2>
      <p>Das sind die Informationen von Spieler 3</p>
</div>

CSS

Code: 
 #spieler1{
        display: none;
}


 #spieler1:target
{
        display: block;
}


 #spieler2
{
        display: none;
}


 #spieler2:target
{
        display: block;
}


 #spieler3
{
        display: none;
}


 #spieler3:target
{
        display: block;
}

danke
 
Zuletzt bearbeitet:
Werbung:
mote schrieb:
Aber bis auf den ie6 sollte es doch überall funktionieren oder?
Zum Vergrößern anklicken....

Die Pseudoklasse target wird vom IE bisher überhaupt nicht, vom Firefox und Chrome seit 1.0, vom Safari erst seit 3.1 und von Opera seit 9.5. Von richtig gut unterstützt kann man da angesichts der Marktanteile vom IE leider nicht sprechen :|
 
Du musst dich einloggen oder registrieren, um hier zu antworten.

Neueste Beiträge

Zurück
Oben