neue Webseite mit css Umsetzung - danke an Thomas Zell

This commit is contained in:
ben 2009-01-10 12:51:10 +00:00
parent d9e50aea25
commit 7d391e47cd
2 changed files with 58 additions and 15 deletions

View File

@ -108,21 +108,41 @@
<div class="Hauptfeld">
<div style="display:block; line-height:2em;" >
<div style="text-align:center; ">
<div style="min-width:650px; overflow:visible;">
<div id="linkbutton" style="text-align:center;">
<?php
$e = empty($_GET['ebene']) ? 1 : $_GET['ebene'];
for ($i = 1; $i < 7; $i++) {
$style = ($i == $e) ? "border-color:#56b; color:#23b;" : "";
echo "<a href='?ebene=$i' style='$style'>Ebene $i</a>";
}
?>
</div>
<div class="Ebenen_box">
<div class="Ebene1_wrapper">
<div class="Ebene_button" style="left:0em">Ebene&nbsp;1</div>
<div class="Ebene_bild">
<img src="./grafik/tastatur3d/hauptfeld/tastatur_neo_Ebene1.png" alt="Tastenbelegung Ebene 1" />
</div>
<div>
<img src="./grafik/tastatur3d/hauptfeld/tastatur_neo_Ebene<?php echo $e; ?>.png" alt="tastaturbild" id="IE6-Bildweitenkorrektur" />
</div>
<div class="Ebene_wrapper">
<div class="Ebene_button" style="left:6.5em;">Ebene&nbsp;2</div>
<div class="Ebene_bild">
<img src="./grafik/tastatur3d/hauptfeld/tastatur_neo_Ebene2.png" alt="Tastenbelegung Ebene 2" />
</div>
</div>
<div class="Ebene_wrapper">
<div class="Ebene_button" style="left:13em;">Ebene&nbsp;3</div>
<div class="Ebene_bild">
<img src="./grafik/tastatur3d/hauptfeld/tastatur_neo_Ebene3.png" alt="Tastenbelegung Ebene 3" />
</div>
</div>
<div class="Ebene_wrapper">
<div class="Ebene_button" style="left:19.5em">Ebene&nbsp;4</div>
<div class="Ebene_bild">
<img src="./grafik/tastatur3d/hauptfeld/tastatur_neo_Ebene4.png" alt="Tastenbelegung Ebene 4" />
</div>
</div>
<div class="Ebene_wrapper">
<div class="Ebene_button" style="left:26em;">Ebene&nbsp;5</div>
<div class="Ebene_bild">
<img src="./grafik/tastatur3d/hauptfeld/tastatur_neo_Ebene5.png" alt="Tastenbelegung Ebene 5" />
</div>
</div>
<div class="Ebene_wrapper">
<div class="Ebene_button" style="left:32.5em;">Ebene&nbsp;6</div>
<div class="Ebene_bild">
<img src="./grafik/tastatur3d/hauptfeld/tastatur_neo_Ebene6.png" alt="Tastenbelegung Ebene 6" />
</div>
</div>
</div>
@ -166,7 +186,7 @@ for ($i = 1; $i < 7; $i++) {
<h2>Kontakt</h2>
<p>Kontakt zu den Neo-Ent&shy;wicklern kann man über die Mailing&shy;liste <b><a href="mailto:mailinglist@neo-layout.org?subject=Bitte den Betreff so setzen, dass man auf das Thema schließen kann!&amp;body=Bitte (wenn möglich) folgende Dinge angeben:%0D- Nutzt Du Neo oder noch nicht%3F%0D- Welches Betriebsystem%3F%0D- Welchen Treiber (Xmodmap, Xkbmap, AHK, kbdneo2, usw.)%3F%0D%0D">mailinglist@neo-layout.org</a></b> bzw. über den IRC-Kanal <a href="irc://freenode.net/neo" title="IRC-Channel">#NEO</a> bei <b>freenode.net</b> bekommen. Ver&shy;besserungs&shy;vorschläge sind im&shy;mer will&shy;kom&shy;men! Da wir sehr viele Ab&shy;hängig&shy;keiten haben, kann es aber sein, dass sie nicht un&shy;bedingt ein&shy;ge&shy;pflegt werden.</p>
<p>Kontakt zu den Neo-Ent&shy;wicklern kann man über die Mailing&shy;liste <b><a href="mailto:mailinglist@neo-layout.org?subject=Bitte den Betreff so setzen, dass man auf das Thema schließen kann!&amp;body=Bitte (wenn möglich) folgende Dinge angeben:%0D- Nutzt Du Neo oder noch nicht%3F%0D- Welches Betriebsystem%3F%0D- Welchen Treiber (Xmodmap, Xkbmap, AHK, kbdneo2, usw.)%3F%0D%0D">mailinglist@neo-layout.org</a></b> bzw. über den IRC-Kanal <b>#NEO</b> bei <b>freenode.net</b> bekommen. Ver&shy;besserungs&shy;vorschläge sind im&shy;mer will&shy;kom&shy;men! Da wir sehr viele Ab&shy;hängig&shy;keiten haben, kann es aber sein, dass sie nicht un&shy;bedingt ein&shy;ge&shy;pflegt werden.</p>
<p>Danke fürs Interesse!</p>
<p>Euer Neo-Team</p>

View File

@ -187,3 +187,26 @@ p { /* text-indent:1em;
}
.aktiveEbene { border-color:#56b; color:#23b; }
/* Interaktive Tastaturebenen */
.Ebene_button {
border:1px solid black;
padding:0.25em 1em;
position:absolute;
cursor:pointer;
z-index:2;
}
.Ebenen_box { position: relative;}
.Ebene_bild { padding-top:2em; }
.Ebene_wrapper { position:absolute; top:0px; background-color: white; }
.Ebene_wrapper > .Ebene_bild { display:none; }
.Ebene_wrapper:hover > .Ebene_bild { display:block; }
.Ebene_wrapper:hover > .Ebene_button,.Ebene1_wrapper:hover > .Ebene_button {
background-color:Highlight;
}