Beiträge von ny_unity

danke dir!

Ich hatte zwar ein Lehrgang gemacht der ging 40 Stunden, aber da war nicht mit flexboxen gearbeitet worden, das werde ich nochmal nachholen müssen

danke, das klappt, aber wie bekomme ich den Text jetzt zentriert, horizontal wie vertikal?

Hallo zusammen,

ich arbeite mit bootstrap 4. Ich möchte ein Grid so gestalten, dass es am Ende eine Art Tabelle ist, ich möchte aber nicht mit table arbeiten, sondern als grid.

aktuell sieht es so aus:

html-seminar.de/woltlab/attachment/2948/

bei Zeilenumbruch und Rahmen;

html-seminar.de/woltlab/attachment/2949/

Mein HTML:

<div class="container-fluid dashboard-start">
			<div class="row justify-content-center align-items-center" id="dashboard-start-first">
					<div class="col-4" id="fehlende-unterlagen">
						<div class="row justify-content-center align-items-center grid-heading">
							<div class="col-4 column-header">Dispo/Team</div>
							<div class="col-1 column-header">JU</div>
							<div class="col-1 column-header">VS</div>
							<div class="col-1 column-header">APBP</div>
							<div class="col-1 column-header">CH</div>
							<div class="col-1 column-header">HWK</div>
							<div class="col-1 column-header">a. AVV</div>
							<div class="col-1 column-header">f. AVV</div>
							<div class="col-1 column-header">&sum;</div>
						</div>
						<div class="row justify-content-center align-items-center grid-default">
							<div class="col-4 column-default">BF</div>
							<div class="col-1 column-default">0</div>
							<div class="col-1 column-default">0</div>
							<div class="col-1 column-default">0</div>
							<div class="col-1 column-default">0</div>
							<div class="col-1 column-default">0</div>
							<div class="col-1 column-default">0</div>
							<div class="col-1 column-default">0</div>
							<div class="col-1 column-default">0</div>
						</div>
					</div>
					<div class="col-auto">
						<p>Auftragsstatus kurz</p>
					</div>
					<div class="col-auto">
						<p>Gebhurtstag intern</p>
					</div>
					<div class="col-auto">
						<p>shortlinks</p>
					</div>
			</div>
		</div>
</div>

Mein CSS dazu:

.dashboard-start {
  margin-top: 2rem;
}


#dashboard-start-first {
  justify-content: space-between;
}


#fehlende-unterlagen {
  margin-left: auto;
  margin-right: auto;
  align-items: center;
  justify-content: center;
}


.grid-heading {
  font-weight: bold;
  background-color: #9FA2A9;
}


.column-header {
  text-align: center;
  vertical-align: middle;
  border: 1px solid black;
}


.column-default {
  text-align: center;
  vertical-align: middle;
}


.grid-default {
  font-weight: normal;
  background-color: #fff;
}


.grid-default [class*="col"] {
  border: 1px solid #000000;
}


.grid-default [class*="col"]:not(:last-child) {
  border-right-width: 0;
}


.grid-default .row:not(:last-child) .col {
  border-bottom-width: 0;
}

Ich bekomme quasi es nicht hin, das die komplette Höhe der ersten Zeile als Rahmen zu haben, sondern nur die Höhe des Textes.

Kann mir jemand weiterhelfen?

Danke,

Erik

Hallo zusammen,

ich habe eine Seite für einen Bekannten erstellt, die ist auch schon online. Aktuell ist Google Analytics und AdSense nicht implementiert, habe es aber vor.

Gibt es eine Seite wo man sich das erstellen lassen kann für einen einmaligen Betrag und nicht mit monatlichem Abo? Ich denke der Cooki-Bot müsste ja dann ggf. auch die Google Geschichten ausschalten, oder?

Oder gibt es eine Vorlage, die umgestaltet werden kann, hier im Forum?

Danke,

Erik

Zitat von AndreasB

document.querySelector('#mobile-nav-dropdown').addEventListener('click', () => {});

vielen dank, damit geht es wie gewünscht.

Ich werde aber noch ein paar Kleinigkeiten auf der Seite anpassen und in der nächsten Version mit javascript arbeiten... Ich habe schon einen Kurs über 40h gebucht... der ist jetzt als nächstes dran... der html und css kurs den ich gemacht habe war 33 Stunden... war sehr lehrreich.., aber da wurde auf so ein Problem nicht hingewiesen

aber dafür hat man dieses tolle Forum, hier wurde mir schon oft geholfen, fettes merci dafür an alle!

Ich habe bisher immer js vermieden... ich muss mich da erstmal reinlesen... danke für den Hinweis! 😊

Oh, guter Einwand... daran habe ich nicht gedacht. Weil beim Handy gibts ja keine Maus mit der man „hovern“ kann... kann ich statt hover muss ich dann JavaScript touch nehmen, richtig?

Sorry für die fehlenden Informationen... also ich habe es auf iPhone 11 Pro iOS 14.2 und iPhone SE iOS 14.2 getestet... beides der gleiche Fehler bzw. Verhalten.

wenn ich auf den Hamburger klicke, öffnet sich das Geld nicht wo die Menü Punkte aufkommen, also die ul ist nicht auswählbar... ich vermute das funktioniert nicht:

#mobile-nav-dropdown:hover > #mobile-nav-content {
display: block;
}

Der content wird nicht aufgerufen...

mit chrome auf den iPhones geht es, also gehe ich vom Safari aus, nicht auf Fehler vom Responsive Design.

Guten Morgen, oder besser, Mahlzeit

Ich habe ein Problem bei meiner ersten Website. Ich habe eine Nav-Bar erstellt, die funktioniert auf IE, Chrome und auf Firefox. Nur der Safari macht Probleme, das habe ich aber erst nach dem Launch festgestellt. Ich konnte auf meinem Windows-Computer nur die anderen drei Browser testen. Auf dem iPhone habe ich es dann gemerkt... Könnt ihr mir hier helfen?

html Ausschnitt:

<!-- NAVIGATIONSLEISTE -->
        <nav id="header-nav">
            <!-- DESKTOP-NAVIGATION -->
            <div class="container" id="desktop-nav">
                <div class="row">
                    <div class="col-6">
                        <a href="index.html" class="logo-link">
                            <img src="./src/img/as_logo.png" alt="Logo von DDM André Schneider">
                        </a>
                        <ul>
                            <li class="active"><a href="index.html">Startseite</a></li>
                            <li><a href="leistungen.html">Leistungen</a></li>
                            <li><a href="kontakt.html">Kontakt</a></li>
                            <li><a href="impressum.html">Impressum</a></li>
                        </ul>
                    </div>
                </div>
            </div>
            <!-- MOBILE-NAVIGATION -->
            <div class="container" id="mobile-nav">
                <div class="row">
                    <div class="col-6">
                        <a href="index.html" class="logo-link">
                            <img src="./src/img/as_logo.png" alt="Logo von DDM André Schneider">
                        </a>
                        <div class="clearfix" id="mobile-nav-dropdown">
                            <div id="mobile-nav-button"><span>&equiv;</span></div>
                            <div class="clearfix" id="mobile-nav-content">
                                <ul>
                                    <li class="active"><a href="index.html">Startseite</a></li>
                                    <li><a href="leistungen.html">Leistungen</a></li>
                                    <li><a href="kontakt.html">Kontakt</a></li>
                                    <li><a href="impressum.html">Impressum</a></li>
                                </ul>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </nav>

Das dazugehörige CSS:

/* === NAVIGATIONSLEISTE === */

#header-nav {
  width: 100%;
  height: 90px;
  background-color: #F0F0F0;
  position: relative;
  font-weight: bold;
  font-size: 1.1rem;
}

#header-nav a > img {
  height: 80px;
  width: auto;
  margin: .55rem;
  float: left;
}

#header-nav ul {
  margin: 0;
  padding: 0;
  float: right;
  height: 100%;
  z-index: 4;
}

#header-nav ul > li {
  display: inline-block;
  height: 100%;
  padding: 0 .4rem 0 .4rem;
  z-index: 5;
}

#header-nav ul > li > a {
  margin-top: .8rem;
  display: inline-block;
  z-index: 6;
}

#header-nav ul > li > a:link {
  color: #000000;
  text-decoration: none;
}

#header-nav ul > li > a:visited {
  color: #000000;
  text-decoration: none;
}

#header-nav ul > li > a:active {
  color: #000000;
  text-decoration: none;
}

#header-nav ul > li > a:hover {
  color: #000000;
  text-decoration: none;
}

#header-nav .col-6 {
  padding-top: 0;
  padding-bottom: 0;
}

#header-nav .container,
#header-nav .row,
#header-nav .col-6 {
  height: 100%;
}

.logo-link {
  display: inline-block;
}

/* === NAVIGATIONSLEISTE (MOBIL) === */

#mobile-nav-button {
  color: #000000;
  float: right;
  font-size: 2rem;
  border: 2px solid #000000;
  width: 37px;
  height: 37px;
  position: relative;
  margin-top: .4rem;
  margin-bottom: .5rem;
}

#mobile-nav-button > span {
  position: absolute;
  top: -2px;
  left: 7px;
}

#mobile-nav-content > ul > li {
  display: block;
  background-color: #354B5E;
  height: 50px;
  padding: 0 1.2rem;
  text-align: center;
}

#mobile-nav-dropdown {
  position: relative;
  display: inline-block;
  float: right;
}

#mobile-nav-content {
  position: absolute;
  right: 0;
  top: 50px;
  display: none;
}

#mobile-nav-dropdown:hover > #mobile-nav-content {
  display: block;
}

#mobile-nav {
  display: none;
}

@media (max-width: 768px) {

  #desktop-nav {
    display: none;
  }

  #mobile-nav {
    display: block;
  }

}

und für das Grid-System (ich arbeite nicht mit bootstrap, habe eigene Werte erstellt):

/* === GRID-SYSTEM === */

.container {
  width: 95%;
  margin-left: auto;
  margin-right: auto;
}

.row::after {
  content: "";
  clear: both;
  display: block;
}

[class*='col-'] {
  float: left;
  min-height: 1px;
  padding: .8rem;
}

.col-1 { width: 16.666%; }
.col-2 { width: 33.333%; }
.col-3 { width: 50%;     }
.col-4 { width: 66.666%; }
.col-6 { width: 100%;    }

@media (max-width: 1024px) {

  .col-1 { width: 33.333%; }

}

@media (max-width: 768px) {

  .col-1 { width: 50%;  }
  .col-2 { width: 100%; }
  .col-3 { width: 100%; }
  .col-4 { width: 100%; }

}

@media (max-width: 480px) {

  .col-1 { width: 100%; }
  .col-2 { width: 100%; }
  .col-3 { width: 100%; }
  .col-4 { width: 100%; }

}

Wo hat Safari hier ein Problem? Ist es, weil das Logo und der Hamburger in einer col sind und die sich deswegen überschneiden? Ich kann in den dev mode von Chrome aber auch nichts entdecken....

Wäre für jede Hilfe dankbar...

MfG

Erik

Hallo zusammen,

ich habe ein Navbar mit mehreren Menüpunkten. Hinter diesen einzelnen Punkten stecken weitere HTML-Seiten, es sind im Prinzip alles Auswertungen.

Wenn man einen Menüpunkt auswählt, soll die html Datei als Tab unterhalb des Menüs geöffnet werden, quasi als Tab, den man schließen kann und man wieder auf die Startseite gelangt.

Hier mal ein Beispiel:

html-seminar.de/woltlab/attachment/2619/

geöffneter Tab mit Inhalt des tabs

html-seminar.de/woltlab/attachment/2620/

oder mehrere tabs, zwischen denen man umschalten kann, wenn man alle schließt, gelangt man wieder auf die Startseite...

html-seminar.de/woltlab/attachment/2621/

Nach was muss ich da suchen um das zu realisieren?

Danke,

MfG

Erik

P.s.: Ich nutze Bootstrap 4

danke für den Hinweis, das Tool mit der Entwickler im Chrome war mir bekannt, hätte ich drauf kommen sollen.... Ich glaube aber das javascript mit show ist dafür nicht verantwortlich, ich zeige dir gleich mal meine Lösung, eventuell übersteuer ich das ganze damit?!

WIe es klappt:

habe einfach die klassen

collapse navbar-collapse

in meine navbar eingetragen... schon gehts... wird aber nicht übersteuert oder?

letzte Frage, dann bin ich mit meiner navbar zufrieden....:

Wie kann ich subemnü1 und submenü2 noch differenzierter von den Farben einstellen? Damit man weiß, in welchem Untermenü man ist, wenn das Dropdown nach unten statt nach rechts geht...

ich bin denke ich durch mit allem, danke für die Hilfe, wiedermal!

den subs habe ich eine neue Klasse zugeordnet...

            .submenu1 {
                background-color: #B0A9A9;
            }
            .submenu2 {
                background-color: #A77E7F
            }

Dann war noch das Problem, das bei dem Hamburger das Menü nicht wieder eingklappt wurde, wenn man auf einen Menüpunkt geklickt hat... das wurde gelöst, in dem ich das javascript angepasst habe... :

$(".collapse").collapse('hide');

einfach mitangeführt und die klasse collapse dem menu angehangen... bums aus ende

Wie hast du das gesehen das dass in der Klasse geregelt ist, wie kann man sich die Klassen ansehen?

Komisch, vielleicht nen Bug bei mir. Muss ich morgen mal testen... kann ich den Submenüs ids geben, damit diese dann anders aussehen oder wie kann ich das lösen?

korrekt, die #9 ist gelöst. Thread ist fast abgeschlossen

Wenn ich das Fenster klein ziehe, also responsive ansehen möchte, dann ist der "Hamburger" geöffnet und nicht geschlossen... Außerdem, werden die Submenüs ja jetzt immer untereinander geöffnet. Kann man das noch irgendwie einstellen, dass die Subs eine andere Farbe erhalten, wenn geöffnet?

https://codepen.io/ny_unity/pen/BaKWQzg

Es wäre ideal, wenn bei viewport kleiner xl, soll die Leiste (in meinem Beispiel oben extrem verkürzt) ausgebelndet und der button für collapse, also der hamburger, eingeblendet und genutzt werden...

ah, ich stehe halt erst am anfang... sinnloser beitrag von mir, aber wem es hilft: <nav class="navbar navbar-expand-xl navbar-light bg-light">

Tatsächlich... danke!

Eine Frage zur navbar habe ich noch... bei einem Menüpunkt mit Untermenü, passiert das:

html-seminar.de/woltlab/attachment/2617/

das wird abgeschnitten, also nicht wirklich responsive... Was gibt es hier für Möglichkeiten? Kann man irgendwie errechnen, dass wenn es nicht auf die Breite passt, nach unten geöffnet wird? Weiß nicht so recht, nach was ich da suchen sollte...

achja, und gibts es die Möglichkeit bei bestimmter bildschirmgröße das Menü schon auf das symbol zu reduzieren? So dass mein Menü nicht unterbricht und auf Zeile 2 weiter geht?

Zitat von Sempervivum

Wahrscheinlich geht das auch ohne zusätzliche Klasse, wenn du die Unterpunkte der ersten Stufe gezielt adressierst:

Code

            .nav-menu>ul>li>a {
                border: solid;
                border-width: 0px 1px 0px 0px;
                border-color: #000;
            }
            
            .nav-menu>ul>li:last-child>a {
                border-right:none;
            }

jap, gerade probiert und geht auch, danke, ist etwas kürzer

Gibt es noch die Möglichkeit, wenn ich im Dropdown-Untermenü bin, dieses farbig zu hinterlegen? Aktuell habe ich :hover und orange, aber wenn ich im Dropdown dann über ein anderen Punkt gehe, wird dieser orange, der erste Oberpunkt aber nicht mehr... schön wäre es, wenn der oberste Punkt auch immer orange bliebe... könnt ihr euch vorstellen was ich meine?

Servus again

Bin gut voran gekommen, Navbar sieht ganz gut aus... Ich habe ein paar Trennstriche gemacht, diese werden aber auch im Dropdown-Untermenü übernommen, siehe hier: html-seminar.de/woltlab/attachment/2616/

Ich habe

.nav-menu li a {
                border: solid;
                border-width: 0px 1px 0px 0px;
                border-color: #000;
            }
            
            .nav-menu li:last-child a {
                border-right:none;
            }

verwendet, dieser wird aber auch auf das Untermenü angewendet und sieht nicht schön aus. Habe auch eine Klasse erstellt namens:

.border-out {
                border: none;
            }

... und diese Klasse dann den Untermenüeinträgen zugeordnet, leider klappt das nicht, vielleicht weil das andere CSS Attribut übergeordnet ist?

Gibt es einen Weg die Unterpunkte ohne Rahmen zu versehen?

Danke,

Erik

*edit*

mit

.nav-menu li .nav-link {
                border: solid;
                border-width: 0px 1px 0px 0px;
                border-color: #000;
            }
            
            .nav-menu li:last-child .nav-link {
                border-right:none;
            }

funktioniert es wie gewollt

Zitat von Sempervivum

Offensichtlich verwendest Du Bootstrap4 und das BT4 ist ein Schreibfehler.

Sorry, ich dachte BT4 und Bootstrap 4 sei das gleiche... bin recht neu in der Thematik... bitte entschuldige das Missgeschick.

Ich arbeite mich mal durch die Links und gebe Rückmeldung.

Schönen Montag!

Hallo zusammen,

ich komme aktuell nicht so richtig voran... In einem neuen Projekt möchte ich eine Startseite für die Mitarbeiter erstellen, die Sie "erblicken" wenn Sie ihren Browser starten.

In dieser Startseite soll eine Navigationsleiste mit unterschiedlichen Menüpunkten, darunter auch Dropdowns und in den Dropdowns auch noch Dropright.

Die Nav-Bar an sich ist kein Problem, auch ein Dropdown in der Navbar stellt jetzt nicht die Probleme dar, aber innerhalb einer Dropdown kann ich keinen Eintrag zu einem Dropright machen mit weiteren Menüpunkten.

Was ich also machen möchte ist, eine Menüleiste mit Dropdown und verschachtelten Dropright Einträgen, welche aber immer auf der Startseite als "Tab" geöffnet wird, so dass die Navigationsleiste immer da bleibt.

Hier ist mein funktionierende Code mit Dropdown, aber ohne Dropright

<!doctype html>
<html>
<head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1">
    
        <title>Startseite</title>
    
        <link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.1/css/bootstrap.min.css" rel="stylesheet" type="text/css">
        <link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
        <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
        <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.1/js/bootstrap.min.js"></script>
        <link href="https://fonts.googleapis.com/css2?family=Exo+2&display=swap" rel="stylesheet">    
        <style>
            body {
                background-color: #E4E8F1;
                font-family: 'Exo 2', sans-serif;
            }
         </style>
    </head>
    <body>
        <div class="container">
              <nav>
                <ul class="nav nav-tabs">
                      <li class="nav-item">
                        <a class="nav-link active" href="#">Home</a>
                      </li>
                      <li class="nav-item dropdown">
                        <a class="nav-link dropdown-toggle" data-toggle="dropdown" href="#">Intern</a>
                        <div class="dropdown-menu">
                              <a class="dropdown-item" href="#">Link 1</a>
                              <a class="dropdown-item" href="#">Link 2</a>
                              <a class="dropdown-item" href="#">Link 3</a>
                        </div>
                      </li>
                      <li class="nav-item dropdown">
                        <a class="nav-link dropdown-toggle" data-toggle="dropdown" href="#">Extern</a>
                        <div class="dropdown-menu">
                              <a class="dropdown-item" href="#">Link 1</a>
                              <a class="dropdown-item" href="#">Link 2</a>
                              <a class="dropdown-item" href="#">Link 3</a>
                        </div>
                      </li>
                </ul>
            </nav>
        </div>
        <script>
        
        </script>
    </body>
</html>

Frage ist, wie kann ich jetzt beispielsweise den Eitnrag Link 1 auch als dropright erstellen, mit weiteren Einträgen??

Danke,

MfG

Erik