Was denn nun?
Wenn ich etwas mit der ID "drp" hovere soll sich die Class "nav-content" die Höhe ändern
oder
beim Hovern von z.B .nav-content soll sich z.B. .nav-item ändern
... ist aber auch egal... in deinem Code geht beides nicht mit CSS.
Um ein Element mit der Klasse z.B. .nav-item durch hovern über ein Element mit der Klasse z.B. .nav-content zu verändern, muss .nav-item ein Geschwister- oder Kindelement von .nav-content sein.
if(isset($_POST["submit"]))
An welcher Stelle im Code sendest du eine Postvariable name="submit"?
Ohne die wird der Code in deinem if-statement nicht ausgeführt... und es passiert - nichts!
Ich verstehe deine Logik nicht. Was soll das sein - ein Dropdown-Menü?
Unter welchem Menüpunkt soll das Dropdown beim hovern erscheinen?
So wie du es aufgebaut hast und erklärst, soll beim hovern über Menüpunkt 'Formularcenter' das Dropdown unter dem Menüpunkt 'Schulprofil' auftauchen.
Das geht so mit CSS gar nicht. Dazu müsstest du Java Script verwenden - aber ich denke, du willst das Dropdown unter dem Menüpunkt, der unter der Maus ist... oder?
Wie sieht der Code aus (HTML / CSS)?
In welchem Verhältnis stehen #drp und .nav-content zueinander (Geschwister... Parent - Child)?
Ohne nähere Angaben ist die Frage nicht zu beantworten.
Kann ich so nicht bestätigen... bei mir im IE11 sieht alles richtig aus (auch im Chrome und Opera kein Problem).
Einziger Unterschied, ich habe dein Stylesheet ins HTML Dokument eingebunden (<style>...</style>) , was aber keine Auswirkungen auf das Erscheinungsbild haben sollte.
Der IE sollte das 'vw' unterstützen
https://caniuse.com/#feat=viewport-units
.. sollte also auch daran nicht liegen.
Einen Fehler habe ich aber gefunden... in deinem Stylesheet zu
#logobox h1{
...
border-bottom: 0.05 gray solid;
...
}Das ist nicht korrekt! Nur der Wert 0 braucht keine Einheit.... hier musst du 0.05EINHEIT verwenden.
Aber auch das ist wohl nur ein Nebenbefund... sollte, wenn überhaupt, mit allen Browsern den gleichen Fehler erzeugen.
Es könnte was damit zu tun haben, dass bei der Verlinkung des Stylesheets mit der für lokale Pfade übliche Form 'css\stylesheet.css' mit Backslash genutzt wird.
Bitte testen, ob das Verhalten der Seite sich ändern wenn im Link ein Slash 'css/stylesheet.css' benutzt wird.
Das kann so auch nicht funktionieren, weil deine Variable noch nicht definiert ist, wenn du sie mit innerHTML einfügen willst.
Warum kannst du nicht einfach alles in einen Script schreiben - anstatt es in zwei Scripte aufzuteilen?
Und wo liegt das Problem bei WordPress? Wo fügst du die Scripte ein und warum 'geht das bei WP nicht anders?
Versuche es mal mit PHP!
Überprüfe bitte die Syntax deiner HTML Tags.. es müsste </div> und nicht <div/> heißen:
<div class="top">
<h1>KOOPA-TROOPA</h1>
<img id="koopa" src="media/site/koopa_troopa_4.png" alt="koopa">
<div/>
Wenn du die id="koopa" mit 'float' positionierst, dann musst du das nächst folgende Element 'unfloaten'
div.nav {
clear: both;
}Und warum 'div class="nav"' - im HTML 5 ist <nav> </nav> die bessere Auszeichnung für die Navigation!
In welchem Frame? Ein IFrame oder hat die Seite ein Frame-Layout?
Befindet sich der Link in diesem Frame?
Und vielleicht hilft das schon mal weiter...
Das Problem besteht eigentlich nur darin, dass ein IFrame Breite und Höhe als Formatierung vorgegeben haben muss...
also etwa sowas
.maps iframe {
width: 900px;
height: 500px;
}Dann kommt der Punkt, an dem die 900px zu breit werden - und wie du es schon richtig machst, kommt dann die @media-Query.
Das Festlegen der Breite sollte dann mit vw erfolgen... width: calc(100vw - 30px)
Die Leerzeichen müssen in der Formel drin bleiben, sonst funktioniert das nicht
und für die Höhe muss dann das Seitenverhältnis, dass du mit dem Ursprungs-IFrame hattest, ... 900x500... zur Berechnung genutzt werden.
In diesem Fall ist als die Höhe 0,56 * Breite.
Das geht dann wieder mit calc zu berechnen... height: calc(calc(100vw - 30px) * 0.56);
Da muss ich Arne Drews Recht geben - erst laufen lernen bevor man sich aufs Fahrrad setzt.
Aber zu deinem Problem... ich habe da mal deinen Code etwas angepasst und auf 'Flexbox' (https://css-tricks.com/snippets/css/a-guide-to-flexbox/) umgestellt.
Damit umschifft man ganz elegant die Probleme, die du mit deinem starren Layout hast. Außerdem ist so ein Flexbox Layout (beinahe) zu 100% responsiv, passt sich also vom Desktop bis zum Handy automatisch an.
Der HTML Code dazu:
<!DOCTYPE html>
<html lang="de">
<head>
<title>CSS Bilder animation</title>
<meta charset="UTF-8">
<link href="style.css" rel="stylesheet">
</head>
<body>
<div id="wrapper">
<header>
<div class="logo"><img src="logo.png" alt=""></div>
<nav>
<ul class="main-nav">
<li class="aktiv">
<a href="index.html">HOME</a>
</li>
<li>
<a href="Info.html">ABOUT</a>
</li>
<li>
<a href="Bilder.html">GALLERY</a>
</li>
<li>
<a href="contact.html">CONTACT</a>
</li>
</ul>
</nav>
</header>
<main class="Hero">
<h1>Herzlich Willkommen!</h1>
</main>
<footer class="button">
<ul>
<li>
<a href="Info.html" class="btn btn-one">About us!</a>
</li>
<li>
<a href="contact.html" class="btn btn-two">Contact us!</a>
</li>
</ul>
</footer>
</div>
</body>
</html>Und das passende CSS:
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
background-color: #ccc;
background-image: url(wallpaper.jpg);
background-position: center;
background-size: cover;
}
#wrapper {
display: flex;
flex-direction: column;
align-content: space-between;
font-family: monospace;
background-color: rgba(150, 150, 150, 0.8);
width: 100%;
max-width: 1200px;
height: 100vh;
margin: 0px auto;
}
header {
display: flex;
flex-direction: row;
justify-content: space-between;
background-color: rgba(150, 200, 150, 0.8);
}
.main-nav {
list-style: none;
margin-top: 30px;
}
.main-nav li {
display: inline-block;
}
.main-nav li a {
color: white;
text-decoration: none;
padding: 5px 20px;
font-family: sans-serif;
font-size: 15px;
border: 1px solid transparent;
}
.main-nav li.aktiv a {
border: 1px solid white;
}
.main-nav li a:hover {
border: 1px solid white;
}
.logo img {
width: 120px;
height: auto;
}
.Hero {
width: 100%;
margin: auto;
}
h1 {
color: white;
text-transform: uppercase;
font-size: 55px;
text-align: center;
font-family: sans-serif;
}
footer {
background-color: rgba(150, 150, 255, 0.8);
text-align: center;
padding: 6px;
}
.button {
width: 100%;
height: auto;
list-style: none;
}
.button li {
display: inline-block;
}
.button li a {
border: 1px solid white;
color: white;
text-decoration: none;
padding: 5px 20px;
font-family: sans-serif;
font-size: 15px;
}
.btn-one {
background-color: rgba(10,20,30,0.5);
font-family: sans-serif;
}
.btn-two {
font-family: sans-serif;
}
.btn-two:hover {
background-color: sienna;
transition: all 0.5s ease-in;
}
.btn-one:hover {
background-color: sienna;
transition: all 0.2s ease-in;
}Zur besseren Übersicht habe ich hier die unterschiedlichen Elemente (#wrapper, header, footer) etwas farblich hinterlegt.
Viel Spaß... ach ja... HTML5 ist der aktuelle Standard.
Ja.. die selbe Ursache :(! Mit diesen absolute positionierten div's hat man mehr Probleme, als dass die für irgendwas gut sind. Jetzt hast du wegen der Navigation oben das div mit -1 in Hintergrund gerückt... damit liegen aber auch die Inhalte von 'Hero' im Hintergrund - blöde Sache.
Hast du überhaupt einen Plan, wie mal die Gesamtheit der Seite aussehen soll? Header... Main... Footer... ?
Dann könnte man auch besser sagen, wie du es besser machen kannst.
Nach deinem Code zu urteilen machst du ja den typischen Fehler, dass du versuchst irgendwie mit festen Größen das Layout so hinzubiegen, dass es auf deinem Bildschirm passt... aber das ist in aller Regel nicht gut! 90% der Betrachter deiner Seite haben nun mal nicht deinen Monitor - von Handynutzern mal ganz abgesehen. ... und dass diese Positionierung mit absolute und fixed in diesem Zusammenhang kontraproduktiv ist, habe ich ja schon erwähnt
Bitte nutze zum Einfügen von Code den 'Code_einfüge_Button oben rechts in der Editorkopfzeile (</>), macht es uns einfacher das zu untersuchen.
Dein <div class="Hero"> ist mit 'position: absolute;' und 'z-index: 1;' der Störenfried. Dieses div überdeckt einen Teil deiner Navigation - diese 'absolute' und 'fixed' positionierten Elemente machen oft solche Probleme, weil sie sich einfach 'breit' machen und den Rest der Seite einfach überdecken... sie sind ja aus dem Textfluss herausgenommen.
Abhilfe schafft hier ein 'z-index: -1;', damit es hinter allem anderen liegt.
Ansonsten kann ich nur empfehlen, wo immer es geht, auf absolute und fixed zu verzichten! Gibt oft andere, bessere Methoden im CSS.
Schau dir die Beispiele an, die in dem Link, den ich geschickt habe enthalten sind -
und überprüfe die Syntax deiner 'setTimeout' Funktion...
https://www.w3schools.com/jsref/met_win_settimeout.asp
So wie ich das verstehe, erfolgt der Funktionsaufruf bei 'setTimeout' mit dem Funktionsnamen, bei dir ist aber die Funktionsdefinition angegeben. Bin mir nicht sicher ob das überhaupt geht?
Ja... das gibt es! Schau hier
https://www.w3schools.com/jsref/event_onresize.asp
Aber warum willst du das so machen? Zum Positionieren von Elementen nutzt man CSS - JS kann man (der User) deaktivieren, CSS geht immer.
Ich denke, das liegt ganz einfach daran, dass du die veraltete Syntax nutzt:
Schau mal hier
http://php.net/manual/de/function.mysql-fetch-object.php
aus 'mysql' wird 'mysqli'
Das ist aber nicht der Code, der bei mir funktioniert.. du hast da schon Pfade geändert...
<script type="text/javascript" src="https://unpkg.com/xlsx/dist/shim.min.js"></script>
<script type="text/javascript" src="https://unpkg.com/xlsx/dist/xlsx.full.min.js"></script>
<script type="text/javascript" src="https://unpkg.com/blob.js@1.0.1/Blob.js"></script>
<script type="text/javascript" src="https://unpkg.com/file-saver@1.3.3/FileSaver.js"></script>Das funktioniert bei mir!
Wenn du in einem Firmen-Intranet sitzt, dann wäre das die naheliegendste Erklärung. Wende dich doch mal an einen der Admin - die müssten wissen, was 'ihr' Netz macht .
Bin mir mittlerweile ziemlich sicher, dass es aber genau daran liegt!
Die Dateien https://unpkg.com/xlsx/dist/shim.min.js und https://unpkg.com/xlsx/dist/xlsx.full.min.js beinhalten keinen Code, sondern laden nur den Code, der sich in https://unpkg.com/xlsx@0.13.3/dist/shim.min.js und https://unpkg.com/xlsx@0.13.3/dist/xlsx.full.min.js befindet.
Und wie schon erwähnt.. mit der vollen 'https:...' URL funktioniert es bei mir im IE 11.