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

Frage Elemente nur mit TAB/SHIFT+TAB erreichbar, nicht mit Maus

S

Streethawk68

Neues Mitglied
Hallo User,

anbei sende ich euch ein HTML-/PHP-Skript. Im Browser kann ich die Elemente nur mit TAB/SHIFT+TAB erreichen, aber nicht mit der Maus. Weiß jemand, warum?
Euer
Streethawk68

HTML: 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html lang="de">
<head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8">
    <link rel="stylesheet" type="text/css" href="../liverecord.css">
    <title>Menschen hinzuf&uuml;gen aktualisieren l&ouml;schen</title>
    <!--
    liverecord_admin_mensch.css
    -->
</head>
<body>
    <div id="askaction_headline">
    <h1>&nbsp;&nbsp;Erinnerst du dich an ... - Projekt Liverecord</h1>
    <h2>&nbsp;&nbsp;&nbsp;&nbsp;Menschen hinzuf&uuml;gen aktualisieren l&ouml;schen</h2></div>
   
    <div id="bild_finden">
    <img src="finden01.jpg" width="120" height="120" alt="human-find"></div>
   
    <form action="lr_askaction_green_design.php" method="post">
        <!-- Einfüge-Teil -->
        <div id="insert">
        <input name="insert_update_delete" value="insert" type="radio">Ich m&ouml;chte einen neuen Menschen hinzuf&uuml;gen</div>
       
        <!-- Update/Aktualisierungs-Teil -->
        <div id="update">
        <input name="insert_update_delete" value="update" type="radio">Ich m&ouml;chte einen Datensatz aktualisieren,
        die Nummer ist:   <input name="update_id" size="4"></div>
       
        <!-- Lösch-Teil -->
        <div id="delete">
        <input name="insert_update_delete" value="delete" type="radio">Ich m&ouml;chte einen Datensatz <b>l&ouml;schen</b>,
        die Nummer des zu <b>l&ouml;schenden</b> Datensatzes ist:   <input name="delete_id" size="4"></div>
       
        <!-- Zufallsauswahl-Teil -->
        <div id="random">
        <input name="insert_update_delete" value="random" type="radio">Ich m&ouml;chte einen zuf&auml;llig ausgew&auml;hlten Datensatz bearbeiten</div>
           
        <div id="submit_reset">
        <input value="Ausw&auml;hlen" type="submit"><br />
        <input type="reset"></div>
       
    </form>
<?php // Sicherheitsabfrage zun&auml;chst auskommentiert 16.08.2014
    /*
    $muster = "/[0-9]/";
    if ((isset($_POST['id'])) && preg_match($muster, $_POST['id']) == 0 && $_POST['insertupdate'] == 'update')
    {
        echo "<p>Keine Zahl eingegeben.</p>";
        echo "<p><a href='lr_askaction.php'>Zur&uuml;ck</a></p>";
        session_destroy();
        exit;
    }
    */
    // if (isset($_POST['id']))
    // {
        if ($_POST['insert_update_delete'] == 'insert')
        {
            echo "<div id='to_new_rs'><a href='lr_insert_green_design.php'>Zu einem neuen Menschen</a></div>";
        }
        else if ($_POST['insert_update_delete'] == 'update')
        {
            $dnr = $_POST['update_id'];
            echo "<div id='to_upd_rs'><a href='lr_update_form_green_design.php?dnr=$dnr'>Zum Update</a></div>";
        }
        else if ($_POST['insert_update_delete'] == 'delete')
        {
            $dnr = $_POST['delete_id'];
            echo "<div id='to_del_rs'><a href='lr_delete_green_design.php?dnr=$dnr'>Zum L&ouml;schen</a></div>";
        }
        else if ($_POST['insert_update_delete'] == 'random')
        {
            include_once "../lr_zufall/lr_zufallswahl.inc.php";
            $dnr = $zufdats;
            echo "<div id='to_random_rs'><a href='../lr_zufall/lr_zufall.php?dnr=$dnr'>Zum zuf&auml;lligen Datensatz</a></div>";
        }
    // }
?>
   
    <div id="link_start">
    <a href="../index.php">Zum Start</a></div>
   
    <div id="link_finden">
    <a href="../lr_find/lr_find_form.php">Menschen finden</a></div>
           
   
   
           
    <div id="link_showwhole">
    <a href="../lr_showwhole.php">Ganze Menschen-Tabelle</a></div>
                       
    <div id="link_ereign_administr">
    <a href="../admin_event/lr_ev_askaction.php">Ereignisse administrieren</a></div>
           
    <div id="link_ereign_showwhole">
    <a href="../admin_event/lr_ev_showwhole.php">Ganze Ereignis-Tabelle</a></div>
       
</body>
</html>
 
Werbung:
Streethawk68 schrieb:
Hallo User,

anbei sende ich euch ein HTML-/PHP-Skript. Im Browser kann ich die Elemente nur mit TAB/SHIFT+TAB erreichen, aber nicht mit der Maus. Weiß jemand, warum?
Euer
Streethawk68

HTML: 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html lang="de">
<head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8">
    <link rel="stylesheet" type="text/css" href="../liverecord.css">
    <title>Menschen hinzuf&uuml;gen aktualisieren l&ouml;schen</title>
    <!--
    liverecord_admin_mensch.css
    -->
</head>
<body>
    <div id="askaction_headline">
    <h1>&nbsp;&nbsp;Erinnerst du dich an ... - Projekt Liverecord</h1>
    <h2>&nbsp;&nbsp;&nbsp;&nbsp;Menschen hinzuf&uuml;gen aktualisieren l&ouml;schen</h2></div>
  
    <div id="bild_finden">
    <img src="finden01.jpg" width="120" height="120" alt="human-find"></div>
  
    <form action="lr_askaction_green_design.php" method="post">
        <!-- Einfüge-Teil -->
        <div id="insert">
        <input name="insert_update_delete" value="insert" type="radio">Ich m&ouml;chte einen neuen Menschen hinzuf&uuml;gen</div>
      
        <!-- Update/Aktualisierungs-Teil -->
        <div id="update">
        <input name="insert_update_delete" value="update" type="radio">Ich m&ouml;chte einen Datensatz aktualisieren,
        die Nummer ist:   <input name="update_id" size="4"></div>
      
        <!-- Lösch-Teil -->
        <div id="delete">
        <input name="insert_update_delete" value="delete" type="radio">Ich m&ouml;chte einen Datensatz <b>l&ouml;schen</b>,
        die Nummer des zu <b>l&ouml;schenden</b> Datensatzes ist:   <input name="delete_id" size="4"></div>
      
        <!-- Zufallsauswahl-Teil -->
        <div id="random">
        <input name="insert_update_delete" value="random" type="radio">Ich m&ouml;chte einen zuf&auml;llig ausgew&auml;hlten Datensatz bearbeiten</div>
          
        <div id="submit_reset">
        <input value="Ausw&auml;hlen" type="submit"><br />
        <input type="reset"></div>
      
    </form>
<?php // Sicherheitsabfrage zun&auml;chst auskommentiert 16.08.2014
    /*
    $muster = "/[0-9]/";
    if ((isset($_POST['id'])) && preg_match($muster, $_POST['id']) == 0 && $_POST['insertupdate'] == 'update')
    {
        echo "<p>Keine Zahl eingegeben.</p>";
        echo "<p><a href='lr_askaction.php'>Zur&uuml;ck</a></p>";
        session_destroy();
        exit;
    }
    */
    // if (isset($_POST['id']))
    // {
        if ($_POST['insert_update_delete'] == 'insert')
        {
            echo "<div id='to_new_rs'><a href='lr_insert_green_design.php'>Zu einem neuen Menschen</a></div>";
        }
        else if ($_POST['insert_update_delete'] == 'update')
        {
            $dnr = $_POST['update_id'];
            echo "<div id='to_upd_rs'><a href='lr_update_form_green_design.php?dnr=$dnr'>Zum Update</a></div>";
        }
        else if ($_POST['insert_update_delete'] == 'delete')
        {
            $dnr = $_POST['delete_id'];
            echo "<div id='to_del_rs'><a href='lr_delete_green_design.php?dnr=$dnr'>Zum L&ouml;schen</a></div>";
        }
        else if ($_POST['insert_update_delete'] == 'random')
        {
            include_once "../lr_zufall/lr_zufallswahl.inc.php";
            $dnr = $zufdats;
            echo "<div id='to_random_rs'><a href='../lr_zufall/lr_zufall.php?dnr=$dnr'>Zum zuf&auml;lligen Datensatz</a></div>";
        }
    // }
?>
  
    <div id="link_start">
    <a href="../index.php">Zum Start</a></div>
  
    <div id="link_finden">
    <a href="../lr_find/lr_find_form.php">Menschen finden</a></div>
          
  
  
          
    <div id="link_showwhole">
    <a href="../lr_showwhole.php">Ganze Menschen-Tabelle</a></div>
                      
    <div id="link_ereign_administr">
    <a href="../admin_event/lr_ev_askaction.php">Ereignisse administrieren</a></div>
          
    <div id="link_ereign_showwhole">
    <a href="../admin_event/lr_ev_showwhole.php">Ganze Ereignis-Tabelle</a></div>
      
</body>
</html>
Zum Vergrößern anklicken....

Ohne CSS können wir das Problem wahrscheinlich nicht nachvollziehen.
Außerdem wäre es besser du postest reinen HTML Code - ich persönlich will nicht extra PHP-Dateien erstellen, zumal das Problem nichts mit PHP zu tun hat.
 
Werbung:
Sende CSS dazu anbei ...

HTML: 
/* Schriftart und Hintergrundfarbe im gesamten Dokument */
body {
  background-color: rgb(107, 193, 134); font-family: Verdana, Arial, Helvetica, sans-serif;
}

/* Absätze, DIVs, Tabellen, Listen, Formulare in 10 Punkt */
p, div, table, li, form  {
  font-size: 9pt;
}

/* Hintergrundfarbe grau mit weißer Schrift */
h1 {
  background-color: gray;
  color: white;
}

/* Überschrift 2 und 3 blau färben */
h2, h3 {
  color: rgb(0,0,153);
}

/* fette Passagen rot einfärben */
b {
  color: #339900;
}

/* kursive Passagen speziell färben */
i {
  color: rgb(210, 232, 206);
}

/* Link-Stile für Hover-Links  */
a:link {
  color: rgb(0,0,153);
}

a:visited {
  color: gray;
}

a:hover {
  text-decoration : none;
  color: rgb(238, 147, 118);
}

a:active {
  color: black;
}
#index_headline {position: absolute; top: 50px; left: 50px; width: 800px; height: 600px;}
#headline {position: absolute; top: 50px; left: 50px; width: 800px; height: 600px;}
#bild_start {position: absolute; top: 180px; left: 50px; width: 120px; height: 100px;}

#link_start {position: absolute; top: 180px; left: 250px; width: 400px; height: 400px;}
#link_finden {position: absolute; top: 200px; left: 250px; width: 400px; height: 400px;}
#link_administrieren {position: absolute; top: 220px; left: 250px; width: 400px; height: 400px;}
#link_showwhole {position: absolute; top: 240px; left: 250px; width: 400px; height: 400px;}
#link_ereign_administr {position: absolute; top: 260px; left: 250px; width: 400px; height: 400px;}
#link_ereign_showwhole {position: absolute; top: 280px; left: 250px; width: 400px; height: 400px;}

#submit_reset {position: absolute; top: 310px; left: 250px; width: 400px; height: 70px;}


#showwhole_link_finden {position: absolute; top: 180px; left: 50px; width: 400px; height: 400px;}

#find_headline {position: absolute; top: 50px; left: 50px; width: 800px; height: 600px;}
#bild_finden {position: absolute; top: 180px; left: 50px; width: 400px; height: 400px;}

#num_cod {position: absolute; top: 380px; left: 250px; width: 200px; height: 200px; color: rgb(227, 238, 202);}

#nam_gebnam_vorn {position: absolute; top: 180px; left: 450px; width: 200px; height: 200px; color: rgb(217, 217, 139);}
#str_plz_ort {position: absolute; top: 180px; left: 700px; width: 200px; height: 200px; color: rgb(217, 217, 139);}
#ott_prv_lnd {position: absolute; top: 180px; left: 950px; width: 200px; height: 200px; color: rgb(217, 217, 139);}
#fab_typ_knz {position: absolute; top: 330px; left: 450px; width: 200px; height: 200px; color: rgb(217, 217, 139);}
#lvo_vow_ans {position: absolute; top: 330px; left: 700px; width: 200px; height: 200px; color: rgb(217, 217, 139);}
#akt_mvo_man {position: absolute; top: 330px; left: 950px; width: 200px; height: 200px; color: rgb(217, 217, 139);}
#em1_em2_url {position: absolute; top: 480px; left: 450px; width: 200px; height: 200px; color: rgb(217, 217, 139);}
#ges_kin_ver {position: absolute; top: 480px; left: 700px; width: 200px; height: 200px; color: rgb(217, 217, 139);}
#geb_erg_bem {position: absolute; top: 480px; left: 950px; width: 200px; height: 200px; color: rgb(217, 217, 139);}
#fax_tit_ber {position: absolute; top: 630px; left: 450px; width: 200px; height: 200px; color: rgb(217, 217, 139);}
#aus_tae_fir {position: absolute; top: 630px; left: 700px; width: 200px; height: 200px; color: rgb(217, 217, 139);}
#hob_hek_esb {position: absolute; top: 630px; left: 950px; width: 200px; height: 200px; color: rgb(217, 217, 139);}

#askaction_headline {position: absolute; top: 50px; left: 50px; width: 800px; height: 600px;}
#bild_finden {position: absolute; top: 180px; left: 50px; width: 400px; height: 400px;}

#insert {position: absolute; top: 400px; left: 250px; width: 600px; height: 200px; color: rgb(227, 238, 202);}
#update {position: absolute; top: 430px; left: 250px; width: 1200px; height: 200px; color: rgb(227, 238, 202);}
#delete {position: absolute; top: 460px; left: 250px; width: 1200px; height: 200px; color: rgb(227, 238, 202);}
#random {position: absolute; top: 490px; left: 250px; width: 1200px; height: 200px; color: rgb(227, 238, 202);}

/* #submit_reset {position: absolute; top: 300px; left: 500px; width: 1200px; height: 200px; color: rgb(227, 238, 202);} */

#to_new_rs {position: absolute; top: 340px; left: 200px; width: 1200px; height: 200px; color: rgb(227, 238, 202); font-weight: bold;}
#to_upd_rs {position: absolute; top: 340px; left: 200px; width: 1200px; height: 200px; color: rgb(227, 238, 202); font-weight: bold;}
#to_del_rs {position: absolute; top: 340px; left: 200px; width: 1200px; height: 200px; color: rgb(227, 238, 202); font-weight: bold;}
#to_random_rs {position: absolute; top: 340px; left: 200px; width: 1200px; height: 200px; color: rgb(227, 238, 202); font-weight: bold;}

#updated_headline {position: absolute; top: 50px; left: 50px; width: 800px; height: 600px;}
#bild_updated {position: absolute; top: 180px; left: 50px; width: 400px; height: 400px;}
#updated {position: absolute; top: 180px; left: 200px; width: 400px; height: 400px;}
 
Verzichte auf absolute Positionierung. Das bringt dich eindeutig durcheinander. Dazu musst Du vermutlich deinen HTML-Code anpassen und dein CSS nahezu komplett neu schreiben. Mit dem jetzigen Entwurf wirst Du vermutlich nicht glücklich werden.

Moderation: Verschoben von HTML zu CSS da es um Gestaltung geht.
 
Kannst du mir bitte ein Beispiel geben, wie man ein Element, z.B. einen Radio Button deiner Meinung nach per CSS richtig positioniert? Zweitens: ist die absolute Positionierung der Grund für mein Ausgangsproblem, dass die Elemente nicht mit der Maus erreichbar sind?
 
Werbung:
Es kommt drauf an was "richtig" ist. Wenn man einen Radio-Button neben eine Beschriftung setzen will, reicht float oder display: inline-block aus. Heutzutage kann man auch flexboxen hierfür verwenden. Ich würde dir raten dich hier erstmal einzulesen:
http://www.edv-lehrgang.de/ausrichten-und-positionieren-in-css/
https://wiki.selfhtml.org/wiki/CSS/Eigenschaften/Positionierung/float

Absolut positionierte Elemente liegen, wenn man es unbedacht und in solchen Mengen wie Du nutzt, auch mal übereinander. Mit einem Entwicklertool im Browser kannst Du schnell erkennen, welche Ebene eine andere überlagert und das darunter liegende Element dadurch nicht erreichbar macht.
 
Hallo

Zweitens: ist die absolute Positionierung der Grund für mein Ausgangsproblem, dass die Elemente nicht mit der Maus erreichbar sind?
Zum Vergrößern anklicken....

Ja. Wie schon aus den anderen Antworten hervorgeht sollte "position: absolute;" die absolute Ausnahme sein und nur angewendet werden, wenn es keine sinnvolleren Möglichkeiten gibt. So eine Ausnahme ist zum Beispiel, wenn Text über eine Grafik verschoben werden soll.

In deinem Beispiel sind alle absolute-Angaben überflüssig und sollten durch andere CSS-Eigenschaften ersetzt werden. Bei dir kommt noch hinzu, das Elemente unnötig groß (width, height) gemacht werden.

So überlagern gleich 5 Elemente größtenteils das Formular. Um die sichtbar zu machen kannst du dem CSS am Ende mal folgende Anweisungen hinzufügen:

Code: 
#link_start {
border: 2px solid blue;
}
#link_finden {
border: 3px solid red;
}
#link_showwhole {
border: 4px solid orange;
}
#link_ereign_administr {
border: 5px solid brown;
}
#link_ereign_showwhole {
border: 6px solid green;
}

Das sind dann auch genau die Elemente, bei denen die absolute Position entfernt werden muss, damit die Maus die Formularfelder erreichen kann. Oder deren Ausdehnung soweit verringert werden muss, dass sie die Formularfelder nicht mehr überlappen.

Insgesamt würde ich aber auch vorschlagen die Grundlagen von HTML / CSS zu lernen und die Seite dann neu zu erstellen.

Gruss

MrMurphy
 
Zuletzt bearbeitet:
Werbung:
Du musst dich einloggen oder registrieren, um hier zu antworten.

Neueste Beiträge

Zurück
Oben