Verwandte Themen

Frage
von DrakeKL
16.05.2023, 08:10
HTML Kalender ohne JavaScript oder PHP erstellen?

Hallo zusammen,

ich möchte mit HTML einen Kalender erstellen, der allerdings nicht statisch sein soll. Damit meine ich nicht unbedingt, dass jeder manuell auf der Webseite Daten eintragen kann, sondern dass man zwischen den Monaten navigieren kann. Zum Beispiel innerhalb einer Zeitspanne von August 2022 bis August 2025 oder so. Dabei soll der Kalender beim Aufrufen der Seite, wenn möglich, den aktuellen Monat zeigen und durch Klicken auf ein Symbol (oder eventuell Drücken der Links- / Rechtstaste auf der Tastatur) kann man auf den vorherigen oder nächsten Monat wechseln.

Ich möchte das - verständlicherweise - nicht durch das Erstellen von 37 verschiedenen HTML-Dokumenten erreichen, durch die man dann mit Hyperlinks zwischen diesen Seiten hin und herwechseln kann.

Das Problem ist, dass ich sowohl von JavaScript als auch von PHP absolut keine Ahnung habe und auf keinen Fall irgendwo im Internet einen fünfzig-Zeilen-Code (JavaScript, PHP oder sonst irgendeine Programmiersprache) kopieren will, den ich zu 99,9% selbst nicht verstehen würde.

Weiß einer, wie ich so etwas nur mit HTML und CSS (und eventuell, wenn es sein muss, auch mit Java) hinbekomme?

P. S. Bitte gebt mir keine Antworten vom Stil "lerne einfach JavaScript". Das ist keine hilfreiche Antwort, da ich es eben ohne JavaScript erreichen will!

Computer, Technik, HTML, IT, Webseite, Kalender, CSS, JavaScript, Informatik, interaktiv, PHP, Programmiersprache, Softwareentwicklung, Technologie, Webdesign
8 Antworten
Frage
von alexthenr14
25.04.2023, 18:06
Mit Links
HTML Quill WYSIWYG, wie Designe ich es richtig?

Der Bereich zum editieren springt immer nach unten, schuld daran ist ein Skript teil, nämich  

<script src="https://cdn.quilljs.com/1.0.0/quill.js"></script>
<script>
   var editor = new Quill('#editor', {
    modules: { toolbar: '#toolbar' },
    theme: 'snow'
   });
  </script>

-----------------------------------------------------------------------------

<!DOCTYPE html>
<html lang="en">
<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">
  <title>Document</title>
   <style>
    body{
      margin: 0cm;
      padding: 0cm;
      font-size: 16px;
    }
    p {
      font-size: 16px;
    }
    header{
      margin: 0cm;
      padding: 0cm;
      width: 100%;
      position: relative;
      background-color: palevioletred;
    }
    footer{
      margin: 0cm;
      padding: 0cm;
      width: 100%;
      background-color: palevioletred;
    }
    #sidebar{
      margin: 0cm;
      padding: 0cm;
      float: left;
      min-height:100vh ;
      overflow-x: hidden;
      width: 150px;
      background-color: aliceblue;
      overflow-y: scroll;
      -ms-overflow-style: none; 
      scrollbar-width: none; /* Firefox */
    }
    #sidebar::-webkit-scrollbar {
      display: none;
    }
    #rechts{
      margin: 0cm;
      padding: 0cm;
      width: 100%;
       
      min-height: 100vh;
      background-color: azure;
    }
  </style>
  <link href="https://cdn.quilljs.com/1.0.0/quill.snow.css" rel="stylesheet">
</head>
<body>
  <header>a</header>
  <div id="sidebar">
    <p>Bereich1</p>
    <p>Bereich2</p>
    <p>Bereich3</p>
    <p>Bereich4</p>
    <p>Bereich5</p>
    <p>Bereich6</p>
    <p>Bereich7</p>
    <p>Bereich8</p>
    <p>Bereich9</p>
  </div>
   
<div id="rechts">
  <div id="toolbar">
  <button class="ql-bold">Bold</button>
  <button class="ql-italic">Italic</button>
    </div>
   <div id="editor">
    <p>Hello World!</p>
  </div>
</div>
   
  <script src="https://cdn.quilljs.com/1.0.0/quill.js"></script>
  <script>
   var editor = new Quill('#editor', {
    modules: { toolbar: '#toolbar' },
    theme: 'snow'
   });
  </script>
  <footer>a</footer>
</body>
</html>
HTML, Webseite, CSS, JavaScript, HTML5, PHP, Programmiersprache, Webdesign, Webentwicklung, WYSIWYG, Frontend, Visual Studio Code
1 Antwort
Frage
von User594139
22.04.2023, 15:46
Mit Umfrage
Ich habe eine gute Idee für eine Webseite, die es noch nie so gab. Was könnt ihr mir empfehlen?

Das Problem ist, dass ich keine Ahnung von Programmieren habe, ich habe es mal versucht, aber es war extrem langweilig und hat nicht mehr geklappt ab einem Punkt.

Allerdings kenne ich mich aus in Photoshop und Illustrator. Findet ihr es eine gute Idee die Webseite in Notepad++ zu schreiben und nach 2 bis 5 Jahren wenn ich fertig bin sie zu veröffentlichen? Ich denke wenn ich die gut hinkriege kann ich Millionär werden, aber bis die Webseite fertig ist, dauert es ewig und etwas riskieren will ich auch nicht.

Ich hatte vor lieber alles alleine mit Hilfe von YouTube Tutorials und Internet Recherche die Webseite zu bauen. Es ist mehr oder weniger komplex, für einen Anfänger wie mich, schwer, aber mit meinem Englisch und meiner Zielstrebigkeit müsste das doch gehen.

Erst alles prüfen ob es funktioniert, danach online stellen und in Werbung investieren. Danach passiert alles von selbst und mit ein bisschen mehr Geld kann ich dann nach Full Stack Developern suchen und einstellen. Habt ihr was auszusetzen an meinem Plan? ^^

Allerdings könnte es auch 10 Jahre dauern bis ich damit fertig bin. Aber wie gesagt, die Zeit ist mir nicht so wichtig.

Mach doch einfach! 78%
Ich habe eine bessere Idee. 11%
Ja ist gut so! 11%
Homepage, App, Selbständigkeit, Online-Shop, HTML, Webseite, CSS, JavaScript, Gewerbe, Webdesign, Webentwicklung
4 Antworten
Frage
von rhavin
13.04.2023, 10:41
Mit Links
position:sticky – Transparent clip?

https://jsfiddle.net/vkxdshoL/

Kann ich den Sticky-Header dazu bringen, dass er die darunter scrollenden Bereiche clippt, aber den Bildhintergrund nicht?

update:

Ich habe eine etwas komplizierte Lösung gefunden:
https://jsfiddle.net/49jd1szc/1/

Das geht ohne JS, wenn man auf den Alpha-Kanal verzichtet, alles auf schwarzem Background erstellt und dann mit dem background-blend-mode:screen arbeitet. Allgemeingültig ist das leider nicht.

* {
  margin:0;
  padding: 0;
}

body {
  font-family: arial;
  text-align: justify;
  background: url("https://www.nasa.gov/sites/default/files/thumbnails/image/1_icon_olympus_multi-purpose_isru-based_lunarconstructionsystem_concept-render_nov2022_for_icon_release.jpg");
  color:#fff;
  background-size: cover;
}

article {
  background:#4000;
}

article > header {
  background:#c8f8;
  position:sticky;
  height:2rem;
  top:0;
}
article > footer {
  background:#cf88;
  position:sticky;
  bottom:0;
}


<html><head>
</head><body>
  <header>
    <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.</p>
  </header>
  <article>
    <header>Should be sticky, but clip text</header>
    <p>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. 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>
    <p>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. 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>
    <p>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. 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>
  <footer>This should be at the bottom</footer>
  </article>
</body></html>
HTML, Webseite, CSS, HTML5, Webdesign, Webentwicklung
1 Antwort
Frage
von rhavin
12.04.2023, 15:44
Mit Links
CSS+Flex mit ::before – wie bekomme ich das Padding ausgeglichen?

Ich hab nen Paragraph, dem ich mit dem Pseudoelement ::before einen weiteren Bereich verpassen möchte. und zwar als display:flex-box. Das klappt auch, solange ich ohne padding arbeite. Brauch ich aber.

https://jsfiddle.net/ne0mrwds/

wie bekomme ich den blauen Bereich oben und unten so hin, dass er den den ganzen Paragraph und nicht nur den Textbereich selber ausfüllt?

article {
  display:flex-box;
  align-items:stretch;
  border:1px solid #0f0;
}
p {
  display:inline-flex;
  border:1px solid #0ff;
  width:100%;
  flex-grow:0;
  text-align:justify;
  padding:0.5em 0em;
}

p::before {
  content:"";
  display:inline-flex;
  background:#88f;
  flex-grow:1;
  flex-shrink:0;
  flex-basis:20%;
  margin-right:0.5em;
}

 <article>
  <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. 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>
</article>
HTML, CSS, HTML5, FLEX, Webdesign
1 Antwort
Frage
von xxAnniexx
11.04.2023, 17:26
Mit Bildern
Mit Links
CSS Überschrift herabsenken?

Hallo, ich versuche mich zurzeit an einer Challenge, eine Webseite mittels CSS nachzugestalten. Ich kann die Überschrift leider nicht mittels height senken, da dies Auswirkungen auf die restlichen Textblöcke hat. Ich werde noch verrückt, ich sitze seit einer Stunde daran, probiere und probiere und komme einfach nicht weiter! Kann mir bitte jemand helfen?

Dies ist ein Bild meines derzeitigen Standes:

So soll die Webseite eigentlich aussehen: Wie man erkennen kann, befindet sich die Überschrift auf Höhe des Bildes.

Dies ist mein Code: 


<!DOCTYPE html>
<html lang="en">
  <head>
    <title>live and let learn</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">

    <style>

      #header p {text-align: center; font-size: 30px }
     
      #content-side {float: left; }
      dt {font-size:20px}
      #header h1 {height: 5px}

      #content-side a {  pointer-events: none;
      cursor: default;
      text-decoration: none; color: grey }

      #content-main {margin-left: 400px; width:490px; }
      #content-main a {cursor: default;
      text-decoration: none; color: grey }
      h2 {font-size: 30px; }

      #logo h1 {visibility:hidden}
      #content-side {float: left}

    </style>

  </head>
  <body>

    <div id="header">
      <blockquote>
        <p>Learning is not a privilege, it's a right.</p>
      </blockquote>
      <div id="logo">
        <h1>live and let learn</h1>
        <img src="live-and-let-learn.jpg" alt="live and let learn">
      </div>

    </div>

    <div id="content">
      <div id="content-side">
        <dl>
          <dt><a href="services/">Services</a></dt>
          <dd>Learning and facilitation through TAFE WSI</dd>

          <dt><a href="learning/">Personal Learning</a></dt>
          <dd>Learning from the network</dd>

          <dt><a href="resources/">Resources</a></dt>
          <dd>Browse through resources ...</dd>

          <dt><a href="about/">About</a></dt>
          <dd>What am I about? Personal interests and other stuff</dd>
        </dl>
      </div> <!-- content-side -->

      <div id="content-main">
        <h2>Please update your links!</h2>
        <small>Wednesday, October 12th, 2005</small>

        <p>New blog address: <a href="http://liveandletlearn.net/learning/">
          http://liveandletlearn.net/learning/</a>
        </p>
        <p>During the last holidays I've been busy moving my blog from
          <a href="http://www.absoludity.net/blog/">absoludity.net</a> to
          <a href="http://liveandletlearn.net/learning/">liveandletlearn.net</a>
          ... why? Good question! Part of the Web Design course that I
          facilitate is a client project where participants are required to
          develop a site from start to finish - and i'd been a while since
          I'd been through that process myself - so what better a project
          for the holidays (next to my gardening project to get me <em>away</em>
          from the computer)!
        </p>

        <p>You'll notice that the site itself is still in prototype stage,
          but the blog is all up and running so I'm going to be using
          liveandletlearn from now on. <strong>Please update your
          bookmarks/feeds</strong>! And please give me any feedback
          you've got time for at
          <a href="http://liveandletlearn.net/learning/">liveandletlearn.net</a>!
        </p>
    </div> <!-- content-main -->
    </div>  <!-- content -->
  </body>
</html>
Bild zu Frage
HTML, Webseite, CSS, Webdesign
1 Antwort
Frage
von 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 zu Frage
HTML, Webseite, CSS, WordPress, Hosting, Webdesign, Webentwicklung, Webseitenoptimierung, Elementor, ionos
2 Antworten

Meistgelesene Fragen zum Thema Webdesign
Mehr meistgelesene Fragen zu Webdesign