Beiträge von Lupus_III

Lupus_III

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

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/howto/howto_js…ar_dropdown.asp

Lupus_III

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

Lupus_III

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

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.

Lupus_III

Zitat von Sempervivum

Der häufige Reload ist zwar nicht optimal und verursacht unnötige Serverlast aber nicht der Grund für das Flackern und das unvollständige Bild.
Auch das PHP ist ein Overkill an Komplexität weil die URL des Bilder ja immer die selbe ist.

Hast du auch Lösungen?

Lupus_III

Zitat von basti1012
Bei mir wird es richtig angezeigt.
Aber,
Beim 2 Minuten Reload werden Einzel Bilder geladen, die von oben aus immer etwas größer werden , bis das Bild vollständig ist , so wie es 1996 mit isdn mal wahr.
Ist das Bild erst mal da , wird jede Sekunde das Bild neu geladen (Siehe Konsole)
Irgendwie merkwürdig mit den Requesten , vielleicht kann da mal wer anders schauen, ob bei ihm in der Konsole auch so viel los ist auf der Seite.
Edit :
Bei ein
Code
setTimeout( reload, 1210 );
ist das natürlich klar das da soll viele Reloads laufen (ca. 30 MB die Minute).
Alles anzeigen

Wie muss ich den reload einstellen, damit es besser wird? sind 1210 Millisekunden?

Lupus_III

Zitat von Sempervivum

Bei mir immer noch arges Geflacker ca. alle 2 min

Hast du eine Idee?

Lupus_III

Ich habe mittlerweile das reload auf 1210 hochgesetzt. Ich denke das war die Lösung.

Lupus_III

Zitat von prodev

Was meinst du mit "pumpt"??

Schau Dir bitte den Link an.

Lupus_III

Hallo zusammen,

wir haben in unserem Club eine neue Webcam installiert, die im Abstand von 2 Minuten Fotos (Snap.jpg) zum Webserver hochlädt.

https://www.golfclub-oberrot-frankenberg.de/webcam.html

Die Fotos werden in einer speziellen HTML-Datei (siehe Link) angezeigt. Leider pumpt dabei das Bild so lange, bis es komplett übertragen wurde. Ich kann mir dieses Verhalten nicht erklären.

Kann jemand mal auf die relevanten Dateien schauen und evtl. eine Lösung finden? Danke!

PHP

HTML
<!DOCTYPE html>
<html>
<head>
<title>Webcam Golfclub Oberrot-Frankenberg</title>
<meta charset="UTF-8">
<link rel="stylesheet" href="webcam.css" media="screen">
<script type="text/javascript" src="webcam.js"></script>
</head>
<body>
<h2>Webcam des Golfclubs Oberrot-Frankenberg</h2>
<p>Die von der Webcam erzeugten Bilder werden im Abstand von 2 Minuten erneuert.</p>

<div class="camview"><img src="{__LAST_IMAGE__}" alt="WebCam StopMotion View"><p>{__DATETIME__}</p></div>
<p>Datum der letzten Änderung</p>

</body>
</html>
***************************************************************************************************************
PHP
<?php
date_default_timezone_set( 'Europe/Berlin' );
error_reporting( -1 );
ini_set( 'display_errors', true );


const IMAGES_PATH_NAME = 'images/webcam/WLAN_Cam/Snapshot/';
const IMAGES_PATH = __DIR__ . '/' . IMAGES_PATH_NAME;
const IMAGES_PATTERN = 'Snap.jpg';


$itrImages = new GlobIterator( IMAGES_PATH . IMAGES_PATTERN );


$itrImages->rewind();
$aImages = [];


while ( $itrImages->valid() ) {

    $splFileInfo = $itrImages->current();
    $aImages[$splFileInfo->getCTime()] = [
            'filename' => $splFileInfo->getFileName(),
            'filepath' => IMAGES_PATH_NAME . $splFileInfo->getFileName() . '?v=' . microtime( true ),
            'filecdate' => date( 'd.m.Y H:i:s', $splFileInfo->getCTime() )
        ];

    $itrImages->next();

}


ksort( $aImages );
$aImagesData = array_values( array_reverse($aImages) );


if ( !isset($_GET['reload']) ) {

    echo strtr( file_get_contents(__DIR__ . '/webcam.html'), ['{__LAST_IMAGE__}'=>$aImagesData[0]['filepath'], '{__DATETIME__}'=>$aImagesData[0]['filecdate']]  );
    exit;

}


echo json_encode( $aImagesData[0] );

**************************************************************************************************************************************
JS
window.onload = function() { reload(); }


function reload() {

    var oXmlHttp = new XMLHttpRequest();
    oXmlHttp.onreadystatechange = function () {

            if ( oXmlHttp.readyState !== XMLHttpRequest.DONE )
                return;

            console.log( oXmlHttp.responseText );
            setTimeout( reload, 1200 );

            _response = JSON.parse( oXmlHttp.responseText );
            document.querySelector( '.camview > img' ).setAttribute( 'src', _response.filepath );
            document.querySelector( '.camview > img + p' ).innerHTML = _response.filecdate;

        };

    oXmlHttp.open( 'GET', 'webcam.php?reload=1', true );
    oXmlHttp.send();

}

Alles anzeigen

Lupus_III

Ich habe den Bildwechsel in meiner Webseite so gelöst,

dann muss man für einen weiteren Bildwechsel keine neue Klasse vergeben:

Code

HTML
<div class="container">
                  <img src="images/erich.JPG" alt="Erich" class="image">
                  <figcaption>Erich Wolf</figcaption> 
                  <div class="overlay">
                    <div><img src="images/erich2.JPG" alt="Erich" class="image"></div>
                    <figcaption>Erich Wolf</figcaption> 
                  </div>
  </div>

CSS
/* ################################################################ */
/* Fade in Overlay IMG */
/* ################################################################ */
 
.container {
  position: relative;
  width: 50%;
}

.image {
  display: block;
  width: 100%;
  height: auto;
}

.overlay {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  height: 100%;
  width: 100%;
  opacity: 0;
  transition: .5s ease;
  background-color: #008CBA;
}

.container:hover .overlay {
  opacity: 1;
}

Alles anzeigen

Lupus_III

Damit du über die Möglichkeiten von WP besser informiert bist und dir evtl. schon mal eine Musterseite anlegen kannst, empfehle ich dir dieses Tutorial

Lupus_III

Zitat von Zolf

Aber ich habe jetzt eine Möglichkeit gefunden und eine Lsung gefunden.

Dürfen wir die auch erfahren?

Lupus_III

Suchen > Ersetzen!?

Lupus_III

Hallo zusammen,

ich teste gerade wie ich einen Stundenplan responsive gestalten kann und habe dazu die DIV's mit Flexbox gestaltet. Leider funktioniert der Befehl für die Media Queries nicht. Aber warum? Wie kann ich jedem zweiten Child einen farbigen Background geben.

Den Code habe ich beigefügt.

HTML

HTML

<!DOCTYPE html>
<html lang="den">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="style.css">
    <title>Stundenplan</title>
</head>
<body>
    <div class="wrapper">        
            <div class="flexbox-row">
                <div class="flex-item">
                   <p>Montag</p> 
                </div>
                <div class=".flex-item:nth-child(1)">
                    <p>07:00 <br> Rückenschule</p>
                </div>
                <div class=".flex-item:nth-child(2)">
                    <p>08:00  <br> Workout</p>
                </div>
                <div class=".flex-item:nth-child(3)">
                    <p>09:00 <br> Rückenschule</p>
                </div>
                <div class=".flex-item:nth-child(4)">
                    <p>10:00 <br> Workout</p>
                </div>
                <div class=".flex-item:nth-child(5)">
                    <p>11:00 <br> Workout</p>
                </div>
                <div class=".flex-item:nth-child(6)">
                    <p>12:00 <br> Rückenschule</p>
                </div>
                <div class=".flex-item:nth-child(7)">
                    <p>13:00<br> - </p>
                </div>
                <div class=".flex-item:nth-child(8)">
                    <p>14:00 <br> Rückenschule</p>
                </div>
                <div class=".flex-item:nth-child(9)">
                    <p>15:00 <br> Workout</p>
                </div>
                <div class=".flex-item:nth-child(10)">
                    <p>16:00 <br> Workout</p>
                </div>                 
            </div>
            <div class="flexbox-row">
                <div class="flex-item">
                   <p>Dienstag</p> 
                </div>
                <div class=".flex-item:nth-child(1)">
                    <p>07:00 <br> Rückenschule</p>
                </div>
                <div class=".flex-item:nth-child(2)">
                    <p>08:00<br> - </p>
                </div>
                <div class=".flex-item:nth-child(3)">
                    <p>09:00 <br> Rückenschule</p>
                </div>
                <div class=".flex-item:nth-child(4)">
                    <p>10:00 <br> Workout</p>
                </div>
                <div class=".flex-item:nth-child(5)">
                    <p>11:00<br> - </p>
                </div>
                <div class=".flex-item:nth-child(6)">
                    <p>12:00 <br> Rückenschule</p>
                </div>
                <div class=".flex-item:nth-child(7)">
                    <p>13:00<br> - </p>
                </div>
                <div class=".flex-item:nth-child(8)">
                    <p>14:00 <br> Rückenschule</p>
                </div>
                <div class=".flex-item:nth-child(9)">
                    <p>15:00 <br> Workout</p>
                </div>
                <div class=".flex-item:nth-child(10)">
                    <p>16:00 <br> Workout</p>
                </div>
                 
            </div> 
            <div class="flexbox-row">
                <div class="flex-item">
                   <p>Mittwoch</p> 
                </div>
                <div class=".flex-item:nth-child(1)">
                    <p>07:00 <br> Rückenschule</p>
                </div>
                <div class=".flex-item:nth-child(2)">
                    <p>08:00 <br> Workout</p>
                </div>
                <div class=".flex-item:nth-child(3)">
                    <p>09:00 <br> Rückenschule</p>
                </div>
                <div class=".flex-item:nth-child(4)">
                    <p>10:00 <br> Workout</p>
                </div>
                <div class=".flex-item:nth-child(5)">
                    <p>11:00 <br> Workout</p>
                </div>
                <div class=".flex-item:nth-child(6)">
                    <p>12:00 <br> Rückenschule</p>
                </div>
                <div class=".flex-item:nth-child(7)">
                    <p>13:00<br> - </p>
                </div>
                <div class=".flex-item:nth-child(8)">
                    <p>14:00 <br> Rückenschule</p>
                </div>
                <div class=".flex-item:nth-child(9)">
                    <p>15:00 <br> Workout</p>
                </div>
                <div class=".flex-item:nth-child(10)">
                    <p>16:00 <br> Workout</p>
                </div>                 
            </div>              
       
    </div>
</body>
</html>

CSS

.wrapper{
    width:90%;
    margin: 0 auto;
}
.flexbox-row {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: space-around;
    align-items: flex-start;
    align-content: center;
}

.flexbox-item {
    flex: 0 1 auto;
    background-color: lightblue;
}

.flex-item:nth-child(1) {
    flex-grow: 0;
    flex-shrink: 1;
    flex-basis: auto;

}

.flex-item:nth-child(2) {
    flex-grow: 0;
    flex-shrink: 1;
    flex-basis: auto;
}

.flex-item:nth-child(3) {
    flex-grow: 0;
    flex-shrink: 1;
    flex-basis: auto;
}

.flex-item:nth-child(4) {
    flex-grow: 0;
    flex-shrink: 1;
    flex-basis: auto;
}

.flex-item:nth-child(5) {
    flex-grow: 0;
    flex-shrink: 1;
    flex-basis: auto;
}

.flex-item:nth-child(6) {
    flex-grow: 0;
    flex-shrink: 1;
    flex-basis: auto;
}

.flex-item:nth-child(7) {
    flex-grow: 0;
    flex-shrink: 1;
    flex-basis: auto;
}

.flex-item:nth-child(8) {
    flex-grow: 0;
    flex-shrink: 1;
    flex-basis: auto;
}

.flex-item:nth-child(9) {
    flex-grow: 0;
    flex-shrink: 1;
    flex-basis: auto;
}

.flex-item:nth-child(10) {
    flex-grow: 0;
    flex-shrink: 1;
    flex-basis: auto;
}


/* Media Queries */

@media (max-device-width: 800px) { /* Breite entspricht genau 800 Pixel */ 
    .wrapper{
        width: 100%;       
    }
    .flexbox-row {
        display: flex;
        flex-direction: column;
        padding: 0 2%;      
    } 

}

Alles anzeigen

Lupus_III

Ich habe im Web diese Anleitung gefunden, die das Laden von JS durch SVG-Dateien ersetzt. Vielleicht ist das die Lösung deines Problems?

Web Icons with No External Libraries! (No More Font Awesome)

Lupus_III

Die Klasse panel und das Tag <p> wird nicht angesprochen.

Lupus_III

Schau mal hier - https://wiki.selfhtml.org/wiki/CSS/Tutor…tung/text-align

Lupus_III

Zitat von m.scatello

Wenn du weißt, das diese Systeme Käse sind, warum empfiehlst du sie dann trotzdem noch? Ich würde diese nicht im geringsten erwähnen.

Gute Frage, nächste Frage!

Beiträge von Lupus_III

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

Webcam - Aufruf auf Webseite pumpt

Webcam - Aufruf auf Webseite pumpt

Webcam - Aufruf auf Webseite pumpt

Webcam - Aufruf auf Webseite pumpt

Webcam - Aufruf auf Webseite pumpt

Webcam - Aufruf auf Webseite pumpt

Mehrere Bildwechsel nebeneinander

Wie hatte ich das mal gemacht-html indexseite Provider?

Gleichnamige CSS-Class unterschiedlich formatieren

Gleichnamige CSS-Class unterschiedlich formatieren

Media Queries funktionieren nicht in Tabelle - Flexbox

Script für Fontawesome-Kit nur einmal für die Seite laden

Akkordion Code

Einfaches Div mit zwei Sätzen immer mittig auf der Seite anzeigen lassen?

Welches CMS ?