Beiträge von The-Error

The-Error · 27. März 2019

The-Error · 27. März 2019

Code

<style>    
.Frame {
    height: 100vh;
    background-color: gray;         
    border-radius: 20px;        
}
</style>

<div class="Frame"></div>

The-Error · 19. März 2019

etwas eleganter:

.navbar a {
border-bottom: 2px solid transparent;
transition: all 500ms;
padding: 10px 16px 8px;
}
.navbar a:hover {
border-bottom: 2px solid #ff0000;
}

The-Error · 17. Februar 2019

richtig ist es lag an der jquery-3.3.1.slim.min.js, mit der jquery-3.3.1.min.js funktioniert es tadellos.

The-Error · 17. Februar 2019

Ja nur leider tut es das in diesen Fall nicht

The-Error · 16. Februar 2019

Wollte die Navigation mit "($(document).scrollTop() > 180)" wieder einblenden, das funktioniert auch doch ohne den Slide-Effeft.

Was mach ich falsch?

CSS

<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>

Alles anzeigen

The-Error · 30. Januar 2019

Code

.winOrdnerListenansichtBody {    
    position: relative;    
    display: inline-block;    
    vertical-align: top;    
    background-color: #fff;    
    border: 1px solid #8F8F8F;    
    width: 100%;    
    height: calc(100% - 33px);    
    margin-top: 0px;
}

und für das gesamte fenster

Code

.winBodyContainer {
    position: relative;
    width: 100%;
    height: calc(100% - 50px);
    white-space: nowrap;
}

The-Error · 26. Oktober 2017

diplay: block wäre hier eine Lösung

Code

.button {
  background-color: #555;
  padding-left: 40px;
  padding-right: 50px;
  padding-bottom: 22px;
  padding-top: 22px;
  border: 0px solid green; /* border */
  border-color: #cecece;
  display:block;
}

The-Error · 18. August 2017

Damit gehts:

Ctrl + #

The-Error · 15. August 2017

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

@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;
    }
}

Alles anzeigen

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.

The-Error · 11. August 2017

So gehts:

Code

<td style="text-align:center"><img class="groesse_mobile" src="img/bilder/fuehrungen.png" alt="Treppe"></td>

besser wäre Flexbox zu nutzen

The-Error · 23. Juli 2017

wenn du es in Pixel angibst tritt das nicht auf!

The-Error · 23. Juli 2017

So sollte das gehen:

Siehe hier!

The-Error · 18. Juli 2017

Wenn du Bootstrap benutzt, hab ich mal vor vor einiger Zeit ein mehrsprachiges Menu erstellt.

Mehrsprachiges Menü

The-Error · 7. Juli 2017

das kannst du im Styles

Code

.nav-pills>li>a {
            border-radius: 0;
            color: #000;
            padding: 5px 15px;
            font-size:15px;
        }

The-Error · 6. Juli 2017

verseh die Frage nicht !?

The-Error · 6. Juli 2017

Warum sollte das nicht gehen?

Panel mit Navi!

HTML

<!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>

Alles anzeigen

The-Error · 26. Juni 2017

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

The-Error · 21. Juni 2017

Das wurde mit Featherlight.js umgesetzt.

Link featherlight

The-Error · 18. April 2017

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.

Beiträge von The-Error

Background an Framgröße anpasse ?!

Background an Framgröße anpasse ?!

roter balken unter den menüpunkten

Warum fehlt bei $("nav").show(2000) der Slide-Effekt?

Warum fehlt bei $("nav").show(2000) der Slide-Effekt?

Warum fehlt bei $("nav").show(2000) der Slide-Effekt?

div höhe anpassen...

Button auf einheitliche Größe bringen

Brackets Shortcut - Zeile auskommentieren - ist nicht vorhanden

Bootstrap/Less - Schriftgrößen an Viewports anpassen

Tabelle horizontal zentrieren

Flexbox Problem - Padding submit button

Formular mittig und zentriert darstellen

Mehrsprachige WebsiteI

Bootstrap Panel wunsch

Bootstrap Panel wunsch

Bootstrap Panel wunsch

Frage: CSS popup so wie auf http://shop.minesucht.net/category/772051

Frage: CSS popup so wie auf http://shop.minesucht.net/category/772051

css - Website in div Boxen aufgeteilt