HTML Abfrage

europachat

Hallo,

habe auf meiner Webseite links ein aufklappmenü programmiert.

Aber wenn man mit der Maus auf das Menü fährt, wird es größer, wie mach ich das, das es das Markus K nicht angezeigt wird und nur noch das Impressum unten dran ist sobalt es offen ist? Und wenn es geschlossen ist sollte nur Markus K ohne Impressum sein

http://wakestars.onpw.de/

Wie kann ich das mit einer Abfrage machen?

Gruß Markus K.

DarkEmperor

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!^^

HTML

<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>

Alles anzeigen

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

europachat

Irgendwie blick ich nicht mehr durch.

Hier hab ich mal den Code, aber was muss ich da ändern check ich irgendwie nicht:

Zitat

body {
background-image:url('http://1.bp.blogspot.com/-dTbFUj0CESE/T…m6-interior.jpg');
background-size:100%;
background-attachment:fixed;
}
#leiste {
background-image:url('http://wakestars.onpw.de/images/leiste.png');
position: fixed;
height: 100%;
top: 0px;
left: -150px;
width: 200px;
}

Alles anzeigen

Zitat

<!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>

<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});
}, function(){
$(this).animate({left:'-150px'},{queue:false,duration:500});
});
});

</script>
</head>
<body>
<div id="leiste"></div>

<div 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<br><br><br></font></b></div>

<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>

</body>
</html>

Alles anzeigen

DarkEmperor

Das erste ist dein CSS-Code, den brauchst du gar nicht zu ändern.

Und dann zu dem was zu ändern ist:

HTML

<!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>

Alles anzeigen

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:

HTML

<!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>

Alles anzeigen

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

europachat

Erstmal Danke Aber da lässt sich irgendwie der Kasten nicht mehr öffnen.

http://wakestars.onpw.de/

Bei var text = Markus hab ich den ganzen Code vom vertiaklen Markus K drin bei var text = impressum den ganzen code vom impressum aber was hab ich falsch verstanden?

DarkEmperor

Als erstes ist der part falsch:

Code

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:

Code

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

europachat

Das untere brauch ich ja eigentlich nicht oder, weil das verwirrt mich bisschen das div ani impressum wenn ich nur den Code von dir reinposte, zeigt es mir aber auch das Impressum nicht an bzw. klappt auch nicht auf. Ich blicke irgendwie noch nicht ganz durch.

// EDIT: Ich checke nicht ganz, wie das dann richtig aussehen sollte.

europachat

OK. Aber wenn ich da bei var text etwas einfüge z.B. bei Impressum zeigt es mir da gar kein Text an, warum?

DarkEmperor

Ich bastel dir gerade dn Code vollständig zurecht, bin fast fertig: noch ca. 10min.

DarkEmperor

So, jetzt ist er fertig:

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">
<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>

Alles anzeigen

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!^^

europachat

Einwandfrei Danke funktioniert super ;).

DarkEmperor

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

europachat

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.

DarkEmperor

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

europachat

Ja, weiß schon, aber wie macht das dann z.B. http://ringvemedia.com/ mit dem Hintergrund? So habe ich es bereits versucht:

PHP

background-size: content;   &   background-repeat: no-repeat;

Hab eigentlich schon alles versucht. Will aber nicht so funktionieren so wie ich es möchte.

DarkEmperor

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:

HTML

<div id="bg"><div><table cellpadding="0" cellspacing="0"><tr><td><img alt="" src="server//bg.jpg" /></td></tr></table></div></div>

CSS-Code:

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

Tags

Benutzer online in diesem Thema