Also das erste was mir aufgefallen ist: es wäre gut wenn du den Bereich über den man fahren kann um das Menü zu vergrößern auf den gesamten grauen balken machst.
Dann sehe ich die Daten für das Impressum immer, sollen die nicht eigentlich erst zu sehen sein wenn das Menü aufgeklappt ist?
Und jetzt zu deiner Frage:
Die Lösung ist JavaScript, klingt kompliziert, ist es aber nicht wirklich!^^
<script type="text/javascript">
$(function() {
$('#leiste').hover(function(){
$(this).animate({left:'0px'},{queue:false,duration:500});
var text = "Impressum";
var top = "430px";
},
function(){
$(this).animate({left:'-150px'},{queue:false,duration:500});
var text = "Markus K";
var top = "430px";
});
document.getElementById('ani_impressum').innerHTML = text;
document.getElementById('ani_impressum').style.top = top;
});
</script>Das ist dann der Code den du in den head setzt wo bis jetzt nur deine Animation ist, dann nimmst du das ganze Impressum raus und gibst der <div> in der bis jetzt Marku K steht die id="ani_impressum" und fertig sollte es sein, du musst natürlich in dem JavaScript noch die html-Formatierungen und so vornehmen.
Dafür einfach die Variable var text = "Impressum"; ändern.
Ich hoffe ich konnte helfen!
MfG
Das erste ist dein CSS-Code, den brauchst du gar nicht zu ändern.
Und dann zu dem was zu ändern ist:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<title>Markus K</title>
<link type="text/css" rel="stylesheet" href="http://wakestars.onpw.de/css/design.css">
</head>
<!-- Menü links -->
<script type="text/javascript" src="http://code.jquery.com/jquery-1.6.2.js"></script>
[COLOR=#ff0000]<script type="text/javascript">
$(function() {
$('#leiste').hover(function(){
$(this).animate({left:'0px'},{queue:false,duration :500});
}, function(){
$(this).animate({left:'-150px'},{queue:false,duration:500});
});
});
</script>
[/COLOR] </head>
<body>
<div id="leiste"></div>
<!-- Text im linken Menü -->
[COLOR=#008000]<div style="position:absolute; top:30px; left:6px; width:35px; padding:10px; margin-right:left; margin-bottom:left">
[/COLOR] <b><font size="4" color="#FFFFFF ">M<br>A<br>R<br>K<br>U<br>S<br><br><br>K<br><br>< br></font></b></div>
[COLOR=#0000ff]<!-- Impressum -->
<div style="position:absolute; top:430px; left:6px; width:283px; padding:10px; margin-right:left; margin-bottom:left">
<b><font size="4" color="#FFFFFF "> <p>Inhaber: Markus K<br>
Straße 100<br>
00000 Augsburg<br>
<u><br>
</u>Telefon: +49 (0) 15204166092<u><br><br>
</u>E-Mail: Info@WakeStars.de<br>
E-Mail: Markus@WakeStars.de<span style="text-decoration: underline;"></span><br>
</p></font></b></div>
<!-- Impressum ENDE -->
[/COLOR] </body>
</html>Jetzt ersetzt du den roten Code durch den den ich gepostet habe.
In den <div>-tag den ich grün markiert habe packst du die id="ani_impressum" damit das JavaScript die <div> findet.
Und den blauen Code entfernst du vollständig.
Dann sieht das ganze so aus:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<title>Markus K</title>
<link type="text/css" rel="stylesheet" href="http://wakestars.onpw.de/css/design.css">
<!-- Menü links -->
<script type="text/javascript" src="http://code.jquery.com/jquery-1.6.2.js"></script>
<script type="text/javascript">
$(function() {
$('#leiste').hover(function(){
$(this).animate({left:'0px'},{queue:false,duration:500});
var text = "[COLOR=#ff0000]Impressum[/COLOR]";
var top = "430px";
},
function(){
$(this).animate({left:'-150px'},{queue:false,duration:500});
var text = "[COLOR=#008000]Markus K[/COLOR]";
var top = "430px";
});
document.getElementById('ani_impressum').innerHTML = text;
document.getElementById('ani_impressum').style.top = top;
});
</script>
</head>
<body>
<div id="leiste"></div>
<div id="ani_impressum" style="position:absolute; top:30px; left:6px; width:35px; padding:10px; margin-right:left; margin-bottom:left">
<b><font size="4" color="#FFFFFF ">M<br>A<br>R<br>K<br>U<br>S<br><br><br>K</font></b>
</div>
</body>
</html>Und jetzt musst du nur noch das was rot markiert ist durch das was erscheinen soll wenn das Menü "offen" ist ersetzen(inklusive html-Tags nur den <div>-Tag weglassen.
Und das grün markierte durch das was erscheinen soll wenn das Menü zu ist.
MfG
Erstmal Danke 
Aber da lässt sich irgendwie der Kasten nicht mehr öffnen.
Als erstes ist der part falsch:
style="position:absolute; bottom:0px; left:6px; width:283px; padding:10px; margin-right:left; margin-bottom:left">
bei Beiden!
Und, gerade noch völlig übersehen gehabt. Du musst auf dein einfachen Anführungsstrich ' zurückgreifen, entweder ersetzt du innerhalb von den "" die den Variableninhalt deffinieren alle " durch ' oder du ersetzt einfach den ersten und letzten " durch '
das würde dann so aussehen:
var text = '<b><font size="4" color="#FFFFFF ">M<br>A<br>R<br>K<br>U<br>S<br><br><br>K</font></b>';
MfG
Ich bastel dir gerade dn Code vollständig zurecht, bin fast fertig: noch ca. 10min.
So, jetzt ist er fertig:
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<title>Markus K</title>
<link type="text/css" rel="stylesheet" href="http://wakestars.onpw.de/css/design.css">
<script type="text/javascript" src="http://code.jquery.com/jquery-1.6.2.js"></script>
<script type="text/javascript">
$(function() {
$('#leiste').hover(function(){
$(this).animate({left:'0px'},{queue:false,duration:500});
var text = '<b><font size="4" color="#FFFFFF "><p><u>Inhaber:</u><br>Markus K<br>Straße 100<br>00000 Augsburg<br><br><u>Telefon:</u><br>+49 (0) 15204166092<br><br><u>E-Mail:</u><br>Info@WakeStars.de</p></font></b>';
document.getElementById('ani_impressum').innerHTML = text;
var align = 'left';
var width = '190px';
var left = '10px';
var top = '430px';
document.getElementById('ani_impressum').innerHTML = text;
document.getElementById('ani_impressum').style.textAlign = align;
document.getElementById('ani_impressum').style.width = width;
document.getElementById('ani_impressum').style.left = left;
document.getElementById('ani_impressum').style.top = top;
},
function(){
$(this).animate({left:'-150px'},{queue:false,duration:500});
var text = '<b><font size="4" color="#FFFFFF ">M<br>A<br>R<br>K<br>U<br>S<br><br>K</font></b>';
var align = 'center';
var width = '50px';
var left = '150px';
var top = '30px';
document.getElementById('ani_impressum').innerHTML = text;
document.getElementById('ani_impressum').style.textAlign = align;
document.getElementById('ani_impressum').style.width = width;
document.getElementById('ani_impressum').style.left = left;
document.getElementById('ani_impressum').style.top = top;
});
});
</script>
</head>
<body>
<div id="leiste">
<div style="position:relative; top:30px; left:150px; width:50px; text-align:center;" id="ani_impressum">
<b><font size="4" color="#FFFFFF">M<br>A<br>R<br>K<br>U<br>S<br><br>K</font></b>
</div>
</div>
</body>
</html>Der Code ist so fertig und zur Verwendung bereit. Wie es aussieht ist hier zu sehen: http://toms-blog.bplaced.net/filemanager/default.htm
MfG
PS: Es geht bestimmt eleganter, aber es funktioniert und das sollte reichen!^^
Einwandfrei Danke funktioniert super ;).
Bitte bitte!
Und evtl. findeste mal die Zeit um dich in den Code rein zu fitzen um ihn zu verstehen und beim nächsten mal das selber zu lösen!
MfG
Ja, langsam check ich ihn ist eigentlich gar nicht so schwer, hab mich nur wieder so angestellt. 
Wenn man den Browser kleiner macht, zeigt es untereinander mehrere Hintergründe an, wie kann man das deaktivieren das da nur einer angezeigt wird? Hier mal ein Screenshot:
http://wakestars.onpw.de/images/screen.png
// EDIT: Ach, mit background-repeat: no-repeat; funktioniert es leider nicht.
Der Fehler kann dann nur in deiner css oder so liegen! Denn background-repeat ist soweit ich weiß das einzige was das angibt!
Aber ich würde dir eh so einen wirklichen Foto-Hintergrund nicht empfehlen. Weil jeder Bildschirm unterschiedlich ist und deshalb der Rest dann immer einfarbig ist, wirkt einfach nicht so gut!
MfG
Da ist es gemacht indem er das Bild auf 200% seiner Größe gebracht hat und dann rechts und top bei -50% anfängt wodurch das Bild auf alle Fälle den gesamten bildschirm bedeckt!
html-Code:
<div id="bg"><div><table cellpadding="0" cellspacing="0"><tr><td><img alt="" src="server//bg.jpg" /></td></tr></table></div></div>
CSS-Code:
#bg div{position:absolute;width:200%;height:200%;top:-50%;left:-50%}
#bg td{vertical-align:middle;text-align:center}
#bg img{min-height:50%;min-width:50%;margin:0 auto}
Dafür sollte das Bild aber eine gute Qualität und hohe Auflösung haben!^^
MfG