Seite 1 von 2 12 LetzteLetzte
Ergebnis 1 bis 10 von 16

Thema: HTML Abfrage

  1. #1
    Teeny
    Registriert seit
    11.09.2010
    Beiträge
    36
    Danke
    0
    Bekam 0 mal "Danke" in 0 Postings

    Standard HTML Abfrage

    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.
    Achtung: Dies ist ein alter Thread im HTML und Webmaster Forum
    Diese Diskussion ist älter als 90 Tage. Die darin enthaltenen Informationen sind möglicherweise nicht mehr aktuell. Erstelle bitte zu deiner Frage ein neues Thema im Forum !!!!!

  2. #2
    Meister(in) Avatar von DarkEmperor
    Registriert seit
    23.04.2010
    Ort
    Freital
    Alter
    24
    Beiträge
    356
    Danke
    0
    Bekam 0 mal "Danke" in 0 Postings
    Blog-Einträge
    5

    Standard AW: HTML Abfrage

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

  3. #3
    Teeny
    Themenstarter

    Registriert seit
    11.09.2010
    Beiträge
    36
    Danke
    0
    Bekam 0 mal "Danke" in 0 Postings

    Standard AW: HTML Abfrage

    Irgendwie blick ich nicht mehr durch.

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


    body {
    background-image:url('http://1.bp.blogspot.com/-dTbFUj0CESE/TcWQLKsX36I/AAAAAAAABAI/yM9Nrig1oGc/s1600/2010-bmw-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;
    }


    <!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>
    <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>
    <!-- Text im linken Menü -->
    <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>
    <!-- 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 -->
    </body>
    </html>
    Geändert von europachat (01.08.2011 um 19:51 Uhr)

  4. #4
    Meister(in) Avatar von DarkEmperor
    Registriert seit
    23.04.2010
    Ort
    Freital
    Alter
    24
    Beiträge
    356
    Danke
    0
    Bekam 0 mal "Danke" in 0 Postings
    Blog-Einträge
    5

    Standard AW: HTML Abfrage

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

    Und dann zu dem was zu ändern ist:
    Code:
    <!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>
     <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>
     <!-- Text im linken Menü --> 
     <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>
     <!-- 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 -->
     </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:
    Code:
    <!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 = "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>
    </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

  5. #5
    Teeny
    Themenstarter

    Registriert seit
    11.09.2010
    Beiträge
    36
    Danke
    0
    Bekam 0 mal "Danke" in 0 Postings
    Geändert von europachat (02.08.2011 um 01:15 Uhr)

  6. #6
    Meister(in) Avatar von DarkEmperor
    Registriert seit
    23.04.2010
    Ort
    Freital
    Alter
    24
    Beiträge
    356
    Danke
    0
    Bekam 0 mal "Danke" in 0 Postings
    Blog-Einträge
    5

    Standard AW: HTML Abfrage

    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
    Geändert von DarkEmperor (02.08.2011 um 01:29 Uhr)

  7. #7
    Teeny
    Themenstarter

    Registriert seit
    11.09.2010
    Beiträge
    36
    Danke
    0
    Bekam 0 mal "Danke" in 0 Postings

    Standard AW: HTML Abfrage

    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.
    Geändert von europachat (02.08.2011 um 01:27 Uhr)

  8. #8
    Teeny
    Themenstarter

    Registriert seit
    11.09.2010
    Beiträge
    36
    Danke
    0
    Bekam 0 mal "Danke" in 0 Postings

    Standard AW: HTML Abfrage

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

  9. #9
    Meister(in) Avatar von DarkEmperor
    Registriert seit
    23.04.2010
    Ort
    Freital
    Alter
    24
    Beiträge
    356
    Danke
    0
    Bekam 0 mal "Danke" in 0 Postings
    Blog-Einträge
    5

    Standard AW: HTML Abfrage

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

  10. #10
    Meister(in) Avatar von DarkEmperor
    Registriert seit
    23.04.2010
    Ort
    Freital
    Alter
    24
    Beiträge
    356
    Danke
    0
    Bekam 0 mal "Danke" in 0 Postings
    Blog-Einträge
    5

    Standard AW: HTML Abfrage

    So, jetzt ist er fertig:
    HTML-Code:
    <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!^^
    Geändert von DarkEmperor (02.08.2011 um 02:01 Uhr)

Ähnliche Themen

  1. SQL Abfrage
    Von Phate76 im Forum PHP Forum - Apache - CGI - Perl - JavaScript und Co.
    Antworten: 9
    Letzter Beitrag: 07.03.2009, 17:41
  2. if abfrage
    Von im Forum HTML & CSS Forum
    Antworten: 12
    Letzter Beitrag: 29.10.2006, 00:47
  3. mysql abfrage in html?
    Von im Forum HTML & CSS Forum
    Antworten: 12
    Letzter Beitrag: 27.10.2006, 15:47
  4. SQL Abfrage 'LIKE'
    Von Mir nicht im Forum PHP Forum - Apache - CGI - Perl - JavaScript und Co.
    Antworten: 3
    Letzter Beitrag: 17.03.2006, 13:37
  5. Html Code für Passowrt abfrage??
    Von maus88 im Forum HTML & CSS Forum
    Antworten: 7
    Letzter Beitrag: 17.09.2005, 11:22

Stichworte

Berechtigungen

  • Neue Themen erstellen: Nein
  • Themen beantworten: Nein
  • Anhänge hochladen: Nein
  • Beiträge bearbeiten: Nein
  •