Frage zum Markup sowie CSS3 und multible backgroundimages

[patrick_l]

Hi allerseits,

ich habe eigentlich zwei Anliegen. Zunächst das was mich am meisten grübeln läßt. Ich hocke gerade an bei der Umsetzung eines Layout, und frage mich wie ich es am sinnvollsten mit dem Schatten unter meiner Navigation bewerkstellige.

Zunächst ein Auszug aus meinem Quellcode:

<nav id="mainNav" role="navigation" class="clearfix">
  <ul>
    <li><a href="#">example 1</a></li>
    <li><a href="#">example 2</a></li>
    <li><a href="#">example 3</a></li>
  </ul>
  <div class="shadow"></div>
</nav>

Erste Frage: Ist es von der Semantik her, nicht besser, das br-Tag anstatt der leeren Division zu verwenden?

Nun zum CSS:

#mainNav .shadow {
     background:url(assets/img/shadow-left.png) no-repeat left, url(assets/img/shadow-right.png) no-repeat right;
width:100%;
height:60px;
}

Ich würde jetzt gerne auf eine zusätzliche Grafik für den Schatten verzichten. Beim zusammenziehen des Browsers schiebt sich, wie soll es auch anders sein, die eine Grafik über die andere. Was am Ende auf dem Smartphone nicht lecker aussieht.

Ich könnte zwar mittels Media Queries die Grafiken austauschen, würde darauf wenn möglich verzichten. Daher meine Frage, wie ich es am besten umgehen könnte. Dachte schon alles in eine Grafik zu packen und mittels CSS Sprites alles zu reduzieren.

Stehe nur etwas auf dem Schlauch, und dachte mir, ich horche hier mal durch, wie ihr vorgehen würdet.

Letzte und weniger relevante Frage: Website ist ein Firmenportfolio. Eigentlich nichts großes. Nur paar Informationen zur Firma und dessen gebotenen Leistungen samt Kontaktmöglichkeit. Einsatz eines CMS ist aktuell nicht vorgesehen. Trotzdem wird es an sich recht dynamisch. Sowohl PHP als auch LESS für CSS.

Setzt ihr LESS (alternativ Sass) auch für kleinere Projekte ein, oder belaßt ihr es bei CSS?

Liebe Grüße, Patrick

 

[Orlandoo]

Wie so oft hier im Forum kann man anhand der Beschreibung nur erahnen, wie Dein Layout überhaupt aussehen soll. Listenpunkte: untereinander? Nein, ich vermute, sie sollen nebeneinander stehen. Weshalb Du für einen Schatten unbedingt zwei Bilder benötigst erschließt sich auch nicht, ohne die beiden Abbildungen zu sehen. Vielleicht solltest Du die Gestaltung des Schattens nochmal überdenken. Kannst Du nicht mit einem CSS-Schatten (box-shadow) arbeiten?
Von der Semantik her sind beide Ansätze (div oder br) schlecht. Entweder Du verpasst dem ul ein padding-bottom und setzt die Bilder in den Hintergrund der ul oder Du generierst den "Hilfscontent" mittels CSS (google mal nach "css generated content").

Beste Grüße,
Roland

 

[patrick_l]

Listenpunkte: untereinander? Nein, ich vermute, sie sollen nebeneinander stehen.

Richtig vermutet. Eine vertikale Navigation direkt unter einer Slideshow.

Vielleicht solltest Du die Gestaltung des Schattens nochmal überdenken.

Layout steht, Schatten bleibt.

Kannst Du nicht mit einem CSS-Schatten (box-shadow) arbeiten?

Nein, nicht in diesem Fall (runder bzw. ovaler Schatten).

Von der Semantik her sind beide Ansätze (div oder br) schlecht.

Dacht ich mir schon.

Du generierst den "Hilfscontent" mittels CSS (google mal nach "css generated content").

Das wollt ich hören. Danke dir.

Was jetzt den Schatten angeht. Optisch soll es eine schwebende Box sein. Den Schatten habe ich wie man im Quellcode sehen kann, in shadow-left sowie shadow-right aufgeteilt.

Liebe Grüße, Patrick

 

[Orlandoo]

Dann mach ein einzelnes Bild aus dem Schatten und platziere es mit prozentualer Breite und automatischer Höhe. Google hilft unter dem Stichwort css background-size.
Dann passt sich das Bild beim Skalieren automatisch an.

 

[patrick_l]

Werde ich später sobald ich die Zeit dazu habe testen. Schonmal ein dickes Dankeschön. Jetzt erst mal die Contentbereich fertig machen. Danach weiter am Schatten herum frickeln.

 

[afr0kalypse]

Hi Patrick_l. Kannst du auf Css Pseudoelemente ausweichen oder ist das Browserbedingt für dich nicht möglich?
Weil dann könntest du 2 Fliegen mit einer Klappe before oder :after) schlagen.
http://jsbin.com/uqugob/2/edit

EDIT: css generated content geht ja schon in die gleiche Richtung wie ich sehe
Den Begriff kannte ich aber noch nicht.