CSS Webdesign - Navigation - Darstellung

[auch-da]

Hi,

ich versuche seit Wochen eine gut aussehende Navigation zu erstellen. Ich möchte sehr gerne eine Navigation wie in dem Bild machen, nur ich frage mich die ganze Zeit wie diese "Fugen" dort gemacht worden bzw. welche Rahmenart das ist. Ich habe alle ausprobiert aber es sieht einfach nicht so aus wie dort. Wurde dies mit einem Grafikprogramm gemacht? Oder mit Box-Shadow? Ich hatte als erstes vermutet das es mit "outset" oder "groove" gemacht wird. Allerdings auch ohne Erfolg. Vielleicht könnt ihr mir dabei helfen. Ich besitze einige Kenntnisse in HTML5 und CSS, bin somit nicht ganz unerfahren aber definitiv muss ich noch viel lernen.

Danke im voraus.

mfg
auchda

 

[Yuuri]

Hast du nur das Bild oder auch ein funktionierendes Exemplar?

 

[Schwenni]

Warum schaust du nicht im Quelltext?
Ich tippe auf Hintergrundbild...

Einfach mal Link zur Seite posten dann schaun wir nach.

 

[auch-da]

Derzeit kann ich dir nur eine kleine Webseite zeigen. Die noch im Aufbau ist, dort möchte ich gerne das komplette Design ändern. Vorallem die Navigation.

Habe ich selbst geschrieben und ohne ein CMS oder Vorlagen.

Ich habe nur das Bild, der Quelltext existiert nicht mehr, die haben ein neues Design, sonnst hätte ich schon längst nachgeschaut.

mfg
auchda

 

[smallthings]

Entweder sind es schlicht .jpgs oder es hat etwas mit border-style zu tun.

https://developer.mozilla.org/en-US/docs/Web/CSS/border-style

Wenn man mit den Parametern und Werten herumspielt bekommt man vielleicht so einen Effekt hin.

Aber es müsste ja eigentlich auch im Quelltext zu finden sein, von daher: lesen, lesen, lesen Schau in den Quelltext der Seite die Du kopieren bzw imitieren willst nach.

 

[yaegi]

Schau dir am besten an, wie Apple das gemacht hat:
http://www.apple.com/de/

Die Bilddaten der Navi sind in einem einzigen png abgespeichert:

per css werden einfach die benötigten Teile "herausgeschnitten" und entsprechend angezeigt.

Navi CSS:
http://www.apple.com/global/nav/styles/navigation.css

 

[auch-da]

Danke für die Antworten, habe es schon fast vermutet das es mit Grafiken gemacht ist. Allerdings habe ich so gut wie keine Ahnung von Grafikbearbeitung. -_-

mfg
auchda

 

[Kausalat]

Hintergrundgrafiken sind dafür nicht mehr nötig und aus Sicht eines responsiblen Designs mit vielen unterschiedlichen Pixeldichten auch fehl am Platz.

Hier hast du ein Tutorial, in dem ein ähnliches Menü ohne eine einzige Grafik nur mit CSS gestaltet wird. Du müsstest nur noch die Farben anpassen, sofern du dich nicht mit der vorgegebenen Farbpalette zufriedengibst.

 

[auch-da]

Hintergrundgrafiken sind nicht dafür nicht mehr nötig und aus Sicht eines responsiblen Designs mit vielen unterschiedlichen Pixeldichten auch fehl am Platz.

Hier hast du ein Tutorial, in dem ein ähnliches Menü ohne eine einzige Grafik nur mit CSS gestaltet wird. Du müsstest nur noch die Farben anpassen, sofern du dich nicht mit der vorgegebenen Farbpalette zufriedengibst.

Vielen Dank für das Tutorial, das war genau das was ich gesucht habe! Danke

mfg
auchda

 

[palace4d]

Beachte beim Tutorial von Kausalat, dass die Verläufe noch in einer alten Syntax verfasst sind.

Alte Syntax W3C

background-image: linear-gradient(top, red, blue);

Neue Syntax W3C

background-image: linear-gradient(to top, red, blue);

 

[auch-da]

Danke für den Hinweis, schaue mir eh nur den Code an und werde es dann selbst schreiben. In HTML5 und CSS3

mfg
auchda

 

[tiwa86]

Wie meine Vorredner schon sagten: border-left und border-right sind hier das Stichwort und sollten den gewünschten Effekt erzielen. Hierbei kann man auch gleich mehere Werte hintereinander schreiben:

Beispiel

border-left: 1px solid #fff
border-left: [Stärke] [Style] [Farbwert]

Spart dann auch etwas CSS-Zeilen


Background-Grafiken als Sprite eingesetzt gehen zwar auch (siehe Apple), sind aber nicht mehr die sinnvollste Variante. Man kann fast alles bereits über CSS abbilden, nur muss man hier die Browserkompatibilität beachten.

 

[Daaron]

Welche Kompatibilität? Wenn du nicht gerade Gewerbekunden bedienst rennt doch keiner mit nem IE<9 rum... Spätestens ab IE10, und natürlich bei Chrome, FF, Opera und Safari, kannst du komplette Palette an Tricks auffahren.

 

[auch-da]

Ich habe einige HTML5 Elemente drin die noch nicht in der Firefox 25 Beta angezeigt werden.

 

[Kausalat]

Du hast eher einige gröbere Validierungsfehler drin. Immer schön zwischendurch mit dem W3C-Validator auf Fehler überprüfen lassen, damit sich Syntaxfehler möglichst nicht auf Unterseiten fortpflanzen.

Was mir noch aufgefallen ist, ist das Favicon, wegen dessen Aufmachung ihr durchaus Probleme mit einem magentafarbenen Telekommunikationsunternehmen bekommen könntet.

Ach ja: FAQs, wenn schon mit Plural-s-Suffix, schreibt man ohne Apostroph.

 

[auch-da]

Mache ich normalerweise auch, aber die Funktionen mussten schnell kommen und ich arbeite gerade eh an einem komplett neuen Design, vermutlich auf der Starseite mit <main-startseite>? Wegen dem Favicon habe ich garnicht daran gedacht, werde ich auf jeden Fall ändern! Danke

Wenn wir aber gerade dabei sind, soll ich die Breiten lieber mit %, rem/em oder px angeben? Bisher habe ich es nur mit px gemacht. Allerdings möchte ich das es auch auf kleinen Geräte bzw. großen richtig angezeigt wird ohne das ich ein extra Stylesheet mache. Ich würde es vermutlich mit % machen und dann eine mindest Breite setzen.

mfg
auchda

 

[tiwa86]

Dann schau dir vllt. mal das hier an: Das ist ein kleines responsives Grundgerüst --> http://purecss.io/

 

[Daaron]

Ich habe einige HTML5 Elemente drin die noch nicht in der Firefox 25 Beta angezeigt werden.

Dann hast du wohl Sachen komplett falsch geschrieben. Das einzige, was FF (und die meisten anderen Browser) nicht können sind die experimentellen Input-Types.

Allerdings möchte ich das es auch auf kleinen Geräte bzw. großen richtig angezeigt wird ohne das ich ein extra Stylesheet mache. Ich würde es vermutlich mit % machen und dann eine mindest Breite setzen.

Für gutes Responsive Design kommst du um zusätzliche Media Queries nicht herum. Die Frage ist eher, einen Mobile-First - Ansatz wählst oder mit ner Desktop-Version anfängst und dann "nach unten" arbeitest.

 

[auch-da]

Was derzeit noch nicht in Friefox geht ist
<details>
<summary>Überschrift</summary>
<p>Hier steht der Text, der auf- und zugeklappt werden soll.</p>
</details>

Kann halt kein Javascript für einen Spoiler, ich möchte erstmal komplett vertraut mit HTML und CSS werden bevor ich mich an Javascript ran mache.

 

[Daaron]

http://caniuse.com/#feat=details
<details>/<summary> ist so experimentell, dass ich den Kram bloß mal gaaaaanz am Rand gehört und sofort wieder von der "muss ich mir merken" - Liste gestrichen habe.... und dabei arbeite ich quasi täglich mit HTML5. Das sind Features, die die Welt zwar gern hätte, aber auch noch gut ne Weile ohne aus kommt. Da hätte ich lieber <input type="date"> mal großflächig zur Verfügung, das brauch ich deutlich häufiger als Spoiler-Schaltflächen.

Aber wie so oft: Es sollte sich korrekt hinsichtlich eines Fallbacks verhalten. Für Browser, die mit neuen Elementen (bzw. deren visuellen Besonderheiten) nichts anfangen können, sollten diese Elemente schlichtweg als Blockelemente behandeln, spätestens nach einem details, summary{display:block;}. Analog dazu wird aus <input type="search"> in älteren Browsern einfach ein Textfeld, perfekter Fallback.
Falls Modernizr über eine Prüfung für details/summary hat, dann könnte man hier sehr leicht ein JS-basiertes Fallback drauf bügeln. Macht noch nicht einmal Mühe, man bindet einfach jQuery oder Mootools sowie die entsprechende Accordion-Plugins ein.

Aber es ist schon mal eine gute Idee, vorerst mit wirklich wenig JS auszukommen. Manche Dinge, wie eben gewisse Styling-Fallbacks, gehen nur mit JS. Andere Dinge, wie z.B. animierte Dropdown-Navigationen, kann man mit etwas Hirnschmalz auch in reinem CSS3 erzeugen.