Hallo
opacity wird gnadenlos vererbt. Das ist als Lösung deshalb nicht geeignet.
Setze doch einfach zwei Hintergrundbilder aufeinander. Zunächst ein mit linear-gradient erzeugtes mit einer rgba- oder hsla-Hintergrundfarbe, dann dein eigentliches.
Gruss
MrMurphy
Hallo
Das kannst du mit Media Queries erreichen und als Grundlage aktuelles HTML und CSS verwenden.
Gruss
MrMurphy
Hallo
Ohne deine Seite zu kennen können wir nicht konkret helfen.
Den HTML-Quelltext kannst du dem Quelltext der von dir verlinkten Seite entnehmen und das CSS mit den Untersuchungswerkzeugen deines Browsers erkunden.
Wobei das CSS der von dir verlinkten Seite bereits veraltet ist.
Durch Drop-Down-Menüs wird eine Lösung natürlich aufwändiger, grade für Anfänger.
Gruss
MrMurphy
Hallo
Du kannst mal folgendes ausprobieren:
Lösche aus ul und li alle CSS-Angaben wie position, display, align, text-align und ähnliche.
Dann gibst du den li-Elementen eine Hintergrundfarbe, eine max-width und als seitliche margins die Eigenschaft "auto". Also zum Beispiel für die li-Elemente:
background-color: gold;
max-width: 500px;
margin: 0 auto 0 auto;
Dann passt du die max-width deiner gewünschten Textlänge an und löscht anschließend die Hintergrundfarbe.
Gruss
MrMurphy
Hallo
Wenn zu einer Breite von 100% noch weitere Breitenangaben wie seitliches padding, border oder margin hinzukommen ist die Breite breiter als 100%.
Du kannst entweder die 100% passend verkleineren, zum Beispiel mit Hilfe von calc oder ein anderes Box-Modell wählen, zum Beispiel border-box.
Gruss
MrMurphy
Hallo
Grundsätzlich mißbrauchst du die float-Eigenschaft. Float ist dafür gedacht Text andere Container (meist Bilder) umfließen zu lassen, nicht um Layouts zu gestalten.
Bis vor wenige Jahren war dieser Mißbrauch üblich und sinnvoll, da es kaum anderen Möglichkeiten gab. Inzwischen ist aber genau für solche Aufgaben Flexbox entwickelt worden und kann seit über zwei Jahren auch problemlos verwendet werden.
Float hat beim Erstellen von Layouts viele Nebenwirkungen. Die solltest du zunächst lernen, falls du es trotz des sinnvolleren Flexbox für Layouts verwenden willst. Zudem ist dir offensichtlich auch nicht bewußt, wie float überhaupt funktioniert.
Deine Quellcodeschnipsel sind leider nicht sehr aussagekräftig, ein Link zu der Seite wäre besser.
Wahrscheinlich sind die Navigationsleiste und der Inhalt zu breit um nebeneinander zu passen. Dann entsteht der von dir beschriebene Effekt, dass ein Container unter dem anderen hängenbleibt.
Mache also mal einen oder beide schmaler.
Gruss
MrMurphy
Hallo
Such mal nach "Flexbox"
Gruss
MrMurphy
Hallo
Nur weil ich schon viele Fragen erlebt habe:
Falls du
"soll auf jedem Bildschirm gleich aussehen"
wörtlich meinst: Das funktioniert praktisch nicht.
Das die Anordnung der Inhalte sich verschiedenen Fenstergrößen anpasst ist vollkommen normal und sinnvoll. Dieses Verhalten kannst und solltest du nur etwas anpassen, so dass deine Besucher die Inhalte problemlos lesen können und sich auf der Seite zurechtfinden.
Gruss
MrMurphy
Hallo
Bei solchen Problemen ist die Datei selbst häufig nicht im UTF-8-Format abgespeichert worden. Dann nützen die Einstellungen im head-Bereich überhaupt nichts.
Du solltest mal schauen ob dein Editor die Seiten ins UTF-8-Format umwandeln kann und dies dann tun.
Oder du nimmst die Startseite, die ja offensichtlich funktioniert, speicherst die jeweils unter anderem Namen und kopierst den Inhalt der anderen Seiten dort hinein.
Zudem solltest du schauen ob du in deinem Editor UTF-8 als Vorgabe einstellen kannst.
Gruss
MrMurphy
Hallo
Was verstehst du unter "das es sich relativ zum header anpasst"?
Wahrscheinlich solltest du das Logo im Quelltext innerhalb des Headers einfügen.
Verzichte zudem auf position: absolute. Damit nimmst du auch in diesem Fall das Logo aus dem Dokumentenfluss und es kann nicht mehr auf den Header reagieren.
Wenn du HTML5 benutzt solltest du auch dessen Elemente (header, main, footer, article, section, figure und so weiter) verwenden. div sollen nur noch verwendet werden wenn es keine passenden anderen Elemente gibt.
Zudem sollten Container nur verwendet werden wenn sie unbedingt notwendig sind. Dein Quelltext enthält sehr viele überflüssige Container.
Gruss
MrMurphy
Hallo
Du verwendest die float-Anweisung falsch. Siehe
http://www.andreas-kalt.de/webdesign/tutorials/float-theorie
und
http://www.thestyleworks.de/basics/float-rule.shtml
Float ist dafür gedacht damit Text andere Elemente (meist Bilder) umfließen kann. Float ist nicht zum Layouten gedacht, zum Beispiel um Elemente nach links oder rechts auszurichten.
Früher ist Float häufig zum Layouten mißbraucht worden, da es nichts besseres gab.
Diese Zeiten sind aber lange (seit der Einführung von CSS3) vorbei. Zum Layouten wird heute Flexbox verwendet, das auch genau dafür entwickelt wurde.
Gruss
MrMurphy
Hallo
Das können wir nicht beantworten ohne die Seite zu kennen.
Zunächst muss der Quellcode den Richtlinien vom aktuellen HTML und CSS entsprechen.
Dann müssen störende CSS-Anweisungen entfernt oder angepasst werden.
Zum Schluß werden die Anpassungen mittels Media Queries hinzugefügt.
Ich gehe mal davon aus dass dir bewußt ist, dass die Darstellung sich dann auch ändert, aber halt nach von dir eingefügten Regeln.
Gruss
MrMurphy
HalloIch habe gute Erfahrungen mit Virtual-Box gemacht.GrussMrMurphy
Hallo
Zu folgendem HTML
Überschriftkannst du zum Beispiel das folgende CSS verwenden
h2 {
font-size: 4rem;
overflow: hidden;
}
h2 span {
display: block;
margin-bottom: -2.5rem;
}
Gruss
MrMurphy
Hallo
Deine Frage fehlt leider teilweise. Ohne konkretes Beispiel kann ich dir leider nur allgemein helfen.
Du solltest die Links mittels Flexbox anordnen und verwendest beim ersten Link "margin-right: auto;"
Eine Liste für ein Menü war nie notwendig und sollte mit HTML5 nicht mehr verwendet werden.
Gruss
MrMurphy
Hallo
Deine Beschreibung ist sehr allgemein.
Heutzutage wird für solche Probleme Flexbox (display: flex) verwendet.
Gruss
MrMurphy
Hallo
Zwischen dem schließenden b und dem öffnenden span darf kein Leerzeichen stehen.
Gruss
MrMurphy
Hallo
Mikrodaten sind unwichtig und brauchen nicht hinzugefügt werden. Von Suchmaschinen werden Webseiten mit Mikrodaten laut Auskunft der Suchmaschinenbetreiber selbst (noch) nicht bevorzugt behandelt.
Dazu einfach mal in einer Suchmaschine nach "Apfelkuchen" suchen.
Die Ergebnisse mit kleinen Bildern enthalten in der Regel Mikrodaten oder andere Strukturierte Daten. Beim Durchblättern der Ergebnisse ist leicht festzustellen, dass Seiten mit Strukturierten Daten auch erst viel weiter hinten auftauchen.
Wenn die Webseite folgende Anforderungen erfüllt:
-Sie enthält überhaupt Informationen: Webseiten ohne Informationen sind für sich schon sinnfrei, für strukturierte Daten gibt es keine Grundlagen
-Korrektes HTML
-Korrektes CSS
-Zugänglichkeit / Barrierefreiheit (die ergeben sich bei korrektem HTML und CSS zu über 95% bereits automatisch, es sind nur noch kleine Anpassungen erforderlich)
-Responsive Design / Flexibilität
und noch viel Zeit übrig ist können Mikrodaten hinzugefügt werden. Wobei dafür gute Englischkenntnisse erforderlich sind, da man sonst schnell falsche Begriffe auswählt.
Wenn die Webseite durch Erfüllung die grundsätzlichen Anforderungen vorne in den Suchmaschinen gelistet wird kann durch die Strukturierte Daten das Ergebnis optisch besser hervorgehoben werden (zum Beispiel die Bildchen) und die angezeigten Daten können genau bestimmt werden.
Wenn die Strukturierten Daten allerdings falsche Begriffe enthalten können sie auch nach hinten losgehen und die Seite erscheint nicht bei den gewünschten, sondern bei falschen Suchbegriffen.
Man sollte also sehr genau wissen was man tut wenn man Strukturierte Daten wie Mikordaten verwenden möchte.
Gruss
MrMurphy
Hallo
Es gibt leider (noch) keine guten Flexbox-Anleitungen. Das ist wohl mit ein Grund, warum es in der Praxis trotz seiner Vorteile kaum eine Rolle spielt.
Bei Flexbox-Anleitungen werden eigentlich immer nur einige theoretische praxisfremde Beispiele vorgestellt, mit der Anfänger dann bei der Erstellung von realen Webseiten überfordert sein müssen.
Außerdem werden viele praktische Vorteile und Möglichkeiten unterschlagen.
Und noch schlimmer: Bekannte Probleme oder unterschiedliches Browserverhalten werden ignoriert. Es gibt einige heftige Stolpersteine, die Neulinge zur Verweiflung treiben, aber die Vorteile von Flexbox nicht mal ansatzweise zu Nichte machen.
Erkennbar sind schlechte Anleitungen zum Beispiel daran, dass die verwendeten Elemente keinen oder nur einen Einheitstext enthalten und ihre Größe mit width und height bestimmt wird.
So enden die ersten eigenen Versuche mit anschließendem Frust.
Flexbox in der Praxis behandelt zum Beispiel Peter M. Müller in seinen beiden Flexbox-Videotrainings bei video2brain.
Gruss
MrMurphy
Hallo
Falls du die Anweisung
display: inline-block;
verwendet hast wird der Abstand automatisch rechts und unterhalb erzeugt.
Gruss
MrMurphy