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 AngriffsCrew
11.04.2023, 18:25
Mit Bildern
HTML CSS Website Footer wird im Container angezeigt, obwohl er nicht drin ist?

Hallo,

Ich "programmiere" gerade ein wenig mit HTML und CSS und baue eine Website mit einem Head, einer Main und einem Footer. Mein Problem ist, dass alle Elemente der Website nach der Main (bei mir heißt sie "Container") trotzdem noch innerhalb des Containers angezeigt werden. Somit ist bei mir der Footer im Container Main, obwohl der Container vorher schon geschlossen wurde.

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

HTML CODE: 

<!DOCTYPE html>
<html>
 <head>
  <title>Aufgabe 1</title>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <link rel="stylesheet" type="text/css" href="style.css" />
 </head>
 <body>
  <header>
   <header1 class="item1">
    <h2>FeWos</h2>
   </header1>
  </header>
  <div" class="container">
   <div class="b1">
    <div>
     <h1>Item 1</h1>
    </div>
    <div class="bild1">
     <img src="pingu.png" width="50%" height="50%">
    </div>
   </div>
   <div class="b1"><br>Box 2</div>
   <div class="b1"><br>Box 3</div>
   <div class="b1"><br>Box 4</div>
   <div class="b1"><br>Box 5</div>
   <div class="b1"><br>Box 6</div>
  </div>
  <footer>
   <p>Hallo</p>
  </footer>
 </body>
</html>

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

CSS CODE: 

body {
  margin: 0;
}
header {
  height: 120px;
  background-color: rgb(43, 43, 43);
  display: flex;
  justify-content: space-evenly;
  align-items: center;
}
.container {
  border: 3px solid;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 90px;
  padding: 90px;
}
.b1 {
  display: flex;
  background-color: rgb(93, 161, 224);
  width: 30%;
  height: 500px;
  flex-grow: 1;
  transition: transform 0.2s ease-out;
  border-radius: 20px;
}
.b1:hover {
  transform: scale(1.05);
}
.bild1 {
  padding-left: 20px;
  padding-top: 20px;
  padding-bottom: 20px;
  padding-right: 20px;
  width: auto;
  height: auto;
}
footer {
  background-color: rgb(43, 43, 43);
  width: 100%;
  height: 120px;
  padding: 0px;
}

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

Wie man sehen kann wird der "container" mit </div> abgeschlossen, aber der Footer ist trotzdem im Container. Hoffe mir kann jemand bei dem Problem helfen.

Auf dem Bild kann man das auch ganz gut sehen. Das anthrazit farbige soll der Footer sein und dieser liegt innerhalb des Containers, welcher zur Sichtbarkeit eine Umrandung hat.
Würde mich echt freuen, wenn mir jemand weiterhelfen kann. Hab auch Chat GBT schon gefragt, aber Chat GPT sagt, dass der Code ganz normal ist und, dass der Footer nicht im Container ist.

Bild zu Frage
HTML, Webseite, CSS, Webentwicklung, Footer
2 Antworten
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 SohnSchais
09.04.2023, 13:39
JS - Warum funktioniert der Button nicht Richtig?

Ich wollte ein simples Spiel mit JS programmieren und wollte einen Refresh des Bildschirms einfügen. An sich funktioniert das auch, jedoch reagiert der Button nicht immer. Je schneller der Refresh erfolgt, desto schlechter Funktioniert der Button. Kann mir da vielleicht jemand helfen?

<!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>
    <link href="miner.css" rel="stylesheet">
    <script src="miner.js"></script>
</head>
<body>
    <div class="monitor" id="monitor">
        <h1>Mine Tycoon</h1>
        <div>Mines: <font id="minesCounter">0</font></div><br>
        <div id="buyMineButton">
            <p class="button" onclick="buyMine()">Buy mine Cost: <font id="minesPrice">1</font></p>
        </div>
    </div>
</body>
</html>

body{
    background-color: #393939;
    color: #ffffff;
}


h1{
    text-align: center;
}


.button{
    height: auto;
    width: 180px;
    border-radius: 15px;
    outline: 2px solid red;
    outline-offset: 4px;
    text-align: center;
}
.buttonGreen{
    height: auto;
    width: 180px;
    border-radius: 15px;
    outline: 2px solid green;
    outline-offset: 4px;
    text-align: center;
}

var money = 100;


var mines = 0;
var minesPrice = 1;
var miners = 0;


var coal = 0;
var copper = 0;
var iron = 0;
var cobalt = 0;
var gold = 0;
var platinum = 0;
var diamond = 0;


var reload = 10;


function buyMine(){
    mines++;
    money -= minesPrice;
    minesPrice = minesPrice*2;
}


function loop(){
    
        setInterval(function(){
            refreshScreen();
        },1000/reload)
    
}


function refreshScreen(){
    minesCounter.innerHTML = mines;
    if(money < minesPrice){
        document.getElementById("buyMineButton").innerHTML = "<p class='button'>Buy mine Cost: <font id='minesPrice'></font></p>"
    }else{
        document.getElementById("buyMineButton").innerHTML = "<p class='buttonGreen' onclick='buyMine()'>Buy mine Cost: <font id='minesPrice'></font></p>"
    }
    document.getElementById("minesPrice").innerHTML = minesPrice;
}


loop();
HTML, CSS, JavaScript
1 Antwort

Meistgelesene Fragen zum Thema CSS
Mehr meistgelesene Fragen zu CSS