|
|||
Divs untereinander
HTML-Code:
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> xHTML </title> <link rel="stylesheet" href="style.css"> <script src="functions.js"></script> </head> <?php include ("sendmail.php"); ?> <body> <div id="haupt"> <div id="div1"> <img height ="60" width="60" src="xHTML.png" alt="xHTML" id="bild" > </div> </p> <form target="_blank" action="sendmail.php" method="post" class="form"> <div id="div4"> <table> <tr> <td></td> </tr> </table> </div><div id="div3"> <div id="mails"></div> </div></form></div></body></html> Code:
#div1 { background-color: #E41C3C; height: 70px; display: flex; align-items: center; justify-content: center; border-radius: 2em; font-color: white;} #div2 { border-radius: 1em; font-family: sans-serif; padding: 10px; } #div3 { border-radius: 1em; font-family: sans-serif; padding-bottom: 10px; float: both; bottom: 0; width: 1220px; text-align: left; margin: 0 auto; } #div-haupt { margin: 10px 0 0 10px; width:100%; } #div4 { float:both; margin: 0 auto; } Hat wer eine Idee? |
Sponsored Links |
|
|||
Was willst du überhaupt erreichen? Mir scheint, 90% deines Quellcodes sind nicht notwendig, bzw. durch zu wenig Grundwissen entstanden.
absolute Positionierung brauchst du nicht, schon gar nicht als Anfänger. Divs ordnen sich standardmäßig untereinander an, wenn du sie mittels floats nebeneinander anordnest musst du clearen um das nächste Element wieder unten anfangen zu lassen. |
Sponsored Links |
|
|||
Ziel deklarieren
Das mit den 90% sieht so aus, weil ich einen Großteil des Scripts weggelassen habe.
HTML-Code:
<div id="div3"> Test <b><input type="button" onclick="hinzuf()" value="+"></b></button> <div id="mails"></div> <br><br> Nachricht an mich: <textarea cols="140" rows="3" name="test" wrap="virtual" class="input"></textarea> </div> Code:
#div3 { border-radius: 1em; font-family: sans-serif; padding-bottom: 10px; clear:both; clear:left; clear:right; width: 1220px; text-align: left; } |
|
|||
jQuery
Hi, probiere es nun mit jQuery.
HTML-Code:
<input type="button" onclick="hinzuf()" value="test"></button><input type="hidden" id="ids" value="1"> <div id="x"></div> Code:
function hinzuf() { var id = $('#ids').val(); $("#x").append("<input type='text' name='test[]' id='test" + id + "' size='20' value='test " + id + "'><p>"); ++id } |
|
|||
Korrigiere zuerst deine HTML-Fehler, du schließt Absätze, obwohl du keine aufmachst und schließt auch ein div zuviel.
Stelle bitte auch ein Beispiel zur Verfügung, wo wir dein Problem nachvollziehen können. Fügt man deinen Code auf zB jsfiddle ein dann wird das, was da ist, untereinander angezeigt. und was jquery angeht: Für die Darstellung brauchst du kein jquery, das hat damit 0 zu tun. |
|
|||
jQuery
Dadurch, dass ich nun mit jQuery arbeite, haben sich schon viele Probleme gelöst. In einer Tabelle kann javascript keine Elemente erzeugen, was ich aber benötige. jQuery kann es und so benötige ich das Problem, dass das Div nicht da ist wo es ist nicht mehr.
Allerdings zählt mein jQuery nicht hoch.... Durch Druck auf einen Button wird Funktion hinzuf aktiviert..... Mit jedem Klick wird ein Feld erzeugt, jedoch keine wechselnden Nummern. Es bleibt bei test1@example.com. Code:
var id = 1 function hinzuf() { $("#mailboxes").append("<input type='text' class='input' name='zutaten[]' id='zutaten" + id + "' size='20' placeholder='test" + id + "@example.com'><p>"); ++id console.log(id) } |
|
|||
Zitat:
Führt man deinen Code (ohne den jquery-code) aus, dann wird id immer korrekt ausgegeben. Gibt es ein genaueres Fehlerbeispiel? |
|
|||
Löschen
Code:
var id = 1 function hinzuf() { $("#mailboxes").append("<input type='text' class='input' name='zutaten[]' id='mailbox" + id + "' size='20' placeholder='test" + id + "@example.com'><p>"); ++id console.log(id) } function del() { //$("#mailboxes").remove(".mailbox1"); id = id-1 console.log(id) } Zu jQuery: Ist mein Erfahrungswert. Vorher, mit JS hat es nicht geklappt. jQuery kann auch Inhalt in Tabellen einfügen. Aktueller Stand: Das Programm erstellt durch onclick="hinzuf()" beliebig viele neue Zeilen, wie gewünscht, sobald ich aber die derzeit auskommentierte Zeile wieder mit reinnehme, kann er keine Zeile löschen. Theorethisch müsste er die zuletzt erstellte Zeile löschen. |
|
|||
Der code zum hochzählen hat sich aber nicht verändert?
btw. du hast einen Fehler im JS-Code, du fügst ein offenes <p> ein welches du nie schließt. Bezüglich jquery/js: Das ist der Vorteil von jquery, es ist einfacher für Anfänger zu verstehen. Aber zu sagen, das geht in JS nicht ist falsch Bezüglich des löschens: Du hast kein Element .mailbox1 Die Zeile löscht theoretisch nicht die letzte erstellte, sondern ALLE Elemente mit der Klasse mailbox1. Welche es bei dir aber nicht gibt. |
Sponsored Links |
|
|||
Zu 1.) das <p> klappt ohne Probleme.
Zu 2.) Ist meine Erfahrung Zu 3.) Habe es auch in #mailbox1 probiert. Nachdem ich ein paarmal auf hinzufügen gedrückt habe, und anschließend auf delete, hat sich nichts gelöscht. Theoretisch hätte sich das als erstes erstellte löschen müssen, oder? |
Sponsored Links |
Stichwörter |
css, html |
|
|
Ähnliche Themen | ||||
Thema | Autor | Forum | Antworten | Letzter Beitrag |
[CSS] Divs mit float erscheinen untereinander | nicostumpf | CSS | 5 | 16.05.2012 15:23 |
3 Divs (untereinander) parallel mit 3 Divs (untereinander) | SimonK. | CSS | 16 | 19.02.2009 08:56 |
2 Divs untereinander | Bulvaye | CSS | 2 | 03.10.2008 23:50 |
zwei Divs untereinander gleich hoch | Moonphoenix | CSS | 6 | 14.05.2008 23:13 |
Keine blauen Links/ Div verlinken/ Div's untereinander anornen | timbo | CSS | 3 | 03.01.2007 16:47 |