zurück zur Startseite
  


Zurück XHTMLforum > (X)HTML und CSS > CSS
Seite neu laden Abstände/Titelbild zoomen

Antwort
 
LinkBack Themen-Optionen Ansicht
  #1 (permalink)  
Alt 31.08.2019, 16:54
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 31.08.2019
Beiträge: 7
helpcss befindet sich auf einem aufstrebenden Ast
Standard Abstände/Titelbild zoomen

Hallo Zusammen

Ich möchte gerne, dass der Abstand zwischen Header.Bild und Inhalt-Titel verkleinern. Der Abstand zwischen Header Bild un Inhalt-Titel soll egal mit welcher Auflösung die Homepage besucht wird immer gleich aussehen.
Ich habe mit Hilfe des Browser EntwicklungsTool versucht herauszufinden wie der Abschnitt heisst.
Die Homepage ist mit Wordpress aufgebaut und verwendet das Design "Nisarg"

Es geht um die Homepage: http://test.myservice4you.ch

Kann mir jemand ein Tipp geben, wie ich dies herausfinde, respektiv anpassen kann.
Mit Zitat antworten
Sponsored Links
  #2 (permalink)  
Alt 31.08.2019, 19:11
Erfahrener Benutzer
XHTMLforum-Mitglied
 
Registriert seit: 10.07.2018
Beiträge: 110
Sailor56 befindet sich auf einem aufstrebenden Ast
Standard

Dein CSS ist ziemlich unübersichtlich... um nicht verwurschtelt zu sagen.
Aber dein Problem liegt darin begründet, dass du deinem <div class="site-header"> zum einen eine
Code:
height: 100px !important;
gibst und gleichzeitig diesem DIV ein Hintergrundbild mit
Code:
background-size: 60%;
.
Das passt nicht zusammen - das DIV hat eine feste Höhe (100px) und das Hintergrundbild schrumpft bis es klein und mickrig ist... eben die 60%, abhängig von der aktuellen Bildschirmbreite.
Um das zunächst mal zu beheben müsstest du das Hintergrundbild auf
Code:
background-size: contain;
setzen und dann dafür sorgen, dass bei kleineren Bildschirmen auch das DIV entsprechend der Proportionen des Hintergrundbildes (mit)schrumpft...
HTML-Code:
@media screen and (max-width: 1000px){
    .site-header {
       height: calc(100vw / 10) !important;
    }
}
Teste das mal und wenn es dann noch nicht deinen Wünschen entspricht wieder nachfragen.
Mit Zitat antworten
Sponsored Links
  #3 (permalink)  
Alt 31.08.2019, 19:49
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 31.08.2019
Beiträge: 7
helpcss befindet sich auf einem aufstrebenden Ast
Standard

Vielen Dank schon mal für die Infos.

die "background-size: 60%;" habe ich gesetzt gehabt im css, da ich möchte, dass das Bild NUR so breit ist wie das Menü oben oder so breit wie das Kontaktformular Kontaktformular.

habe den code nun angepasst auf "background-size: contain;" jetzt wird das Header-Bild auf die ganze breite verteilt. Mit 60% hatts gut geklappt für wenn man es an einem grossen Bildschirm anschaut. aber wenn mans verkleinert hat, wurde der Abstand zwischen Header-Bild und Titel "Kontaktformular" zu gross.
Auch jetzt finde ichs etwas zu gross der Abstand zwischen Header-Bild und Titel "Kontaktformular"
Auch der Abstand zwischen Titel und dem Kontaktformular würde ich gerne etwas verkleinern. wenn dies geht
Mit Zitat antworten
  #4 (permalink)  
Alt 31.08.2019, 20:44
Erfahrener Benutzer
XHTMLforum-Mitglied
 
Registriert seit: 10.07.2018
Beiträge: 110
Sailor56 befindet sich auf einem aufstrebenden Ast
Standard

Wenn du nicht möchtest, dass sich das Bild bei kleinerem Bildschirm auf die gesamte Breite ausdehnt, dann musst du ein bisschen mit den Werten in der MediaQuery spielen.
So wie ich es im vorherigen Post angegeben habe, ist es so gewollt, dass das Bild eben sich bis 100% ausdehnt.
Aber versuche mal...
HTML-Code:
@media screen and (max-width: 1400px){
    .site-header {
       height: calc(100vw / 14) !important;
    }
}
oder
HTML-Code:
@media screen and (max-width: 1200px){
    .site-header {
       height: calc(100vw / 12) !important;
    }
}
Wichtig ist nur, dass du die Proportionen des Bildes (1000x100) einhältst.
Spiel mal mit den Werten, dann siehst du schon, wie es funktioniert.

Was du mit diesen Werten machst, bestimmt den Zeitpunkt (Bildschirmbreite) ab wann das DIV anfängt zu schrumpfen - das Hintergrundbild schrumpft dann automatisch mit.
Mit Zitat antworten
  #5 (permalink)  
Alt 31.08.2019, 22:16
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 31.08.2019
Beiträge: 7
helpcss befindet sich auf einem aufstrebenden Ast
Standard

Ich möchte egal welche Bildschirm grösse es ist, dass das Header Bild nie breiter ist als das Kontaktformular oder das Menü oben.

Geändert von helpcss (31.08.2019 um 22:42 Uhr)
Mit Zitat antworten
  #6 (permalink)  
Alt 31.08.2019, 22:44
Erfahrener Benutzer
XHTMLforum-Mitglied
 
Registriert seit: 10.07.2018
Beiträge: 110
Sailor56 befindet sich auf einem aufstrebenden Ast
Standard

Du hast auch an der 'height'-Einstellung für das DIV .site-header was geändert!
Bis vorhin waren da height: 100px !important; eingetragen - jetzt hast du jede Menge @mediaQueries aktiviert, die je nach Bildschirmbreite die Höhe des DIV's festlegen. Dann funktioniert das auch nicht!
Nochmal zur Erklärung.
Mit der Anweisung
Code:
background-size: contain;
legst du fest, dass sich die Div-Größe anpasst, so dass es immer vollständig zu sehen ist. Wobei in deinem Fall die Höhe maßgeblich ist - die Breite passt sich automatisch an.
Bei der ursprünglich angegebenen Höhe von 100px wird das Bild dann 1000px breit angezeigt. Jetzt... durch deine Änderungen... wird aber die Höhe in Stufen bis auf 160px erhöht und das passt dann schon mal gar nicht!
Mit Zitat antworten
  #7 (permalink)  
Alt 31.08.2019, 23:10
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 31.08.2019
Beiträge: 7
helpcss befindet sich auf einem aufstrebenden Ast
Standard

Ja, die Height: 100px ! importaint habe ich wieder entfernt, da ich dies selbst hingeschrieben habe.
Den so war das Bild wenigstens wenn der Bildschirm 100% geöffnet war korrekt.
Kann ich auch anstelle Height auch width angeben.

also mein Ziel ist es, egal welche Bildschirm grösse der Besucher hat, dass das Header Bild immer die breite des Kontaktformular oder Menü hat und sich dann die grösse selbst anpasst.
Aber der Abstand zum Titel unterhalb des Header-Bild soll immer gleich gross sein und nicht, wenn vergrössern.
Mit Zitat antworten
  #8 (permalink)  
Alt 01.09.2019, 08:14
Erfahrener Benutzer
XHTMLforum-Mitglied
 
Registriert seit: 10.07.2018
Beiträge: 110
Sailor56 befindet sich auf einem aufstrebenden Ast
Standard

Ok... neuer und hoffentlich letzter Versuch.
Die Breite deiner Inhaltselemente wird durch @MediaQueries in 4 Stufen jeweils auf einen passenden Wert gesetzt. Das müssen wir dann für den Container 'nachbauen', in dem dein Header-Bild als Hintergrund drin ist.
Es muss aber wieder die Höhe des Containers an die Bildschirmbreite angepasst werden.
Der folgende CSS-Code muss ganz am Ende deiner Style-Anweisungen stehen, damit alle vorherigen Anweisungen überschrieben und damit ungültig werden.
Das geht am besten im 'zusätzlichen CSS' im Customizer und dort eben als letztes.
HTML-Code:
.site-header {
    height: calc(100vw / 10.3) !important;
}
@media screen and (min-width: 768px) {
.site-header {
    height: 72px !important;
}
}
@media screen and (min-width: 992px){
.site-header {
    height: 95px !important;
}
}  

@media screen and (min-width: 1200px) {
.site-header {
    height: 114px !important;
}
}
Mit den Werten kannst du natürlich noch spielen, es sollte aber so schon gut passen.
Mit Zitat antworten
  #9 (permalink)  
Alt 01.09.2019, 10:02
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 31.08.2019
Beiträge: 7
helpcss befindet sich auf einem aufstrebenden Ast
Standard

Ich habe den Code bei sit-header angepasst, aber es macht nicht was ich möchte.
ich muss es glaube ich aufgeben. Den dieses WordPress Thema Nisarg kann man nicht so anpassen was ich will. Schade, den sonst die Aufteilung und Struktur des Thema würde mir passen.

den ich sitze nun seit 2 tagen schon daran und drehe mich um den kreis.

wenn es für vollbild stimmt das header bild und der Abstand, dann passt es nicht mehr die bildgrösse und vor allem auch der abstand, wenn der Bildschirm kleiner ist

Das Header Bild soll immer so gross sein, wie das Menü oder Kontaktformular. Der Abstand zwischen Header-Bild und Inhalt-Titel soll immer gleich gross sein, egal welche Auflösung der Bildschirm hat.
Mit Zitat antworten
Sponsored Links
  #10 (permalink)  
Alt 01.09.2019, 11:00
Erfahrener Benutzer
XHTMLforum-Mitglied
 
Registriert seit: 10.07.2018
Beiträge: 110
Sailor56 befindet sich auf einem aufstrebenden Ast
Standard

Ich weiß ja nicht, was du da so nebenher mit deinem CSS machst - aber anscheinend hast du das
Code:
background-size: contain;
wieder gelöscht. Das muss aber drin bleiben, sonst ist das kein Wunder, wenn du (entgegen dem, was ich dir vorschlage) irgendwelche Dinge grundlos änderst.

Edit --- code korrigiert.

Geändert von Sailor56 (01.09.2019 um 11:07 Uhr)
Mit Zitat antworten
Sponsored Links
Antwort

Themen-Optionen
Ansicht

Forumregeln
Es ist Ihnen nicht erlaubt, neue Themen zu verfassen.
Es ist Ihnen nicht erlaubt, auf Beiträge zu antworten.
Es ist Ihnen nicht erlaubt, Anhänge hochzuladen.
Es ist Ihnen nicht erlaubt, Ihre Beiträge zu bearbeiten.

BB-Code ist an.
Smileys sind an.
[IMG] Code ist an.
HTML-Code ist aus.
Trackbacks are an
Pingbacks are an
Refbacks are aus


Ähnliche Themen
Thema Autor Forum Antworten Letzter Beitrag
DIV's verschieben sich beim zoomen IxonTV (X)HTML 9 07.08.2018 08:15
Fluides IMG beim hovern zoomen schatzi CSS 4 11.09.2014 16:33
Zentrierter Mittelcontainer - Außencontainer verschieben sich beim Zoomen ... Phoenix2048 CSS 27 04.09.2014 19:54
Problem: Navigation verschiebt sich beim Zoomen Thasoullady CSS 4 24.08.2013 11:21
Beim Zoomen zerreist Menü dp-wurzel CSS 1 04.02.2008 00:54


Alle Zeitangaben in WEZ +2. Es ist jetzt 18:59 Uhr.