Toggle Navigation - Seite 3

garfield1711 · #21 (**permalink**) 17.03.2014, 16:20

Zitat:

Zitat von explanator

In diesem Teil des CSS

Code:

h1 img {
    height: 100%;
}

mal ändern auf

Code:

h1 img {
    width: 100%;
    height: auto;
}

ungetestet.

Danke für den Tip.
Wenn ich es so mache wie Du es angegeben hast, dann wird der Header im Smartphone korrekt angezeigt.
Allerdings explodiert er dann am PC.
Habe mal 2 Screenshots gemacht:

Es geht jetzt nur um die Darstellung im Header.

So ist jetzt die Darstellung im Smartphone, wie sie auch sein soll:

So sah es am PC vorher richtig aus:

Mit der richtigen Darstellung im Smartphone sieht der header am PC jetzt so aus:

Irgendwas ist da doch faul, oder?

Gruß
Garfield

explanator · #22 (**permalink**) 17.03.2014, 16:23

Dafür hast du ja die Media-queries um das anzupassen.

garfield1711 · #23 (**permalink**) 17.03.2014, 16:24

Zitat:

Zitat von explanator

In diesem Teil des CSS

Code:

h1 img {
    height: 100%;
}

mal ändern auf

Code:

h1 img {
    width: 100%;
    height: auto;
}

ungetestet.

Danke für den Tip.
Wenn ich es so mache wie Du es angegeben hast, dann wird der Header im Smartphone korrekt angezeigt.
Allerdings explodiert er dann am PC.
Habe mal 2 Screenshots gemacht:

Es geht jetzt nur um die Darstellung im Header.

So ist jetzt die Darstellung im Smartphone, wie sie auch sein soll:

So sah es am PC vorher richtig aus:

Mit der richtigen Darstellung im Smartphone sieht der header am PC jetzt so aus:

Irgendwas ist da doch faul, oder?

Gruß
Garfield

garfield1711 · #24 (**permalink**) 10.06.2014, 11:48

Hallo zusammen,

ich konnte längere Zeit aud privaten Gründen mich nicht melden oder weitermachen.
Die HP um die es hier geht funktioniert von der Darstellung jetzt soweit ganz gut.
Nur mit der Navi Anzeige im Desktop Bereich habe ich probleme.
Hane mal 2 Testmenüs hinzugefügt und die rutschen dann in die zweite Reihe.
In mobilen Geräten wird aber alles korrekt angezeigt.
Ich finde die Einstellung für die Desktopansicht fürs Menü nicht.
Weiß jemand wie ich alles wieder in eine Reihe bekomme?

Hier nochmals der Link:
Mainzer Freischützen Garde e.V.

Danke schon mal im voraus für Eure Mühe und Zeit.

Gruß
Garfield

cloned · #25 (**permalink**) 10.06.2014, 14:52

Eine kleine Mathematikaufgabe für dich:
Du gibst einem Element 16.67% Breite, wie viele passen dann in eine Zeile?

explanator · #26 (**permalink**) 10.06.2014, 19:08

Versuche es mal hiermit:

Code:

@media only screen and (min-width: 49em) {
topnav ul li {
    display: inline-block;
    text-align: center;
    width: auto;
    min-width: 6em;
    float: none;
}
}

und ul gibst du noch background-color: black damit es über die gesamte Breite Schwarz bleibt.

garfield1711 · #27 (**permalink**) 11.06.2014, 11:00

Zitat:

Zitat von cloned

Eine kleine Mathematikaufgabe für dich:
Du gibst einem Element 16.67% Breite, wie viele passen dann in eine Zeile?

Richtige Antwort: 6

Bei 8 Feldern sind es dann 12,5%.
Das stimmt.
Hast recht.
Auf die einfachsten Sachen kommt man nicht oder übersieht es.

Jetzt hab ich alles horizontal in einer Reihe.
Schon mal gut, aber bei Kartenbestellung fehlt jetzt z.B. das "g" da die Feldbreite von 12,5% nicht mehr her gibt.
Ich möchte aber auch die Schrift nicht verkleinern.
Ist es möglich, das sich in der Navi die einzelne Feldbreite nach dem Text ausrichtet aber trotzdem die Leiste der gesamten Navigation bei 100 bleibt?
Wären dann unterschiedlich große Felder in der Navi.
Hab schon gegoogelt aber speziell nichts gefunden.

Danke schon mal.

explanator · #28 (**permalink**) 11.06.2014, 11:09

Meinen Beitrag wohl übersehen, wie?

cloned · #29 (**permalink**) 11.06.2014, 11:16

Hinzufügend zu explanators Beitrag:
Du kannst auch versuchen, ob du mit flexbox das gewünschte Ergebnis erreichst.

garfield1711 · #30 (**permalink**) 11.06.2014, 11:29

Zitat:

Zitat von explanator

Meinen Beitrag wohl übersehen, wie?

Uups, sorry.
Hab jetzt Deine Variante angewendet.
Paßt sich alles an aber ich mußte float: left anwenden da ansonsten die Navigation vertikal gewesen wäre aber mit 100% breite.
Jetzt habe ich allerdings keine 100% mehr nach rechts.
Ich meine damit, das die Navi Leiste rechts nicht ganz ausgefüllt ist bis zum Rand.
Ansonsten ist Dein Tip super und ich Danke Dir schon mal.
Hab es mal aktuell hochgeladen.

Ähnliche Themen
Thema	Autor	Forum	Antworten	Letzter Beitrag
Ausrichtung Kalender	greece4u	CSS	20	14.05.2012 13:32
Navigation ist nicht mittig	Schokokrapfen	CSS	29	19.09.2011 23:19
Problem mit Navigation	safari	CSS	12	20.04.2011 11:11
Float-Problem?	mischaef	CSS	33	20.10.2010 16:20
Javascript UL Navigation im IE6	ven	CSS	7	29.04.2008 15:29