zurück zur Startseite
  


Zurück XHTMLforum > (X)HTML und CSS > CSS
Seite neu laden Divs untereinander

Antwort
 
LinkBack Themen-Optionen Ansicht
  #1 (permalink)  
Alt 30.11.2017, 10:07
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 30.11.2017
Beiträge: 9
coolier befindet sich auf einem aufstrebenden Ast
Standard 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>
style.css:
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;
}
Die Divs ordnen sich zwangsweise nebeneinander an. Ich würde diese gerne untereinander haben. Wenn ich div3 absolut setze, sind sie zwar untereinander, liegen aber teilweise übereinander, da div4 sehr groß ist.

Hat wer eine Idee?
Mit Zitat antworten
Sponsored Links
  #2 (permalink)  
Alt 30.11.2017, 10:27
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 30.01.2014
Beiträge: 2.247
cloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblick
Standard

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.
Mit Zitat antworten
Sponsored Links
  #3 (permalink)  
Alt 30.11.2017, 10:37
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 30.11.2017
Beiträge: 9
coolier befindet sich auf einem aufstrebenden Ast
Standard 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;
}
Dieses steht nun neben der Tabelle, nicht unter.
Mit Zitat antworten
  #4 (permalink)  
Alt 30.11.2017, 11:44
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 30.11.2017
Beiträge: 9
coolier befindet sich auf einem aufstrebenden Ast
Standard 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
}
Er sagt, er kennt $ nicht.
Mit Zitat antworten
  #5 (permalink)  
Alt 30.11.2017, 11:58
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 30.01.2014
Beiträge: 2.247
cloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblick
Standard

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.
Mit Zitat antworten
  #6 (permalink)  
Alt 30.11.2017, 13:47
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 30.11.2017
Beiträge: 9
coolier befindet sich auf einem aufstrebenden Ast
Standard 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)
}
Mit Zitat antworten
  #7 (permalink)  
Alt 30.11.2017, 14:29
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 30.01.2014
Beiträge: 2.247
cloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblick
Standard

Zitat:
Zitat von coolier Beitrag anzeigen
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.
Das ergibt keinen Sinn, jquery kann auch nicht mehr als Javascript. Also alles, was mit Javascript nicht geht, geht auch mit jQuery nicht und alles was mit jQuery geht, geht auch mit Javascript.



Zitat:
Zitat von coolier Beitrag anzeigen
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)
}
Führt man deinen Code (ohne den jquery-code) aus, dann wird id immer korrekt ausgegeben. Gibt es ein genaueres Fehlerbeispiel?
Mit Zitat antworten
  #8 (permalink)  
Alt 30.11.2017, 14:34
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 30.11.2017
Beiträge: 9
coolier befindet sich auf einem aufstrebenden Ast
Standard 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)
}
so zählt er jetzt hoch.

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.
Mit Zitat antworten
  #9 (permalink)  
Alt 30.11.2017, 14:44
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 30.01.2014
Beiträge: 2.247
cloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblick
Standard

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.
Mit Zitat antworten
Sponsored Links
  #10 (permalink)  
Alt 30.11.2017, 14:46
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 30.11.2017
Beiträge: 9
coolier befindet sich auf einem aufstrebenden Ast
Standard

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?
Mit Zitat antworten
Sponsored Links
Antwort

Stichwörter
css, html

Themen-Optionen
Ansicht

Forumregeln
Es ist Ihnen nicht erlaubt, neue Themen zu verfassen.
Es ist Ihnen nicht erlaubt, auf Beiträge zu antworten.
Es ist Ihnen nicht erlaubt, Anhänge hochzuladen.
Es ist Ihnen nicht erlaubt, Ihre Beiträge zu bearbeiten.

BB-Code ist an.
Smileys sind an.
[IMG] Code ist an.
HTML-Code ist aus.
Trackbacks are an
Pingbacks are an
Refbacks are aus


Ä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


Alle Zeitangaben in WEZ +2. Es ist jetzt 14:21 Uhr.