ich seh schon, du vergibst frei heraus irgendwelche werte, kein wunder dass du bei einer anderen skalierung probleme bekommst.
versuch mal einfach alle elemente 'position: absolute' zu setzen und die werte einheitlich in pixeln zu vergeben. das sollte im ergebnis ungefähr so skalieren wie habbow.
Gut, ich setze mich mal dran. Danke für die bisherigen Hilfestellungen
kein gutes beispiel, die seite ist alles andere als responsive.
als beispiel für die von mir beschriebene technik kannst du dir hier das logo ansehen. du kannst zoomen wie du willst, das logo bleibt immer gleich groß und an der gleichen position.
problematisch wäre das allerdings wenn es ein button wäre, da wenn das fenster schmaler wird der button auch kleiner werden würde. in dem fallbeispiel könntest du dann eine min-width/height setzen.
das ist nur ein kleines beispiel, es gibt viele verschiedene wege wie du deine webseite responsive gestalten kannst.
Naja, ich habs scheinbar nicht richtig getestet gehabt oder muss nochmal dran pfeilen. Jedenfalls habe ich es nicht auf Anhieb geschafft, ein anderes Ergebnis zu erzielen.
Es geht mir auch wirklich nur darum, dass sich ALLES so wie es auf 100%-Scale ist, je nach anderen Stufen gleichzeitig minimiert, halt wie bei HabboW mit meinen Beispielen. Ich habe vor, genau dieses Ergebnis zu erzielen
am einfachsten ist es wohl, wenn du einfach allen elementen statt 'px' oder '%' werten einen 'vw' bzw 'vh' wert gibst. damit skalieren die elemente immer proportional zur größe des fensters (viewport), wobei vw für vievport-width und vh für viewport-height steht.
das ist wohl nicht die beste lösung, aber eine universallösung gibt es hier nicht. wenn der bildschirm kleiner/größer wird passt halt manches nichtmehr rauf oder wird unproportional zum rest.
Hey, danke für deine doch recht schnelle Antwort. Ich teste das ganze mal aus, weil sonst wirds halt doof für die User mit dem Smartphone.
Ich kenne das bloß von anderen Seite, dass es dort geregelt ist, bspw : diese Seite
edit:
Hier mal ein paar Bilder, wie es auf verschiedenen Zoomstufen ausschaut :
100%
Wie es ausschauen sollte :
Heyhey!
Ich recode derzeit unseren Index und habe dabei ein Problem festgestellt was vorallem die Smartphoneuser betreffen dürfte.
Immer, wenn ich die Zeite ein- oder auszoome, verschieben sich die einzelnen Elemente kreuz und quer. Wie kann ich dagegen vorgehen?
Kurz : Wie den Inhalt in seiner Position behalten trotz Zoomphasen?
(Mir fiel es schwer, dies auf Google zu definieren. Woanders nichts gefunden)
Danke für alle hilfreichen Antworten,
liebe Grüße!
Problemlösung :
Der Code war in der Datei lediglich falsch platziert (über allen anderen codes), was das Popup blockiert hat. Habe diesen ganz unten angefügt und schon funktioniert alles wie gewünscht!
Thread kann btw geschlossen werden =)
Ja, gerne. Aber etwas später wenn, weil ich echt müde bin.
Ich schaffe es nicht, ist auch nicht das Ergebnis bzw es öffnet sich weiterhin nichts. Der Button muss auch (soweit ich das gesehen habe) mit der id ''myBtn'' definiert werden, was aber auch nichts bringt. Wie auch immer, ich nehme gerne das TV-Angebot sofern zeitlich und willentlich passend zu einen späteren Zeitpunkt in Kauf.
Das ist der Button, welcher das PopUp öffnet. Den kannst du via Style natürlich auch animieren (:hover) etc.
Ahh, okay. Ja genau das hatte ich ja versucht, was wohl so nicht hingehauen hat. Ich versuche zu lernen, klappt auch meistens ganz gut 
Danke für die aktive Hilfe
Code<a href="#" data-toggle="modal" data-target="#myModal">PopUp öffnen</a>
Okay, ich verstehe. Aber dann würde ja die Animation verfallen (wäre nicht weiter tragisch, aber kann man das nicht kombinieren?)
Ich gebe einfach mal das gesamte .php-Dokument durch. Der Button wurde in nem Beitrag von mir ausgegeben, hier nochmal :
<button class="button" href="/index" id="myBttn" style="vertical-align:middle"><span title="Sende deine Bewerbung ab">Absenden </span></button>Hier der gesamte Code :
<!DOCTYPE HTML>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- CSS-STUFF -->
<style>
body {
background:
radial-gradient(transparent, black),
url("/bgg2.png");
}
.focus {
width: 16%;
padding: 8px 8px;
box-sizing: border-box;
border: 3px solid #ccc;
}
.focus:focus {
background-color:#555555;
color: white;
outline: none;
}
.button {
display: inline-block;
border-radius: 4px;
background-color: #555;
border: none;
color: #FFFFFF;
text-align: center;
font-size: 15px;
padding: 14px;
width: 120px;
transition: all 0.5s;
cursor: pointer;
margin: 2px;
}
.button span {
cursor: pointer;
display: inline-block;
position: relative;
transition: 0.5s;
}
.button span:after {
content: '\00bb';
position: absolute;
opacity: 0;
top: 0;
right: -20px;
transition: 0.5s;
}
.button:hover span {
padding-right: 25px;
}
.button:hover span:after {
opacity: 1;
right: 0;
}
h1 {
color: white;
text-shadow: -1px 0 black, 0 2px black, 2px 0 black, 0 -1px black;
}
h2 {
color: white;
text-shadow: -1px 0 black, 0 2px black, 2px 0 black, 0 -1px black;
}
.bwinfo {
color:white;
text-align:center;
text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black;
}
.boxinfo {
color:white;
text-align:center;
text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black;
}
.footer {
color:white;
text-align:center;
text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black;
margin-top:83px;
}
.hrr {
text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black;
}
a:link, a:visited {
background-color: #f44336;
color: white;
padding: 14px 25px;
text-align: center;
text-decoration: none;
display: inline-block;
position: absolute;
margin-top: -72px;
}
a:hover, a:active {
background-color: red;
}
.speech-bubble {
position: absolute;
width: 277px;
height: 104px;
line-height: 104px;
color: #FFFFFF;
text-align: center;
padding: 3px;
background: #555555;
border-radius: 19px;
border: #ffffff solid 2px;
margin-left: 24%;
margin-top: 6%;
}
.speech-bubble:after {
content: '';
position: absolute;
border-style: solid;
border-width: 13px 16px 0;
border-color: #555555 transparent;
display: block;
width: 0;
z-index: 1;
bottom: -13px;
left: 214px;
}
.speech-bubble:before {
content: '';
position: absolute;
border-style: solid;
border-width: 14px 17px 0;
border-color: #ffffff transparent;
display: block;
width: 0;
z-index: 0;
bottom: -16px;
left: 213px;
}
#bubbletxt {
text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black;
}
.info {
background-color: #e7f3fe;
border-left: 6px solid #2196F3;
}
/* The Modal (background) */
.modal {
display: none; /* Hidden by default */
position: fixed; /* Stay in place */
z-index: 1; /* Sit on top */
padding-top: 100px; /* Location of the box */
left: 0;
top: 0;
width: 100%; /* Full width */
height: 100%; /* Full height */
overflow: auto; /* Enable scroll if needed */
background-color: rgb(0,0,0); /* Fallback color */
background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
}
/* Modal Content */
.modal-content {
position: relative;
background-color: #fefefe;
margin: auto;
padding: 0;
border: 1px solid #888;
width: 80%;
box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2),0 6px 20px 0 rgba(0,0,0,0.19);
-webkit-animation-name: animatetop;
-webkit-animation-duration: 0.4s;
animation-name: animatetop;
animation-duration: 0.4s
}
/* Add Animation */
@-webkit-keyframes animatetop {
from {top:-300px; opacity:0}
to {top:0; opacity:1}
}
@keyframes animatetop {
from {top:-300px; opacity:0}
to {top:0; opacity:1}
}
/* The Close Button */
.close {
color: white;
float: right;
font-size: 28px;
font-weight: bold;
}
.close:hover,
.close:focus {
color: #000;
text-decoration: none;
cursor: pointer;
}
.modal-header {
padding: 2px 16px;
background-color: #5cb85c;
color: white;
}
.modal-body {padding: 2px 16px;}
.modal-footer {
padding: 2px 16px;
background-color: #5cb85c;
color: white;
}
</style>
<!-- CSS-STUFF -->
<!-- INFOTEXT USW -->
<h1 style="text-align:center;color:white;">iFubbo ~ Bewerbungsformular</h1><a href="/index" title="Zurück zu iFubbo">Zurück</a>
<br>
<p class="bwinfo"><strong>Hey! Hier kannst du dich für einen im Formular vorgegebenen Rang im iFubbo bewerben!<br>
Die Bearbeitung deiner Bewerbung kann <ins>bis zu 48 Stunden</ins> dauern, also gedulde dich.<br>
Solltest du keine weitere Antwort diesbezüglich erhalten, so wurdest du nicht angenommen.</strong></p>
<br><br><hr class="hrr" style="width:55%;">
</head>
<body>
<!-- The Modal -->
<div id="myModal" class="modal">
<!-- Modal content -->
<div class="modal-content">
<div class="modal-header">
<span class="close">×</span>
<h2>Modal Header</h2>
</div>
<div class="modal-body">
<p>Some text in the Modal Body</p>
<p>Some other text...</p>
</div>
<div class="modal-footer">
<h3>Modal Footer</h3>
</div>
</div>
</div>
<script>
// Get the modal
var modal = document.getElementById('myModal');
// Get the button that opens the modal
var btn = document.getElementById("myBtn");
// Get the <span> element that closes the modal
var span = document.getElementsByClassName("close")[0];
// When the user clicks the button, open the modal
btn.onclick = function() {
modal.style.display = "block";
}
// When the user clicks on <span> (x), close the modal
span.onclick = function() {
modal.style.display = "none";
}
// When the user clicks anywhere outside of the modal, close it
window.onclick = function(event) {
if (event.target == modal) {
modal.style.display = "none";
}
}
</script>
<!-- INFOTEXT USW -->
<center>
<!-- BEWERBUNGSFORMULAR -->
<?php
// define variables and set to empty values
$name = $alter = $email = $comment = "";
if ($_SERVER["REQUEST_METHOD"] == "POST") {
$name = test_input($_POST["name"]);
$username = test_input($_POST["username"]);
$alter = test_input ($_POST["alter"]);
$email = test_input($_POST["email"]);
$comment = test_input($_POST["text"]);
}
function test_input($data) {
$data = trim($data);
$data = stripslashes($data);
$data = htmlspecialchars($data);
return $data;
}
?>
<img src="/twx3.png" style="position: absolute;margin-left: 17%;margin-top: 10%;"></img>
<img src="/annie3.png" style="position: absolute;margin-left: -22%;margin-top: 14%;"></img>
<p class="speech-bubble" id="bubbletxt"><strong>Wir warten auf Dich!</strong></p>
<h2>Bewerbungsinformationen:</h2>
<form method="post" action="<?php echo htmlspecialchars($_SERVER["PHP_SELF"]);?>">
<strong class="boxinfo">Dein Name:</strong><br> <input class="focus" placeholder="Dein Reallife-Name..." type="text" name="name">
<br><br>
<strong class="boxinfo">Dein Username:</strong><br> <input class="focus" placeholder="Dein Ingame-Name..." type="text" name="username">
<br><br>
<strong class="boxinfo">Dein Alter:</strong><br> <input class="focus" placeholder="Dein Alter..." type="text" name="alter">
<br><br>
<strong class="boxinfo">Deine Email-Adresse:</strong><br> <input class="focus" placeholder="Deine Email-Adresse..." type="text" name="email">
<br><br>
<select name="ranks" style="text-align:center;">
<!-- <option value="communitymanager">Communitymanager</option>
<option value="moderator">Moderator</option> -->
<option value="xler">Xler</option>
<option value="gamex">GameX</option>
<option value="polizist">Polizist</option>
<option value="dj">DJ</option>
</select>
<br><br>
<strong class="boxinfo">Warum sollten wir Dich einstellen?:</strong><br> <textarea class="focus" placeholder="Schreibe etwas über dich..." name="text" rows="5" cols="40"></textarea>
<br><br>
<button class="button" href="/index" id="myBttn" style="vertical-align:middle"><span title="Sende deine Bewerbung ab">Absenden </span></button>
<br><br>
<hr class="hrr" style="width:55%;">
</form>
<!-- BEWERBUNGSFORMULAR -->
</center>
<!-- FOOTER -->
<div class="footer">iFubbo © 2017 ~ Powered by iFubbo-Team</div>
<!-- FOOTER -->
</body>
</html>Ja das ist soweit richtig. Also die Animation funktioniert einwandfrei, nur halt die Popupfunktion nicht
nur der Button
Naja, schon. Ich konnte es nicht auf den Punkt bringen, Verzeihung.
Aber durch den Button bin ich mir halt nicht sicher, ob der Rest auch mitspielt, oder ob es gar an dem ganzem vorher liegt, das der Button nicht funktioniert
Gut, nochmal etwas knapper :
Ich möchte eine ''Modal-Box'' auftauchen lassen, sofern ich das Bewerbungsformular ausgefüllt und auf ''Absenden'' geklickt habe.
Diese sieht dann so aus : *klick*
Ich habe mir den dort angegebenen Code kopiert und in die .php-Datei eingefügt, welche halt das Formular ausgibt. Das wäre dann wie folgt in meiner Datei :
/* The Modal (background) */
.modal {
display: none; /* Hidden by default */
position: fixed; /* Stay in place */
z-index: 1; /* Sit on top */
padding-top: 100px; /* Location of the box */
left: 0;
top: 0;
width: 100%; /* Full width */
height: 100%; /* Full height */
overflow: auto; /* Enable scroll if needed */
background-color: rgb(0,0,0); /* Fallback color */
background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
}
/* Modal Content */
.modal-content {
position: relative;
background-color: #fefefe;
margin: auto;
padding: 0;
border: 1px solid #888;
width: 80%;
box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2),0 6px 20px 0 rgba(0,0,0,0.19);
-webkit-animation-name: animatetop;
-webkit-animation-duration: 0.4s;
animation-name: animatetop;
animation-duration: 0.4s
}
/* Add Animation */
@-webkit-keyframes animatetop {
from {top:-300px; opacity:0}
to {top:0; opacity:1}
}
@keyframes animatetop {
from {top:-300px; opacity:0}
to {top:0; opacity:1}
}
/* The Close Button */
.close {
color: white;
float: right;
font-size: 28px;
font-weight: bold;
}
.close:hover,
.close:focus {
color: #000;
text-decoration: none;
cursor: pointer;
}
.modal-header {
padding: 2px 16px;
background-color: #5cb85c;
color: white;
}
.modal-body {padding: 2px 16px;}
.modal-footer {
padding: 2px 16px;
background-color: #5cb85c;
color: white;
}<!-- The Modal -->
<div id="myModal" class="modal">
<!-- Modal content -->
<div class="modal-content">
<div class="modal-header">
<span class="close">×</span>
<h2>Modal Header</h2>
</div>
<div class="modal-body">
<p>Some text in the Modal Body</p>
<p>Some other text...</p>
</div>
<div class="modal-footer">
<h3>Modal Footer</h3>
</div>
</div>
</div>
<script>
// Get the modal
var modal = document.getElementById('myModal');
// Get the button that opens the modal
var btn = document.getElementById("myBtn");
// Get the <span> element that closes the modal
var span = document.getElementsByClassName("close")[0];
// When the user clicks the button, open the modal
btn.onclick = function() {
modal.style.display = "block";
}
// When the user clicks on <span> (x), close the modal
span.onclick = function() {
modal.style.display = "none";
}
// When the user clicks anywhere outside of the modal, close it
window.onclick = function(event) {
if (event.target == modal) {
modal.style.display = "none";
}
}
</script>mit dem dazugehörigen Auslöser, hier ein Button :
<button class="button" href="/index" id="myBttn" style="vertical-align:middle"><span title="Sende deine Bewerbung ab">Absenden </span></button>Das ganze soll nun also wie auf dem Bild zu sehen über dem Formular aufploppen, damit ich dieses weiter editieren kann. Wenn ich den Button jetzt aber klicke, passiert nichts. Liegt es vielleicht auch an den animierten Button welcher bereits ein Script enthält?
Ich weiß leider nicht wie ich es NOCH ausfühlicher schreiben soll, außer es eventuell direkt zu präsentieren
Hey allseits hilfreiche Community!
Ich probiere mich derzeit an ein Bewerbungsformular. Den Codingstuff besorge ich mir von einer ''Tutorialseite'', wo ich mir die verschiedenen Sprachen auch derzeit aneigne und ich muss sagen, das ich echt gut zurecht komme, auch wenn ich mir noch vieles kopiere (hatet mich nicht :c ). Dementsprechend sieht das Formular auch nicht wirklich qualitativ aus, was es aber auch nicht muss.
Ich schildere mein Vorhabe mal in einem Spoiler um diesen Thread so clean wie nur möglich zu halten :
Ich habe vor, ein Popup wie dieses :
erscheinen zu lassen als eine Art ''Absendebestätigung'', wenn ich auf den mit Javascript animierten Absendebutton des Formulars klicke :
Anschließend ist mein Vorhabe dann, mithilfe eines ''Schließen''-Buttons wie diesen :
eine Weiterleitung auf die Homepage zu machen (was kein weiteres Problem sein sollte, sofern oben beschriebenes Problem gelöst ist).
Jetzt zum Problem :
Wenn ich versuche mir einen Beispielcode zu kopieren und diesen in die richtigen Abschnitte einzufüge, die richtigen Buttons
und Verweise setze, passiert dennoch nichts was eigentlich passieren sollte. Hier mal der aktuelle, unbearbeitete Code :
<style>
body {
background:
radial-gradient(transparent, black),
url("/bgg2.png");
}
.focus {
width: 16%;
padding: 8px 8px;
box-sizing: border-box;
border: 3px solid #ccc;
}
.focus:focus {
background-color:#555555;
color: white;
outline: none;
}
.button {
display: inline-block;
border-radius: 4px;
background-color: #555;
border: none;
color: #FFFFFF;
text-align: center;
font-size: 15px;
padding: 14px;
width: 120px;
transition: all 0.5s;
cursor: pointer;
margin: 2px;
}
.button span {
cursor: pointer;
display: inline-block;
position: relative;
transition: 0.5s;
}
.button span:after {
content: '\00bb';
position: absolute;
opacity: 0;
top: 0;
right: -20px;
transition: 0.5s;
}
.button:hover span {
padding-right: 25px;
}
.button:hover span:after {
opacity: 1;
right: 0;
}
h1 {
color: white;
text-shadow: -1px 0 black, 0 2px black, 2px 0 black, 0 -1px black;
}
h2 {
color: white;
text-shadow: -1px 0 black, 0 2px black, 2px 0 black, 0 -1px black;
}
.bwinfo {
color:white;
text-align:center;
text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black;
}
.boxinfo {
color:white;
text-align:center;
text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black;
}
.footer {
color:white;
text-align:center;
text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black;
margin-top:83px;
}
.hrr {
text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black;
}
a:link, a:visited {
background-color: #f44336;
color: white;
padding: 14px 25px;
text-align: center;
text-decoration: none;
display: inline-block;
position: absolute;
margin-top: -72px;
}
a:hover, a:active {
background-color: red;
}
.speech-bubble {
position: absolute;
width: 277px;
height: 104px;
line-height: 104px;
color: #FFFFFF;
text-align: center;
padding: 3px;
background: #555555;
border-radius: 19px;
border: #ffffff solid 2px;
margin-left: 24%;
margin-top: 6%;
}
.speech-bubble:after {
content: '';
position: absolute;
border-style: solid;
border-width: 13px 16px 0;
border-color: #555555 transparent;
display: block;
width: 0;
z-index: 1;
bottom: -13px;
left: 214px;
}
.speech-bubble:before {
content: '';
position: absolute;
border-style: solid;
border-width: 14px 17px 0;
border-color: #ffffff transparent;
display: block;
width: 0;
z-index: 0;
bottom: -16px;
left: 213px;
}
#bubbletxt {
text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black;
}
.info {
background-color: #e7f3fe;
border-left: 6px solid #2196F3;
}
</style><body>
<!-- INFOTEXT USW -->
<center>
<!-- BEWERBUNGSFORMULAR -->
<?php
// define variables and set to empty values
$name = $alter = $email = $comment = "";
if ($_SERVER["REQUEST_METHOD"] == "POST") {
$name = test_input($_POST["name"]);
$username = test_input($_POST["username"]);
$alter = test_input ($_POST["alter"]);
$email = test_input($_POST["email"]);
$comment = test_input($_POST["text"]);
}
function test_input($data) {
$data = trim($data);
$data = stripslashes($data);
$data = htmlspecialchars($data);
return $data;
}
?>
<img src="/twx3.png" style="position: absolute;margin-left: 17%;margin-top: 10%;"></img>
<img src="/annie3.png" style="position: absolute;margin-left: -22%;margin-top: 14%;"></img>
<p class="speech-bubble" id="bubbletxt"><strong>Wir warten auf Dich!</strong></p>
<h2>Bewerbungsinformationen:</h2>
<form method="post" action="<?php echo htmlspecialchars($_SERVER["PHP_SELF"]);?>">
<strong class="boxinfo">Dein Name:</strong><br> <input class="focus" placeholder="Dein Reallife-Name..." type="text" name="name">
<br><br>
<strong class="boxinfo">Dein Username:</strong><br> <input class="focus" placeholder="Dein Ingame-Name..." type="text" name="username">
<br><br>
<strong class="boxinfo">Dein Alter:</strong><br> <input class="focus" placeholder="Dein Alter..." type="text" name="alter">
<br><br>
<strong class="boxinfo">Deine Email-Adresse:</strong><br> <input class="focus" placeholder="Deine Email-Adresse..." type="text" name="email">
<br><br>
<select name="ranks" style="text-align:center;">
<!-- <option value="communitymanager">Communitymanager</option>
<option value="moderator">Moderator</option> -->
<option value="xler">Xler</option>
<option value="gamex">GameX</option>
<option value="polizist">Polizist</option>
<option value="dj">DJ</option>
</select>
<br><br>
<strong class="boxinfo">Warum sollten wir Dich einstellen?:</strong><br> <textarea class="focus" placeholder="Schreibe etwas über dich..." name="text" rows="5" cols="40"></textarea>
<br><br>
<button class="button" href="/index" style="vertical-align:middle"><span title="Sende deine Bewerbung ab">Absenden </span></button>
<br><br>
<hr class="hrr" style="width:55%;">
</form>
<!-- BEWERBUNGSFORMULAR -->
</center>
<!-- FOOTER -->
<div class="footer">iFubbo © 2017 ~ Powered by iFubbo-Team</div>
<!-- FOOTER -->
</body>Und hier mal der Code, wie es ist wenn es editiert ist, wie es sein soll :
<style>
body {
background:
radial-gradient(transparent, black),
url("/bgg2.png");
}
.focus {
width: 16%;
padding: 8px 8px;
box-sizing: border-box;
border: 3px solid #ccc;
}
.focus:focus {
background-color:#555555;
color: white;
outline: none;
}
.button {
display: inline-block;
border-radius: 4px;
background-color: #555;
border: none;
color: #FFFFFF;
text-align: center;
font-size: 15px;
padding: 14px;
width: 120px;
transition: all 0.5s;
cursor: pointer;
margin: 2px;
}
.button span {
cursor: pointer;
display: inline-block;
position: relative;
transition: 0.5s;
}
.button span:after {
content: '\00bb';
position: absolute;
opacity: 0;
top: 0;
right: -20px;
transition: 0.5s;
}
.button:hover span {
padding-right: 25px;
}
.button:hover span:after {
opacity: 1;
right: 0;
}
h1 {
color: white;
text-shadow: -1px 0 black, 0 2px black, 2px 0 black, 0 -1px black;
}
h2 {
color: white;
text-shadow: -1px 0 black, 0 2px black, 2px 0 black, 0 -1px black;
}
.bwinfo {
color:white;
text-align:center;
text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black;
}
.boxinfo {
color:white;
text-align:center;
text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black;
}
.footer {
color:white;
text-align:center;
text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black;
margin-top:83px;
}
.hrr {
text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black;
}
a:link, a:visited {
background-color: #f44336;
color: white;
padding: 14px 25px;
text-align: center;
text-decoration: none;
display: inline-block;
position: absolute;
margin-top: -72px;
}
a:hover, a:active {
background-color: red;
}
.speech-bubble {
position: absolute;
width: 277px;
height: 104px;
line-height: 104px;
color: #FFFFFF;
text-align: center;
padding: 3px;
background: #555555;
border-radius: 19px;
border: #ffffff solid 2px;
margin-left: 24%;
margin-top: 6%;
}
.speech-bubble:after {
content: '';
position: absolute;
border-style: solid;
border-width: 13px 16px 0;
border-color: #555555 transparent;
display: block;
width: 0;
z-index: 1;
bottom: -13px;
left: 214px;
}
.speech-bubble:before {
content: '';
position: absolute;
border-style: solid;
border-width: 14px 17px 0;
border-color: #ffffff transparent;
display: block;
width: 0;
z-index: 0;
bottom: -16px;
left: 213px;
}
#bubbletxt {
text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black;
}
.info {
background-color: #e7f3fe;
border-left: 6px solid #2196F3;
}
/* The Modal (background) */
.modal {
display: none; /* Hidden by default */
position: fixed; /* Stay in place */
z-index: 1; /* Sit on top */
padding-top: 100px; /* Location of the box */
left: 0;
top: 0;
width: 100%; /* Full width */
height: 100%; /* Full height */
overflow: auto; /* Enable scroll if needed */
background-color: rgb(0,0,0); /* Fallback color */
background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
}
/* Modal Content */
.modal-content {
position: relative;
background-color: #fefefe;
margin: auto;
padding: 0;
border: 1px solid #888;
width: 80%;
box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2),0 6px 20px 0 rgba(0,0,0,0.19);
-webkit-animation-name: animatetop;
-webkit-animation-duration: 0.4s;
animation-name: animatetop;
animation-duration: 0.4s
}
/* Add Animation */
@-webkit-keyframes animatetop {
from {top:-300px; opacity:0}
to {top:0; opacity:1}
}
@keyframes animatetop {
from {top:-300px; opacity:0}
to {top:0; opacity:1}
}
/* The Close Button */
.close {
color: white;
float: right;
font-size: 28px;
font-weight: bold;
}
.close:hover,
.close:focus {
color: #000;
text-decoration: none;
cursor: pointer;
}
.modal-header {
padding: 2px 16px;
background-color: #5cb85c;
color: white;
}
.modal-body {padding: 2px 16px;}
.modal-footer {
padding: 2px 16px;
background-color: #5cb85c;
color: white;
}
</style><body>
<!-- The Modal -->
<div id="myModal" class="modal">
<!-- Modal content -->
<div class="modal-content">
<div class="modal-header">
<span class="close">×</span>
<h2>Modal Header</h2>
</div>
<div class="modal-body">
<p>Some text in the Modal Body</p>
<p>Some other text...</p>
</div>
<div class="modal-footer">
<h3>Modal Footer</h3>
</div>
</div>
</div>
<script>
// Get the modal
var modal = document.getElementById('myModal');
// Get the button that opens the modal
var btn = document.getElementById("myBtn");
// Get the <span> element that closes the modal
var span = document.getElementsByClassName("close")[0];
// When the user clicks the button, open the modal
btn.onclick = function() {
modal.style.display = "block";
}
// When the user clicks on <span> (x), close the modal
span.onclick = function() {
modal.style.display = "none";
}
// When the user clicks anywhere outside of the modal, close it
window.onclick = function(event) {
if (event.target == modal) {
modal.style.display = "none";
}
}
</script>
<!-- INFOTEXT USW -->
<center>
<!-- BEWERBUNGSFORMULAR -->
<?php
// define variables and set to empty values
$name = $alter = $email = $comment = "";
if ($_SERVER["REQUEST_METHOD"] == "POST") {
$name = test_input($_POST["name"]);
$username = test_input($_POST["username"]);
$alter = test_input ($_POST["alter"]);
$email = test_input($_POST["email"]);
$comment = test_input($_POST["text"]);
}
function test_input($data) {
$data = trim($data);
$data = stripslashes($data);
$data = htmlspecialchars($data);
return $data;
}
?>
<img src="/twx3.png" style="position: absolute;margin-left: 17%;margin-top: 10%;"></img>
<img src="/annie3.png" style="position: absolute;margin-left: -22%;margin-top: 14%;"></img>
<p class="speech-bubble" id="bubbletxt"><strong>Wir warten auf Dich!</strong></p>
<h2>Bewerbungsinformationen:</h2>
<form method="post" action="<?php echo htmlspecialchars($_SERVER["PHP_SELF"]);?>">
<strong class="boxinfo">Dein Name:</strong><br> <input class="focus" placeholder="Dein Reallife-Name..." type="text" name="name">
<br><br>
<strong class="boxinfo">Dein Username:</strong><br> <input class="focus" placeholder="Dein Ingame-Name..." type="text" name="username">
<br><br>
<strong class="boxinfo">Dein Alter:</strong><br> <input class="focus" placeholder="Dein Alter..." type="text" name="alter">
<br><br>
<strong class="boxinfo">Deine Email-Adresse:</strong><br> <input class="focus" placeholder="Deine Email-Adresse..." type="text" name="email">
<br><br>
<select name="ranks" style="text-align:center;">
<!-- <option value="communitymanager">Communitymanager</option>
<option value="moderator">Moderator</option> -->
<option value="xler">Xler</option>
<option value="gamex">GameX</option>
<option value="polizist">Polizist</option>
<option value="dj">DJ</option>
</select>
<br><br>
<strong class="boxinfo">Warum sollten wir Dich einstellen?:</strong><br> <textarea class="focus" placeholder="Schreibe etwas über dich..." name="text" rows="5" cols="40"></textarea>
<br><br>
<button class="button" href="/index" id="myBttn" style="vertical-align:middle"><span title="Sende deine Bewerbung ab">Absenden </span></button>
<br><br>
<hr class="hrr" style="width:55%;">
</form>
<!-- BEWERBUNGSFORMULAR -->
</center>
<!-- FOOTER -->
<div class="footer">iFubbo © 2017 ~ Powered by iFubbo-Team</div>
<!-- FOOTER -->
</body>
</html>Es bleibt alles so wie es schon ohne Bearbeitung war. Der Absenden-Butten zeigt keine Reaktion, was mich bedrückt. Was mache ich falsch, was kann ich besser machen (abgesehen vom eigenen schreiben statt c&p)?
Liebe Grüße!
Ich packe meinen Koffer und nehme mit: einen Kühlschrank, Eichelkäse, Kondome, Smarties, Sex Puppe, Kartoffeln, Gaming Monitor, Meine Mutter, Mein PayPal Account Passwort, Duschgel, WD 40, mein Feuerzeug, Mein Mac, Messer, Gabel, Löffel, Lebkuchen Sterne, Wasser, aromatisiertes Gurkenwasser, Handy, Konto Karte / Kredit Karte, Ein Blatt Papier, Oreos, Cola, Fanta, mein Kindergeld, 9mm Waffe, Kopfhörer, eine McDonalds Filiale, zwei McDonalds Filialen, Milka Schokolade, drei McDonalds Filialen, einen Stift, Salbei Bonbons, Nutella B-ready, Almighurt, Unterhosen, ein Auto, einen Helikopter, das Pentagon aus Washington, meinen Schwimmel, Captain Morgan, Jim Beam, eine Schere, Taschenlampe, Traubenzucker, vier McDonalds Filialen, fünf McDonalds Filialen, sechs McDonalds Filialen, Bildschirm, Like Button, Tastatur, Maus, Bier, sieben McDonalds Filialen, Geld, 8 McDonalds Filialen, Weed, neun McDonalds Filialen, Kokain, eine Kentucky Fried Chicken Filiale und LLVM-Toolchain 
, dein Kindergeld, einen Donaudampfschiffahrtsgesellschaftskapitän, 20 Cent, 50 Cent,
Ich packe meinen Koffer und nehme mit: einen Kühlschrank, Eichelkäse, Kondome, Smarties, Sex Puppe, Kartoffeln, Gaming Monitor, Meine Mutter, Mein PayPal Account Passwort, Duschgel, WD 40, mein Feuerzeug, Mein Mac, Messer, Gabel, Löffel, Lebkuchen Sterne, Wasser, aromatisiertes Gurkenwasser, Handy, Konto Karte / Kredit Karte, Ein Blatt Papier, Oreos, Cola, Fanta, mein Kindergeld, 9mm Waffe, Kopfhörer, eine McDonalds Filiale, zwei McDonalds Filialen, Milka Schokolade, drei McDonalds Filialen, einen Stift, Salbei Bonbons, Nutella B-ready, Almighurt, Unterhosen, ein Auto, einen Helikopter, das Pentagon aus Washington, meinen Schwimmel, Captain Morgan, Jim Beam, eine Schere, Taschenlampe, Traubenzucker, vier McDonalds Filialen, fünf McDonalds Filialen, sechs McDonalds Filialen, Bildschirm, Like Button, Tastatur, Maus, Bier, sieben McDonalds Filialen, Geld, 8 McDonalds Filialen, Weed, neun McDonalds Filialen, Kokain, eine Kentucky Fried Chicken Filiale,
Alles ist Super nur die User da drin sind gelöscht worden darum ist das so.
Sobald 5 user mehr Lobe haben als 245 ist das wieder normal
Heißt im Endeffekt für dich ( JustDoIt.), dass du irgendwo in der Datenbank (vermutlich) eine Tabelle findest wo die Lobe eingetragen sind. Wenn du diese ''Logs'' dann löschst, sollte alles auch wieder auf 0 sein.
Ja, sind ganz nett.
Der User unter mir liebt den Geruch von Benzin
keine verwertbaren Informationen
Enthält sehrwohl noch verwertbare Informationen, ein Grund weshalb ich überhaupt hier bin.
Nimm lieber nen Ubuntu Server und klatsch https://github.com/AzuraCast/AzuraCast drauf.
Hey, danke für deinen Nachtrag! Schaue mir das direkt mal an =)
