Beiträge von Sailor

Nutze die Webentwickler-Tools, die in den gängigen Browsern enthalten sind, dann kannst du gezielt das Element untersuchen, das du sehen willst.

Zitat von brainstuff

dass es Stunden dauern würde bis ich das einigermassen leserlich umformatiert habe).

Totaler Quatsch... erstens holen dich da die Fehler der Vergangenheit ein und zweitens ist diese Umformatierung in ein leserliches Format mit einem vernünftigen Texteditor (zB Notepad++) in wenigen Augenblicken erledigt!

... ok ... Zweiter! Sempervivum war (mal wieder) schneller.

Scheint an der Formatierung von

nav ul ul li {
position: absolute;
}

zu liegen.

Versuche her mal position: relative;.

Bedenke aber - auf deiner Testseite formatierst du alles nur mit den Selektoren der reinen HTML Elternelemente. Ich denke es wäre besser, wenn du, auch in Hinsicht auf eine spätere Erweiterung der Seite, bei den Elementen, die gesonderte Formate bedürfen, eine CSS Klasse nutzt zB <li class="sub_menue">, damit du gezielter Formate im CSS vergeben kannst.

Wo in WP hast du diesen Code eingegeben? Genau dort kannst du ihn auch wieder löschen.

Oder ändern in .entry-header {display: block;}.

Wenn du dich für deine Seite für WP entschieden hast, dann wirst du sehr schnell merken, dass es ohne eigene CSS Kenntnisse nicht geht - also besser mit den Grundlagen vertrau machen, sonst wirst du nicht lange Freude an deinem Webauftritt heben.

Ach ja... und mache doch bitte ein neues Thema auf, wenn du Probleme hast und hänge dich nicht an ein 'fremdes' Thema an.

Teste 2 Änderungen:

1. Lösche das top: 50px; bei nav ul ul

2. setze position:absolute; für nav ul ul li

m.scatello - das alleine wird nicht reichen, der Zeilenumbruch im Container muss auch noch unterbunden werden.

#fair_line_wrapper {
  display: flex;
  flex-wrap: nowrap;
  overflow-x: scroll;
  width: 100% !important;
}

... im CSS könnte helfen.

Zitat von computermobil

...wie ich diesen auch im WP Editor eingebe,...

Und wie gibst du es dort ein? Wie sollen wir sehen, wie das SOLL und IST aussieht!

Bei Wordpress macht man CSS Änderungen im 'zusätzlichen CSS' im Customizer.

Vom Dashboard -> Design -> Customizer -> zusätzliches CSS

Das sind Formate für unterschiedliche Browser, solange diese den Standard noch nicht umgesetzt haben. In der Regel werden die nach einiger Zeit, wenn dann der entsprechende Browser die Anweisung ohne diese Prefixes versteht, überflüssig und können weggelassen werden.

Den aktuellen Stand. also welcher Browser welchen Prefix braucht, kannst du jeweils auf der Seite caniuse.com nachlesen.

Im Falle von background-size sieht das dann so aus-

https://caniuse.com/#search=background-size

rot = unterstützt gar nicht

hellgrün = unterstützt teilweise - mit der Maus drüberfahren, dann werden dir die Details angezeigt u.a. auch, ob ein Prefix benötigt wird

dunkelgrün = wird vollständig unterstützt

Im Falle von background-size würde ich den Prefix weglassen - die wenigen Browser (Altlasten), die dann diese Anweisung nicht verstehen, kann man vernachlässigen. (aber nur meine Meinung)

Neee... das hast du nicht richtig gemacht!

Der Code soll nur wirken, wenn die Bildschirmbreite kleiner als 1022px ist - er muss also in eine eigene @media-Query und hat in allen anderen CSS Bereichen nichts zu suchen - so, wie ich es oben beschrieben habe.

Zu deinem .footer! Da solltest du dir mal dein Setup genauer anschauen.

Da ist ein div mit Hintergrundbild (jeweils links und rechts) und in der Mitte ein Konstrukt aus einem ol und einem ul (hääää?... hat das einen Grund?).

Die Hintergrundbilder sollen sich anpassen - diese ol ul Geschichte passt sich aber von alleine an, denn das ist richtiger Inhalt und schafft sich den Platz, den er braucht... macht also das div .footer von alleine so hoch, wie es sein muss.

Teste mal, ob im CSS für den .footer das min-height (statt height) das Abschneiden verhindert.

Damit sollten dann bei allen Bildschirmbreiten zumindest die Bilder vollständig zu sehen sein - das größer werdende Mittelteil (ul ol) passt sich dann selber an und macht vielleicht den .footer wieder größer, damit diese Listen wieder zu sehen sind.

Wenn dann noch Nachbesserungen notwendig sind, wovon ich ausgehe, kann man die angehen, wenn der Rest schon mal passt.

Möglich wäre auch mit 'calc' die Höhe jeweils passend zur Breite zu berechnen.

Da du die (max-)Breite von Header und Footer jeweils mit 1022px angibts, muss die Berechnung auch nur bei Breite kleiner 1022px durchgeführt werden.

Der Berechnungsfaktor ergibt sich aus dem Höhen-/Breitenverhältnis des Headers/Footers (120 / 1022).

@media screen and (max-width: 1022px) {
  header {
    height: calc(100vw * 0.117);
    overflow: hidden;
  }  
 .footer {
    height: calc(100vw * 0.117);
    overflow: hidden;
  }    
}

Mir ist aufgefallen, dass sich auf deiner Seite teilweise ein horizontaler Scrollbar zeigt!

Das liegt nach meiner Einschätzung an deiner Navmenü-Zeile. Das könnte man umgehen/beseitigen, wenn man die beinhalteten Elemente mit 'border-box' formatiert.

#nav-menue, #steuerung, #steuerung a {
  box-sizing: border-box;
}

Aber das bitte ausgiebig testen - vielleicht liege ich mit meiner Einschätzung ja falsch!

Bitte nutze als Erstes mal den Validator.... https://validator.w3.org/nu/?doc=http%3…warendorf.de%2F ... da sind ein paar (3) Fehler im Code, die du beseitigen solltest.

Dein Problem ist folgende Codezeile

<div style="width:25%;min-width:300px;margin:30px;float:right;">

Rechne mal nach... min-width + zweimal margin sind 360px. Bei kleinerer Bildschirmbreite ragt dann das div über den Bildschirmrand, was dann auch zur Folge hat, dass die Folgeelmente eben sich auch an den 360px orientieren und zu dem von dir bemängelten Verhalten führen.

Nebenbei.... Inline-Styles sollte man vermeiden, diese Formate gehören in das Stylesheet.

Mit 'float' zu arbeiten bringt meist mehr Probleme als Nutzen - schau dir doch mal CSS Flexbox an, ob du das Layout im Bereich Text + Bild nicht damit besser gestalten kannst?

Oh neeee... was ist das denn? Du hast ja das HTML Grundgerüst total verwurschtelt. Kein Wunder, dass das nicht klappt!

Bitte lerne die Grundlagen und fange am besten hiermit an!

https://wiki.selfhtml.org/wiki/HTML/Tuto…rundger%C3%BCst

Schau dir mal die Formatierung 'flex-direction' für einen Flex Container an.

https://css-tricks.com/almanac/properties/f/flex-direction/

Dieses Verhalten ist genau das, was zu erwarten ist! Der Text bei "alt=" wird nur dann angezeigt, wenn das Bild aus irgendeinem Grund nicht angezeigt wird... sozusagen als Fehlermeldung... Text statt Bild! Hat auch was mit Barrierefreiheit zu tun, damit Sehbehinderte über die Angabe in "alt=" erfahren, was auf dem Bild ist.

Der Text bei "title=" wird beim Hovern über das Bild angezeigt.

Das Verhalten kann auch von Browser zu Browser abweichend sein... wenn ich ich recht erinnere zeigen alte IE's den alt-Text beim hovern an, wenn keine title_Angabe vorhanden sind (??).

Das Bild muss auf dem Server in dem Ordner 'images' gespeichert sein und dieser Ordner 'images' muss sich im Ordner 'css' befinden... so wird es in dem Link http://www.quadspasserleben.de/css/images/Hintergrund.jpg vorgegeben. Wenn das Bild dort wäre, würde es auch angezeigt werden.

Ich vermute hier liegt einfach ein (Anfänger-)Fehler vor, denn Verlinkungen in einer externen CSS Datei müssen relativ zu dem Speicherort der CSS Datei angegeben werden....

Die CSS Datei ist in http://www.quadspasserleben.de/css gespeichert und von hier soll eine Hintergrundgrafik aus

http://www.quadspasserleben.de/images

eingebunden werden, dann muss der Link entweder in der relativen Form

'../images/Hintergrund.jpg'

oder als absoluter Pfad

http://www.quadspasserleben.de/images/Hintergrund.jpg

angegeben werden

Das Bild ist an der angegebenen Adresse (URL) nicht vorhanden und kann deswegen nicht gefunden und damit auch nicht angezeigt werden.

Überprüfe, ob das Bild tatsächlich dort gespeichert ist (http://www.quadspasserleben.de/css/images/Hintergrund.jpg) und ob die Schreibweise korrekt ist (Groß- Kleinschreibung)

Mit @media....

https://www.w3schools.com/css/css_rwd_mediaqueries.asp

Auch mit Phase 5 kann man prima arbeiten. Ist eben ein wenig alt, kann kein UTF8 und kennt die neueren HTML5 Tags nicht. Aber wenn du den in deiner Klausur benutzen musst, dann solltest du jetzt auch damit arbeiten.

Du kannst dein CSS natürlich auch mit Phase 5 erstellen und bearbeiten. Öffne einfach ein leeres Dokument, schreibe dein CSS dort hinein und speichere das Dokument dann mit der Dateiendung .css (zB styles.css)

Um dann diese CSS Datei mit deinem HTML Dokument zu verknüpfen brauchst du dann nur in den <head> </head> Bereich den Tag

<link rel="stylesheet" href="name_deiner_datei.css" type="text/css">

hineinzuschreiben.

Phase 5 hat auch im CSS Bereich so eine Art Syntaxunterstützung... zeigt dir also an, ob er den Tag kennt. Leider aber auch hier werden nur die älteren Formatierungen (CSS 2) unterstützt, CSS 3 kennt Phase 5 nicht.

Spielt aber keine Rolle, denn wenn das CSS, welches du in dein Stylesheet eingetragen hast valide ist, funktioniert es auf der Webseite trotzdem.

In deinem Beispiel würde das so gehen...

.flex-container a {
  background-color: #0f0;
  color: #fff;
}

Das funktioniert allerdings nur dann, wenn im Container wirklich nur ein <a> ist ... besser wäre, du würdest den richtigen Code posten, um dann auch das richtige (gewünschte) Element anzusprechen.

Lösche das Format 'top: 10px;' für das Element '#frw_menu_wrapper ul li:hover ul'

Bei mir hat sich nichts geändert - bei mir wird da angezeigt...

html-seminar.de/woltlab/attachment/1879/

Hmmm.... ich seh gerade, du nutzt eine steinalte HTML Version. Solltest vielleicht auf das aktuelle HTML umstellen.