Beiträge von Lupus_III

Vielen Dank, Leute, das war die Lösung. Manchmal sieht man den Wald vor Bäumen nicht!

Hallo zusammen,

ich nutze in einer Webseite dieses Formular - https://www.reha-sportstudio.de/202301_aktion.php . Bei meinen Tests mit verschiedenen Browsern wird rechts neben den Inputfeldern ein ordentlicher Abstand angezeigt. Leider funktioniert das nicht auf meinen Smartphones Samsung Galaxy S 21 und S7, wie der beigefügt Screenshot zeigt.

Hat jemand eine Ahnung an was das liegen kann?

@nextuser-. Nur zu meinem Verständnis.

section>p:not(:last-of-type) {margin-bottom: 2rem;} - Soll das letzte p-Tag keinen 2rem Abstand nach unten haben, die anderen aber schon?

Mir gefällt die Seite!

Zitat von Emess

[…]

Lieber Emess, ich weiß zwar nicht wie alt du bist, aber ich gehe auf die 75 zu und habe mich die letzten Jahre in die Materie eingearbeitet. Alter ist doch kein Hinderungsgrund sich neuem zuzuwenden, zumal man keine körperliche Fitness dafür braucht, sondern ein funktionsfähiges Gehirn. Ich habe zum Beispiel mit der Einarbeitung in das HTML-Seminar - https://www.html-seminar.de/ - begonnen und dann kontinuierlich weiter, auch mit Fachliteratur, gelernt. Jeden Tag ein paar Stunden. Das hält geistig frisch, auch im hohen Alter, und macht Spass. Und wenn man an einer Stelle hängt und nicht weiter weiß, hilft Dir das Forum. Also, ran an den Speck!

Ich beschäftige mich gerade mit Bootstrap. Wie ist das wenn Bootstrap auf eine neue Version upgedatet wird? Muss man dann seinen HTML-Code anpassen. Hat da jemand Erfahrung?

Zitat von nextuser

Hi Lupus,

wie hast du es jetzt gemacht?

Da ich nur drei Icons brauchte, habe ich die Ordner css mit der Datei all.css und den Ordner webfonts auf den Webserver geladen. Das hat für meine Bedürfnisse gereicht und Speicherplatz gespart. Der Link in den HTML-Dateien sieht dann so aus => <link rel="stylesheet" href="fontawesome-free-6.2.1-web/css/all.css"> 

Dazu gibt es in youtube auch einen Beitrag =>

Bei Deiner Antwort viel mit der Witz ein, als sich zwei in einem Fesselballon verflogen haben und aus zehn Meter Höhe einem Bauer zuriefen "Wo sind wir?! und zur Antwort bekamen " in einem Fesselballon"!

Ich hätte lieber gleich bei youtube anfragen sollen. Dann wäre mir dieser Umweg erspart geblieben. Lesson to learn.

Das war jetzt mal wieder eine Antwort mit der niemand was anfangen kann. Vielleicht war meine Frage auch zu weit gefasst. Also nochmal, wenn ich aus dem Fontawesome Paket 3 Icons für meine Webseite brauche. Zum Beispiel Facebook, Instagram und fa-chevron-up, welche Dateien soll/ kann ich dann auf den Webspace übertragen?

pasted-from-clipboard.png

Hallo zusammen,

seit der Diskussion über die Abmahnungen für die Verwendung von Google-Fonts verwende und speichere ich auch die Datei fontawesome-free-6.2.1-web local auf dem Webserver und verknüpfe meine HTML-Dateien mit dieser Datei mit dem Link <link rel="stylesheet" href="fontawesome-free-6.2.1-web/css/all.min.css">.

Die Datei fontawesome-free-6.2.1-web ist ca. 26MB groß. Frage: ist es erforderlich, das ganze Paket auf den Webserver zu laden, oder kann man da auch selektiv vorgehen? Wie macht Ihr das in der Praxis?

Ich bin auch wieder dabei und freue mich, dass das Forum wieder weiterlebt. Auf interessante Beiträge bin ich gespannt. Danke an alle, die das ermöglicht haben.

Gruß Erich

Hallo Leute,

in der folgenden Webseite gibt es im Headerbereich (Navigation) und in der Webseite abgeschrägte Container. Kann man diese Funktionalität mit CSS steuern und wenn ja wie?

Hier der Link => https://phc-muenchen.de/

Zitat von m.scatello

Lupus_III

Wenn in der Datei nur HTML-Code steht, was ja hier zu vermuten ist, dann ist readfile die bessere Alternative, weil dann die Datei nicht auch noch durch den Parser gejagt wird.

Da hast Du Recht. Das steht auch in der von mir zitierten Webseite von w3schools so.

Vielleicht hilft dir dieser Link weiter => https://www.w3schools.com/php/php_includes.asp

Schau Dir mal Example 2 an.

Seit kurzem wird mir die Aktualisierung meines Betriebssystem Win 10 auf Win 11 als Systemnachricht angeboten. Hat jemand damit schon Erfahrung gemacht? Ist es sinnvoll schon jetzt umzusteigen oder angesichts von Bugs bei früheren Versionen noch etwas zu warten?

Hallo zusammen,

ich bin die Tage auf eine Anleitung für ein Accordion gestoßen, für das man nur CSS Code braucht. Vielleicht ist jemand auch auf der Suche nach so einer (einfachen) Möglichkeit.

HTML
<!DOCTYPE html>
<html lang="de">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="style.css">
    <title>Accordion ohne JS</title>
</head>
<body>
    <div class="list">

        <div class="accordion">
            <input type="checkbox" id="accordion-1">
            <label for="accordion-1">
                1. Thema- Lesen -Sie weiter ...
                <img src="arrow.svg">
            </label>
            <div class="content">
                <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>
            </div>
        </div>
    
        <div class="accordion">
            <input type="checkbox" id="accordion-2">
            <label for="accordion-2">
                2. Thema- Lesen -Sie weiter ...
                <img src="arrow.svg">    
            </label>
            <div class="content">
                <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>
            </div>
        </div>
    
        <div class="accordion">
            <input type="checkbox" id="accordion-3">
            <label for="accordion-3">
                3. Thema- Lesen -Sie weiter ...
                <img src="arrow.svg">
            </label>
            <div class="content">
                <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>
            </div>
        </div>
    
    </div>
</body>
</html>

CSS
@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;900&display=swap');
body,
html 
{
    align-items: center;
    background-color: lightgoldenrodyellow;
    display: flex;
    font-family: 'Roboto';
    font-size: 10px;
    height: 100%;
    justify-content: center;
    align-items: flex-start;
    margin: 5rem 0 0 0;
    padding: 0;
    width: 100%;
}

*
{
    box-sizing: border-box;
}


.list
{
    width: 100%;
    max-width: 40rem;
}

.accordion
{
    width: 100%;
    display: flex;
    flex-direction: column;
    margin: 0 0 2rem 0;
} 
input 
{
   position: absolut; 
   z-index: -1;
   opacity: 0;
}
/* Wenn .accordion = checked, gibt es im DOM auf der Siblingsebene ein Label?
Wenn ja, hat dieses Label ein img? Wenn ja, dann dreh diese img um 180 Grad */
.accordion input:checked ~ label img{
    transform: translate(0, -50%) rotate(180deg);
}
/* Wenn .accordion = checked, gibt es im DOM auf der Siblingsebene ein .content?
 Wenn ja, dann zeige ihn mit den folgenden Befhelen an */
.accordion input:checked ~ .content{
    height: auto;
    opacity: 1;
    transform: translate(0, 0);
}

label
{
    width: 100%;
    background-color: skyblue;
    font-size: 2rem;
    padding: 2rem;
    border-radius: 1rem;
    cursor: pointer;
    transition: all 150ms;
    position: relative;
    z-index: 2;
}

label:hover
{
    transform: scale(1.02);
}                

img
{
    width: 1.5rem;
    position: absolute;
    top: 50%;
    right: 2rem;
    transform: translate(0, -50%);
    transition: 350ms all;
}
    

.content
{
    color: #000;
    width: 100%;
    background-color: rgba(255, 255, 255, 1);
    border-radius: 0 0 1rem 1rem;
    font-size: 1.6rem;
    position: relative;
    z-index: 1;
    transform: translate(0, -20%);
    height: 0;
    opacity: 0;
    transition: 350ms all;
    overflow: hidden;
}
    

p
{
    padding: 2rem;
    margin: 0;
}

Die arrow.svg müßt Ihr Euch unter dem folgenden Link downloaden => https://www.flaticon.com/free-icons/arrow

Ich frage mich ob man das nicht auch mit media queries über CSS steuern kann. Bei kleinen Bildschirmen Video display none? Bei großen Bildschirmen Foto display none?

Vielleicht hilft Dir das weiter - https://xuad.net/artikel/xampp-…r-nicht-starten

m.scatello: Ich habe keine tiefen JS-Kenntnisse. Trotzdem habe ich es mit deiner Hilfe und ein Bisschen probieren hinbekommen. Danke!