Beiträge von Sempervivum

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.

Mache dich mit der Funktion addEventListener vertraut, damit kannst Du realisieren, was Du brauchst.

Die Breite des body ist offenbar gleich der Breite des Viewports. Und weil dein #pagefooter width:100% hat, hat er und damit auch der Hintergrund ebenfalls diese Breite. Beheben kann ich es, wenn ich dem #pagefooter width:auto und display:inline-block gebe.
Verstehen tue ich das Ganze nicht, weil ich bisher immer davon ausgegangen bin, dass sich die Breite des body an seinen Inhalt anpasst. Vielleicht kann jemand mit erweiterten Kenntnissen das aufklären.
PS: Ich sehe, dass ganz rechts immer noch eine Fläche ohne Hintergrund bleibt. Das liegt daran, dass sich die Breite des #pagefooter an den Inhalt anpasst und der ist schmaler als andere Elemente auf der Seite. Wenn Du willst, dass der Hintergrund bis zum rechten Rand geht, musst Du es bei width:100% für #pagefooter belassen und statt dessen dem body ein display:inline-block geben.

Ja, jetzt sehe ich es: Der Text ist noch da, aber der schwarze Hintergrund ist weg. Ich schaue mal rein ...

Auf dem Screenshot sehe ich was Du meinst, aber wenn ich deine Seite aufrufe und die Fensterbreite verkleinere, kann ich nichts dergleichen beobachten: Der Footer ist dann zu breit, verschwindet unter dem rechten Fensterrand und die horizontale Scrollbar wird eingeblendet.

"endet der Footer abrupt auf der rechten Seite" - ich kann nichts dergleichen erkennen (Opera). In welchem Browser tritt das Problem auf?

Ich wollte eine Testseite erstellen, aber mir fehlen die JS-Dateien. Poste doch lieber die URL deiner Seite.

Um das zu beantworten, müsste man den HTML-Text mit dem img-Tag sehen. Oder Du postest die URL deiner Seite.

Selbstverständlich, Du kannst den String mit der URL beliebig kombinieren:

$("#main").load("dein_ordner/" + sucheingabe + ".html", function() {

Versuche dieses:

var sucheingabe = $("input[name=eingabe]").val();$("#main").load(sucheingabe + ".html", function() {

Offensichtlich muss man bei dem Parameter die Maßeinheit % angeben. Dies funktioniert bei mir:

img{                filter: grayscale(100%);
                -webkit-filter: grayscale(100%);
                transition: 1s all ease-in;
            }

            img:hover{
                filter: grayscale(0%);
                -webkit-filter: grayscale(0%);             }

https://developer.mozilla.org/de/docs/Web/CSS/filter

"Welche Möglichkeiten gibts denn sonst ?" Du kannst zwei Bilder verwenden und das bunte über das schwarzweiße legen. Dann die Deckkraft (opacity) animieren.