<style>
body {
background-color: gray;
}
.Frame {
margin: 20px;
padding: 15px;
height: calc(100vh - 40px);
background-color: #fff;
border-radius: 20px;
}
</style>
</head>
<body>
<div class="Frame">
<p>Hallo,</p>
<p>was geht ab? Ist ein Rahmen da?</p>
<p>Peace :)</p>
</div>
Beiträge von The-Error
-
-
-
etwas eleganter:
.navbar a {
border-bottom: 2px solid transparent;
transition: all 500ms;
padding: 10px 16px 8px;
}
.navbar a:hover {
border-bottom: 2px solid #ff0000;
} -
richtig ist es lag an der jquery-3.3.1.slim.min.js, mit der jquery-3.3.1.min.js funktioniert es tadellos.
-
Ja nur leider tut es das in diesen Fall nicht
-
Wollte die Navigation mit "($(document).scrollTop() > 180)" wieder einblenden, das funktioniert auch doch ohne den Slide-Effeft.
Was mach ich falsch?
CSS
Alles anzeigen<style> .nav-slide { background-color: blue !important; position: fixed; top: 0; right: 0; left: 0; z-index: 1010;} </style> <body> <nav class="navbar navbar-expand-md navbar-dark bg-dark"> <div class="container"> <a class="navbar-brand" href="#">Navbar</a> <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarsExampleDefault" aria-controls="navbarsExampleDefault" aria-expanded="false" aria-label="Toggle navigation"> <span class="navbar-toggler-icon"></span> </button> <div class="collapse navbar-collapse" id="navbarsExampleDefault"> <ul class="navbar-nav mr-auto"> <li class="nav-item active"> <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a> </li> <li class="nav-item"> <a class="nav-link" href="#">Link</a> </li> <li class="nav-item"> <a class="nav-link disabled" href="#">Disabled</a> </li> <li class="nav-item dropdown"> <a class="nav-link dropdown-toggle" href="#" id="dropdown01" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Dropdown</a> <div class="dropdown-menu" aria-labelledby="dropdown01"> <a class="dropdown-item" href="#">Action</a> <a class="dropdown-item" href="#">Another action</a> <a class="dropdown-item" href="#">Something else here</a> </div> </li> </ul> </div> </div> </nav> <main role="main" class="container"> ... </main><!-- /.container --> <script> $(document).ready(function() { $(window).scroll(function() { if ($(document).scrollTop() > 180) { $("nav").hide(); $("nav").addClass('nav-slide'); $("nav").show(2000); } else { $('nav').removeClass('nav-slide'); } }); }); </script>
-
-
-
Damit gehts:
Ctrl + #
-
bei less muss ich passen aber mit sass geht das auch sehr gut.
Änderungen müssen in der "_variables.scss" gemacht werden
Breakpoints kann man über so ganannte mixins definieren:
Code
Alles anzeigen@include media-brekpoint-up(xs) { ... } @include media-brekpoint-up(sm) { ... } @include media-brekpoint-up(md) { ... } @include media-brekpoint-up(lg) { ... } @include media-brekpoint-up(xl) { ... } // Beispiel: @include media-brekpoint-up(xs) { h1 { width: 20px; } }
In dem Beispiel wird ab Brekpoint xs ( 576px ) die H1 Überschrift mit 20px dargestellt.
Danach muss das noch mit z. B. Koala kompeliert werden um die Bootstrap.css zu erzeugen.
-
-
wenn du es in Pixel angibst tritt das nicht auf!
-
-
Wenn du Bootstrap benutzt, hab ich mal vor vor einiger Zeit ein mehrsprachiges Menu erstellt.
Mehrsprachiges Menü -
-
verseh die Frage nicht !?
-
Warum sollte das nicht gehen?
HTML
Alles anzeigen<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>Bootstrap Lightbox</title> <meta name="viewport" content="width=device-width, initial-scale=1"> <!-- Das neueste kompilierte und minimierte CSS --> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css"> <style type="text/css"> .panel { border-radius: 0; border-color: #000; border-width: 3px; } .panel-heading { background-color: #337ab7; border-radius: 0; } .navi-panael { background-color: #2DC300 } .nav-pills>li>a { border-radius: 0; color: #000; } .nav-pills>li>a:hover { color: #000; } .nav>li>a:focus, .nav>li>a:hover, { text-decoration: none; background-color: #8A8A8A; } .nav-pills>li.active>a, .nav-pills>li.active>a:focus, .nav-pills>li.active>a:hover { color: #fff; background-color: #8A8A8A; } .tab-content { background-color: #FFFBFB; padding: 15px; } </style> <script src="http://code.jquery.com/jquery-1.11.1.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script> </head> <body> <div class="container"> <div class="panel "> <!-- Standard-Panel-Inhalt --> <div class="panel-heading "> <h2>Panel-Überschrift</h2> </div> <div class="navi-panael"> <ul class="nav nav-pills "> <li class="active"> <a href="#start" data-toggle="tab">Start</a> </li> <li><a href="#profil" data-toggle="tab">Profil</a> </li> <li><a href="#kontakt" data-toggle="tab">Kontakt</a> </li> <li><a href="#info" data-toggle="tab">Info</a> </li> </ul> </div> <div class="tab-content clearfix"> <div class="tab-pane active" id="start"> <h3>Start</h3> <p>Auch gibt es niemanden, der den Schmerz an sich liebt, sucht oder wünscht, nur, weil er Schmerz ist, es sei denn, es kommt zu zufälligen Umständen, in denen Mühen und Schmerz ihm große Freude bereiten können.</p> <p>Um ein triviales Beispiel zu nehmen, wer von uns unterzieht sich je anstrengender körperlicher Betätigung, außer um Vorteile daraus zu ziehen? Aber wer hat irgend ein Recht, einen Menschen zu tadeln, der die Entscheidung trifft, eine Freude zu genießen, die keine unangenehmen Folgen hat, oder einen, der Schmerz vermeidet, welcher keine daraus resultierende Freude nach sich zieht? Auch gibt es niemanden, der den Schmerz</p> </div> <div class="tab-pane" id="profil"> <h3>Profil</h3> <p>Weit hinten, hinter den Wortbergen, fern der Länder Vokalien und Konsonantien leben die Blindtexte. Abgeschieden wohnen sie in Buchstabhausen an der Küste des Semantik, eines großen Sprachozeans.</p> <p>Ein kleines Bächlein namens Duden fließt durch ihren Ort und versorgt sie mit den nötigen Regelialien. Es ist ein paradiesmatisches Land, in dem einem gebratene Satzteile in den Mund fliegen.</p> <p>Nicht einmal von der allmächtigen Interpunktion werden die Blindtexte beherrscht – ein geradezu unorthographisches Leben. Eines Tages aber beschloß eine kleine Zeile Blindtext, ihr Name war Lorem Ipsum, hinaus zu gehen in die weite Grammatik. Der große Oxmox riet ihr davon ab, da</p> </div> <div class="tab-pane" id="kontakt"> <h3>Kontakt</h3> <p>Weit hinten, hinter den Wortbergen, fern der Länder Vokalien und Konsonantien leben die Blindtexte. Abgeschieden wohnen sie in Buchstabhausen an der Küste des Semantik, eines großen Sprachozeans.</p> <p>Ein kleines Bächlein namens Duden fließt durch ihren Ort und versorgt sie mit den nötigen Regelialien. Es ist ein paradiesmatisches Land, in dem einem gebratene Satzteile in den Mund fliegen.</p> </div> <div class="tab-pane" id="info"> <h3>Info</h3> <p>Jemand musste Josef K. verleumdet haben, denn ohne dass er etwas Böses getan hätte, wurde er eines Morgens verhaftet. »Wie ein Hund!</p> <p>« sagte er, es war, als sollte die Scham ihn überleben. Als Gregor Samsa eines Morgens aus unruhigen Träumen erwachte, fand er sich in seinem Bett zu einem ungeheueren Ungeziefer verwandelt.</p> </div> </div> </div> </div> </body> </html>
-
Was genau soll den in der Lightbox dargestellt werden, ein Bild, eine andere Website oder Text mit bild?
Benutzt du ein Framework wie Wordpress, Joomla ader Bootstrap?Ein Link zu deiner Seite wäre vieleicht auch hilfreich
-
-
Wenn du jetzt neu anfängst empfehle ich dir ein Framework zu verwenden am besten Bootstrap da kommst du am schnellsten zum Erfolg.
Sicher solltest du deine Kenntnisse in HTML und CSS vertiefen. Aber um erst mal zu beginnen solltest du http://holdirbootstrap.de/ durcharbeiten.