Verwandte Themen

Biberjumper
29.03.2023, 14:35
Mit Bildern
Wordpress lädt manchmal langsam, manchmal schnell?

Servus Leute.

Ich habe seit einer Weile eine Test Website online. Alles funktioniert sehr gut, bis auf die Ladezeiten.

Der Host ist Ionos und meistens klappt auch alles super. Manchmal jedoch, braucht wie Website fast 30 Sekunden zu laden. Also unzumutbar lange. Plugins habe ich schon auf ein absolutes Minimum reduziert, also habe ich derzeit nur Elementor, Envato Elements, Ionos Performance und Elementor Header installiert.

Das komische ist, dass jedes Website Analytics Tool, also Chrome Inspector, PageSpeed Insights usw eine perfekte Performance anzeigen.

Und es dauert auch nur manchmal so extrem lange und manchmal geht es innerhalb einer Sekunde. An der Netzwerkverbindung kann es nicht liegen. Habe am Computer einen sehr schnellen LAN Anschluss und habe es auf mehreren Geräten getestet.

Die Website lautet leofleischmann.com und ist nur ein Test. Das Passwort wäre "123abc"

Bei meiner Hauptwebsite leofleischmann.de kommt es auch manchmal zu diesen Problemen, aber ich würde gerne erst mal mit leofleischmann.com anfangen, da das mein "Playground" ist und ich da nichts kaputt machen kann.

Würde mich sehr über Hilfe freuen, denn ich bin mit meinem Wissen am Ende. Jegliche Optimierungsversuche nach Tutorials und auch weitere Plugins die für die Performance sind, haben nicht geholfen.

Vielen Dank schon mal und LG, Leo

Hier noch ein Bild von dem Status der Website:

Bild zum Beitrag
HTML, Webseite, CSS, WordPress, Hosting, Webdesign, Webentwicklung, Webseitenoptimierung, Elementor, ionos
2 Antworten
Dultus, UserMod Light
16.03.2023, 08:16
CSS @media Maximum Width überschreiben?

Guten Morgen,

mein Vater hat eine Website auf MyWebsite von IONOS. Er hat dort einen Buchungskalender, der unter 1025 Pixel Weite nicht angezeigt wird aufgrund folgenden CSS Codes;

@media screen and (min-device-width: 1024px) {
            .mediumScreenDisabled { display:block }
            .smallScreenDisabled { display:block }
        }
        @media screen and (max-device-width: 1024px) { .mediumScreenDisabled { display:none } }
        @media screen and (max-device-width: 568px) { .smallScreenDisabled { display:none } }
                @media screen and (min-width: 1024px) {
            .mobilepreview .mediumScreenDisabled { display:block }
            .mobilepreview .smallScreenDisabled { display:block }
        }
        @media screen and (max-width: 1024px) { .mobilepreview .mediumScreenDisabled { display:none } }
        @media screen and (max-width: 568px) { .mobilepreview .smallScreenDisabled { display:none } }

Der @media screen and (max-device-width: 1024px) { .mediumScreenDisabled { display:none } } -Teil verhindert das Anzeigen des Kalenders und möchte deshalb die maximale width ändern.

Allerdings gibt es auf MyWebsite selbst wohl keine Option dazu und der IONOS Support meint, dass sie für Drittanbieter Snippets keinen Support anbieten (dabei bin ich mir ziemlich sicher, dass das von denen kommt, da der Kalender in einem iframe eingebunden ist).

Gibt es eine Möglichkeit über CSS die Eigenschaft separat nochmal zu überschreiben, wenn ich das Snippet von oben nicht manipulieren kann?

Danke und LG

Computer, HTML, Webseite, programmieren, CSS, HTML5, Programmiersprache, Webdesign, Webentwicklung
3 Antworten
schemil053
26.02.2023, 00:26
Mit Bildern
CSS: Wie kann ich Karten gleich groß anzeigen?

Guten Tag,

ich habe einen kleinen Design-Bug in meiner Webseite.

(s. Bild)

Wie kann ich dieses Problem lösen?

Mein CSS:

<style>
.item {
  box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
  transition: 0.3s;
  width: 10%;
  border-radius: 5px;
  background: #191c29;
  color: rgb(88 199 250 / 100%);
}
.con {
  background: #adadad;
  overflow: auto;
  overflow-x: hidden;
  background: #212534;
}

.item:hover {
  box-shadow: 0 16px 32px 0 rgba(250,250,250,0.2);
}
img {
  border-radius: 5px 5px 0 0;
  height: 150px;
	width: 100%;
}
.container {
  padding: 2px 16px;
}
body {
  overflow: hidden; 
}


* {box-sizing: border-box;}


body {
  margin: 0;
  font-family: Arial, Helvetica, sans-serif;
}




* {
  box-sizing: border-box;
}
body {
  font-family: Arial, Helvetica, sans-serif;
}
#flex-container {
   display: -webkit-flex;
   display: -ms-flex;
   display: flex;
   -webkit-flex-wrap: wrap;
   -ms-flex-wrap: wrap;
   flex-wrap: wrap;
}
.item {
  float: left;
 /* width: 25%; */
  width: 15%; /* 10%*/
  height: 50%; /* 50% */
  padding: 20 10px;
  margin-bottom: 20px;
  margin-left: 20px;
  margin-right: 20px;
}
.row {
  margin: 0 -5px;
}
.row:after {
  content: "";
  display: table;
  clear: both;
}
.col-sm {
  text-align: center;
}
/* @media screen and (max-width: 600px) { */
@media screen and (max-width: 800px) {
  .item {
    width: 100%;
    display: block;
    margin-bottom: 20px;
  }
}
.text-center {
  text-align: center;
}
</style>

Der Code von einer Karte:

<div class="row">
<div class="item text-center">
  <div class="col-sm">
    <img src="textures/spawner.png" alt="textures/spawner.png" style="width: auto;">
    <div class="container">
      <h4><b>Spawner (*1)</b></h4>
      <p>Preis: 10 Mio Coins</p><p></p>
    </div>
  </div>
</div>&nbsp;
<div class="item text-center">
  <div class="col-sm">
    <img src="textures/spawner.png" alt="textures/spawner.png" style="width: auto;">
    <div class="container">
      <h4><b>Spawner (*1)</b></h4>
      <p>Preis: 10 Mio Coins</p><p></p>
    </div>
  </div>
</div>&nbsp;
</div>

Danke für jede Hilfe. Ich weiß, dass der CSS-Code nicht der schönste ist, allerdings lerne ich die Sprache noch!

Bild zum Beitrag
HTML, Webseite, CSS, HTML5, Webdesign, Webentwicklung, Frontend
1 Antwort
ArdaS716
25.02.2023, 13:46
Mit Bildern
Text unter Bild in HTML hinzufügen?

Ich habe ein Bild. Darunter habe ich ein Text platziert. Allerdings geht der Horizontal von links nach rechts, was es auch soll. Nur soll er da anfangen, wo auch das Bild beginnt und enden, wo das Bild endet. In den zwei Bildern könnt ihr erkennen, wie es es gerade habe und nicht will und wie ich es gerne haben würde. 

<!DOCTYPE html>
<html>
<head>
    <title>Film- und Serienbeschreibungen</title>
  


  <style>
    img {
        display: block;
        margin: 0 auto;
        width: 1000px;
        border-radius: 10px;
    }


    body {
        text-align: center;
    }


    p {
        
    }
  </style>
</head>
  <body>
    <img src="mrrobotscene.jpg">
    <h1>Mr. Robot - Beschreibung</h1>
    <p>Mr. Robot ist eine US-amerikanische Fernsehserie, die von Sam Esmail entwickelt wurde. Die Serie handelt von Elliot Alderson, einem jungen Programmierer, der für eine Cyber-Sicherheitsfirma arbeitet und in seiner Freizeit zum Hacker wird. Elliot leidet unter sozialen Ängsten und Depressionen und verfällt in eine Art Schizophrenie, die von seinem imaginären Freund, Mr. Robot, ausgelöst wird</p>
    
  </body>
</html>
Bild zum Beitrag
PC, Computer, Programm, HTML, Webseite, programmieren, CSS, Java, JavaScript, HTML5, Hacking, Informatik, JQuery, PHP, Programmiersprache, Python, Softwareentwicklung, Technologie, Webdesign, Webentwicklung, Visual Studio Code, Frontend-Entwicklung
3 Antworten
Lenny774
20.02.2023, 09:17
Mit Links
Panorama Bild wie bei Google Maps?

Hi,

Ich habe folgenden Code:

HTML:

<div id="panorama-container">
  <img src="https://media04.meinbezirk.at/article/2016/10/31/6/9445226_XXL.jpg" id="panorama-image" />


  <a href="#" id="fullscreen-button">Vollbildschirm</a>
</div>

CSS:

html, body {
  margin: 0;
  padding: 0;
  height: 100%;
  max-width: 100%;
  overflow: hidden;
}


#panorama-container {
  width: 100%;
  height: 100%;
}


#panorama-image {
  position: absolute;
  left: 0;
  top: 0;
  height: 100%;
  max-width: auto;
  overflow-y: hidden;
}


#fullscreen-button {
  position: absolute;
  top: 20px;
  right: 20px;
  font-size: 16px;
  color: #fff;
  text-decoration: none;
}

JS:

var panoramaContainer = document.getElementById("panorama-container");
var panoramaImage = document.getElementById("panorama-image");
var fullscreenButton = document.getElementById("fullscreen-button");
var position = 0;
var initialX = null;


fullscreenButton.addEventListener("click", function() {
  if (panoramaContainer.requestFullscreen) {
    panoramaContainer.requestFullscreen();
  } else if (panoramaContainer.webkitRequestFullscreen) {
    panoramaContainer.webkitRequestFullscreen();
  } else if (panoramaContainer.mozRequestFullScreen) {
    panoramaContainer.mozRequestFullScreen();
  } else if (panoramaContainer.msRequestFullscreen) {
    panoramaContainer.msRequestFullscreen();
  }
});


document.addEventListener("touchstart", function(event) {
  initialX = event.touches[0].clientX;
});


document.addEventListener("touchmove", function(event) {
  if (initialX === null) {
    return;
  }


  var currentX = event.touches[0].clientX;
  var diffX = currentX - initialX;
  initialX = currentX;


  movePanorama(diffX); /* Change this value to adjust the speed of the movement */


  event.preventDefault();
});


document.addEventListener("touchend", function() {
  initialX = null;
});


function movePanorama(amount) {
  position += amount;
  panoramaImage.style.left =        position + "px";


 
  
}

Nun wird zwar das bild wie bei Google maps angezeigt, also genauer gesagt möchte ich das wenn ich auf meinem Bild nach links wische, dass es sich nach links dreht und rechts genau so. Das Problem ist nur wenn ich zu weit Wische, zeigt er mir ein weißen Screen, aber wie kann man das verhindern.

Vielleicht versteht ihr was ich meine

LG

HTML, Webseite, CSS, JavaScript, Webdesign, Webentwicklung
1 Antwort
schneckenschnel
07.02.2023, 17:29
wieso PHP Parse error: syntax error, unexpected token ";" in /home/emmanuel/Downloads/hp.php on line 11?
<link rel="stylesheet" href="style.css">
<?php
$db = unserialize(file_get_contents('data.php'));
if($db == false){
        $db = array();
}
if($_POST['mail'] == ''){
        if($_POST['name'] == ''){
                if($_POST['pass'] == ''){a
                        if(!array_key_exists($_POST['mail'], $db){
                                $db[$_POST['mail']] = [$_POST['name'], []];
                                file_put_contents('data.php', serialize($db));
                        } 
                }
        }
}
?>
<form action="" method="post">
    <center>
        <label for="firma_name" >name:</label><br>
        <input type="text" class="input" name="name" autocomplete="off"><br>
        <label for="produkte">email:</label><br>
        <input type="text"  class="input" name="mail" autocomplete="off"><br>
        <label for="adresse">pass:</label><br>
        <input type="text"  class="input" name="pass" autocomplete="off"><br>
        <input type="submit" class="anmelde_button" value="anmelden">
    </center>
</form>

wieso PHP Parse error: syntax error, unexpected token ";" in /home/emmanuel/Downloads/hp.php on line 11?

HTML, Webseite, CSS, JavaScript, HTML5, Datenbank, JQuery, MySQL, PHP, Programmiersprache, Webdesign, Webentwicklung, phpMyAdmin
2 Antworten
RotfuchsFinn12
16.12.2022, 23:10
HTML style="" nur erster a href funktioniert?
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="UTF-8">
<title>Autotuning</title>
<link rel="shortcut icon" href="T4Nissan 240 SX BR101.png" type="image/x-icon">
<meta name="description" content="">
<link href="styleSeite1.css" rel="stylesheet">
</head>
<body>
<br><br><br><br><br><br><br><center>
<a href="NFSU.html"><img src="images/NFSU.jpg" width="" height="230" style="align:/></a>
<a href="NFSU2.html"><img src="images/NFSU2.JPG" width="" height="235" style="align:/></a>
<a href="NFSUC.html"><img src="images/NFSUC.JPG" width="" height="241" style="align:/></a>
<a href="NFSC.html"><img src="images/NFSC.JPG" width="" height="237" style="align:/></a>
<a href="NFSMW2005.html"><img src="images/NFSMW2005.JPG" width="" height="230" /></a><br>
<a href="MC3DER.html"><img src="images/MC3DER.JPG" width="" height="250" style="vertical-align:/></a>
<a href="MCLACE.html"><img src="images/MCLACE.JPG" width="" height="250"/></a>
<a href="Gran Turismo 6.html"><img src="images/Gran Turismo 6.jpg" width="" height="250" /></a>
<a href="LEGO.html"><img src="images/LEGO.JPG" width="" height="250" /></a><br>
<a href="Modellbau.html"><img src="images/Modellbau.jpg" width="500" height="" align="top"/></a>
<a href="Sonstige.html"><img src="images/Sonstige.JPG" width="230" height="" align="top"/></a>
<a href="GTA5.html"><img src="images/Coil Cyclone.jpg" width="350" height="" align="top"/></a>
<a href="Silent Hill.html"><img src="images/Halo.JPG" width="185" height="" align="top"/></a>
</body>
</html>

durch ,,style=""´´ werden die Hyperlinks ohne Abstand platziert. Warum werden diese Hyperlinks gruppiert und alle außer dem erstem werden ignoriert? Die Frage ist leicht zu verstehen beim Blick auf den F12-Debugger im Browser. </style> löst das Problem nicht. autotuningyv.square7.ch/Seite1.html. Kann jemand den Quelltext bitte korrigieren?

Computer, HTML, IT, CSS, HTML5, Programmiersprache, Webdesign
5 Antworten

Meistgelesene Beiträge zum Thema Webdesign
Mehr meistgelesene Fragen zu Webdesign