Abstand mit Bootstrap


Status
Dieses Thema wurde gelöst! Zur Lösung gehen…

tklustig

Erfahrenes Mitglied
#1
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>
 

tklustig

Erfahrenes Mitglied
#3
Danke für den Tip. Nutze eigentlich nur noch JQuery, und da isses egal, wo man was einbindet. Habe den JS Code ausgelagert. Der Bootstraplink löst mein Problem. Danke für!
 
#4
@basti1012 Also auch Bootstrap nutzt Margin, Padding etc. für Abstände.

@tklustig auch mit Jquery ist es nicht egal wo man was einbindet. JQuery ist Javascript da gelten die gleichen Regeln. Und Außerhalb von <html> hat nur der Doctype was zu suchen!
Das hat aber auch nichts mit javascript sondern mit HTML zu tun. Viele Fehler werden inzwischen von den Browsern selbst gefixt und mal davon abgesehen das Du ja kein JQuery im <script> außerhalb von <html> verwendet hast ;).

Grüße
 
Status
Dieses Thema wurde gelöst! Zur Lösung gehen…