Beiträge von Sailor

Auf die Schnelle finde ich nur eine mögliche Ursache - in einer deiner Bootstrap CSS Dateien wird für die Klasse 'row' links und rechts ein Margin von -15px vorgegebene.

.row {
 display:-ms-flexbox;
 display:flex;
 -ms-flex-wrap:wrap;
 flex-wrap:wrap;
 margin-right:-15px;
 margin-left:-15px
}

Versuche das mal zu überschreiben durch

.row {
  margin-left: 0;
  margin-right: 0;
}

möglichst im Custom CSS und wenn das funktioniert, dann die ganze Seite auf eventuelle Nebenwirkungen überprüfen.

Gib uns einen Link zu der Problemseite, Rätsel raten ist nicht zielführend und Hellsehen können wir nicht.

Wenn die Seite noch nicht online ist, dann poste den kompletten Code (HTML und CSS ) und nutze dafür die in der Kopfleiste zur Verfügung gestellten Einfügefunktiom '</>'.

Zeig uns den Code,,, am besten den Link zur Seite... dann verraten wir dir, wie es geht.

Da wirst du Probleme bekommen, da du deine beiden Container mit position: fixed; eingebunden hast und das eignet sich sich nun mal gar nicht für dein Vorhaben.

Schau dir mal CSS FlexBox an... https://css-tricks.com/snippets/css/a-guide-to-flexbox/ ... damit hast du das Problem in ein paar Augenblicken gelöst.

Ja... jetzt sind wir wohl auf dem gleichen Stand.

Auf die Schnelle fällt mir da erst mal ein pointer-events: none; im CSS für das <span>...</span> und <p>...</p> Element ein, um den Zoom-Effekt aufrecht zu erhalten.

Hat aber den Nachteil, dass du diese Beiden Elemente danach nicht mehr als Link nutzen kannst, denn ein Klick auf diese Elemente würde immer das darunterliegnde <a> treffen.

Solltest du beabsichtigen irgendwann mal die zB die Schaltfläche BLOG als Link nutzen zu wollen, müsstest du den Code anders aufbauen... vielleicht würde da meine Idee aus Beitrag #9 besser funktionieren - habe ich aber nicht ausprobiert..

Teste doch bitte mal, ob der folgende Code bei dir funktioniert... zuerst den Inline Style mit dem 'background:url....' aus dem HTML Code löschen und dann den CSS Code zusätzlich deinem CSS Code hinzufügen.

div.ix-sec-bg {
    height: 100%;
    background-image: url(src/assets/blog.svg);
    background-repeat: no-repeat;
    background-position: center center;
    background-size: auto 80%;
    transition: 0.3s;
}
#ix-sec-one-blog:hover div.ix-sec-bg {
    background-size: auto 90%;
    transition: 0.3s;
}

Ja... dann scheint es einen gravierenden Unterschied zwischen deinem System und meinem System zu geben.

Ich teste das mit WIN 10 und FireFox 72.0.1 (IE11, Edge, Chrome und Opera liefern das gleiche Ergebnis).

Und bei mir sieht das so aus... ohne hover:

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

und so mit hover...

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

einzige Änderung von mir, ich habe zum testen das Hintergrundbild mit einem bei mir lokal gespeicherten Bild ausgetauscht... das Original von dir habe ich ja nicht.

Achte im oberen Bild mal auf die eingeblendete Größenangabe des 'div'.

Zitat von kvnhmn

Nun, wenn ich über diesen a-Block mit der Maus gehe,dass Hintergrundbild etwas zoomt, dass klappt.

... kann nicht sein - zumindest nicht mit dem HTML und CSS Code, den du gepostet hast!

Dein <div class="ix-sec-bg"...> hat weiterhin keine Höhenangabe und wird daher auch mit 0px Höhe angezeigt... das Hintergrundbild ist gar nicht sichtbar!

Es gibt im CSS keine Anweisung, die das 'zoomen' des Hintergrundbildes verursachen könnte.

Also poste bitte mal den richtigen und vollständigen Code, der bei dir funktioniert .. und dass bitte in der Syntax für CSS und nicht in der Syntax SASS.

Ebenso lade hier bitte dein Hintergrundbild hoch (blog.svg).

Dein Code stimmt nicht mit dem überein, was du in deinem Anfangsbeitrag beschrieben hast????

Du hast du nur ein :hover in Code und dieses :hover beeinflusst nur das <span>blog</span> (opacity)... das Hintergrundbild, welches nach deiner Beschreibung gezoomt werden soll, dürfte gar nicht angezeigt werden, weil das <div> mit diesem Hintergrund keine Höhe hat... und mit 0 Höhe hat der Hintergrund auch keine Höhe!

Bitte überprüfe das mal und poste den richtigen und vollständigen Code - besser noch einen Link zur Seite.

1. du solltest in Zeile 4 den <p> Tag korrekt mit </p> schließen ... nicht mit </>

2. wie sieht das CSS zu deinem Code aus?

Dann setze mal anstelle des Pixelwertes 100% für die Höhe ein - letztlich kommt es aber darauf an, ob du den linear-gradient über die gesamte Höhe des Bodies habe willst, auch wenn mehr Inhalt auf der Seite ist, als angezeigt wird - oder ob du immer den Effekt (oben blau unten schwarz) egal, wie viel Inhalt du hast.

Hast du dem 'body' im CSS eine Höhe (height) gegeben? Dieser Effekt lässt darauf schließen, dass die Höhenvorgabe kleiner ist, als der tatsächliche Platzbedarf für den Inhalt der Seite.

1. Du solltest bei dem Aufruf der Funktion mit dem 'onclick' einen Parameter übergeben (1 . 2 oder 3) - zB onclick="changeContent(1);"

2. In der JavaScript Funktion 'changeContent' müssen dann die unterschiedlichen Texte als Variable definiert werden.

3. Mit dem beim Funktionaufruf übergebenen Parameter, kann dann zB mit einer 'Case' Abfrage jeweils der richtige Text eingefügt werden - https://www.w3schools.com/js/js_switch.asp

Da es sich bei dem von dir gewünschten, auszublendenden Text nicht um eine eigenständig anzusprechendes HTML Element handelt, sonder um Teil einer 'Linkbeschreibung' in einem <a>...</a>, muss wohl zuerst das gesamte Element unsichtbar gemacht werden (mit font-size: 0) und dann die gewünschten Elemente wieder sichtbar gemacht werden (mit font-size: deine Größepx)

#sprd-department-filter-designer > a {
  font-size: 0px;
}
.sprd-department-filter__designer-icon {
  font-size: 20px;
}
a.sprd-nav-link.customHighlight.customFilterItem.sprd-c-s3.sprd-bc-m2[href*="/create"]::after {
  content: "Selbst gestalten";
  font-size: 15px;
}

Kann das zwar nicht wirklich testen, könnte aber funktionieren. Probier es einfach aus... und wenn es nicht klappt oder unerwünschte Nebeneffekte auftreten, einfach noch mal nachfragen.

Ja das sieht doch schon deutlich besser aus - ich denke auch, dass du gemerkt hast, dass das gar nicht so schwierig ist.

Nur eine Kleinigkeit ist mir aufgefallen. Du nutzt immer noch den veralteten Meta-Tag...

<meta content="text/html; charset=utf-8" http-equiv="Content-Type">

Für HTML5 wäre der hier aber richtiger (valide)

<meta charset="utf-8">

Ansonsten kann man sicherlich am Layout und am Design noch etwas verbessern - wenn du dazu dann irgendwann kommst und Probleme/Fragen hast, hier im Forum ist immer jemand, der dir weiterhelfen kann.

Aus dem, was du hier eingefügt hast, ist nicht erkennbar, wo das Problem liegt - bitte gib uns einen Link zu der Seite.

Wie sieht die CSS Formatierung für die Klasse 'logo' aus?

Ist die Link-Adresse zu der Bilddatei richtig? ... auch auf Groß- Kleinschreibung achten.

Zitat von piet9090

Würde man dafür php verwenden?

Das wäre wohl die einfachste und schnellste Methode.

Erzeuge einfach eine Datei (zum Beispiel 'oberer_teil.php') in der der gesamte Code vor dem <div class="two"> gespeichert ist.

Dann eine zweite Datei (zum Beispiel 'unterer_teil.php') mit dem gesamten Code nach dem <div class="two">.

Den variablen Code für den Inhalt des <div class="two"> speicherst du dann in beliebig viele eigenen Dateien mit einem aussagekräftigen Namen (zum Beispiel 'studium.html')

deine 'index.php' und auch alle anderen Unterseiten sehen dann folgendermaßen aus:

<?php
include 'oberer_teil.php';
include 'studium.html'; /* hier natürlich der jeweils relevante Teil */
include 'unterer_teil.php';
?>

Zitat von Dropthemike

Was mache ich falsch ? :O

So ziemlich alles!

Du hast einen Inline-Style, der auf jeden Fall in Sachen Formatierung dominant ist und deine Formatierungen im CSS-Stylesheet überschreibt. Es sei denn, du nutzt im im Stylesheet !important.

In deinem Fall sind deine Vorgaben im Inline-Style - height: 622px; damit wird die Anweisung im Stylesheet height: auto; überschrieben das Bild bleibt 622px hoch - siehst du ja selbst auf deiner Seite.

Lösche mal deinen kompletten Inline-Style und schreibe alle Formatierungen für die Klasse .img-fluid in dein Stylesheet - und die Angaben zur 'height' kannst du komplett weglassen - oder auf 'auto' belassen. Der Browser berechnet die Höhe von selbst, wenn er die 'width' kennt... width: 830px; max-width: 100%;

Zitat von Lupus_III

Hast Du noch weitere Vorschläge?

Das ist keine Frage, auf die man wirklich eine qualifizierte Antwort geben kann. Was an deiner Seite verbesserungswürdig ist, musst du alleine entscheiden - du bzw dein Auftraggeber muss damit zufrieden sein. Wenn es was zum Verbessern gibt und du hast Schwierigkeiten das in die Tat umzusetzen, dann schlägt die Stunde der Helfer hier im Forum.

Allerdings wäre es dann anzuraten, dass du mehr Informationen zu deiner Seite gibst, als nur HTML und CSS Fragmente - am besten wäre dann ein Link zur Seite.

Schau dir mal deine CSS Formate für die Klasse 'logo' an...

.logo {
  display: flex;
  flex-direction: row;
  width: 95%;
  margin: 0 auto;
  padding: 0 30px;
  background: #fff;
  margin-top: 8%;
  margin-bottom: 4%;
  z-index: 1;
  /*border-top: 0.5em solid #009618;
  border-bottom: 0.188em solid #009618;
  border-left: 0.188em solid #009618;
  border-right: 0.188em solid #009618;*/
}

In der 4. Zeile definierst du für oberes und unteres Margin 0px - in Zeile 8 und dann 8% / 4%. Soll das so sein und wenn ja, welches Margin willst du?

In Zeile 6 machst du dann den Hintergrund weiß (#fff)... dann wird dein Hintergrundbild überdeckt!

Korrigiere das mal und melde dich wieder, wenn es immer noch nicht passt.