nicht angemeldet
Anpassung an Bildschirm/Zoom
Matthias Apsel
JürgenBHallo.
das nächste Problem:
Meine Website ist nun in den Endzügen (Fotos und ein bisschen Kreativität fehlen noch, aber das Grundgerüst steht). Leider verschieben sich Header-Foto und Logo übereinander, wenn ich eine andere Bildschirmgröße verwende oder ranzoome.
http://www.natuerlich-gesundes-pferd.de
Wo liegt das Problem und was kann ich verändern (möglichst ohne alles nochmal neu zu machen ;))
Danke und Gruß Lina
-
Liebe Lina,
Wo liegt das Problem und was kann ich verändern (möglichst ohne alles nochmal neu zu machen ;))
Du möchtest Dir Gedanken darüber machen, wie Deine Seite auf einem kleinen Smartphone-Display (Breite kleiner 480px!) aussehen soll. Dort ist naturgemäß sehr wenig Raum für Deinen Inhalt. Also überlege Dir sehr gut, wie Du Deinen Inhalt dort unterbringst. Dann überlegst Du Dir sehr gut, wie Du Deinen Inhalt auf einer Breite bis zu 800px gestaltest, und wie Du große Breiten jenseits der 1000px bedienen willst.
Tool zum Testen: http://lab.maltewassermann.com/viewport-resizer/
BTW: Dein <div id="oben"> möchtest Du in <nav> umbenennen.
Liebe Grüße,
Felix Riesterer.
--
"Wäre die EU ein Staat, der die Aufnahme in die EU beantragen würde, müsste der Antrag zurückgewiesen werden - aus Mangel an demokratischer Substanz." (Martin Schulz, Präsident des EU-Parlamentes)-
Om nah hoo pez nyeetz, Felix Riesterer!
Du möchtest Dir Gedanken darüber machen, wie Deine Seite auf einem kleinen Smartphone-Display (Breite kleiner 480px!) aussehen soll. Dort ist naturgemäß sehr wenig Raum für Deinen Inhalt. Also überlege Dir sehr gut, wie Du Deinen Inhalt dort unterbringst. Dann überlegst Du Dir sehr gut, wie Du Deinen Inhalt auf einer Breite bis zu 800px gestaltest, und wie Du große Breiten jenseits der 1000px bedienen willst.
Man sollte die Unterscheidung nicht anhand von Pixelgrößen treffen, sondern nach dem Inhalt. Also was soll passieren, wenn die Überschrift nicht mehr einzeilig bleibt. Kriterium ist also eine Breitenangabe in em.
Tool zum Testen: http://lab.maltewassermann.com/viewport-resizer/
Gunther hat ein ähnliches Tool für unser Wiki geschrieben. Vergleiche
BTW: Dein <div id="oben"> möchtest Du in <nav> umbenennen.
unbedingt.
Matthias
-
Lieber Matthias Apsel,
Gunther hat ein ähnliches Tool für unser Wiki geschrieben. Vergleiche
sehr NICE! Mal schauen, wie ich das im Wiki besser verlinke. Die Auflistung unter "Helferlein" als Unterkapitel zu "Hilfsmittel" wirkt auf mich zuerst unglücklich. Vielleicht ist eine tiefere Integration ähnlich wie beim Frickl sinnvoll? So à la Link "Viewport-Test" bei den Beispielen?
Was meinst Du?
Liebe Grüße,
Felix Riesterer.
--
"Wäre die EU ein Staat, der die Aufnahme in die EU beantragen würde, müsste der Antrag zurückgewiesen werden - aus Mangel an demokratischer Substanz." (Martin Schulz, Präsident des EU-Parlamentes)-
Hallo Ingrid,
Gunther hat ein ähnliches Tool für unser Wiki geschrieben. Vergleiche
man kann jetzt Beispiele mit einem Link zum Viewport-Emulator ausrüsten (Beispiel: Tabellen responsiv gestalten). Aus dem Frickl heraus ist der Viewport-Emulator auch erreichbar. Das sollte nun doch etwas besser eingebunden sein, als ein Link unter "Helferlein", findest Du nicht?
Liebe Grüße,
Felix Riesterer.
--
"Wäre die EU ein Staat, der die Aufnahme in die EU beantragen würde, müsste der Antrag zurückgewiesen werden - aus Mangel an demokratischer Substanz." (Martin Schulz, Präsident des EU-Parlamentes)-
Om nah hoo pez nyeetz, Felix Riesterer!
Ich habe ihn schon Dienstag oder so prominent auf der Startseite verlinkt. PS: Versuch mal, ob es statt "viewportemulator=" "viewportemulator" heißen kann. Also tatsächlich ein Flag und nicht ein leeres Attribut. Beispiele könntest du in der Vorlage Toc finden.
Matthias
-
Lieber Matthias Apsel,
PS: Versuch mal, ob es statt "viewportemulator=" "viewportemulator" heißen kann. Also tatsächlich ein Flag und nicht ein leeres Attribut.
done. Es fehl noch eine Anpassung des CSS, damit der Link zum Viewport-Emulator anders aussieht. Aber das ist mir jetzt ersteinmal weniger wichtig.
Ein reines Weiß finde ich sowohl für den "frickl!"-Link als auch für den Link zum Viewport-Emulator nicht gut. Den Frickl-Link hätte ich gerne kunterbunt (lieber per text-fill-color als mittels <span>-Suppe im Markup) und beim Viewport-Emulator-Link weiß ich's noch nicht.
Liebe Grüße,
Felix Riesterer.
--
"Wäre die EU ein Staat, der die Aufnahme in die EU beantragen würde, müsste der Antrag zurückgewiesen werden - aus Mangel an demokratischer Substanz." (Martin Schulz, Präsident des EU-Parlamentes)
-
-
-
-
Hallo Matthias,
Tool zum Testen: http://lab.maltewassermann.com/viewport-resizer/
Gunther hat ein ähnliches Tool für unser Wiki geschrieben. Vergleiche
nur zur Info: Im Firefox bekommt man mit Strg Shift M einen Viewport-Emulator.
Gruß, Jürgen
-
Lieber JürgenB,
nur zur Info: Im Firefox bekommt man mit Strg Shift M einen Viewport-Emulator.
vielen Dank für diesen Hinweis! Das wusste ich bisher noch nicht. Eigentlich eine coole Sache... wenn ich auch am DOM etwas verändern könnte, um so live meine Anpasungen auszuprobieren. Ja, ich nutze den Firebug und kenne auch den Inspektor (SHIFT+CTRL+C), aber so ein Code-Editor à la jsFiddle wäre schon schöner.
Liebe Grüße,
Felix Riesterer.
--
"Wäre die EU ein Staat, der die Aufnahme in die EU beantragen würde, müsste der Antrag zurückgewiesen werden - aus Mangel an demokratischer Substanz." (Martin Schulz, Präsident des EU-Parlamentes)
-
-
Div"oben" ist mit Absicht so benannt, da nav meine Hauptnavigation ist ;) Schlimm?
-
Liebe Lina,
Schlimm?
ja. Es ist eine Navigation und die gehört in ein <nav>.
Leider kann ich die Seite natuerlich-gesundes-pferd.de nicht mehr im Browser aufrufen, sonst hätte ich mit dem Quellcode vor Augen eine Alternative für Dein CSS gewusst.
Liebe Grüße,
Felix Riesterer.
--
"Wäre die EU ein Staat, der die Aufnahme in die EU beantragen würde, müsste der Antrag zurückgewiesen werden - aus Mangel an demokratischer Substanz." (Martin Schulz, Präsident des EU-Parlamentes)-
Hallo Felix,
sorry, Seite steht wieder drin :)
Dann hätte ich im Stylesheet einmal nav und einmal #nav oder wie? Denn dann hätte ich ja in meinem html nav als Hauptnavigation und div id="nav" als weitere Navigation...
Grüße Lina
-
Liebe Lina,
für folgenden Dokumentaufbau
<body> <nav /> <header><nav /></header> <main /> </body>kannst Du folgende Selektoren benutzen:
body > nav { /* Hauptnavigation */ } header > nav { /* Kategorien-Navi */ }Persönlich mag ich Deinen Dokumentenaufbau nicht. Wäre es mein Projekt, würde ich es so strukturieren:
<body> <main role="main"> <article> <h1>Gesundes Pferd - glücklicher Reiter</h1> <p>....</p> </article> <aside> <nav> <h2>Kategorien</h2> <ul /> </nav> </aside> </main> <header /> <nav> <h2>Navigation</h2> <ul /> </nav> </body>Die Seite kann mit cleverem CSS trotzdem so aussehen, wie Deine...
Liebe Grüße,
Felix Riesterer.
--
"Wäre die EU ein Staat, der die Aufnahme in die EU beantragen würde, müsste der Antrag zurückgewiesen werden - aus Mangel an demokratischer Substanz." (Martin Schulz, Präsident des EU-Parlamentes)
-
-
Om nah hoo pez nyeetz, Felix Riesterer!
ja. Es ist eine Navigation und die gehört in ein <nav>.
Einspruch. „Note: Not all groups of links on a page need to be in a nav element — the element is primarily intended for sections that consist of major navigation blocks. In particular, it is common for footers to have a short list of links to various pages of a site, such as the terms of service, the home page, and a copyright page. The footer element alone is sufficient for such cases; while a nav element can be used in such cases, it is usually unnecessary.“ w3c/semantics/the nav element
Matthias
-
-
-
-
Hallo Felix,
das Ziel ist mir klar. An der Umsetzung scheitert es. Gibt es nicht eine Möglichkeit, das Layout automatisch anzupassen? Oder was muss ich machen, damit es funktioniert?
Grüße Lina
-
