Dann erst Mal willkommen im Forum. Wenn Du wenig Erfahrung in Foren hast, ist es erfreulich, dass Du gleich deinen Code richtig gepostet hast.
Bootstrap bietet so etwas auch an, mit hübschem Slide-Effekt:
https://getbootstrap.com/docs/4.0/components/collapse/
Und bei der Demo dort sind die Container am Anfang zu.
PS: Ich sehe gerade, was die "leeren" li-Tags betrifft, hatte ich mich von der Anzeige des HTML-Inspektors täuschen lassen. Es gibt keine leeren sondern bei den schließenden </li> hattest Du den Schrägstrich vergessen.
Kann ich Grid&Flex beliebig kombinieren ?
Ja, wenn ein Layout etwas komplexer ist mit mehreren Container kann der Fall eintreten, dass für einen Flex und für den anderen Grid besser geeignet ist, um das gewünschte Layout zu erzielen.
PS: Ich habe noch einen Blick auf die Navigation geworfen:
Ich möchte, dass drei Boxen die volle Breite von main ausnutzen und der Rest in die zweite Zeile umbricht.
Einfacher als mit Umbrüchen erreichst Du das mit Gridlayout:
aside {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
}Die Hilfselemente für die Umbrüche musst Du dann natürlich heraus nehmen. Und flex-basis für .box ist dann überflüssig.
Und den main-Container auf volle Breite setzen:
main {
margin: 0 auto;
max-width: 950px;
flex: 1;
width: 100%;
}Ich glaube, früher hattest Du geschrieben, dass die Elemente auf maximal drei Spalten verteilt werden sollen. Das kannst Du leicht mit Mediaqueries umschalten, so dass es bei schmalem Browserfenster weniger Spalten werden.
warum funktioniert das justify-content nicht ?
Bei mir funktioniert auch das einwandfrei.
OK, aber erstens ändert das nichts, der Titel bzw. die Überschrift lässt sich mit text-align: center; problemlos zentrieren.
Und zweitens, wenn du schreibst, dass es sich um eine Überschrift handelt, ist es angebracht, dafür auch das entspr. Tag zu verwenden also <h1> <h2> ...
Zu der ersten Frage rate ich mal: Dein HTML sieht so aus:
<header>
<h1 class="header_title">Die Überschrift</h1>
</header>In dem Fall ist absolute Positionierung eine denkbar schlechte Lösung, nur um etwas zu zentrieren. Ein simples text-align: center; ist ausreichend.
Wie kann ich abfragen, ob eine Browserversion HTML5 kann?
Soweit ich das überblicke, geht das so pauschal nicht, denn HTML5 enthält eine Vielzahl von Features und es ist möglich, dass einige davon unterstützt werden und andere nicht. Bleibt nur der steinige Weg, einzelne Features abzutesten.
Die Syntax, die Du da verwendest, ist mir nicht vertraut, aber auch ohne das kann ich deine Vermutung bestätigen:
Kann es sein das ich hier ein Problem mit einer asynchronen Ausführung habe, da „undifend“ als erstes ausgegeben wird?
Die Sache ist die, dass dein return data; für die anonyme Funktion gilt, in der es steht, und nicht den Returnwert für getAll liefert.
Lösung, indem Du alle Aktionen, die data brauchen, in dieser anonymen Funktion erledigst. Wenn die Funktion getAll mehrfach verwendet werden soll, kannst Du eine Callback-Funktion übergeben:
module.exports.getAll = (callback) => {
http.get('http://127.0.0.1:3010/get', (response) => {
console.log("get all called");
var data = '';
response.on('data', (chunk) => {
data += chunk;
});
response.on('end', () => {
/*Die angeforderten Daten kommen bis hier an*/
console.log(data);
callback(data);
});
});
}Lies zunächst mal dies:
https://www.joezimjs.com/javascript/fea…wser-detection/
I. allg. wird feature detection als sinnvoller als browser sniffing angesehen.
Für feature detection eignet sich modernizr sehr gut:
Der, der da sagt "Es geht nicht" sollte den nicht stören, der es gerade tut.
<style>
#legendeoffen {
position: relative;
}
#projekt {
position: absolute;
top: 0;
left: 0;
background-color: white;
animation: ani 5s infinite;
}
@keyframes ani {
0% {
opacity: 0;
}
40% {
opacity: 0;
}
50% {
opacity: 1;
}
90% {
opacity: 1;
}
100% {
opacity: 0;
}
}
</style>
<div id="legendeoffen">
<div id="ticket">
<h4>Ticket-Ablaufzeit:</h4>
<span style="color:green">Grün: 1-3 Tage - Liegt im Zeitrahmen</span> |
<span style="color:orange">Orange: 3-7 Tage - Sollte bald beendet werden</span> |
<span style="color:red">Rot: Älter als 7 Tage - Sollte bereits beendet sein!</span>
</div>
<div id="projekt">
<h4>Projekt-Ablaufzeit:</h4>
<span style="color:green">Grün: 1-90 Tage - Liegt im Zeitrahmen</span> |
<span style="color:orange">Orange: 90-150 Tage - Sollte bald beendet werden</span> |
<span style="color:red">Rot: Älter 150 Tage - Sollte bereits beendet sein!</span>
</div>
</div>Die Hintergrundfarbe musst Du noch anpassen, da die Farbe der Überschrift weiß war, kann sie ja nicht weiß sein.
Deja vu: Als ich vor langer Zeit mit der Webentwicklung begonnen habe, habe ich Netscape Composer benutzt und genau diese Möglichkeit gesucht und nicht gefunden. Später habe ich dann gelernt:
a) Dass es diese Möglichkeit sehr wohl gibt und dass sie nur von Composer nicht unterstützt wird.
b) Dass ein solches Vorgehen für das Layout einer Webseite nicht gut geeignet ist.
Der Grund für b) ist, dass es mit dieser Methode schwierig wäre, die Seite responsiv zu bekommen, d. h. dass sie sich an verschiedene Größen des Browserfensters anpasst.
Möglicher Weise stellst Du dir vor, dass der Text auf der Seite die Bilder umfließt. Das ist mit HTML und CSS nur ganz eingeschränkt möglich, wenn man nicht sehr komplizierte und unflexible Tricks verwendet.
Du hast das echo vergessen dort wo Du das Linkziel ausgibst:
///\\\ <a href="<?php echo $bildinfo['dirname'] . "/" . $bildinfo['basename']; ?>" download>
Dann ist das href-Attribut leer und als Konsequenz wird offenbar die PHP-Datei selber wird zum Download angeboten.
Gern geschehen! Ja, leider findet man viele Infos im Netz, die unbrauchbar sind. Weitere Beispiele:
Mit !important müsste es sich eigentlich durchsetzen.
Mit der Version von Basti komme ich hiermit zum Ziel:
Du kannst auch einen Selektor in dieser Form verwenden:
.input-group.datepicker-inline {
width: auto;
}Das ist dann recht spezifisch und dürfte sich gegen die Definition von Bootstrap durchsetzen.
(ohne Leezeichen zwischen .input-group und .datepicker-inline)
Ich musste drei Kleinigkeiten ändern, um das Icon rechts neben das Eingabefeld zu bekommen:
Hm, am Cache kann es eigentlich nicht liegen weil es direkt auf der Hauptseite liegt und nicht in einer eingebundenen Datei. Ein Problem beim Hochladen?