Responsive Layout: Logo und Menüleiste überlappen bei Verkleinerung des Fensters
Eingetragen von sabrina-work (7)am 27.10.2014 - 16:46 Uhr in
Hallo,
danke schonmal für eure Hilfsbereitschaft.
Auf unserer Seite http://mandu.ch/ überlappen sich Navigationbar und Logo, sobald ich sie mir in einem kleineren Fenster, also z.B. auf einem Handy angucke. Habe Logo bereits auf eine minimale Größe von width:367px verkleinert und überprüft ob margin-top unter .logo im style-css auf 32px eingestellt ist. Kann mir jemand noch andere Lösungsansätze nennen?
Schöne Grüße
Sabrina
- Anmelden oder Registrieren um Kommentare zu schreiben
Die Bildgröße des Logos war
am 27.10.2014 - 20:44 Uhr
Die Bildgröße des Logos war immer noch auf 369Pixel Breite in der Anzeige.
Hier macht es Sinn mit prozentualen Angaben zu arbeiten - im Fall der Bilder wird hierfür eine max-width: 100% gesetzt und eine height: auto. Dies skaliert dann das Logo auf die Größe des Parent-Containers.
Im Fall eurer Seite müsstest du hier schauen, ob du den Selektor #logo noch weiter anpasst.
#logo a img {
float: left;
width: auto;
height: auto;
max-width: 100%;
}
#header #logo {
width: 190px;
left: 0;
right: 0;
position: absolute;
margin: 0 auto;
margin-top: 28px;
z-index: 99;
}
Dies ergibt dann folgenden Screen:
SteffenR
Anpassung #logo Selekter
am 06.11.2014 - 10:12 Uhr
Lieber StefanR,
vielen Dank für deinen Lösungsvorschlag und die genaue Beschreibung - ich kam jetzt dazu, sie auszuprobieren.
Vielleicht mangelt es mir an CSS-Kentnissen, aber als ich es so umzusetzen versucht habe, erschien das Logo entweder verkleinert (siehe angehängtes Bild) oder, wenn ich bei height 40px statt auto angebe, gequetscht; Änderungen im width wirken sich offenbar nicht aus. Erst wenn ich die max-width auf 180% erhöhe, hat das Logo die richtige Größe, führt dann aber wieder zu Überlappungen.
Ein weiteres, damit zusammenhängendes Problem ist, dass bei der Verkleinerung des Fensters der Menübutton und Searchbutton mit dem Slider überlappt (siehe gleiches Bild). Auf deinem Screen-Shot ist das nicht der Fall - verrätst du mir den magischen Trick? :-)
Schöne Grüße
Sabrina
Arbeitest Du mit verschiedenen CSS-Dateien?
am 05.11.2014 - 17:16 Uhr
Hallo,
arbeitest Du mit media-queriesund den entsprechenden CSS-Dateien für die verschiedenen Größen der Bildschirme oder versuchst Du das anders zu lösen?
Viele Grüße
Marita Betz
sabrina-work schrieb Ein
am 05.11.2014 - 23:48 Uhr
Ein weiteres, damit zusammenhängendes Problem ist, dass bei der Verkleinerung des Fensters der Menübutton und Searchbutton mit dem Slider überlappt (siehe gleiches Bild). Auf deinen Screen-Shot ist das nicht der Fall - verrätst du mir den magischen Trick? :-)
Entferne einfach die Background-Werte für folgende Klassen:
a.menu-trigger {
background: none;
}
.search-trigger {
background: none;
}
Media queries und CSS
am 06.11.2014 - 10:35 Uhr
Hallo Marita,
danke für deine Frage. Bisher arbeite ich nur mit CSS-Dateien, zu media queries müsste ich mich erst einmal ausführlich belesen, ein völlig neues Feld für mich. Das Astrum-Template, das ich verwende, ist bereits responsive und es gibt eine responsive.css-Datei, deshalb ist das vielleicht in diesem Fall gar nicht nötig!?
Schöne Grüße
Sabrina
Super @Goekmen, genau so hat
am 06.11.2014 - 10:50 Uhr
Super @Goekmen, genau so hat es geklappt, danke für deinen wertvollen Tipp!
Jetzt müsste ich nur noch herausfinden, wie ich die Überlappung Logo - Menü/Searchbar vermeide, ohne das Logo zu verkleinern.
Schöne Grüße in die Runde!