HTML mit CSS und JS Kalender

Puschl · 19 Oktober 2021

Hallo ihr Lieben!

Ich habe ein Problem mit meiner neu geschriebenen HTML Seite. Ich bin so weit fertig (fürs Forum habe ich Dummy Einträge erstellt!) Nur funktioniert der Kalender nicht. Der Kalender ist mit CSS und JS geschrieben (alle Dateien im Anhang!). Dort wo der Kalender erscheinen sollte kommt nur der "Header" und das wars. Ich bin mit meinem Latein am ende und kommt einfach nicht mehr weiter. Ich hoffe ihr könnt mir helfen.

glg Puschl

Gelöschtes Mitglied 36401 · 19 Oktober 2021

Puschl schrieb:
alle Dateien im Anhang!

Und damit haben wir ein Problem. Es wird sich kaum jemand die Zip-Datei downloaden, auf seinem Rechner entpacken und dann den Fehler suchen. Poste einen Link zur Seite und falls diese noch nicht online ist, ändere das, zur Not bei einem Freehoster.

Puschl · 19 Oktober 2021

Nunja die kommt so nicht Online da Sie intern in der Firma betrieben wird. Daher habe ich die Files zur Verfügung gestellt.

Ich kann auch gerne alle Files hier als Kommentar einfügen. Bzw. hier einmal die Index.html solltet ihr die anderen Files auch gerne sehen wollen kann ich diese hier auch so Posten.

index.html


<!DOCTYPE html>
<html lang="de">
<head>
<title>Seitenname</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
* {
  box-sizing: border-box;
}

body {
  color: #000;
  background: #fff;
  font-family: "Verdana";
}

/* Responsive layout - Media*/
@media (prefers-color-scheme: dark) {
  body {
    color: #fff;
    background: #222; 
    }
}

/* Style the header */
.header {
  background-color: #222;
  padding: 20px;
  text-align: center;
}

/* Style the top navigation bar */
.topnav {
  overflow: hidden;
  background-color: #000000;
}

/* Style the topnav links */
.topnav a {
  float: left;
  display: block;
  color: #f2f2f2;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
}
 
/* Change color on hover */
.topnav a:hover {
  background-color: #da291c;
  color: white;
}

/* Create three equal columns that floats next to each other */
.column1 {
  float: left;
  width: 60%;
  padding: 10px;
}

/* Create three equal columns that floats next to each other */
.column2 {
  float: left;
  width: 40%;
  padding: 10px;
}

/* Clear floats after the columns */
.row:after {
  content: "";
  display: table;
  clear: both;
}

/*ASIDE*/
.aside {
  float: left;
  height: 50%;
  padding: 10px;
}

/* Responsive layout - makes the three columns stack on top of each other instead of next to each other */
@media screen and (max-width:600px) {
  .column {
    width: 100%;
  }
}
</style>
<!--Bootstrap JS, Popper.js, and jQuery-->
<!--<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>-->
<!--<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js" type="text/javascript"></script>-->
<!--<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" type="text/javascript"></script>-->
<link rel="stylesheet" href="Script/semantic.min.css" type="text/css">
<script href="Script/jquery.min.js" type="text/javascript"></script>
<script src="Script/moment.min.js" type="text/javascript"></script>
<link rel="stylesheet" href="Script/fullcalendar.min.css" type="text/css">
<script src="Script/fullcalendar.min.js" type="text/javascript"></script>
<script src="Script/semantic.min.js" type="text/javascript"></script>
<script src="Script/switch.js" type="text/javascript"></script>
<script src="Script/Kalender.js" type="text/javascript"></script>
</head>
<body>



<div class="header">
    <h1 align=center font="Verdana"><img src="Fotos/A1.png" width="80" height="80">&nbsp; Titel</h1>
</div>

<div class="topnav">
    <a href="http://www.orf.at" target="_blank"></i><font color="YELLOW">ORF.at</font></a>
    <a href="" target="_blank"></a>
    <a href="http://www.a1.net" target="_blank"><i class="fa fa-shield"></i>A1.net</a>
    <a href="https://www.bild.de" target="_blank">Bild.de</a>
</div>

<div class="row">
    <div class="column1">
        <table>
            <tr>
                <th width="210" height="110"><h2>Punkt 1</h2></th>
                <th width="210" height="110"><h2>Punkt 2</h2></th>
                <th width="210" height="110"><h2>Punkt 3</h2></th>
                <th width="210" height="110"><h2>Punkt 4</h2></th>
                <th width="210" height="110"><h2>Punkt 5</h2></th>
            </tr>
            <tr>
                    <!-- Punkt 1 -->
                    <td><center>
                        <select id="select" onchange="var win = window.open(this.value, '_blank');win.focus();">
                            <option value="">ausw&auml;hlen</option>
                            <option value="">Punkt 1.1</option>
                            <option value="">Punkt 1.2</option>
                            <option value="">Punkt 1.3</option>
                        <select></center>
                    </td>
                    
                    <!-- Punkt 2 -->
                    <td><center>
                        <select id="select" onchange="var win = window.open(this.value, '_blank');win.focus();">
                            <option value="">ausw&auml;hlen</option>
                            <option value="">Punkt 2.1</option>
                            <option value="">Punkt 2.2</option>
                            <option value="">Punkt 2.3</option>
                        </select></center>
                    </td>
                    
                    <!-- Punkt 3 -->
                    <td><center>
                        <select id="select" onchange="var win = window.open(this.value, '_blank');win.focus();">
                            <option value="">ausw&auml;hlen</option>
                            <option value="">Punkt 3.1</option>
                            <option value="">Punkt 3.2</option>
                            <option value="">Punkt 3.3</option>
                        </select></center>
                    </td>
                    
                    <!-- Punkt 4 -->
                    <td><center>
                        <select id="select" onchange="var win = window.open(this.value, '_blank');win.focus();">
                            <option value="">ausw&auml;hlen</option>
                            <option value="">Punkt 4.1</option>
                            <option value="">Punkt 4.2</option>
                            <option value="">Punkt 4.3</option>
                        </select></center>
                    </td>

                    <!-- Punkt 5 -->
                    <td><center>
                        <select id="select" onchange="var win = window.open(this.value, '_blank');win.focus();">
                            <option value="">ausw&auml;hlen</option>
                            <option value="">Punkt 5.1</option>
                            <option value="">Punkt 5.2</option>
                            <option value="">Punkt 5.3</option>
                        </select></center>
                    </td>
            </tr>
        </table>
    </div>

  <div class="column2">
<!-- Kalender -->
    <div class="ui container">

  <div class="ui menu">
    <div class="header item"></div>
    <div class="header item"></div>
    <div class="header item"></div>
    <div class="header item"></div>
    <div class="header item"></div>
    <div class="header item"></div>
    <div class="header item">Kalender</div>
    <div class="header item"></div>
    <div class="header item"></div>
    <div class="header item"></div>
    <div class="header item"></div>
    <div class="header item"></div>
    <div class="header item"></div>
 </div>

  
</div>

<br/>
<div class="ui container">
  <div class="ui grid">
    <div class="ui sixteen column">
      <div id="calendar"></div>

    </div>
  </div>
</div>

</div>
</div>

</body>
</html>

basti1012 · 19 Oktober 2021

Ich muss jetzt erstmal 2 Stunden weg.
Ich kann dir aber auf der schnelle sagen, dass da einiges nicht ganz richtig ist.
Teste deine Seite mal hier

The W3C Markup Validation Service

W3C's easy-to-use markup validation service, based on SGML and XML parsers.

validator.w3.org

Und entferne die Fehler.
Danach kann man dir auch helfen , nur so ist da noch viel zu viel an alten HTML Code drin und halt andere Fehler.
Deine Browser Konsole schmeißt auch Fehler raus. Die auch noch beseitigen.

Puschl · 19 Oktober 2021

Ich versuche es mal! Danke für den Link ich bin mal dran am aussbessern!

Puschl · 19 Oktober 2021

Danke dir Sempervivum!
Ich bin noch am Fehler ausbessern. Sobald ich diese erledigt habe schau ich mir die Zeile an!

Ja Sorry wegen deim einfügen habe das als erstes gefunden und dachte das wird passen :(

basti1012 · 19 Oktober 2021

Sempervivum schrieb:
indem Du die Kommentarzeichen entfernst - voila, der Kalender ist da.

Oder das href
<script href="Script/jquery.min.js"></script>
gegen src tauschen
<script src="Script/jquery.min.js"></script>
und wenn man schon dabei ist das
type="text/javascript"
gleich mit löschen

Puschl · 19 Oktober 2021

Das HREF hat geholfen in der Zeile <script href="Script/jquery.min.js" type="text/javascript"></script>

Jetzt zeigt er mir den Kalender an was super ist vielen dank für eure Hilfe! jetzt habe ich nur eine frage noch.
Wie kann ich die Spalten genau übereinander bekommen bzw. den Scroolbalken weg??

Puschl · 20 Oktober 2021

Sempervivum schrieb:
Dieses CSS funktioniert bei mir, die Scrollbar verschwindet:

Code:

<style> .fc-row.fc-widget-header { border-right-width: 0 !important; margin-right: 0 !important; } .fc-scroller.fc-day-grid-container { overflow: auto !important; height: auto !important; } </style>

Ich habe auch in den Optionen gesucht und height sowie contentHeight gefunden aber damit habe ich sie nicht weg bekommen.

Super danke dir!!!!

Ein Theme habe ich noch dann ist es erledigt. Wenn ich jetzt die Hintergrundfarbe der Seite ändern will (Header schaffe ich, TopNav schaffe ich) bekommt diese keine neue Farbe. Nur welches Skript übersteuert die angaben im CSS??

Ich dachte die Hintergrundfarbe ändere ich in diesem Bereich

<!DOCTYPE html>
<html lang="de">
<head>
<title>A1 - Enterprise Storage</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
* {
box-sizing: border-box;
}

body {
color: #000;
background: #fff;
font-family: "Verdana";
}

/* Responsive layout - Media*/
@media (prefers-color-scheme: dark) {
body {
color: #fff;
background: #222;
}
}

Puschl · 20 Oktober 2021

Sempervivum schrieb:
Du bindest das Script/semantic.min.css nach deinem eigenen CSS ein, daher überschreibt es das. Ändere die Reihenfolge und es wird funktionieren.

Meinst du so???

<!DOCTYPE html>
<html lang="de">
<head>
<title>A1 - Enterprise Storage</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="Script/semantic.min.css" type="text/css">
<style>
* {
box-sizing: border-box;
}

body {
color: #fff;
background: #848484;
font-family: "Verdana";
}

/* Responsive layout - Media*/
@media (prefers-color-scheme: dark) {
body {
color: #fff;
background: #222;
}
}

Puschl · 20 Oktober 2021

Bei mir war dann die ganze Schrift weiß mit weißem Hintergrund in den Auswahlfeldern.

Puschl · 21 Oktober 2021

Hab den Fehler gefunden! Danke dir!! War ein gedankenfehler von mir!

Puschl · 21 Oktober 2021

So einen Punkt hätte ich noch den ich nicht hinbekomme :(

Wie kann ich eine Suche einbauen auf die Seite?

basti1012 · 21 Oktober 2021

Eine suche die die ganze Homepage durchsucht, oder eine Suche die nur im Kalender sucht?

Puschl · 25 Oktober 2021

basti1012 schrieb:
Eine suche die die ganze Homepage durchsucht, oder eine Suche die nur im Kalender sucht?

Eine die nur die Seite durchsucht der Kalender muss nicht durchsucht werden.

Dazu ist mir etwas aufgefallen. Wenn ich im Drop Down Menü etwas auswähle geht die Seite normal auf, so wie sie soll. Lediglich wenn ich die gleiche Auswahl nochmals anklicken will geht das nicht bevor ich nicht etwas anderes vorher auswähle. Könnte ich das irgendwie ändern?

GLG

Puschl · 25 Oktober 2021

Sempervivum schrieb:
So etwas habe ich früher schon Mal gemacht, ich werde es heraus suchen. Wie sollen die Fundstellen denn hevor gehoben werden?

Das ist eine gute Frage. Ginge es als Liste die aufgeht und ich direkt auf den Namen Klicke und der Link dann aufgeht der im Menü dazu hinterlegt ist?

Puschl · 25 Oktober 2021

Vielleicht habe ich mich auch fals Ausgedrückt.
Meine Idee wäre das wenn ich nach "XYZ" Suche dann wäre das unter dem punkt im Drop Down "ABC" und wenn ich jetzt danach suche dachte ich kann er so suchen das er den Text+den Link herausfindet und dann anzeigt und ich kann direkt darauf klicken. (Ich hoffe es ist jetzt verständlicher)

Puschl · 2 November 2021

Grundsätzlich gibt es nur eine Seite mehr gibt es nicht und ja der hit wäre wenn ich auf den Text Klicke das der Link dann aufgeht.

Puschl · 3 November 2021

Die Links sind alle in den DropDown Menüs als <option value="LINK">Text</option> eingetragen.
Nein die Links in den DropDown Menüs sind alle Links die auf fremde Seiten gehen. Diese Seiten haben mit der Homepage nichst zutun.

Als Beispiel:
Link 1 --> http://www.bild.de
Link 2 --> http://www.krone.at
Link 3 --> http://www.laola1.at
usw.....

HTML mit CSS und JS Kalender

Neues Mitglied

Anhänge

Gelöschtes Mitglied 36401

Guest

Neues Mitglied

Senior HTML'ler

Neues Mitglied

Neues Mitglied

Senior HTML'ler

Neues Mitglied

Neues Mitglied

Neues Mitglied

Neues Mitglied

Neues Mitglied

Neues Mitglied

Senior HTML'ler

Neues Mitglied

Neues Mitglied

Neues Mitglied

Neues Mitglied

Neues Mitglied