Beiträge von MrMurphy

Hallo

Das geht mit background-image: linear-gradient. Für die 8 Farben zum Beispiel

background-image: linear-gradient(
   90deg, 
   hsla(195, 47%, 42%, 1)  0%, 
   hsla(195, 47%, 42%, 1) 12.5%, 
   hsla(185, 51%, 59%, 1) 12.5%,
   hsla(185, 51%, 59%, 1) 25%,
   hsla(147, 51%, 48%, 1) 25%,
   hsla(147, 51%, 48%, 1) 37.5%,
   hsla(80, 64%, 56%, 1) 37.5%,
   hsla(80, 64%, 56%, 1) 50%,
   hsla(58, 80%, 57%, 1) 50%,
   hsla(58, 80%, 57%, 1) 62.5%,
   hsla(38, 91%, 58%, 1) 62.5%,
   hsla(38, 91%, 58%, 1) 75%,
   hsla(25, 81%, 51%, 1) 75%,
   hsla(25, 81%, 51%, 1) 87.5%,
   hsla(16, 73%, 50%, 1) 87.5%,
   hsla(16, 73%, 50%, 1) 100%
   );

Statt hsla sind natürlich auch andere Farbwerte zulässig.

Gruss

MrMurphy

Hallo

Sofern FontAwesome korrekt eingebunden wird funktionieren die Icons auch.

Deshalb brauchen wir für eine konkrete Hilfe einen Link zu deiner Seite.

Gruss

MrMurphy

Hallo

Ich befürchte dass der Videokurs veraltet ist.

Die link-Pseudoklasse ist in der Praxis meist nicht erforderlich. Die meisten Webseitenentwickler werden die überhaupt nicht kennen.

Die link-Pseudoklassse kennzeichnet noch nicht besuchte Links. Sobald du den Link einmal aufgerufen (angeklickt) hast ist sie nicht mehr gültig. Das wird wohl bei dir der Fall sein.

Zum erneuten Testen musst du also eine andere Link-Adresse angeben. Es gibt (zumindet für den Firefox) auch Entwickler-AddOns, mit denen alle Links mit einem Klick als unbesucht gekennzeichnet werden können.

Falls du die Browser-Historie nicht benötigst kannst du die auch löschen. Daher holt sich die link-Pseudoklasse die Information, ob ein Link bereits besucht wurde.

Gruss

MrMurphy

Hallo

Ohne den Quelltext können wir nur raten.

Mit einer ID könnte das HTML folgendermaßen aussehen:

<img src="pfad/bild.jpg" alt="Bildbeschreibung" id="idname">

Das CSS dazu folgendermaßen:

#idname {
   border: 2px solid black;
}

Sinnvoller ist aber meist die Verwendung von Klassen:

<img src="pfad/bild.jpg" alt="Bildbeschreibung" class="classname">

mit folgendem CSS

.classname {
   border: 2px solid black;
}

HTML-Anfänger neigen meist dazu im Übermaß id zu verwenden. Dabei sollen id nur dort verwendet werden, wo Elemente aus technischen Gründen nur einmal im Quelltext auftauchen dürfen. In allen anderen Fällen ist class das bessere Attribut. id sind also eher die Ausnahme.

Um img-Elemente ohne id oder class mit CSS anzusprechen gibt es ansonsten noch die Möglichkeit Selektoren wie

:nth-child()

zu verwenden. Dazu kannst du die Suchmaschine deiner Wahl anschmeissen.

Gruss

MrMurphy

Hallo

Du suchst in der Suchmaschine deiner Wahl nach "sticky footer".

Das ist ein Oberbegriff, für den es verschiedene Lösungen gibt. Du musst dir dann die heraussuchen mit der du am besten zurecht kommst.

Ich selbst bevorzuge eine Lösung mit Flexbox.

Bei den Lösungen ohne Flexbox muss die Höhe des footers grundsätzlich fest angegeben werden. Dann muss durch geeignete Breakpoints dafür gesorgt werden dass die Höhe immer passt. Außerdem widerspricht das der Regel, dass die Höhe von Elementen durch ihren Inhalt bestimmt werden soll.

Bei den Lösungen mit Flexbox zickt der IE11 etwas rum, das ist für mich bei Lösungen mit dem Sticky Footer aber das geringste Problem. Die Besucher mit dem IE11 werden keineswegs abgeschreckt und viele werden nicht mal mitbekommen, dass die Seite in anderen Browsern etwas anders aussieht, da dies bei Responsive Layout in verschiedenen Fensterbreiten der Normalfall ist. Zudem ist der IE11 auf dem absteigenden Ast und hat nur noch eine relativ geringe Verbreitung.

Gruss

MrMurphy

Hallo

Aus deinem Quelltext ist dein Problem nicht ersichtlich. Poste deshalb bitte mal einen Link zu der Seite.

Vermutlich lässt du immer den Teil des Quelltextes weg, der das Problem verursacht. Folge: Jeder, der dir helfen möchte bastelt für sich mit seiner Zeit aus deinem Quelltext eine Webseite zusammen, aus der das Problem dann überhaupt nicht erkannt werden kann. Das ist nicht Sinn eines Forums.

Gruss

MrMurphy

Hallo

Verwende statt position: absolute besser Flexbox.

Gruss

MrMurphy

Hallo

Zitat

Ich versuche die erste Seite von Calida nach zu bauen.

Das dürfte für Anfänger schwierig werden. Die Seite wurde von einem Profi auf Grundlage von Bootstrap mit einer Datenbank im Hintergrund und mehr als einer Prise JavaScript und PHP erstellt.

Meine Tips kannst du damit auch in die Tonne treten. Ich war von einem ganz anderen Ergebnis ausgegangen. Für so ein Menü (oder einem benutzerfreundlicheren) würde ich ganz anders vorgehen, dafür sind meine bisherigen Ansätze überhaupt nicht geeignet. Das sprengt auch den Zeitaufwand, den ich im Forum geben kann.

Gruss

MrMurphy

Hallo

Zitat

Tut mir leid, das ist kein böser Wille sondern Unkenntnis.

Du brauchst dich bei mir nicht zu entschuldigen. Das war nur ein Hinweis damit Probleme überhaupt nicht erst aufkommen.

Zitat

Um deinen gewünschten Efekt umzusetzen, wird wohl JavaScript zum Einsatz kommen müssen.

Oder etwas Phantasie.

Zu dem HTML

<div id="nav">
      <ul>
         <li><a href="#">Seite 1</a>
            <ul>
               <li id="link1"><a href="#">Seite 2 </a></li>
               <li id="link2"><a href="#">Seite 3 </a></li>
               <li id="link3"><a href="#">Seite 4 </a>
                  <ul>
                     <li id="link4"><a href="#">Thema 4.1 </a></li>
                     <li id="link5"><a href="#">Thema 4.2 </a></li>
                     <li><div id="container"></div></li>
                  </ul>
               </li>
            </ul>
         </li>
      </ul>
   </div>

könnte man zum Beispiel das folgende CSS nehmen:

#nav a {
         color: black;
         line-height: 35px;
         display: block;
         width: 125px;
         height: 35px;
         padding-left: 3px;
      }
      #container {
         background-color: blue;
         float: left;
         width: 400px;
         height: 400px;
      }
      #link1:hover {
         background-color: green;
      }
      #link2:hover {
         background-color: red;
      }
      #link3:hover {
         background-color: fuchsia;
      }
      #link4:hover {
         background-color: peachpuff;
      }
      #link5:hover {
         background-color: khaki;
      }
      #nav #link1:hover~#link3 #container {
         background-color: #ada;
      }
      #nav #link2:hover~#link3 #container {
         background-color: #ad0;
      }
      #nav #link3:hover #container {
         background-color: #a3a;
      }
      #nav #link4:hover~li #container {
         background-color: darkseagreen;
      }
      #nav #link5:hover~li #container {
         background-color: deeppink;
      }

Damit kann die Hintergrundfarbe (oder halt auch Hintergrundbilder) von allen fünf li-Elementen (Seite 2 bis 4, Thema 4.1 und 4.2) aus per hover-Effekt gewechselt werden.

Die restliche Gestaltung (Breiten, Hintergrundfarben, Position des Containers und so weiter) ist dann noch etwas Standard-CSS. Mir geht es bei dem Beispiel nur um die Funktion der Farbwechsel.

Insgesamt ist die nächste Frage ob überhaupt eine Liste notwendig ist. Für viele Lösungen sind Listen weder vorgeschrieben noch sinnvoll, sondern sie werden vollkommen unnötig aus Gewohnheit verwendet - mit allen ihren Nachteilen. Auch was die Besucherfreundlichkeit angeht. Verschachtelte, zunächst teilweise versteckte Navigationen, sind Barrieren und Zeitfresser.

Dazu müssten wir aber wissen was Jochen im Endeffekt erreichen möchte.

Gruss

MrMurphy

Hallo

Es ist schwer dir zu helfen wenn du mit den relevanten Informationen erst nach und nach herausrückst. Irgendwann haben viele Leute, die gerne helfen wollen, auch keine Lust mehr Lösungen zu erarbeiten, die nicht funktionieren können, weil ihnen wichtige Informationen vorenthalten wurden.

So sollte

Zitat

mit der Maus über

zunächst geklärt werden, wie die Seite auf Touchscreen-Geräten funktionieren soll. Die haben in der Praxis inzwischen einen höheren Verbreitungsgrad als Desktop-Monitore. Deshalb sind erfahrungsgemäß alle Lösungen, die auf hover-Effekte angewiesen sind, in der Praxis sinnlos.

Hover-Effekte sollten nur noch für Spielereien verwendet werden, deren Fehlen die Benutzbarkeit einer Webseite nicht beeinträchtigt.

Gruss

MrMurphy

Hallo

So geht das technisch nicht.

In dieser Angabe

#nav li a#Seite1:hover #container

sind die Leerzeichen Selektoren. Die können nur auf tiefere Ebenen verweisen. Es gibt auch Selektoren für Geschwisterelemente.

Es gibt aber keine Selektoren um wieder hoch zu springen, in diesem Fall vom a zurück (hoch) zum div#nav um dann zum Geschwisterelement vom div#nav, dem div#container, zu gelangen.

Gruss

MrMurphy

Hallo

Ich habe keinen Zugriff auf deine Bilder.

Gruss

MrMurphy

Hallo

Kann es sein dass das dritte Bild wegen des Namens

Wasser&Öl.jpg

überhaupt nicht angezeigt wird?

Gruss

MrMurphy

Hallo

Zitat

bei unterschiedlicher Monitoraufösung, dass margin-bottom: 4px; mit unterschiedlichen Abständen angezeigt wird...

Das Problem kann ich nicht nachvollziehen. In der uns von dir zur Verfügung gestellten Beispieldatei sind die margin-bottom: 4px der untere Rand. An den 4px ändert sich bei unterschiedlichen Monitorauflösungen nichts.

Gruss

MrMurphy

Hallo

Zitat

Statt display: inline; könnte man aber auch margin: opx: nehmen, korrekt?

Vom normalen HTML/CSS ausgehend: Nein.

h1- bis h6-Elemente und p-Elemente sind sogenannte Blockelemente. Selbst wenn sie in der Breite nebeneinander passen stehen sie deshalb untereinander. Daran ändert ein margin mit Null auch nichts.

Erst wenn die genannten Elemente auf irgendeine Weise durch CSS nebeneinander ausgerichtet werden stehen sie auch nebeneinander. Ein geringerer margin bringt dann aber auch nur etwas, wenn genau dieser Platz noch fehlt.

Welche CSS-Anweisung am sinnvollsten ist hängt von den Vorstellungen des Webseitenerstellers ab. Solange du dazu keine Angaben machst können wir dir nur allgemeine oder Standardlösungen liefern.

Gruss

MrMurphy

Hallo

Du machst die beiden Elemente mittels CSS zu Inline-Elementen: display: inline;

Gruss

MrMurphy

Hallo

Zitat

den Artikel Container weiter unten, von oben ausgesehen platzieren

Lösche aus der folgenden Anweisung

header {
   background: hsla(360, 0%, 96%, 0.9);
   position: absolute;
   top: 1px;
   left: 1px;
   right: 1px;
   height: 40px;
}

alles außer background. Dann ist der Content immer unter dem header. Die Abstände zwischen den beiden werden dann durch margin geregelt.

Gruss

MrMurphy

Hallo

Nebenbei, ohne Bezug zum Problem: Das die margin-top-Anweisung von der nachfolgenden margin-Anweisung überschrieben wird ist dir bekannt?

Zitat

Warum?

Weil durch display: flex alle Flex-Items einer Zeile gleich hoch gezogen werden. Das ist die Standardvorgabe stretch.

Zitat

Und wie kann ich dieses verhindern?

Zum Beispiel durch Hinzufügen zu .titel von

align-items: center;

Dadurch werden alle Flex-Items in ihrer eigentlichen Höhe angezeigt und horizontal zentriert. Andere mögliche Werte sind zum Beispiel

align-items: flex-end;

align-items: flex-start;

align-items: baseline;

Gruss

MrMurphy

Hallo

Zitat

das Beispiel vllt doch raus zu nehmen

Erledigt. Obwohl das eher unsinnig ist, da mein Testcase von Suchmaschinen nicht gefunden wird.

Gruss

MrMurphy

Hallo

Ich war zunächst etwas im Zweifel ob eine einzelne Seite erstellt werden soll oder ein Webauftritt mit mehreren Seiten.

Deshalb habe ich mir grade die Aufgabe noch einmal durchgelesen. Aus der Formulierung

Zitat

Ziel ist die Darstellung von Informationsseiten ...

schließe ich eher, dass ein Webauftritt mit mehreren HTML-Seiten gefordert ist, die auf ein gemeinsames CSS zugreifen.

Durch die Formulierung

Zitat

Die einzusetzenden Techniken sind HTML5 und CSS3.

wird in Aufgabenstellungen einerseits gefordert, dass beide Techniken verwendet werden müssen, andererseits aber keine weiteren Techniken wie JavaScript oder PHP verwendet werden dürfen.

Damit passt die Aufgabenstellung auch zu einer üblichen HTML-Schulung und ist mit sinnvollem Aufwand umsetzbar und praktisch einsetzbar.

Ich habe mal ein Beispielside erstellt, bei der ich nur einige Aufgabenteile (zwei hover-Effekte) weggelassen habe, die meiner Ansicht nach besucherunfreundlich sind. Die lassen sich aber problemlos nachrüsten. Dies sollte natürlich auch geschehen, wenn die Aufgabe benotet wird.

[Testside auf Wunsch des Thread-Eröffners entfernt.]

In der Seite Aufgabenstellung habe ich mich etwas über die einzelnen Aufgabenteile ausgelassen - ... die Gedanken sind frei.

Gruss

MrMurphy