css Übergang mit Formular in div

Ich versuche eine Box zu bekommen, die ausgeblendet wird, wenn ich darauf geklickt habe. Es funktioniert, aber die Form nicht.css Übergang mit Formular in div

Wenn ich auf '17 | Lampe im Esszimmer ... C301 | Frau Müller 'dann' Beschreibung 'und' Notiz 'erschienen, aber ich vermisse die vollständige Form.

hier ist mein Code:

<!DOCTYPE html> 
<html> 
    <head> 
     <style> 
       p {width: 320px; margin: 0px;} 
       form {width: 320px; margin: auto;} 
       #main {background-color: brown;} 
       #id17 {background-color: blue; height: 0; overflow: hidden; transition: height 500ms ease-in 0s;} 
       #id17:target {height: 100px;} 
       .center {text-align: center;} 

     </style> 
    </head> 

    <body> 
     <div id='main' class='center'> 
      <a href=#id17>17 | Lampe im Esszimmer ...<br>C301 | Frau Müller</a><br> 
      <div id='id17' class='center'><br> 
       Beschreibung:<br> 
       Lampe im Esszimmer defekt. Es ist eine LED Birne.<br> 
       Notiz:<br> 
       Hier steht eine Notiz, wenn eine geschrieben wurde<br> 
       <form id='id17' action='test.php' method='post'> 
        <fieldset> 
         <select name='std'> 
          <option value='0'>0</option> 
          <option value='15'>15</option> 
          <option value='30'>30</option> 
          <option value='45'>45</option> 
         </select><br> 
         <select name='min'>"; 
          <option value='15'>15</option> 
          <option value='30'>30</option> 
          <option value='45'>45</option> 
          <option value='60'>60</option> 
         </select><br> 
         <input type='submit' value='erledigt'> 
        </fieldset> 
       </form> 
      </div> 
     </div> 
    </body> 
</html>

ich mit dieser Frage nicht allein bin. Ich habe es schon gelesen, aber es ist immer noch unbeantwortet.

Habe ich meinen Punkt deutlich gemacht?

Quelle

2017-07-17 greenMover

Sie haben die ID 'id17' zweimal verwendet. Für den Container div und für das Formular. IDs sollten eindeutig sein. Benutze stattdessen Klassen: '

Aufgrund dieses css style overflow: hidden; Das Formular wird nicht auf der Seite angezeigt. –

löste das Problem: dont Verwendung id in form Tag

<!DOCTYPE html> 
<html> 
    <head> 
     <style> 
       p {width: 320px; margin: 0px;} 
       form {width: 320px; margin: auto;} 
       #main {background-color: yellow;} 
       #id17 {background-color: green; height: 0; overflow: hidden; transition: height 500ms ease-in 0s;} 
       #id17:target {height: 400px;} 
       .center {text-align: center;} 

     </style> 
    </head> 

    <body> 
     <div id='main' class='center'> 
      <a href=#id17>17 | Lampe im Esszimmer ...<br>C301 | Frau Müller</a><br> 
      <div id='id17' class='center'><br> 
       Beschreibung:<br> 
       Lampe im Esszimmer defekt. Es ist eine LED Birne.<br> 
       Notiz:<br> 
       Hier steht eine Notiz, wenn eine geschrieben wurde<br> 
       <form id='' action='test.php' method='post'> 
        <fieldset> 
         <select name='std'> 
          <option value='0'>0</option> 
          <option value='15'>15</option> 
          <option value='30'>30</option> 
          <option value='45'>45</option> 
         </select><br> 
         <select name='min'>"; 
          <option value='15'>15</option> 
          <option value='30'>30</option> 
          <option value='45'>45</option> 
          <option value='60'>60</option> 
         </select><br> 
         <input type='submit' value='erledigt'> 
        </fieldset> 
       </form> 
      </div> 
     </div> 
    </body> 
</html>

Quelle

2017-07-17 09:32:21 Nihal

Dank für Ihre Hilfe !!!!

Aber ich fand einen Fehler auf eigene Faust.

Ich begrenzte die # ID17: Zielhöhe auf 400px. Ich denke, das war das Problem. Mit meinen neuen CSS-Zeilen funktioniert es:

<!DOCTYPE html> 
<html> 
    <head> 
     <title>Designtest</title> 
     <meta charset='utf-8'> 
     <style> 
      p {width: 320px; margin: 0px;} 
      form {width: 320px; margin: auto;} 
      #main {background-color: brown;} 
      #id17 {background-color: blue; height: 0; overflow: hidden; transition: height 500ms ease-in 0s;} 
      #id17:target {height: 100%;} 
      #id18 {background-color: blue; height: 0; overflow: hidden; transition: height 500ms ease-in 0s;} 
      #id18:target {height: 100%;} 
      .center {text-align: center;} 
      .id17 {overflow: visible; height: 100px;} 
      .id18 {overflow: visible; height: 100px;} 
     </style> 
    </head> 

    <body> 
     <div id='main' class='center'> 
      <a href=#id17>17 | Lampe im Esszimmer ...<br>C301 | Frau Müller</a><br> 
      <div id='id17' class='center'><br> 
       Beschreibung:<br> 
       Lampe im Esszimmer defekt. Es ist eine LED Birne.<br> 
       Notiz:<br> 
       Hier steht eine Notiz, wenn eine geschrieben wurde<br> 
       <form class='id17' action='test.php' method='post'> 
        <fieldset> 
         <select name='std'> 
          <option value='0'>0</option> 
          <option value='15'>15</option> 
          <option value='30'>30</option> 
          <option value='45'>45</option> 
         </select><br> 
         <select name='min'>"; 
          <option value='15'>15</option> 
          <option value='30'>30</option> 
          <option value='45'>45</option> 
          <option value='60'>60</option> 
         </select><br> 
         <input type='submit' value='erledigt'> 
        </fieldset> 
       </form> 
      </div> 
      <a href=#id18>17 | Lampe im Esszimmer ...<br>C301 | Frau Müller</a><br> 
      <div id='id18' class='center'><br> 
       Beschreibung:<br> 
       Lampe im Esszimmer defekt. Es ist eine LED Birne.<br> 
       Notiz:<br> 
       Hier steht eine Notiz, wenn eine geschrieben wurde<br> 
       <form class='id18' action='test.php' method='post'> 
        <fieldset> 
         <select name='std'> 
          <option value='0'>0</option> 
          <option value='15'>15</option> 
          <option value='30'>30</option> 
          <option value='45'>45</option> 
         </select><br> 
         <select name='min'>"; 
          <option value='15'>15</option> 
          <option value='30'>30</option> 
          <option value='45'>45</option> 
          <option value='60'>60</option> 
         </select><br> 
         <input type='submit' value='erledigt'> 
        </fieldset> 
       </form> 
      </div> 
     </div> 
    </body> 
</html>

Quelle

2017-07-17 15:42:01 greenMover

css Übergang mit Formular in div

Antwort

Verwandte Themen