Hallo Leute, folgender Code gibt alle HTML Elemente untereinander aus. Das geht soweit auch in Ordnung, allerdings hätte ich gerne einen kleinen Abstand nach unten zwischen dem Counter, den Bildern und dem Submitbutton, ohne ein <br> setzen zu müssen. Wie erreicht man das?
HTML:
<script>
// Set the number of snowflakes (more than 30 - 40 not recommended)
var snowmax = 35
// Set the colors for the snow.
var snowcolor = new Array("#FE2EC8", "#2E2EFE", "#2EFEF7", "#40FF00", "#FFFF00")
// Set the fonts, that create the snowflakes.
var snowtype = new Array("Arial Black", "Arial Narrow", "Times", "Comic Sans MS")
// Set the letter that creates your snowflake
var snowletter = "*";
// Set the speed of sinking (recommended values range from 0.3 to 2)
var sinkspeed = 0.6;
// Set the maximal-size of snowflaxes
var snowmaxsize = 50;
// Set the minimal-size of snowflaxes
var snowminsize = 15;
// Set the snowing-zone
// Set 1 for all-over-snowing, set 2 for left-side-snowing
// Set 3 for center-snowing, set 4 for right-side-snowing
var snowingzone = 1;
///////////////////////////////////////////////////////////////////////////
// CONFIGURATION ENDS HERE
///////////////////////////////////////////////////////////////////////////
var snow = new Array();
var marginbottom;
var marginright;
var timer;
var i_snow = 0;
var x_mv = new Array();
var crds = new Array();
var lftrght = new Array();
var browserinfos = navigator.userAgent
var ie5 = document.all && document.getElementById && !browserinfos.match(/Opera/);
var ns6 = document.getElementById && !document.all;
var opera = browserinfos.match(/Opera/);
var browserok = ie5 || ns6 || opera;
function randommaker(range) {
rand = Math.floor(range * Math.random());
return rand;
}
function initsnow() {
if (ie5 || opera) {
marginbottom = document.body.clientHeight;
marginright = document.body.clientWidth;
} else if (ns6) {
marginbottom = window.innerHeight;
marginright = window.innerWidth;
}
var snowsizerange = snowmaxsize - snowminsize;
for (i = 0; i <= snowmax; i++) {
crds[i] = 0;
lftrght[i] = Math.random() * 15;
x_mv[i] = 0.03 + Math.random() / 10;
snow[i] = document.getElementById("s" + i)
snow[i].style.fontFamily = snowtype[randommaker(snowtype.length)];
snow[i].size = randommaker(snowsizerange) + snowminsize;
snow[i].style.fontSize = snow[i].size;
snow[i].style.color = snowcolor[randommaker(snowcolor.length)];
snow[i].sink = sinkspeed * snow[i].size / 5;
if (snowingzone == 1)
snow[i].posx = randommaker(marginright - snow[i].size)
if (snowingzone == 2)
snow[i].posx = randommaker(marginright / 2 - snow[i].size)
if (snowingzone == 3)
snow[i].posx = randommaker(marginright / 2 - snow[i].size) + marginright / 4;
if (snowingzone == 4)
snow[i].posx = randommaker(marginright / 2 - snow[i].size) + marginright / 2;
snow[i].posy = randommaker(2 * marginbottom - marginbottom - 2 * snow[i].size);
snow[i].style.left = snow[i].posx;
snow[i].style.top = snow[i].posy;
}
movesnow();
}
function movesnow() {
for (i = 0; i <= snowmax; i++) {
crds[i] += x_mv[i];
snow[i].posy += snow[i].sink
snow[i].style.left = snow[i].posx + lftrght[i] * Math.sin(crds[i]);
snow[i].style.top = snow[i].posy;
if (snow[i].posy >= marginbottom - 2 * snow[i].size || parseInt(snow[i].style.left) > (marginright - 3 * lftrght[i])) {
if (snowingzone == 1)
snow[i].posx = randommaker(marginright - snow[i].size);
if (snowingzone == 2)
snow[i].posx = randommaker(marginright / 2 - snow[i].size);
if (snowingzone == 3)
snow[i].posx = randommaker(marginright / 2 - snow[i].size) + marginright / 4;
if (snowingzone == 4)
snow[i].posx = randommaker(marginright / 2 - snow[i].size) + marginright / 2;
snow[i].posy = 0
}
}
var timer = setTimeout("movesnow()", 50);
}
for (i = 0; i <= snowmax; i++) {
document.write("<span id='s" + i + "' style='position:absolute;top:-" + snowmaxsize + "'>" + snowletter + "</span>");
}
window.onload = initsnow(); //lädt die JS-Dateien während des Browseraufrufes
</script>
<!Doctype html> <!-- Definition des doctype-Modus -->
<html> <!-- Definition des Stammverzeichnises -->
<head> <!-- Definition des Kopfbereiches -->
<meta charset="utf-8"><!-- charset[utf-8:] definiert den deutschen Zeichensatz -->
<meta name="msvalidate.01" content="8B12875037645A4090EE64488042FDA9" /><!--validiert die Website für Bing und Yahoo-->
<meta name="date" content="2017-02-3T08:49:37+02:00"> <!-- Angaben, wann die Seite publiziert wurde-->
<meta name="keywords" content="Praktikum, Arbeitsplatz, Suche"> <!-- versorgt die Spider der Suchmaschinen mit Informationen zwecks Suchbegriffen -->
<meta name="description" content="Die komfortable Praktikums -und Arbeitsplatzsuche im Web"> <!-- Beschreibung, die in den Suchmaschinen erscheinen soll. -->
<meta name="robots" content="index,follow"> <!-- Links sollen mitindiziert werden //NOINDEX:Seite soll nicht aufgenommen werden//NOFOLLOW Links werden nicht verfolgt-->
<meta name="audience" content="alle"> <!-- definiert die Zielgruppe der Website -->
<meta name="page-topic" content="Dienstleistung"> <!-- Zuordnungsdefinition für die Suchmaschine -->
<meta name="revisit-after" CONTENT="7 days"> <!-- definiert den erneuten Besuch des Spiders//hier:nach sieben Tagen -->
<title lang="de">Startseite</title> <!-- weist dem HTML-Dokument in der Registerkarte einen Namen zu -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js" type="text/javascript" charset="utf-8"></script>
<script src="https://ajax.aspnetcdn.com/ajax/jquery.validate/1.17.0/jquery.validate.js" type="text/javascript" charset="utf-8"></script>
</head>
<body> <!-- Definition des Bodybereiches -->
<img src="counter.php" title="Pic1" alt="Picture1">
<form name="formular" action = "info.php" method = "post">
<div class="row">
<div class="col-md-12">
<img alt="moi_1" src="img/moi_coloured.jpg" height="120" width="120" >
<img alt="moi_2" src="img/moi_coloured_large.jpg" height="120" width="120">
<img alt="moi_3" src="img/moi_large_sw.jpg" height="120" width="120">
<img alt="moi_4" src="img/moi_sw.jpg" height="120" width="120">
<img alt="moi_5" src="img/moi_sw_at_home.jpg"height="120" width="120" >
</div>
<div class="col-md-12">
<button class = "btn btn-info" type = "submit" name = "login">Submit</button>
</div>
</div>
</form>
</body>
</html>
.
