Wahrscheinlich bekommst Du deshalb keine Antworten, weil Du im falschen Unterforum bist.
"deshalb sind die alle Verzerrt" - das liegt daran, dass Du deinem img-Tag eine feste Breite und Höhe gegeben hast:
<img name="austausch" src="Seenotretter.jpg" width="1200" height="800" style="position: relative; top: 17px; left: 22px">
Lass das weg, dann werden deine Bilder nicht verzerrt sondern in originaler Größe angezeigt und ohne das Seitenverhältnis zu verfälschen.
Wenn es um Klick vs. Hover geht, würde ich eher empfehlen, danach zu unterscheiden, ob Touch unterstützt wird und nicht nach Bildschirmgröße. Ich verwende dazu folgendes:
var isTouch = (('ontouchstart' in window) || (navigator.msMaxTouchPoints > 0));
(So bei stackoverflow gefunden, diese Quelle halte ich für zuverlässig.)
Lesen der Fehlermeldungen und des Manuals von mysqli_fetch_array liefert die Lösung:
Die Konstante MYSQL_ASSOC gibt es nicht, der Parser nimmt daher an, dass ein String gemeint ist, was zu der zweiten Fehlermeldung führt. Das Manual sagt dann, dass die Konstante richtig MYSQLI_ASSOC heißt.
Um jQuery zu verwenden, musst Du diese Bibliothek auf deiner Seite einbinden. Google nach "jquery einbinden" und den Developertools für deinen Browser.
Auch der Grund dafür, dass dein Fiddle nicht läuft, ist, das Du jQuery nicht einbindest. Du kannst es in den Einstellungen (Zahnradsymbol) des Javascript-Teils einstellen.
Einige Probleme:
Du hast jQuery nicht eingezogen.
Sinnvolles Einrücken des Codes ist immer empfehlenswert, um ihn besser lesen und Strukturfehler erkennen zu können. Eingerückt (http://jsbeautifier.org/) sieht deiner so aus:
https://jsfiddle.net/Sempervivum/g10otbtc/
(Das Forum hat leider hartnäckig die Zeilenumbrüche verschluckt. Sieh es dir in diesem Fiddle an.)
Man erkennt, dass eine schließende Klammer fehlt. So ist es richtig:
$(document).ready(function () { var navi = $("#navigation"); //variable navi erstellen
var ths = "top-head-scrolled"; //ths die class top-head-scrolled geben welche später dann über css angesprochen wird
var hdr = $('header').height(); // hdr ist die höhe vom header
$(window).scroll(function () {
if ($(this).scrollTop() > hdr) { //wenn der wert von scroll top höher ist als der von hdr
navi.addClass(ths); // füge klasse ths der var navi hinzu
} else { //wenn nicht
navi.removeClass(ths); // entferne klasse ths
}
}); });
Die Variablen definierst Du außerhalb des document-ready. Da Du das Javascript im head einziehst, sind die entspr. Elemente noch nicht vorhanden. Richtig: siehe oben.
Wenn Du position:fixed zuweist, ist der Selektor eine Klasse. Mit einer ID als Selektor wird außerdem position:relative zugewiesen. Das erste hat eine niedrigere Priorität als das zweite, deshalb wird das position:fixed nicht wirksam. Abhilfe, indem Du zusätzlich !important verwendest:
header,.top-head-scrolled { position: fixed !important; width: 100%; top: 0; }Korrigiert man das alles, funktioniert es. Ich empfehle dir, dich mit den Developertools deiners Browsers vertraut zu machen, damit findet man solche Fehler relativ leicht.
Der Übergang von normal zu fixed ist noch nicht reibungslos. Du kannst ja selber versuchen, das zu verbessern. Melde dich wieder, wenn Du keinen Erfolg hast.
Was meinst Du denn mit "Sticky Navigation"? Soll die Navigation beim Scrollen an der oberen Kante des Browserfensters stehen bleiben? Das kannst Du sehr einfach mit CSS position:fixed erreichen.
PS: Möglicher Weise ist eine Lösung ein Schatten mit harter Grenze nach innen. Habe jetzt keine Zeit mehr, Du kannst es ja selber mal probieren.
Habe jetzt deinen Code in eine Testseite eingefügt. Der Grund, dass es nicht funktioniert, ist offenbar, dass das CSS, das man bei .Aussen einfügt durch dieses überschrieben wird:
table.MainTab td { border-style: solid; border-color: #CC0033; border-width: 2px;}Das kann man beheben, wenn man !important hinzu fügt:
border: 4px solid white !important;Das funktioniert bei mir, aber wahrscheinlich ist der Effekt nicht das, was Du dir erhoffst, weil der rote Rand verschwindet.
Ich bin der Meinung, dass es funktionieren müsste. Poste doch mal die URL der Seite (mit deiner Änderung) damit man es mit den Entwicklertools analysieren kann.
?? Wieso nicht? Du schreibst doch, dass Du auf das CSS Zugriff hast?
PS: Du kannst es natürlich auch getrennt notieren:
.Aussen{border: 2px solid white;}Sind die roten Zellen diese?
.Aussen{color:#ffffff;background-color:#CC0033;text-align:left;vertical-align:middle;padding:3px 0 2px 3px;border-left:2px solid #6600FF;}Dann wäre es ganz einfach, Du brauchst dort nur ein border:2px solid white hinzu zu fügen.
Warum meinst du, es wird nicht funktionieren? Kennst Du die Position nicht? Wenn Du Javascript verwenden kannst, kannst Du dich auch auf den Inhalt beziehen.
"Mit Style in der Zelle kann ich nicht arbeiten, weil die Zellen generiert werden und ich keinen Einfluss habe."
Normaler Weise hätte ich empfohlen, dieser einen Zelle eine ID zu geben und sie damit zu gestalten. Aber wenn das so ist, würde ich dir empfehlen, dich mit CSS :nth-child() bzw. :nth-of-type() vertraut zu machen, damit kannst Du eine bestimmte Zelle in der Tabelle ansprechen wenn Du ihre Position kennst.
"Tabellen sind eigentlich Oldshool und zu vermeiden" - so pauschal sollte man das IMO nicht sagen. Es trifft zu, wenn man Tabellen für Layout-Zwecke zweckentfremdet, aber es gibt auch Strukturen, die semantisch tatsächlich eine Tabelle sind und mit HTML als solche abgebildet werden können.
Natürlich, aber das Sichtbarschalten erfolgt durch das span #text und das ist immer sichtbar. Ich gehe davon aus, dass dies das ist, was der TO vor hatte:
"damit die Boxen bei Berührung eines Text erscheint bzw. verschwindet.."
"Wenn ich eine Eingabe ins Inputfeld mache" ist soweit klar. Aber bei dem was dann kommt, verstehe ich nicht, was Du meinst.
Ich möchte vorsichtig bezweifeln, dass das funktioniert, weil der Container bei display:none keinen Platz einnimmt.
Ich würde es so machen:
<span id="text">Text</span> <div id="test"></div> <style> #test { width:100px; height:900px; background:black; display: none; } #text:hover ~ #test { display: block; }Mediaqueries kennst Du ja anscheinend schon. Home kannst Du leicht verschwinden lassen, indem Du display:none setzt. Und die gleichmäßige zweizeilige Anordnung kannst Du erreichen, indem Du die Breite auf 33% bzw. genau genommen 33%-2px setzt. Und die senkrechte Linke rechts ausblenden ist auch kein Problem.
Sieht dann so aus:
http://www.ulrichbangert.de/div/menu(2).png
Der TO hat einen Link gepostet, über den sich das CSS jederzeit einsehen lässt. Außerdem kann man das CSS sehr komfortabel mit den Developertools analysieren. Das habe ich getan und dem TO Hinweise gegeben, wie er sein Problem lösen kann.
"Kann es sein, dass sich ein DIV mit absoluter Breite von 100% immer nur der Breite der neugeladenen Seite anpasst?" Eine Breite von 100% würde ich als relativ bezeichnen. Die Prozentangabe bezieht sich auf die Breite des Elternelementes.
"Klick ein User auf einen Navigationspunkt, sollte dieser auf aktiv gesetzt werden (klasse hinzufügen, vielleicht mit jQuery und der Funktion .addClass?)" Ich denke, damit bist Du auf dem richtigen Wege. Was fehlt dir denn für eine Umsetzung?
Wie Du die Texte am besten dynamisch anzeigst, hängt wesentlich davon ab, wie lang sie sind. Sind sie sehr kurz, kannst Du sie alle gleichzeitig auf der Seite unterbringen und den richtigen jeweils sichtbar machen. Sind sie länger, ist es empfehlenswert, sie mit Ajax zu laden, so wie es in den Beispielen gemacht wird, die Du gefunden hast.
Beim Überblenden kannst Du so vorgehen: Den neuen und den alten Text mit absoluter Positionierung übereinander legen und den neuen mit CSS z-index in den Vordergrund bringen. Den neuen jedoch zunächst unsichtbar machen, indem Du die Deckkraft (CSS opacity) auf 0 setzt. Dann die Deckkraft auf 1 animieren.
Wenn Du das nicht selber programmieren möchtest, könntest Du einen vorgefertigten Slider verwenden. Swiper z. B. ist flexibel, bietet Überblenden und ermöglicht es, nachgeladene Inhalte dynamisch hinzu zu fügen.