Beiträge von Lupus_III

Lupus_III · Vor 6 Stunden

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

Lupus_III · Gestern, 09:24

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

Lupus_III · Sonntag, 13:29

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

Lupus_III · Freitag, 15:14

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?

Lupus_III · 12. März 2023

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

Lupus_III · 21. Januar 2022

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/

Lupus_III · 13. Januar 2022

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.

Lupus_III · 13. Januar 2022

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

Schau Dir mal Example 2 an.

Lupus_III · 21. November 2021

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?

Lupus_III · 3. November 2021

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

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>

Alles anzeigen

Code

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

Alles anzeigen

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

Lupus_III · 17. Oktober 2021

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?

Lupus_III · 10. Oktober 2021

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

Lupus_III · 6. Oktober 2021

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

Lupus_III · 6. Oktober 2021

Hallo kann mir jemand weiterhelfen. Ich möchte, dass die Weiterleitung https://www.google.de/search auf einen neuen Tab erfolgt. Also wie bei HTML target="_blank". Ich habe keine Idee wie man das macht.

Danke!

Code

<script type="text/javascript">
        function suchen(){
                        var s =document.getElementById("suche").value;
                        window.location = "https://www.google.de/search?q=" + s;
            
        }
        function Event_Key()
        {
            if(event.keyCode == 13)
                {
                    suchen();
                }
        }
        
        </script>

Alles anzeigen

Lupus_III · 5. September 2021

Hallo zusammen,

zur Zeit, so meine ich, sind die Fonts Roboto und Poppins für Webseiten gerade in Mode. Welche Fonts benutzt Ihr?

Ich bin gespannt.

Lupus_III · 3. September 2021

Sorry, wenn ich so deutlich werde, aber mich kotzen viele Websites einfach nur noch an. Da werden sämtliche Möglichkeiten, angefangen bei der Grafik über PHP und JS, reingepackt. Alles ist in Bewegung, ständig ein Popup und die Navigation ist nur noch rudimentär vorhanden. Wann kommen wir wieder zurück zu einfacheren Seiten mit schnell erreichbarem Inhalt über eine leicht zu bedienenden Navigation. Weniger ist oft mehr.

Lupus_III · 30. August 2021

Warum machst du zum Lernen nicht einfach diesen kostenlosen Kurs? -> https://www.html-seminar.de/
und dann schau da mal rein -> https://www.w3schools.com/howt…nsive_navbar_dropdown.asp

Lupus_III · 29. August 2021

Oh Mann!!! Danke Basti, das war es.

Lupus_III · 28. August 2021

Ich weiß nicht, warum das script nicht wie gewünscht funktioniert und der Text im Kreis um das Bild läuft. Kann jemand helfen

HTML

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>Document</title>
</head>
<body>
    <div class="circle">
        <div class="logo"></div>
        <div class="text">
            <p>LUPUS-Media - Erich Wolf - Creative Web-Design</p>
        </div>
    </div>
    <script>
        const text =  document.querySelector('.text p');
        text.innerHTML = text.innerText.split("").map(
            (char, i) =>
            <span style="transform:rotate(${i * 8.2}deg)">${char}</span>
        ).join("");
    </script>
</body>
</html>

Alles anzeigen

Code

CSS
*
{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: consolas;
}
body{
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
}
.circle
{
    position: relative;
    width: 200px;
    height: 200px;
    border-radius: 50%;
    /*background-color: #ccc;*/
    display: flex;
    justify-content: center;
    align-items: center;
}
.logo
{
    position: absolute;
    width: 150px;
    height: 150px;
    border-radius: 50%;
    background: url(img.jpg);
    background-size: cover;
    filter: brightness(1.5) contrast(1);
}
.text
{
    position: absolute;
    width: 100%;
    height: 100%; 
    animation: rotateText 10s linear infinite;
}
@keyframes rotateText
{
    0%{
       transform: rotate(360deg); 
    }
    100%{
        transform: rotate(0deg); 
    }
}
.text span
{
    position: absolute;
    left: 50%;
    font-size: 1.2em;
    transform-origin: 0 100px;
}

Alles anzeigen

Lupus_III · 21. Juni 2021

Auf den ersten Blick sieht es aus, wie wenn der Container für die Subnavigation nicht genügend Breite hat. Aber ohne Code kann man keine genauere Aussage machen.

Beiträge von Lupus_III

fontawesome local speichern

fontawesome local speichern

fontawesome local speichern

fontawesome local speichern

Schön, dass dieses Forum weiterlebt...

Abgeschrägtes Header Div

Navigationsleiste auf allen Einzel-Seiten, grundsätzliche Vorgehensweise bei Erstellung und Pflege ?

Navigationsleiste auf allen Einzel-Seiten, grundsätzliche Vorgehensweise bei Erstellung und Pflege ?

Windows 11

Accordion nur mit CSS

Video für mobile Geräte ausblenden und mit Media Square gegen Standbild tauschen

Apache wird plötzlich heruntergefahren

Weiterleitung auf neue Webseite

Weiterleitung auf neue Webseite

Welchen Font nehmt ihr?

Das Web heute

Dropdown Menü mit submenü funktioniert nicht 😭

Text läuft nicht im Kreis um meine Foto

Text läuft nicht im Kreis um meine Foto

Dropdown-Menü Breite