zurück zur Startseite
  


Zurück XHTMLforum > (X)HTML und CSS > CSS
Seite neu laden Responsive: Menu neben Logo

Antwort
 
LinkBack Themen-Optionen Ansicht
  #1 (permalink)  
Alt 12.08.2014, 00:41
Erfahrener Benutzer
XHTMLforum-Mitglied
Thread-Ersteller
 
Registriert seit: 16.11.2007
Beiträge: 381
ChOpSueY! befindet sich auf einem aufstrebenden Ast
Standard Responsive: Menu neben Logo

Hallo Gemeinde,
ich bin gerade dabei mich mit dem Thema Responsive Webdesign ein wenig auseinanderzusetzen. Ich habe hier mal eine recht simple Webseite aus einem Video-Tutorial nachgebaut und würde gerne ein paar Dinge ausprobieren und dabei lernen:

Testcase

Ich verzweifele jetzt dabei Das Menu beim Media Query 960px rechts neben dem Logo zu platzieren. Ich würde gerne, dass die Menüpunkte auf Höhe des Logos rechts gefloatet werden. Dass das Problem scheinbar in der Breite des #navMain liegt habe ich schon herausgefunden. Doch wie schaffe ich, dass das Menu auch immer ganz rechts am Rand positioniert wird?

Vielen Dank schonmal für die Hilfe.

Gruß
ChOp
Mit Zitat antworten
Sponsored Links
  #2 (permalink)  
Alt 12.08.2014, 04:12
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 10.01.2010
Beiträge: 1.123
MrMurphy ist ein sehr geschätzer MenschMrMurphy ist ein sehr geschätzer MenschMrMurphy ist ein sehr geschätzer Mensch
Standard

Hallo,

dein Problem scheint float zu sein. Eventuell hast du das clearen vergessen.

Für die Layoutgestaltung solltest du dich besser mit Flexbox beschäftigen. Ich habe mal ein einfaches responsive Beispiel erstellt:

HTML5: Chopsuey - Header Layout

Das CSS für die Boxen (ohne Farben, Abstände und ähnliches sowie ohne erwünschte Präfixe - also das funktionierende Rohgerüst):

Code:
   @media all {
      header {
         display: flex;
         flex-wrap: wrap;
         justify-content: space-between;
      }
      li {
         display: inline-block;
      }
   }
   @media only screen and (max-width: 840px) {
      header {
         display: block;
      }
      ul {
         display: flex;
         flex-wrap: wrap;
      }
      li {
         display: list-item;
         width: 50%;
      }
   }
   @media only screen and (max-width: 400px) {
      ul {
         display: block;
      }
      li {
         width: 100%;
      }
   }
Damit müsstest du eigentlich direkt deine aktuellen CSS-header-Angaben ersetzen können.

Selbst wenn sich die Anzahl der Einträge

HTML5: Chopsuey - Header Layout

ändert muss im Prinzip nichts angepasst werden. Keine Neuberechnung und Änderung der Breite der li-Elemente, wie es bei anderen Lösungen die Regel ist, oder andere Einheitenänderungen.

Es reicht das Auslösen der ersten Media-Query (aktuell max-width: 840px) anzupassen, was ich im vorigen und im folgenden Beispiel noch nicht mal gemacht habe. Das kommt erst im vierten Beispiel.

Es wird ein neues Logo gewünscht, schmaler und höher als das aktuelle. Kein Problem, einfach den Pfadnamen der img-Datei anpassen. Am Flexbox-Layout sind keine Anpassungen erforderlich.

HTML5: Chopsuey - Header Layout

Im folgenden Beispiel habe ich die MediaQuery von 840px auf 600px geändert:

HTML5: Chopsuey - Header Layout

Gruss

MrMurphy

Geändert von MrMurphy (12.08.2014 um 09:47 Uhr)
Mit Zitat antworten
Sponsored Links
  #3 (permalink)  
Alt 12.08.2014, 13:58
Erfahrener Benutzer
XHTMLforum-Mitglied
Thread-Ersteller
 
Registriert seit: 16.11.2007
Beiträge: 381
ChOpSueY! befindet sich auf einem aufstrebenden Ast
Standard

Zitat:
Zitat von MrMurphy Beitrag anzeigen
Hallo,

dein Problem scheint float zu sein. Eventuell hast du das clearen vergessen.

Für die Layoutgestaltung solltest du dich besser mit Flexbox beschäftigen. Ich habe mal ein einfaches responsive Beispiel erstellt:

HTML5: Chopsuey - Header Layout

Das CSS für die Boxen (ohne Farben, Abstände und ähnliches sowie ohne erwünschte Präfixe - also das funktionierende Rohgerüst):

Code:
   @media all {
      header {
         display: flex;
         flex-wrap: wrap;
         justify-content: space-between;
      }
      li {
         display: inline-block;
      }
   }
   @media only screen and (max-width: 840px) {
      header {
         display: block;
      }
      ul {
         display: flex;
         flex-wrap: wrap;
      }
      li {
         display: list-item;
         width: 50%;
      }
   }
   @media only screen and (max-width: 400px) {
      ul {
         display: block;
      }
      li {
         width: 100%;
      }
   }
Damit müsstest du eigentlich direkt deine aktuellen CSS-header-Angaben ersetzen können.

Selbst wenn sich die Anzahl der Einträge

HTML5: Chopsuey - Header Layout

ändert muss im Prinzip nichts angepasst werden. Keine Neuberechnung und Änderung der Breite der li-Elemente, wie es bei anderen Lösungen die Regel ist, oder andere Einheitenänderungen.

Es reicht das Auslösen der ersten Media-Query (aktuell max-width: 840px) anzupassen, was ich im vorigen und im folgenden Beispiel noch nicht mal gemacht habe. Das kommt erst im vierten Beispiel.

Es wird ein neues Logo gewünscht, schmaler und höher als das aktuelle. Kein Problem, einfach den Pfadnamen der img-Datei anpassen. Am Flexbox-Layout sind keine Anpassungen erforderlich.

HTML5: Chopsuey - Header Layout

Im folgenden Beispiel habe ich die MediaQuery von 840px auf 600px geändert:

HTML5: Chopsuey - Header Layout

Gruss

MrMurphy

Hi Murphy,
erstmal vielen Dank für die Mühe die du dir gemacht hast. Ich muss gestehen ich bin dadurch erstmal komplett verwirrt worden, weil ich natürlich die Ansätze meines Video Tutorials eigentlich weiterführen wollte. Da ich in Sachen Responsive noch Anfänger bin war es für mich schwer die Gedankengänge auf mein Projekt zu übertragen.

Außerdem kommt noch hinzu, dass mein Testprojekt ja eigentlich Mobile-First aufgebaut war.

Ich habe mal versucht das Ganze neu aufzubauen und habe mal auf Mobile First verzichtet, erst einmal ohne Breakpoints. Da bin ich eigentlich hier schon auf ein ganz gutes Ergebnis gekommen, auch mit deinem Ansatz:

Testcase 2

Was ich nicht verstehe: Wenn ich versuche den Menüpunkten jetzt einen margin zu geben -

Code:
#navMain li {
         display: list-item;
         width: auto;
         float: left;
         margin-right: 3%;
}
bricht der Menüpunkt "Kontakt" in die nächste Zeile - wieso?

Eine andere Frage an dich wäre, wie es mit der Browserunterstützung für flexbox aussieht? Lt. caniuse.com werden IE8 und IE9 nicht unterstützt. Gibt es da einen Workaround? Ansonsten würde ich doch gerne wieder auf eine Lösung mit float zurückgreifen.

Gruß
ChOp
Mit Zitat antworten
  #4 (permalink)  
Alt 12.08.2014, 16:26
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 10.01.2010
Beiträge: 1.123
MrMurphy ist ein sehr geschätzer MenschMrMurphy ist ein sehr geschätzer MenschMrMurphy ist ein sehr geschätzer Mensch
Standard

Hallo,

Zitat:
Eine andere Frage an dich wäre, wie es mit der Browserunterstützung für flexbox aussieht? Lt. caniuse.com werden IE8 und IE9 nicht unterstützt. Gibt es da einen Workaround? Ansonsten würde ich doch gerne wieder auf eine Lösung mit float zurückgreifen.
Alles klar, Angst essen Seele auf. Viel Erfolg mit float.

Gruss

MrMurphy
Mit Zitat antworten
  #5 (permalink)  
Alt 12.08.2014, 16:51
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 30.01.2014
Beiträge: 2.247
cloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblick
Standard

Das hat nichts mit Angst zu tun sondern mit den Anforderungen, welche Browserversionen unterstützt werden sollen. Auch ich kann flexbox noch nicht verwenden, da wir auch IE8+ unterstützen müssen.

Ein allgemeiner Tipp, wie du mediaqueries selber gut testen und CSS dafür debuggen kannst:
Im Firefox drückst du Strg + Shift + M, dann kannst du die gewünschten Größen komfortabel auswählen und mittels Firebug alles untersuchen.
Im Chrome gibt es in den developertools auch die Möglichkeit unter dem Punkt "Emulation" (ist etwas versteckt, aber auch nicht so schwer zu finden)
Dein Problem, warum das Menü nicht neben dem Logo ist: Du definierst display:block für die nav, damit kommt es automatisch in die neue Zeile. Wenn du es neben dem Logo platzieren willst so musst du es auch floaten. Und zusätzlich natürlich auch eine geeignete Breite definieren, sonst passt es nicht neben das Logo.

Edit:
Und nur für diese unnötigen Aussagen wie "Angst essen Seele auf" muss hier gespammed werden? Unnötiger Beitrag vom Herrn Murphy. :/

Geändert von cloned (12.08.2014 um 17:24 Uhr)
Mit Zitat antworten
  #6 (permalink)  
Alt 12.08.2014, 17:17
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 10.01.2010
Beiträge: 1.123
MrMurphy ist ein sehr geschätzer MenschMrMurphy ist ein sehr geschätzer MenschMrMurphy ist ein sehr geschätzer Mensch
Standard

Hallo,

schreib ich ja:

Angst essen Seele auf.

Gruss

MrMurphy
Mit Zitat antworten
  #7 (permalink)  
Alt 12.08.2014, 17:45
Erfahrener Benutzer
XHTMLforum-Mitglied
Thread-Ersteller
 
Registriert seit: 16.11.2007
Beiträge: 381
ChOpSueY! befindet sich auf einem aufstrebenden Ast
Standard

Oh man, irgendwann traue ich mich bald gar nicht mehr hier ne Frage zu stellen.... Da stelle ich zwei ganz normale Fragen und schreibe noch, dass ich noch neu mit dem Thema responsive bin und dann sowas....

@cloned: Danke für deine Hilfe, hat mir weitergeholfen, zumindest habe ich es jetzt mit float hinbekommen. Nach meinem letzten Post habe ich das Video-Training von Jonas Hellwig durchgearbeitet - es ist ja nicht so, dass ich mir Hinweise nicht zu Herzen nehme. Ich habe somit doch einige Tools zur Hand für die Darstellung auf mobilen Endgeräten....

Danke
Mit Zitat antworten
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
Problem mit PullDown Menu auf ipad/iphone smisonline2 CSS 1 13.05.2013 18:13
Hilfe css Menu center xXcyberXx CSS 5 28.11.2010 20:51
Linkverhalten im IE6 ChOpSueY! CSS 19 19.05.2008 23:48
Drop Down Menu Positionsproblem Schky CSS 4 21.04.2008 14:09
Problem mit vertikaler Navigation Krissie CSS 0 15.08.2007 13:51


Alle Zeitangaben in WEZ +2. Es ist jetzt 06:41 Uhr.