Bild über die ganze Breite

[Carmen]

Guten Morgen,

für meinen kleinen Friseur Laden möchte ich eine One-Page Seite erstellen. Im Header möchte ich gerne ein Bild über die ganze Bildschirmbreite gehen lassen.

Die Umsetzung ist bis jetzt kein Problem.

Wie Breite müsste das Bild sein, dass es auf allen gängigen Bildschirmgrößen den kompletten Platz einnimmt? Ich dachte an ca. 4000px Breite müsste doch reichen? An meinem Laptop habe ich z.B. eine Auflösung von 1600x900px

[Mattes]

für meinen kleinen Friseurladen möchte ich eine One-Page Seite erstellen. Im Header möchte ich gerne ein Bild über die ganze Bildschirmbreite gehen lassen.

Wie Breite müsste das Bild sein, dass es auf allen gängigen Bildschirmgrößen den kompletten Platz einnimmt? Ich dachte an ca. 4000px Breite müsste doch reichen?

Ich hätte da noch einen mit 5120 Pixeln …

Die Masse der derzeit angebotenen Monitore zeigt 1920 Pixel in der Breite, 2560 Pixel gibt es auch noch ein paar (im Vergleich zu kleineren), aber darüber wird die Auswahl dünn. 4000 Pixel kämen mir, so gesehen, schon recht üppig vor.

Sorgen täte ich mir allerdings wegen der Dateigröße machen, da solltest du unbedingt ein Auge drauf haben. Es bietet sich eventuell an, das Bild je nach Bildschirmgröße _und_ Seitenausmaßen per Javascript nachzuladen. Beachte insbesondere Mobilgeräte!

[Carmen]

Ich hätte da noch einen mit 5120 Pixeln …

Ich denke mal, die User die mit so einer Auflösung unterwegs sind wissen genau dass sagen wir mal 2/3 aller Seite im Netz auf diesem Bildschirm irgendwo klein in der Mitte hängen :) Dann könntest du gleich noch mit einem TV Gerät kommen :D

Die Masse der derzeit angebotenen Monitore zeigt 1920 Pixel in der Breite, 2560 Pixel gibt es auch noch ein paar (im Vergleich zu kleineren), aber darüber wird die Auswahl dünn. 4000 Pixel kämen mir, so gesehen, schon recht üppig vor.

Ok, dann gehe ich mit den Maßen etwas runter und sage dass das breiteste Bild ca. 3000px ist. Damit sollte ich dann bestimmt einige Bildschirme / User abdecken.

Sorgen täte ich mir allerdings wegen der Dateigröße machen, da solltest du unbedingt ein Auge drauf haben. Es bietet sich eventuell an, das Bild je nach Bildschirmgröße _und_ Seitenausmaßen per Javascript nachzuladen. Beachte insbesondere Mobilgeräte!

Die Sorge habe ich auch etwas, allerdings sollte bei einer Frseur Seite die Bilder im Vordergrund stehen (ist meine Meinung) denn darauf kommt es an. Aber du hast Recht, wenn mein Bild ca. 2 MB groß ist (was für ein Desktop PC kein Problem darstellt) so ist dieses für das Handy sehr viel.

Gute Frage, wie ich dieses Problem umgehen kann. Ich richte mir gerade bei bplaced einen Zugang ein, dann kann ich euch im laufes des Tages mal eine Live Demo zeigen, wie meine Seite wird. Hab leider noch kein Webspcae.

[Mattes]

Die Sorge habe ich auch etwas, allerdings sollte bei einer Frseurseite die Bilder im Vordergrund stehen (ist meine Meinung) denn darauf kommt es an. Aber du hast Recht, wenn mein Bild ca. 2 MB groß ist (was für ein Desktop-PC kein Problem darstellt)

2 MByte sind für den PC selbst vielleicht kein Problem, aber durchaus für die übliche Leitung zum PC.

Du solltest davon ausgehen, dass ein Datenblock von 2 MByte die Übertragung aller anderen, noch zu ladenden Seitenteile selbst bei einer schnellen DSL-Leitung (um die 10 MBit/s) für drei bis vier Sekunden blockiert, wenn's dumm kommt für auch für zehn bis zwanzig Sekunden (ältere DSL-Anschlüsse oder in den Außenbereichen so mancher Kleinstadt).
Letzteres ist eigentlich nicht akzeptabel, Erstes leider auch nicht so wirklich. Es hängt allerdings immer vom Einzelfall ab; ist die Seite grundsätzlich geladen und nutzbar, kann es mit den Bildern auch mal länger dauern.

Für einen Friseurladen sind Bilder wichtig, keine Frage, aber du solltest die Ungeduld der Kundschaft nicht unterschätzen.

[Gunnar Bittersmann]

@@Carmen:

nuqneH

wenn mein Bild ca. 2 MB groß ist

dann ist das ein Zeichen dafür, dass der Grafiker sein Werkzeug nicht beherrscht. „Für Web speichern“ sollte bekannt sein und dass oft etwa 40% Qualität für ein JPEG genügen auch.

Qapla'

[Robert R.]

Liebe Mitdenker,
liebe Wissende,
liebe Neugierige,

ja!

dann ist das ein Zeichen dafür, dass der Grafiker sein Werkzeug nicht beherrscht. „Für Web speichern“ sollte bekannt sein und dass oft etwa 40% Qualität für ein JPEG genügen auch.

Da hake ich gleich mal nach. Ein Freund sucht einen Intensivkurs für eine Grafiksoftware (oder mehrere), der ihn ertüchtigt, in Zukunft nicht nur zu programmieren, sondern auch  bunte Bildchen zu machen. Das darf auch etwas kosten und durchaus 3 Monate dauern. Es wird gesponsert von Vater Staat, weil er sonst eigentlich ganz gut dasteht (LPI I+II, M$-Zertifizierungen, Praxis in diversen Programmiersprachen, Internetgedöns usw.) Nur die potentiellen Arbeitgeber fragen als erstes immer "zeigen Sie doch mal" und meinen dann (bunte) Webseiten oder so, auch wenn das dann eigentlich gar nicht ihr Problem ist. Aber welcher Arbeitgeber kennt schon seine eigenen Probleme?

Was würdest Du empfehlen, was man in ca. drei Monaten mit ausreichenden Vorkenntnissen (also noch nicht befriedigend) schaffen könnte und was man auch gebrauchen kann heute. Und wo kann man so ein Power(!)-Seminar ableisten. Er hat also keine Lust, mit zwangsverpflichteten "Umschülern" zusammen sitezen zu müssen.

Spirituelle Grüße
Euer Robert

[Robert R.]

Liebe Mitdenker,
liebe Wissende,
liebe Neugierige,

ja!

Wie Breite müsste das Bild sein, dass es auf allen gängigen Bildschirmgrößen den kompletten Platz einnimmt? Ich dachte an ca. 4000px Breite müsste doch reichen? An meinem Laptop habe ich z.B. eine Auflösung von 1600x900px

Denk Dir soch ein Bild aus, das wiederholt werden kann. Da müsste dann nur der linke Rand an den rechten dranpassen, ohne dass man das sieht. Dann musst Du dir keine Gedanken mehr machen über die Breite, sondern lässt das Bild per CSS wiederholen, sooft es eben passt.

Spirituelle Grüße
Euer Robert

[Carmen]

Hallo Robert,

Denk Dir soch ein Bild aus, das wiederholt werden kann. Da müsste dann nur der linke Rand an den rechten dranpassen, ohne dass man das sieht. Dann musst Du dir keine Gedanken mehr machen über die Breite, sondern lässt das Bild per CSS wiederholen, sooft es eben passt.

dieses geht leider nicht :/ Wäre zwar schön aber hier geht es um Bilder von Frisuren die lassen sich nicht wiederholen, wurde bestimmt mega scheiße aussehen.

[1UnitedPower]

Hakuna matata!

Wie Breite müsste das Bild sein, dass es auf allen gängigen Bildschirmgrößen den kompletten Platz einnimmt? Ich dachte an ca. 4000px Breite müsste doch reichen? An meinem Laptop habe ich z.B. eine Auflösung von 1600x900px

Mit Mediaquerys kannst du für unterschiedliche Viewportgrößen auch unterschiedliche Bilder laden.

Was für ein Bild schwebt dir denn vor? Vielleicht kannst du ja sogar ein Bild im SVG-Format benutzen, dann erübrigt sich die Frage nach der Viewportgrößte, weil SVG verlustfrei skalieren kann.

[Auge]

Hallo

Wie Breite müsste das Bild sein, dass es auf allen gängigen Bildschirmgrößen den kompletten Platz einnimmt? Ich dachte an ca. 4000px Breite müsste doch reichen? An meinem Laptop habe ich z.B. eine Auflösung von 1600x900px

Mit Mediaquerys kannst du für unterschiedliche Viewportgrößen auch unterschiedliche Bilder laden.

+1

Was für ein Bild schwebt dir denn vor? Vielleicht kannst du ja sogar ein Bild im SVG-Format benutzen, dann erübrigt sich die Frage nach der Viewportgrößte, weil SVG verlustfrei skalieren kann.

Für einen Friseur [1] werden es wohl Fotos (Bitmaps) sein. Wie sauber werden eigentlich Bitmaps, die in einer SVG eingebunden sind, skaliert [2]? Hat da schon jemand Erfahrungen gesammelt?

[1] Komisch, dass es sowas überhaupt noch gibt. Heutzutage sind se' ja alle Coiffeure oder Hair Stylisten.
[2] Ach herrje, jetzt habe ich zuerst „skalpiert“ statt „skaliert“ geschrieben. Ein Glück, dass ich noch einmal drüber geschaut habe. Das hätte ja gepasst, wie A. auf E..

Tschö, Auge

[Gunnar Bittersmann]

@@Auge:

nuqneH

[1] Komisch, dass es sowas überhaupt noch gibt. Heutzutage sind se' ja alle Coiffeure oder Hair Stylisten.

Die in Läden arbeiten, die sich „Ha(i)rmony“ udgl. nennen. Wahlweise auch ohne Klammern.

Qapla'

[Gunnar Bittersmann]

@@Gunnar Bittersmann:

nuqneH

[1] Komisch, dass es sowas überhaupt noch gibt. Heutzutage sind se' ja alle Coiffeure oder Hair Stylisten.

Die in Läden arbeiten, die sich „Ha(i)rmony“ udgl. nennen. Wahlweise auch ohne Klammern.

Wahlweise auch mit (a).

Qapla'

[Auge]

Hallo

[1] Komisch, dass es sowas überhaupt noch gibt. Heutzutage sind se' ja alle Coiffeure oder Hair Stylisten.

Die in Läden arbeiten, die sich „Ha(i)rmony“ udgl. nennen. Wahlweise auch ohne Klammern.

Wahlweise auch mit (a).

Du warst jetzt aber nicht ernsthaft auf der Suche nach einem solchen Schild?

In meiner mittlerweile fast durchgentrifizierten Gegend heißen die Läden z.B. „Haarwerkstatt“ … ähh, nein „Haar-Werkstatt“ und bieten dem von den auswärtigen Eltern durchgefütterten Publikum 10-Euro-Haarschnitte an. Wobei, ob die Preise bei dem Mindestlohn für die nun neureiche Friseurin noch haltbar sind? Wer weiß das schon!?

Tschö, Auge

[Gunnar Bittersmann]

@@Auge:

nuqneH

Die in Läden arbeiten, die sich „Ha(i)rmony“ udgl. nennen. Wahlweise auch ohne Klammern.

Wahlweise auch mit (a).

Du warst jetzt aber nicht ernsthaft auf der Suche nach einem solchen Schild?

Nö, ist bei mir um die Ecke, da komm ich öfter vorbei.

Mir war nur entfallen, dass der Laden das geistreiche Wortspiel auf deutsch, nicht auf englisch verwendet hat.

Würde mich aber nicht wundern, wenn’s auch irgendwo „Ha(i)rmony“ geben würde. Wenn ich mich ernsthaft auf die Suche danach begeben wollte, würde ich am Kollwitzplatz anfangen.

Qapla'

[Auge]

Hallo

Du warst jetzt aber nicht ernsthaft auf der Suche nach einem solchen Schild?

Nö, ist bei mir um die Ecke, da komm ich öfter vorbei.

Mir war nur entfallen, dass der Laden das geistreiche Wortspiel auf deutsch, nicht auf englisch verwendet hat.

Würde mich aber nicht wundern, wenn’s auch irgendwo „Ha(i)rmony“ geben würde. Wenn ich mich ernsthaft auf die Suche danach begeben wollte, würde ich am Kollwitzplatz anfangen.

Hmm …, hört sich für mich eher nach Schöneberg an.

Tschö, Auge

[Gunnar Bittersmann]

@@1UnitedPower:

nuqneH

Mit Mediaquerys kannst du für unterschiedliche Viewportgrößen auch unterschiedliche Bilder laden.

Bei Hintergrundbildern.

Bei Inhaltsbildern: responsive images. picture-Element, srcset-Attribute. Siehe z.B. http://blog.kulturbanause.de/2014/09/responsive-images-srcset-sizes-adaptive/

Fallback sollte ein recht kleines Bild sein, hochauflösend als progressive enhancement.

Qapla'

[Carmen]

Hallo,

Bei Hintergrundbildern.

Bei Inhaltsbildern: responsive images. picture-Element, srcset-Attribute. Siehe z.B. http://blog.kulturbanause.de/2014/09/responsive-images-srcset-sizes-adaptive/

Fallback sollte ein recht kleines Bild sein, hochauflösend als progressive enhancement.

dazu hätte ich mal eine Frage und zwar zu diesem Beispiel:

  
<img src="small.jpg" srcset="small.jpg 320w, medium.jpg 600w, large.jpg 900w" alt="">  

ich binde also 3 Bilder ein. Das heißt es werden auch drei Bilder geladen? Also wenn ich die Seite mit dem Handy aufrufe, dann habe ich ja noch mehr Traffic wie wenn ich nur ein Bild einbinden wurde?

[Matthias Apsel]

Om nah hoo pez nyeetz, Carmen!

<img src="small.jpg" srcset="small.jpg 320w, medium.jpg 600w, large.jpg 900w" alt="">

>   
> ich binde also 3 Bilder ein. Das heißt es werden auch drei Bilder geladen? Also wenn ich die Seite mit dem Handy aufrufe, dann habe ich ja noch mehr Traffic wie wenn ich nur ein Bild einbinden wurde?  
  
Nein, es wird nur das passende geladen. Siehe <http://blog.kulturbanause.de/2014/09/responsive-images-srcset-sizes-adaptive/>  
  
Matthias

-- 
Der Unterschied zwischen Java und JavaScript ist größer als der zwischen [Ohm und Ohmdenosaurus](http://selfhtml.apsel-mv.de/java-javascript/index.php?buchstabe=O#ohm).  
![](http://www.billiger-im-urlaub.de/kreis_sw.gif)  

[Carmen]

Guten Abend,

ich hoffe es ist ok, dass ich die weitere Frage hier in diesen Beitrag schreibe. Mein kleines Beispiel ist nun online http://friseursalon.bplaced.net/ funktioniert auch soweit (bitte nicht mit dem Handy drauf gehen, da die Seite dafür noch nicht optimiert ist und im Header ein sehr großes Bild drin ist).

Ich habe eine Frage zu meiner Navigation. Diese sollte beim Home Punkt immer unten angedockt sein, wenn ich dann Scrolle sollte diese nach oben scrollen und dann auch stehen bleiben, dafür könnte ich http://labs.anthonygarand.com/sticky verwenden. Nur wie müsste ich dann mein HTML Grundgerüst aufbauen?

Jetzt liegt meine Nav außerhalb einer <section></section> wenn ich die Navigation mitwandern lassen möchte dann muss ich die ja zweimal anlegen und zwar einmal in

<section id="home">  
  <h1>Das ist die Home Seite</h1>  
</section>  

Und einmal so wie sie jetzt ist:

  
<nav>  
  <ul>  
    <li class="scroll"><a href="#home">Home</a></li>  
    <li class="scroll"><a href="#salon">Salon</a></li>  
    <li class="scroll"><a href="#service">Service</a></li>  
    <li class="scroll"><a href="#aktionen">Aktionen</a></li>  
    <li class="scroll"><a href="#kontakt">Kontakt</a></li>  
  </ul>  
</nav>  
  
<section id="home">  
  <h1>Das ist die Home Seite</h1>  
</section>  

Habt ihr eine Idee?

[Camping_RIDER]

Aloha ;)

ich hoffe es ist ok, dass ich die weitere Frage hier in diesen Beitrag schreibe.

Das ist sogar zielführend, so bleibt die Thematik an einer Stelle und überschaubar.

Ich habe eine Frage zu meiner Navigation. Diese sollte beim Home Punkt immer unten angedockt sein, wenn ich dann Scrolle sollte diese nach oben scrollen und dann auch stehen bleiben, dafür könnte ich http://labs.anthonygarand.com/sticky verwenden. Nur wie müsste ich dann mein HTML Grundgerüst aufbauen?

Meiner Meinung nach musst du dafür dein HTML-Grundgerüst nicht ändern. Es wird übrigens in verhältnismäßig naher Zukunft wohl eine CSS-Eigenschaft position:sticky geben (die ist in den Browsern leider noch nicht implementiert), sobald die da ist, kann man es sich sparen, das per jQuery/javascript nachzurüsten...

Jetzt liegt meine Nav außerhalb einer <section></section> wenn ich die Navigation mitwandern lassen möchte dann muss ich die ja zweimal anlegen und zwar einmal in

Nö. Denn du willst ja, dass sie mitwandert. Also willst du auf der gesamten Seite, egal wo man sich befindet, genau diese eine Navigationsleiste sehen.

Habt ihr eine Idee?

Ja, zusätzlich hab ich noch eine. Du sagtest zwar...

Diese sollte beim Home Punkt immer unten angedockt sein, wenn ich dann Scrolle sollte diese nach oben scrollen und dann auch stehen bleiben

... und das ist mit dem von dir Verlinkten wohl auch so zu erreichen. Du musst dann nur noch die Leiste an die richtige Stelle im Home-Screen bringen und das beschriebene jQuery-Kommando losjagen.

Ich frage mich aber, ob du das willst? Weil zumindest im Moment deine Navigation ganz oben drüber steht. Das ist übrigens auch die Stelle, an der ich eine Navigation suche... Wieso also nicht gleich position:fixed mit top:0px, left:0px?

Das heftet dir deine Navigation oben an und lässt sie überall mitscrollen... Oder wenns unten sein soll: bottom:0px - das war zumindest in meinem Test an deinem Livebeispiel ganz hübsch...

Nur so als Anregung. Wenn du aus Designgründen den Sticky-Effekt haben willst ist das natürlich schon okay, auf die von dir verlinkte Methode zurückzugreifen.

Grüße,

RIDER

[Matthias Apsel]

Om nah hoo pez nyeetz, Camping_RIDER!

Wieso also nicht gleich position:fixed mit top:0px, left:0px?

Ich weiß, Handys sind noch nicht berücksichtigt, aber:
Für kleine Viewports schränkt eine fixierte Navigation den Platz für die Inhalte zusätzlich ein, vor allem dann, wenn die eigentlich einzeilige Navigation jetzt vielleicht mehrspaltig wird.

Matthias

[Camping_RIDER]

Aloha ;)

Ich weiß, Handys sind noch nicht berücksichtigt, aber:
Für kleine Viewports schränkt eine fixierte Navigation den Platz für die Inhalte zusätzlich ein, vor allem dann, wenn die eigentlich einzeilige Navigation jetzt vielleicht mehrspaltig wird.

Da gebe ich dir uneingeschränkt Recht - aber bei position:sticky ist das auch nicht anders ;)

Die Prämisse muss natürlich schon sein, dass für Handys und Co. garantiert werden kann, dass die Navigation nicht zu viel Platz einnimmt - z.B. indem sie hinter einem entsprechenden Button versteckt wird, der dann mitscrollt...

Grüße,

RIDER

[Carmen]

Hallo,

Das ist sogar zielführend, so bleibt die Thematik an einer Stelle und überschaubar.

Alles klar, dann mache ich hier auch weiter :)

Jetzt liegt meine Nav außerhalb einer <section></section> wenn ich die Navigation mitwandern lassen möchte dann muss ich die ja zweimal anlegen und zwar einmal in

Nö. Denn du willst ja, dass sie mitwandert. Also willst du auf der gesamten Seite, egal wo man sich befindet, genau diese eine Navigationsleiste sehen.

Auf den Unterseiten soll die Navigation auch oben stehen bleiben, wie sie jetzt auch steht. Allerdings hätte ich gerne in "home" also die Seite die zuerst aufgerufen wird die Navigation unten angedockt.

... und das ist mit dem von dir Verlinkten wohl auch so zu erreichen. Du musst dann nur noch die Leiste an die richtige Stelle im Home-Screen bringen und das beschriebene jQuery-Kommando losjagen.

Hättest du hier für mich ein kleines Online Beispiel, dass ich mir das mal Live ansehen könnte?

Ich frage mich aber, ob du das willst? Weil zumindest im Moment deine Navigation ganz oben drüber steht. Das ist übrigens auch die Stelle, an der ich eine Navigation suche... Wieso also nicht gleich position:fixed mit top:0px, left:0px?

Ich habe es hier http://friseursalon.bplaced.net/ nun mit  position:fixed mit top:0px, left:0px umgesetzt. So wollte ich dieses auch. Danke für den Tipp.

[Carmen]

Guten Tag,

eine kleine Zwischenfrage (auf die anderen Antworten gehen ich auch noch ein), kann ich eine <h1>Test</h1> so gestallten wie auf dem Bild? Bis jetzt hatte ich dafür Grafiken verwedet. Mir wäre lieber wenn dieses mit CSS gehen würde.

Mir kommt es hier auf den Strich links und rechts vom Wort an.

[Mattes]

eine kleine Zwischenfrage (auf die anderen Antworten gehen ich auch noch ein), kann ich eine <h1>Test</h1> so gestallten wie auf dem Bild? Bis jetzt hatte ich dafür Grafiken verwedet. Mir wäre lieber wenn dieses mit CSS gehen würde.

Mir kommt es hier auf den Strich links und rechts vom Wort an.

Du kannst dafür eine Hintergrundgrafik verwenden, 1 Pixel breit, in der Höhe des Strichs (nicht der Überschrift). Platziere die Grafik vertikal-mittig im <h1> und wiederhole sie horizontal (repeat-x).
Dem Text selbst gibst du einen einfarbigen Hintergrund, damit er den Hintergrundstrich überdeckt. Das funktioniert aber natürlich nur, wenn der Rest der Seite in diesem Bereich ebenfalls diesen einfarbigen Hintergrund hat.

PS: Ich gehe mal davon aus, dass das mit der Hintergrundgrafik noch nicht fertig ist? 22 Sekunden Ladezeit bei 13 MBit/s geht garnicht, eine Sekunde Bildaufbau beim Tab-Wechsel im Browser auch nicht.

[Carmen]

Hallo,

Du kannst dafür eine Hintergrundgrafik verwenden, 1 Pixel breit, in der Höhe des Strichs (nicht der Überschrift). Platziere die Grafik vertikal-mittig im <h1> und wiederhole sie horizontal (repeat-x).
Dem Text selbst gibst du einen einfarbigen Hintergrund, damit er den Hintergrundstrich überdeckt. Das funktioniert aber natürlich nur, wenn der Rest der Seite in diesem Bereich ebenfalls diesen einfarbigen Hintergrund hat.

Das heißt ich lege ein <div> an, diesem Div gebe ich erstmal eine Breite von 100% und eine Höhe von z.B. 2em. und einem Hintergrund der sich nach rechts wiederholt. Darein packe ich die <h1> Überschrift formatiere diese und gebe dieser einen #fff Background? Habe ich dich richtig verstanden?

PS: Ich gehe mal davon aus, dass das mit der Hintergrundgrafik noch nicht fertig ist? 22 Sekunden Ladezeit bei 13 MBit/s geht garnicht, eine Sekunde Bildaufbau beim Tab-Wechsel im Browser auch nicht.

Du meinst das große Bild auf http://friseursalon.bplaced.net/? Nein das hat derzeit 6 MB ist viel zu groß. Hab nur auf die schnelle ein Bild gebraucht was so groß ist, dass es über den ganzen Bildschirm geht.

[Gunnar Bittersmann]

@@Carmen:

Nein das hat derzeit 6 MB ist viel zu groß.

Mit dem Bildverarbeitungsprogramm deiner Wahl solltest du das auf 1/20 der Größe bekommen.

Es gibt auch im Web Services zum Optimieren von Bildern. Aber Vorsicht: erst das Kleingedruckte lesen! Man möchte anderen nicht unbedingt Rechte an seinen Bildern einräumen.

Qapla'

[Mattes]

Du kannst dafür eine Hintergrundgrafik verwenden, 1 Pixel breit, in der Höhe des Strichs (nicht der Überschrift). Platziere die Grafik vertikal-mittig im <h1> und wiederhole sie horizontal (repeat-x).
Dem Text selbst gibst du einen einfarbigen Hintergrund, damit er den Hintergrundstrich überdeckt. Das funktioniert aber natürlich nur, wenn der Rest der Seite in diesem Bereich ebenfalls diesen einfarbigen Hintergrund hat.

Das heißt ich lege ein <div> an, diesem Div gebe ich erstmal eine Breite von 100% und eine Höhe von z.B. 2em.

Nein, das <div> brauchst du nicht, du hast schon das <h1>:

<h1><span>Überschrift</span></h1>

Dem <h1> verpasst du den Hintergrund, horizontal wiederholend mit repeat-x und vertikal mittig platziert mit background-position.
Das <span> bekommt einen einfarbigen Hintergrund, um die Hintergrundgrafik zu überdecken.

Matthias hat auf eine andere Variante hingewiesen (bei ihm leider erst nach einem Dutzend Beiträgen aufzuspüren), die nur mit dem <h1> auskommt, gänzlich ohne <span>:

h1 {  
	text-align: center;  
	display: table; /* <h1> bzw. dessen Inhalt als Tabelle darstellen */  
	border-collapse: collapse;  
}  
  
h1::before, h1::after { /* Elemente für Linie vor und hinter dem Titeltext erzeugen */  
	content: "";  
	display: table-cell; /* als Tabellenzelle behandeln */  
	width: 50%;  
  
	background-position: 0px 50%; /* Hintergrund vertikal zentriert */  
	background-repeat: repeat-x;  /* horizontal wiederholen */  
	background-image: url(…);     /* Grafik für den Hintergrund, siehe auch unten */  
}  
  
h1::before { /* Abstand zwischen Linie und Titeltext, jeweils vorne und … */  
	border-right: solid 2em transparent;  
}  
  
h1::after { /* … hinten */  
	border-left: solid 2em transparent;  
}  

Der Trick ist, mit ::before und ::after vorne und hinten an das <h1> zwei Elemente anzukleben, die die Striche enthalten. Damit die das Ganze dann auch in einer Reihe erscheint, wird der Darstellungsmodus des <h1> in eine Tabelle geändert.

Das ist zugegebenermaßen sehr geschickt, aber diese gedachte Tabelle bereitet mir irgendwie Unwohlsein – Geschmackssache.

Ohne Zweifel schön hingegen, dass die Grafik für die Linie auch eingespart wurde, ersetzt durch eine browsergenerierte:

{  
background-image: linear-gradient(  
	to right,  
	transparent 50%, black 50%  
);  
background-size: 4px 1px;  
}

Das lässt sich natürlich auch mit der <span>-Lösung einsetzen.

[Gunnar Bittersmann]

@@Mattes:

nuqneH

Nein, das <div> brauchst du nicht, du hast schon das <h1>:
<h1><span>Überschrift</span></h1>

Der entscheidende Unterschied zwischen <div><h1>Überschrift</h1></div> und <h1><span>Überschrift</span></h1> hinsichtlich der Anzahl der Elemente wäre welcher?

Qapla'

[Mattes]

Nein, das <div> brauchst du nicht, du hast schon das <h1>:
<h1><span>Überschrift</span></h1>

Der entscheidende Unterschied zwischen <div><h1>Überschrift</h1></div> und <h1><span>Überschrift</span></h1> hinsichtlich der Anzahl der Elemente wäre welcher?

Keiner (und ich hoffe, das muss ich dir nicht erklären).

[Gunnar Bittersmann]

@@Mattes:

nuqneH

Keiner (und ich hoffe, das muss ich dir nicht erklären).

Eben. Ich war amüsiert, wie du „das <div> brauchst du nicht“ verkündetest und dafür ein span einbautest.

Aber nur leicht; ich habe schon besser gelacht. ;-)

Qapla'

[Mattes]

Der entscheidende Unterschied […] hinsichtlich der Anzahl der Elemente wäre welcher?

Keiner (und ich hoffe, das muss ich dir nicht erklären).

Eben. Ich war amüsiert, wie du „das <div> brauchst du nicht“ verkündetest und dafür ein span einbautest.

Ja, div und span, der Apfel und die Birne aus dem HTML-Obstkorb, die Allerweltsfrüchte des Webs, so gemein und doch so unterschiedlich im Geschmack – wenn man denn einen hat.

Was das jetzt mit der Anzahl zu tun haben soll, ist mir schleierhaft, aber es freut mich, dass du auf die doch etwas flachsinnige Erkenntnis hin, dass 2 gleich 2 ist, einen der offenbar seltenen fröhlichen Momente deines Lebens hattest. Bin ja gerne behilflich!

[Gunnar Bittersmann]

@@Mattes:

nuqneH

Du kannst dafür eine Hintergrundgrafik verwenden, 1 Pixel breit

Nein, sie sollte deutlich breiter sein.

Aber wie Matthias schon herausgesucht hat, ist gar keine Grafik nötig.

Qapla'

[Der Martin]

Hallo,

kann ich eine <h1>Test</h1> so gestallten wie auf dem Bild? Bis jetzt hatte ich dafür Grafiken verwedet. Mir wäre lieber wenn dieses mit CSS gehen würde.

Mir kommt es hier auf den Strich links und rechts vom Wort an.

war mir beim Anschauen schon klar. ;-)
Ob es ohne zusätzliches Markup geht, ist zunächst mal zweifelhaft. Die Linie an sich könnte eine in x-Richtung gekachtelte Hintergrundgrafik sein, aber das möchtest du ja nicht. Eventuell kann man mit einer Kombination von height, overflow, margin-bottom und border-bottom was reißen, etwa so:

<h1><span>Explore</span></h1>

h1  
 { height: 0.5em;  
   overflow: visible;  
   border-bottom: 1px solid #888;  
   margin-bottom: 0.5em;  
   text-align: center;  
 }  
h1 span  
 { background-color: #FFF;  
   text-transform: uppercase;  
   padding: 0 0.5em;  
 }

Der entscheidende Punkt ist, dass hier das h1-Element nur halb so hoch ist wie sein inline-Inhalt, und somit die Unterkante (border-bottom) etwa auf halber Höhe des Texts zu liegen kommt. Damit der Abstand zu nachfolgenden Elementen wieder passt, gleiche ich das mit margin-bottom:0.5em aus.
Der Textinhalt selbst, also das span-Element, muss nun einen deckenden (nicht-transparenten) Hintergrund haben, damit der die Rahmenlinie des h1-Elements überdeckt. Dazu ein bisschen padding seitlich, damit's etwas gefälliger aussieht.

Mit den Maßen musst du vermutlich ein bisschen spielen, bis es so richtig passt.

Viel Spaß beim Weiterstricken,
 Martin

PS: "gestalten" hat nichts mit "Stall" zu tun!

[Matthias Apsel]

Om nah hoo pez nyeetz, Der Martin!

Mir kommt es hier auf den Strich links und rechts vom Wort an.
Ob es ohne zusätzliches Markup geht, ist zunächst mal zweifelhaft.

Es geht: http://forum.de.selfhtml.org/archiv/2013/11/t215516/#m1476134ff.

Matthias

[Matthias Apsel]

Om nah hoo pez nyeetz, Matthias Apsel!

Mir kommt es hier auf den Strich links und rechts vom Wort an.
Ob es ohne zusätzliches Markup geht, ist zunächst mal zweifelhaft.
Es geht: http://forum.de.selfhtml.org/archiv/2013/11/t215516/#m1476134 ff.

Jetzt auch in der Dokumentation: CSS/Anwendung und Praxis

Matthias

[Carmen]

Hallo Matthias,

Jetzt auch in der Dokumentation: CSS/Anwendung und Praxis

vielen lieben Dank für das Online Beispiel. Hab es in meine Seite eingebaut: http://friseursalon.bplaced.net/ allerdings habe ich jetzt ein kleines Problem. Ich wollte der <h2> ein Abstand mit padding-top:0.5em; bzw. margin-top:0.5em; geben. Diese Angaben werden aber nicht beachtet. Ich nehmen an, es liegt an  display: table; da man einer Tabelle kein Abstand geben kann? Soll ich also um das ganze noch ein <span> packen?

Und mein zweites Problem ist border-right: 1.2em solid transparent; solid bedeutet doch "durchgezogen" was ich aber auf meinem Bildschirm sehe ich dotted. Kann ich irgendwie erreichen dass ich solid auch sehe?

[Matthias Apsel]

Om nah hoo pez nyeetz, Carmen!

vielen lieben Dank für das Online Beispiel. Hab es in meine Seite eingebaut: http://friseursalon.bplaced.net/ allerdings habe ich jetzt ein kleines Problem. Ich wollte der <h2> ein Abstand mit padding-top:0.5em; bzw. margin-top:0.5em; geben.

Diese Angaben werden aber nicht beachtet. Ich nehmen an, es liegt an  display: table; da man einer Tabelle kein Abstand geben kann? Soll ich also um das ganze noch ein <span> packen?

gut beobachtet. Respekt! Margin sollte kein Problem darstellen. Padding sehr wohl. Wenn es dir nur darum geht, dass die Linie nicht in der Mitte verlaufen soll, heißt deine Schraube

h1::before, h1::after {  
        background-position: 0 50%;  
     }

Siehe http://wiki.selfhtml.org/wiki/Background-position

Sollte dies nicht dein Problem sein, schildere bitte, was du vorhast. Bestimmt lässt sich eine Lösung finden. Zusätzliche Elemente sind uncool.

Und mein zweites Problem ist border-right: 1.2em solid transparent; solid bedeutet doch "durchgezogen" was ich aber auf meinem Bildschirm sehe ich dotted. Kann ich irgendwie erreichen dass ich solid auch sehe?

h1::before, h1::after {  
        content: "";  
        display: table-cell;  
        width: 50%;  
  
        background-image: linear-gradient(to right, #c4d4da 50%, transparent 50%);  
        background-position: 0 50%;  
        background-repeat: repeat-x;  
        background-size: 6px 2px;  
      }  
h1::before {  
        border-right: .5em solid transparent;  
      }  
h1::after {  
        border-left: .5em solid transparent;  
      }

Die Border links und rechts sorgen dafür, dass die Pseudoelemente visuell nicht ganz bis an die Überschrift heranreichen. Die Gestaltung deiner Linie erfolgt über

h1::before, h1::after {  
        background-image: linear-gradient(to right, #c4d4da 50%, transparent 50%);  
        background-size: 6px 2px;  
      }

Für eine durchgehende Linie hilft etwa

h1::before, h1::after {  
        background-image: linear-gradient(to right, #c4d4da, #c4d4da);  
        background-size: 100% 2px;  
      }

Siehe: http://wiki.selfhtml.org/wiki/Linear-gradient

Matthias

[Carmen]

Hallo Matthias,

gut beobachtet. Respekt! Margin sollte kein Problem darstellen. Padding sehr wohl. Wenn es dir nur darum geht, dass die Linie nicht in der Mitte verlaufen soll, heißt deine Schraube

h1::before, h1::after {

background-position: 0 50%;
     }

> Siehe <http://wiki.selfhtml.org/wiki/Background-position>  
>   
> Sollte dies nicht dein Problem sein, schildere bitte, was du vorhast. Bestimmt lässt sich eine Lösung finden. Zusätzliche Elemente sind uncool.  
  
ich möchte gerne dass die <h2> etwas weiter nach unten rutscht. Derzeit klebt diese sehr an meiner <nav>. Dachte ich könnte das so lösen: 	padding-top:0.5em; aber der Abstand bleibt gleich. Ich kann hier auch 100em eingeben, tut sich nichts.

[Matthias Apsel]

Om nah hoo pez nyeetz, Carmen!

ich möchte gerne dass die <h2> etwas weiter nach unten rutscht. Derzeit klebt diese sehr an meiner <nav>. Dachte ich könnte das so lösen: padding-top:0.5em; aber der Abstand bleibt gleich. Ich kann hier auch 100em eingeben, tut sich nichts.

Das kann ich an deiner verlinkten Beispielseite nicht nachvollziehen. Du kannst der Überschrift einen Außenabstand (=margin) geben.

Matthias

[Carmen]

Hallo Matthias,

Das kann ich an deiner verlinkten Beispielseite nicht nachvollziehen. Du kannst der Überschrift einen Außenabstand (=margin) geben.

Ok nun geht´s

  
h2 {  
    color: #303030;  
    font-size: 3.7em;  
    font-weight: 600;  
    text-align: center;  
    display: table;  
    border-collapse: collapse;  
    white-space: nowrap;  
    margin-top:1.5em;  
}  

Danke für eure Geduld

[ChrisB]

Hi,

eine kleine Zwischenfrage (auf die anderen Antworten gehen ich auch noch ein), kann ich eine <h1>Test</h1> so gestallten wie auf dem Bild? Bis jetzt hatte ich dafür Grafiken verwedet. Mir wäre lieber wenn dieses mit CSS gehen würde.

http://css-tricks.com/line-on-sides-headers/

MfG ChrisB

[Carmen]

Hallo,

ich hätte noch eine Frage zu meinem HTML bevor ich mich nun an die Unterseiten begebe. Laut http://validator.w3.org/ bekomme ich noch eine Warnung angezeigt, ich kann allerdings nicht erkennen, was mir diese Warnung sagen will / soll.

Außerdem habe ich noch eine Frage zu

  
<section id="service">  
  <div class="content">  
    <h2>Unsere Lesitungen</h2>  
  </div>  
</section>  

DIVS sind ja weiterhin erlaubt wenn man einen Bereich auf eine feste Breite festlegen möchte? Ich kann in diesem Fall das section nicht ansprechen denn dieses soll über die ganze Breite gehen. Ein Teil vom Content geht wird eben begrenzt.

[Der Martin]

Hi,

ich hätte noch eine Frage zu meinem HTML bevor ich mich nun an die Unterseiten begebe. Laut http://validator.w3.org/ bekomme ich noch eine Warnung angezeigt, ich kann allerdings nicht erkennen, was mir diese Warnung sagen will / soll.

dann lies dir doch den Hinweis durch. Da wird erklärt, dass sich die Warnung nicht auf die Validität deines Dokuments bezieht, sondern darauf, dass zur Validierung ein experimentelles Feature verwendet wurde, das nicht immer hundertprozentig korrekte Ergebnisse liefern muss. Mit anderen Worten: Das Dokument ist valide, aber die Aussage ist mit Vorsicht zu genießen.

Außerdem habe ich noch eine Frage zu

<section id="service">

<div class="content">
    <h2>Unsere Lesitungen</h2>
  </div>
</section>

>   
> DIVS sind ja weiterhin erlaubt wenn man einen Bereich auf eine feste Breite festlegen möchte?  
  
Ja, aber selten erforderlich. Meist hat man im Markup schon passende Elemente, so wie in deinem Beispiel das h2-Element. Wenn du dessen Breite begrenzen oder sonstwie festlegen willst, dann tu das - aber ein weiteres umschließendes Element ist dafür nicht nötig.  
  
Ciao,  
 Martin  

-- 
Computer lösen für uns Probleme, die wir ohne sie gar nicht hätten.  
Selfcode: fo:) ch:{ rl:| br:< n4:( ie:| mo:| va:) de:] zu:) fl:{ ss:) ls:µ js:(

[Carmen]

Hallo,

immer wieder lese ich dass man auf px verzichten soll. Kann ich verstehen und kapiere dieses auch. Auf der anderen Seite sehe ich allerdings genau bei diesen Damen und Herren wenn es um einen border geht also z.B. border: 5px solid rgb(210, 181, 91); doch wieder auf px zurückgriffen wird. Was ist denn nun richtig bzw. warum wird nicht komplett auf px verzichtet?

[Camping_RIDER]

Aloha ;)

immer wieder lese ich dass man auf px verzichten soll.

Das ist eine der Aussagen, die ich so pauschal nie tätige und in vielen Fällen begründet bestreiten würde. Es mag Einsatzgebiete geben, in denen es nicht sinnvoll ist, auf px zurückzugreifen. Das muss aber in meinen Augen eine Einzelfallentscheidung sein, derart pauschalisiert würde ich das nicht akzeptieren...

Meine Meinung.

Grüße,

RIDER

[Carmen]

Hallo RIDER,

Das ist eine der Aussagen, die ich so pauschal nie tätige und in vielen Fällen begründet bestreiten würde. Es mag Einsatzgebiete geben, in denen es nicht sinnvoll ist, auf px zurückzugreifen. Das muss aber in meinen Augen eine Einzelfallentscheidung sein, derart pauschalisiert würde ich das nicht akzeptieren...

ok, dann habe ich hier also alles richtig gemacht:

  
#salon .salonImage {  
	border: 5px solid rgb(210, 181, 91);  
	border-radius: 50%;  
	box-shadow: 0 0 0 0.625em rgba(210, 181, 91, 0.3) inset;  
	width: 13.750em;  
	height: 13.750em;  
	transition: all 0.5s ease-in-out 0s;  
	margin: 1.250em auto 1.875em;  
}  

Jeden Wert in EM umzurechnen ist etwas nervig.

[Camping_RIDER]

Aloha ;)

ok, dann habe ich hier also alles richtig gemacht:

So wie ich es sehe - ja.

#salon .salonImage {
border: 5px solid rgb(210, 181, 91);
border-radius: 50%;
box-shadow: 0 0 0 0.625em rgba(210, 181, 91, 0.3) inset;
width: 13.750em;
height: 13.750em;
transition: all 0.5s ease-in-out 0s;
margin: 1.250em auto 1.875em;
}

>   
> Jeden Wert in EM umzurechnen ist etwas nervig.  
  
Und auch nicht zielführend - denn dann nimmst du ja eine feste em-px-Umrechnung an, womit du gleich px notieren kannst...  
  
Grüße,  
  
RIDER  
  

-- 
Camping\_RIDER a.k.a. Riders Flame a.k.a. Janosch Zoller  
  
ch:? rl:| br:> n4:? ie:% mo:| va:) js:) de:> zu:) fl:( ss:| ls:[  

[Gunnar Bittersmann]

@@Carmen:

nuqneH

ok, dann habe ich hier also alles richtig gemacht:

#salon .salonImage {

border: 5px solid rgb(210, 181, 91);
}

  
Kommt drauf an. Die Entscheidung, ob px oder em, hängt davon ab, wie sich das verhalten soll, wenn der Nutzer die Schrift vergrößert oder verkleinert.  
  
Bei einer 1px dünnen Haarlinie sollte man erwarten, dass die Dicke erhalten bleibt. Angabe in px.  
  
Ein 5px fetter Rahmen sollte vielleicht doch eher mit der Schrift wachsen beziehungsweise schrumpfen. Angabe also in em.  
  
  

> Jeden Wert in EM umzurechnen ist etwas nervig.  
  
(Nicht nur) dafür gibt es CSS-Präprozessoren.  
  
~~~scss
@function em($length, $ratio: 16px/em)  
{  
  @return $length/$ratio;  
}

Qapla'

[Carmen]

Hallo,

Ein 5px fetter Rahmen sollte vielleicht doch eher mit der Schrift wachsen beziehungsweise schrumpfen. Angabe also in em.

Ok, dann ist es in meinem Fall wohl doch besser wenn ich die 5px da es sich hier ja nicht mehr um einen dünnen Rahmen handelt in em umrechne. Danke für deine Erklärung.

(Nicht nur) dafür gibt es CSS-Präprozessoren.

@function em($length, $ratio: 16px/em)

{
  @return $length/$ratio;
}

  
Hier meinst du bestimmt SASS oder LESS? Hab mich damit mal etwas beschäftig. Allerdings muss man seinen LESS bzw. SASS Code erst kompilieren bevor ich mir das ansehen kann was ich gerade mache, ist für mich derzeit zu umständlich.

[Gunnar Bittersmann]

@@Carmen:

nuqneH

Hier meinst du bestimmt SASS oder LESS?

“It’s Sass not SASS”

Hab mich damit mal etwas beschäftig. Allerdings muss man seinen LESS bzw. SASS Code erst kompilieren bevor ich mir das ansehen kann was ich gerade mache, ist für mich derzeit zu umständlich.

Sass mit --watch gestartet aktualisiert bei jeder Änderung am Quellcode automatisch die generierte(n) CSS-Datei(en).

LESS kann man während der Entwicklung automatisch per JavaScript kompilieren lassen.

Ich sehe nicht, was da zu umständlich sein sollte.

Qapla'

[Camping_RIDER]

Aloha ;)

Ich sehe nicht, was da zu umständlich sein sollte.

Naja, ich kann den TO schon verstehen... Vor allem für 'Anfänger' ist die Menge an zu lernenden Technologien schon groß, da ist jede weitere Sprache umständlich. Außerdem: Für mich persönlich ist 'das schöne' an HTML, CSS und JavaScript gerade das, dass man außer dem Browser und dem Klartexteditor der Wahl kein zusätzliches Programm braucht, nichts kompilieren muss...

Das mag dazu führen, dass man nicht am Optimum der Produktivität arbeitet, und es ist gut, also sowohl richtig als auch wichtig, dass du auf Sass und Co. hinweist - trotzdem kann ich auch die Einstellung des TO gut verstehen...

Grüße,

RIDER

[Gunnar Bittersmann]

@@Camping_RIDER:

nuqneH

Außerdem: Für mich persönlich ist 'das schöne' an HTML, CSS und JavaScript gerade das, dass man außer dem Browser und dem Klartexteditor der Wahl kein zusätzliches Programm braucht, nichts kompilieren muss...

Wie gesagt, braucht man für LESS auch nicht.

Für Sass braucht man zusätzliches Programm: ein Terminal. Es sei denn, man startet Sass gleich beim Hochfahren des Rechners.

Qapla'

[Der Martin]

Hi,

immer wieder lese ich dass man auf px verzichten soll. Kann ich verstehen und kapiere dieses auch. Auf der anderen Seite sehe ich allerdings genau bei diesen Damen und Herren wenn es um einen border geht also z.B. border: 5px solid rgb(210, 181, 91); doch wieder auf px zurückgriffen wird. Was ist denn nun richtig bzw. warum wird nicht komplett auf px verzichtet?

es kommt drauf an, was man bemaßen will. Geht es um generelle, das Layout bestimmende Abmessungen, ist px meistens eine schlechte Wahl, weil das Layout damit starr wird und nicht mehr anpassungsfähig ist. Da sind meistens Einheiten besser, die sich auf die Schriftgröße oder die Fenstergröße beziehen.

Rahmenlinien sind aber wieder ein klassisches Beispiel, wo die Angabe in px (zumindest für die Linienstärke) sinnvoll ist. Hier möchte man oft eine möglichst feine Linie, die aber garantiert sichtbar bleibt. Dann ist "1px" vermutlich die beste Maßangabe, die man finden kann. Auch wenn die Größe eines Elements genau auf ein Bild (Rastergrafik, nicht SVG) abgestimmt sein soll, ist eventuell eine Angabe in px günstig.

Generell sollte man gut darüber nachdenken, ob px für den jeweiligen Zweck wohl angebracht ist.

Ciao,
 Martin

[Carmen]

Hallo Martin,

Generell sollte man gut darüber nachdenken, ob px für den jeweiligen Zweck wohl angebracht ist.

vielen Dank für die sehr ausführliche Erklärung. Dann bleibe ich bei px wenn es um einen "border" geht.

[Carmen]

Guten Abend,

auf meiner Seite http://friseursalon.bplaced.net/ unter dem Punkt "Salon" gibt es drei Bilder, die sind so eingebunden:

  
    <figure>  
      <img src="img/salon/01.jpg" alt="" class="salonImage">  
      <figcaption class="salonText">Carmen</figcaption>  
	</figure>  
    <figure>  
      <img src="img/salon/01.jpg" alt="" class="salonImage">  
      <figcaption class="salonText">Carmen</figcaption>  
	</figure>  
    <figure>  
      <img src="img/salon/01.jpg" alt="" class="salonImage">  
      <figcaption class="salonText">Carmen</figcaption>  
	</figure>  

Das dazugehörige CSS

  
#salon figure {  
	width:14em;  
	display:inline-block;  
	margin-right:4.7em;  
}  
  
#salon figure:last-child {  
	margin-right:0em;  
}  
  
#salon .salonImage {  
	border: 5px solid rgb(210, 181, 91);  
	border-radius: 50%;  
	box-shadow: 0 0 0 0.625em rgba(210, 181, 91, 0.3) inset;  
	width: 13.750em;  
	height: 13.750em;  
	transition: all 0.5s ease-in-out 0s;  
	margin: 1.250em auto 1.875em;  
	position:absolute;  
}  
  
#salon .salonText {  
	position: relative;  
	top: 120px;  
	left: 72px;  
	transition: all 0.8s ease-in-out 0s;  
	font-size:1.375em;  
	color:#222222;  
	opacity: 0;  
}  
#salon .salonText:hover {  
	opacity: 1;  
	transform: scale(1);  
}  

Nun möchte ich gerne wenn ich mit der Maus auf das Bild fahre der Text erscheint und gleichzeig sollte das Bild leicht durchsichtig werden also ein weiße Farbe bekommen, wie könnte ich das am besten anstellen?

[Carmen]

Hallo,

ich habe unter dem Punkt "Salon" nochmals etwas geändert http://friseursalon.bplaced.net/

Mein Problem ist allerdiungs noch immer der Text, wie kann ich erreichen dass dieser eingeblendet wird, wenn ich auf das Bild mit der Maus fahre? Wie ich es jetzt habe, muss man genau den Text treffen das ist nicht Sinn der Sache :/

Auch weiß ich nicht, ob das HTML so richtig ist

  
    <span class="carmen">  
      <p class="salonText">Carmen</p>  
	</span>  
    <span class="carmen">  
      <p class="salonText">Carmen</p>  
	</span>  
    <span class="carmen">  
      <p class="salonText">Carmen</p>  
	</span>  

  
.carmen:first-child  {  
	margin-left:1em;  
}  
  
.carmen {  
	background:url(../img/salon/01.jpg) no-repeat;  
	border: 5px solid rgb(210, 181, 91);  
	border-radius: 50%;  
	box-shadow: 0 0 0 0.2em rgba(210, 181, 91, 0.3) inset;  
	width: 13.750em;  
	height: 13.750em;  
	transition: all 0.5s ease-in-out 0s;  
	display:inline-block;  
	margin-right:8em;  
	margin-top:2em  
}  
  
.carmen:last-child {  
	margin-right:0em;  
}  
  
.carmen:hover {  
	box-shadow: 0 0 0 110px rgba(255,255,255, 0.9) inset;  
}  
  
#salon .salonText {  
	position: relative;  
	top: 72px;  
	left: 64px;  
	transition: all 0.8s ease-in-out 0s;  
	font-size:1.375em;  
	color:#222222;  
	opacity: 0;  
}  
#salon .salonText:hover {  
	opacity: 1;  
	transform: scale(1);  
}  

[Carmen]

Hallo,

ich habe zwar eine Lösung, sieht aber mehr als scheiße aus :/

  
.carmen {  
	background:url(../img/salon/01.jpg) no-repeat;  
	border: 5px solid rgb(210, 181, 91);  
	border-radius: 50%;  
	box-shadow: 0 0 0 0.2em rgba(210, 181, 91, 0.3) inset;  
	width: 13.750em;  
	height: 13.750em;  
	transition: all 0.5s ease-in-out 0s;  
	display:inline-block;  
	margin-right:8em;  
	margin-top:2em;  
	text-indent: -999px;  
	overflow:hidden;  
}  
.carmen:hover {  
	box-shadow: 0 0 0 110px rgba(255,255,255, 0.9) inset;  
	text-indent: 0px;  
}  

[Carmen]

So, ich glaube ich habe es

  
<div class="salonImage" style="background-image: url(img/salon/01.jpg)"><h4>Carmen</h4></div>  

  
.salonImage {  
	border: 5px solid rgb(210, 181, 91);  
	border-radius: 50%;  
	box-shadow: 0 0 0 0.313em rgba(210, 181, 91, 0.3) inset;  
	width: 13.750em;  
	height: 13.750em;  
	transition: all 0.5s ease-in-out 0s;  
	margin: 1.250em auto 1.875em;  
}  
  
.salonImage:hover {  
	box-shadow: 0 0 0 6.875em rgba(255,255,255, 0.9) inset;  
}  
  
.salonImage:hover h4 {  
	opacity: 1;  
	transform: scale(1);  
}  
  
.salonImage h4 {  
	text-align: center;  
	padding-top: 80px;  
	opacity: 0;  
	transform: scale(0);  
	transition: all 0.8s ease-in-out 0s;  
}  

Es geht nun so, wenn ich mein Bild direkt in das HTMl als Background einbinde. Finde ich zwar irgendwie schade, aber ich teste es jetzt seit einigen Stunden, irgendwann verliere ich auch die Lust und die Gedult daran.

[Carmen]

Ich habe noch eine Zusatzfrage zu meiner Frage von direkt darüber. Warum funktioniert

.salonImage:first-child

Wird weder im Chrome noch Firefox beachtet. Ich verstehe es einfach nicht.

[Gunnar Bittersmann]

@@Carmen:

nuqneH

Ich habe noch eine Zusatzfrage zu meiner Frage von direkt darüber. Warum funktioniert
.salonImage:first-child
[nicht?]

Keines der <div class="salonImage"> ist erstes Kindelement des Elternelements (<div class="content">).

Statt mit …-child- könntest du mit …-type-of-Selektoren arbeiten, was aber äußerst fragil ist, denn das bricht zusammen, sobald noch ein anderes div-Element (nicht der Klasse "salonImage") am Anfang in <div class="content"> hinzukommt.

Besser ist wohl, den Bildern noch ein gemeinsames Elternelement zu spendieren. (Darf auch ul sein; die Elemente der Klasse "salonImage" wären dann li.)

Qapla'

[Tabellenkalk]

Hallo,

Auch weiß ich nicht, ob das HTML so richtig ist

<span class="carmen">
      <p class="salonText">Carmen</p>
</span>

>   
  
Span ist ein Inlineelement, das darf keine Blockelemente enthalten.  
  
Gruß  
Kalk

[Carmen]

Hallo,

Auch weiß ich nicht, ob das HTML so richtig ist

<span class="carmen">
      <p class="salonText">Carmen</p>
</span>

  

> Span ist ein Inlineelement, das darf keine Blockelemente enthalten.  
  
das heißt, ich mach ein <span> innerhalb von einem <span> also so?  
  
~~~html
  
<span class="carmen">  
 <span class="salonText">Carmen</span>  
</span>  

[Matthias Apsel]

Om nah hoo pez nyeetz, Carmen!

das heißt, ich mach ein <span> innerhalb von einem <span> also so?

Nein, du verwendest semantisch passende Elemente. In deinem Falle figure und figcaption. Beispiele findest du in unserer Doku: Bilder präsentieren

Matthias

[Carmen]

Hallo Matthias,

Nein, du verwendest semantisch passende Elemente. In deinem Falle figure und figcaption. Beispiele findest du in unserer Doku: Bilder präsentieren

genau das hatte ich gestern Abend http://forum.de.selfhtml.org/?t=219179&m=1512769 dadurch konnte ich allerdings diesen Effekt nicht erreichen, den ich jetzt drin habe: http://friseursalon.bplaced.net/ unter dem Punkt "Salon"

[Matthias Apsel]

Om nah hoo pez nyeetz, Carmen!

genau das hatte ich gestern Abend http://forum.de.selfhtml.org/?t=219179&m=1512769 dadurch konnte ich allerdings diesen Effekt nicht erreichen, den ich jetzt drin habe: http://friseursalon.bplaced.net/ unter dem Punkt "Salon"

gewünschte visuelle Effekte lassen sich unabhängig davon erreichen, welche Elemente man verwendet. Möglicherweise muss man für das eine oder andere Element noch gewisse Browserstyles zurücksetzen, aber das sollte es auch schon gewesen sein. Mir fällt kein Grund ein, warum etwas, das für die Konstruktion

<div>  
  <img …>  
  <span>…</span>  
</div>

funktioniert, nicht auch für das viel bessere Markup

<figure>  
  <img …>  
  <figcaption>…</figcaption>  
</figure>

erreichbar sein sollte.

Matthias

[Carmen]

gewünschte visuelle Effekte lassen sich unabhängig davon erreichen, welche Elemente man verwendet. Möglicherweise muss man für das eine oder andere Element noch gewisse Browserstyles zurücksetzen, aber das sollte es auch schon gewesen sein. Mir fällt kein Grund ein, warum etwas, das für die Konstruktion

<div>

<img …>
  <span>…</span>
</div>

> funktioniert, nicht auch für das viel bessere Markup  
> ~~~html

<figure>  

>   <img …>  
>   <figcaption>…</figcaption>  
> </figure>

erreichbar sein sollte.

nein, es geht einfach nicht. Ich sitze jetzt 4 Stunden an solchen scheiß Bilder um für eine Suchmaschiene alles richtig machen zu wollen. Es klappt nicht. Sobald ich ein <img> nicht als BG einbinde gehen meine Effekte nicht mehr. Daher ist es mir jetzt fast egal was eine Suchmaschiene oder irgendwelche Seiten sagen ob in einem <span> kein <p> sein darf.

Wenn ich meine Seite hier http://validator.w3.org/check?uri=http%3A%2F%2Ffriseursalon.bplaced.net%2F&charset=%28detect+automatically%29&doctype=Inline&group=0 prüfen lasse, bekomme ich ein 100% valides Ergebnis angezeigt, also kann mein <span><p></p></span> gar nicht falsch sein?

[Carmen]

Hallo,

so würde mein Effekt wieder funktionieren

  
    <figure style="background-image: url(img/salon/01.jpg)" class="salonImage">  
      <figcaption>Carmen</figcaption>  
        </figure>  

  
figcaption {  
	text-align: center;  
	padding-top: 80px;  
	opacity: 0;  
	transition: all 0.8s ease-in-out 0s;  
}  
  
figcaption:hover {  
	opacity: 1;  
}  
.salonImage {  
	border: 5px solid rgb(210, 181, 91);  
	border-radius: 50%;  
	box-shadow: 0 0 0 0.313em rgba(210, 181, 91, 0.3) inset;  
	width: 13.750em;  
	height: 13.750em;  
	transition: all 0.5s ease-in-out 0s;  
	margin: 2em 8em 1.875em 0;  
	display:inline-block;  
	cursor:pointer;  
}  
  
.salonImage:last-child {  
		margin: 2em 0em 1.875em 0;  
}  
  
.salonImage:first-child {  
		margin: 2em 8em 1.875em 2em;  
}  
  
.salonImage:hover {  
	box-shadow: 0 0 0 6.875em rgba(255,255,255, 0.9) inset;  
}  

Wenn ich figure richtig verstanden habe, darf dieses allersings kein "background-image" haben? Wenn dieses stimmt, bleibt mir nichts anderes übring als <span><p></p></span> zu nehmen, wie hier schon gewschrieben.

[Matthias Apsel]

Om nah hoo pez nyeetz, Carmen!

Wenn ich figure richtig verstanden habe, darf dieses allersings kein "background-image" haben?

darf schon, aber es wäre nicht unbedingt sinnvoll.

Wenn dieses stimmt, bleibt mir nichts anderes übring als <span><p></p></span> zu nehmen, wie hier schon gewschrieben.

Es kommt jetzt darauf an, was es werden soll. Einfach nur Verzierung? Linkelemente, die auf Seiten der einzelnen Mitarbeiter verweisen?

Im ersten Fall würde ich <div><p></p></div> und cursor ungleich pointer! nehmen, in letzterem <a><img><span></span></a>.

Matthias

[Carmen]

Hallo Matthias,

Es kommt jetzt darauf an, was es werden soll. Einfach nur Verzierung? Linkelemente, die auf Seiten der einzelnen Mitarbeiter verweisen?

eigentlich nur um den Namen zu erfahren wer auf dem Bild zu sehen ist. Mehr soll damit nicht passieren.

[Gunnar Bittersmann]

@@Carmen:

nuqneH

eigentlich nur um den Namen zu erfahren wer auf dem Bild zu sehen ist.

Ist der Name wichtig? Wenn ja, darf er nicht beim Hovern erscheinen, weil es auf vielen (den meisten) Geräten gar kein Hover gibt.

Qapla'

[Camping_RIDER]

Aloha ;)

eigentlich nur um den Namen zu erfahren wer auf dem Bild zu sehen ist.

Ist der Name wichtig? Wenn ja, darf er nicht beim Hovern erscheinen, weil es auf vielen (den meisten) Geräten gar kein Hover gibt.

Falsch :P Deine Aussage polarisiert wieder zu stark. Es müsste heißen:

Ist der Name wichtig? Wenn ja, dann darf er nicht nur beim Hovern erscheinen, weil es auf vielen Geräten gar kein Hover gibt.

Und um gleich eine mögliche Lösung hinterherzuschieben: Wir hatten sowas ähnliches neulich schon einmal hier (bzw. hier).

Grüße,

RIDER

[Gunnar Bittersmann]

@@Camping_RIDER:

nuqneH

Ist der Name wichtig? Wenn ja, darf er nicht beim Hovern erscheinen, weil es auf vielen (den meisten) Geräten gar kein Hover gibt.

Falsch :P Deine Aussage polarisiert wieder zu stark. Es müsste heißen:

Ist der Name wichtig? Wenn ja, dann darf er nicht nur beim Hovern erscheinen, weil es auf vielen Geräten gar kein Hover gibt.

Und was wolltest du damit nun „berichtigen“? Das ergänzte „nur“ oder das weggelassene „(den meisten)“?

Ja, „nur“ passt.

Und dass bei der Nutzung des Webs heutzutage Mobilgeräte in der Überzahl gegenüber Desktop-Geräten sind*, sollte sich inzwischen auch bis zum letzten Entwickler rumgesprochen haben, der noch an seiner Desktop-Möhre festklebt (auch und vor allem im Geiste).

Qapla'

* abhängig von der Zielgruppe

[Carmen]

Hallo,

Und dass bei der Nutzung des Webs heutzutage Mobilgeräte in der Überzahl gegenüber Desktop-Geräten sind*, sollte sich inzwischen auch bis zum letzten Entwickler rumgesprochen haben, der noch an seiner Desktop-Möhre festklebt (auch und vor allem im Geiste).

* abhängig von der Zielgruppe

Meine Zielgruppe sind junge Mädels im Alter zwischen 15 - 21 Jahre. Sprich ich könnte auf eine optimnierung für einen Desktop-PC vollständig verzichten, was ich aber nicht mache.

[Camping_RIDER]

Aloha ;)

Ist der Name wichtig? Wenn ja, darf er nicht beim Hovern erscheinen, weil es auf vielen (den meisten) Geräten gar kein Hover gibt.

Falsch :P Deine Aussage polarisiert wieder zu stark. Es müsste heißen:

Ist der Name wichtig? Wenn ja, dann darf er nicht nur beim Hovern erscheinen, weil es auf vielen Geräten gar kein Hover gibt.

Und was wolltest du damit nun „berichtigen“? Das ergänzte „nur“ oder das weggelassene „(den meisten)“?

Ja, „nur“ passt.

Der Vollständigkeit halber: Es ging um das "nur", das weggelassene stand ja so oder so nur in Klammern :P Aber ja, mit "den meisten" hast du natürlich schon recht.

Grüße,

RIDER

[Carmen]

Guten Morgen,

Ist der Name wichtig? Wenn ja, darf er nicht beim Hovern erscheinen, weil es auf vielen (den meisten) Geräten gar kein Hover gibt.

wichtig? Kann ich dir nicht sagen. Es wäre schön wenn der Namen auf allen Geräten angezeit wird, wenn nicht hat der User eben pech, genauso wie wenn ein User mit der Maus nicht über das Bild fährt.

[Camping_RIDER]

Aloha ;)

Ist der Name wichtig? Wenn ja, darf er nicht beim Hovern erscheinen, weil es auf vielen (den meisten) Geräten gar kein Hover gibt.

wichtig? Kann ich dir nicht sagen. Es wäre schön wenn der Namen auf allen Geräten angezeit wird, wenn nicht hat der User eben pech, genauso wie wenn ein User mit der Maus nicht über das Bild fährt.

Aus eigener Erfahrung würde ich sagen, ja, ist wichtig... Ich bin selbst nur etwa jedes halbe Jahr beim Friseur und stehe dann immer bei der telefonischen Terminabsprache vor der Frage, bei wem ich denn gerne einen Termin hätte... Ich meine, ich mag meine Friseuse (oder sagt man jetzt Friseurin?), aber ich kann mir manchmal einfach über ein halbes Jahr nicht merken, ob sie jetzt Annika, Elke oder Sandra hieß... Da bin ich wirklich froh, wenn ich vorher auf der Homepage meines Friseursalons (die ich wegen der Nummer sowieso öffne) auch gleich nachschauen kann, wie sie denn nochmal hieß - denn am Bild weiß mans dann doch, selbst wenn man den Namen nicht kennt. Mein vorheriger Friseursalon hatte sowas nicht und ich war dann regelmäßig fast gezwungen entweder nachzufragen "äh, wer steht denn zur Auswahl" oder gleich zu sagen "ist mir egal" :D Beides nicht gerade toll ;)

Von daher in meinen Augen, ja, unbedingt wichtig, und ja, auch für Mobilgeräte. Wie du das lösen kannst hatte ich ja schon verlinkt, für Nachfragen stehe ich gerne zur Verfügung...

Grüße,

RIDER

[Matthias Apsel]

Om nah hoo pez nyeetz, Carmen!

nein, es geht einfach nicht.

Doch, es geht. Aber darum soll es mir nicht gehen:

Mir gefällt deine Gestaltungsidee ausgesprochen gut. Und auch deine Entscheidung Hintergrundbilder zu verwenden, ist nicht unbedingt verkehrt. Sollen diese runden Bilder Linkelemente werden?

Matthias

[Carmen]

Hallo Matthias,

Mir gefällt deine Gestaltungsidee ausgesprochen gut. Und auch deine Entscheidung Hintergrundbilder zu verwenden, ist nicht unbedingt verkehrt. Sollen diese runden Bilder Linkelemente werden?

derzeit ist dieses nicht eingeplant, da ich nicht wüsste was ich zu jedem Mitarbeiter schreiben soll. Ich möchte dieses nur um den Besuchern zu zeigen wer sich hinter dem Bild versteckt.

Ich würde ja das Bild als <img> einbinden, nur dann geht mein Effekt leider nicht mehr wenn ich mit der Maus drüber fahre, deshalb der Hintergrund.

[Gunnar Bittersmann]

@@Carmen:

nuqneH

Wenn ich meine Seite hier http://validator.w3.org/check?uri=http%3A%2F%2Ffriseursalon.bplaced.net%2F&charset=%28detect+automatically%29&doctype=Inline&group=0 prüfen lasse, bekomme ich ein 100% valides Ergebnis angezeigt, also kann mein <span><p></p></span> gar nicht falsch sein?

Ich weiß nicht, welche Version du zum Validator geschickt hast, aber bestimmt nicht die mit <span><p></p></span>. Daraufhin zeigt der nämlich: „Element p not allowed as child of element span in this context. (Suppressing further errors from this subtree.)“

Qapla'

[Carmen]

Hallo,

Ich weiß nicht, welche Version du zum Validator geschickt hast, aber bestimmt nicht die mit <span><p></p></span>. Daraufhin zeigt der nämlich: „Element p not allowed as child of element span in this context. (Suppressing further errors from this subtree.)“

ich hab es jetzt erstmal so umgesetzt

  
    <div class="salonImage" style="background-image: url(img/salon/01.jpg)"><h4>Carmen</h4></div>  
    <div class="salonImage" style="background-image: url(img/salon/01.jpg)"><h4>Carmen</h4></div>  
    <div class="salonImage" style="background-image: url(img/salon/01.jpg)"><h4>Carmen</h4></div>  

alles andere hat bei mir leider nicht funktioniert wie hier bereits geschrieben http://forum.de.selfhtml.org/?t=219179&m=1512850

[Gunnar Bittersmann]

@@Carmen:

nuqneH

ich hab es jetzt erstmal so umgesetzt

<div class="salonImage" style="background-image: url(img/salon/01.jpg)"><h4>Carmen</h4></div>
    <div class="salonImage" style="background-image: url(img/salon/01.jpg)"><h4>Carmen</h4></div>
    <div class="salonImage" style="background-image: url(img/salon/01.jpg)"><h4>Carmen</h4></div>

  
Nein, „Carmen“ ist gewiss keine Überschrift.  
  
Qapla'

-- 
„Talente finden Lösungen, Genies entdecken Probleme.“ (Hans Krailsheimer)

[Carmen]

Hallo,

Nein, „Carmen“ ist gewiss keine Überschrift.

was ist der Name dann?

[Camping_RIDER]

Aloha ;)

Nein, „Carmen“ ist gewiss keine Überschrift.

was ist der Name dann?

Text, der sinnvollerweise innerhalb eines Textabsatzes steht, also ein <p>, eventuell ein <p class="name"> oder so...

Schriftgröße, ... (oder was auch immer für eine visuelle Eigenschaft von h4 du wahrscheinlich haben wolltest) kannst du über CSS einstellen.

Grüße,

RIDER

[Carmen]

Hallo,

Text, der sinnvollerweise innerhalb eines Textabsatzes steht, also ein <p>, eventuell ein <p class="name"> oder so...

Schriftgröße, ... (oder was auch immer für eine visuelle Eigenschaft von h4 du wahrscheinlich haben wolltest) kannst du über CSS einstellen.

ok, habe ich gerade geändert: http://friseursalon.bplaced.net/ nun sieht es so aus:

  
        <div class="salonImage" style="background-image: url(img/salon/01.jpg)">  
          <p class="name">Test Name 1</p>  
        </div>  
        <div class="salonImage" style="background-image: url(img/salon/02.jpg)">  
          <p class="name">Test Name 2</p>  
        </div>  
        <div class="salonImage" style="background-image: url(img/salon/03.jpg)">  
          <p class="name">Test Name 3</p>  
        </div>  

[Matthias Apsel]

Om nah hoo pez nyeetz, Carmen!

<div class="salonImage" style="background-image: url(img/salon/01.jpg)">

<p class="name">Test Name 1</p>
        </div>

  
„name“ ist so ein nichtssagender Klassenbezeichner. „Mitarbeiterin“?  
  
Matthias

-- 
Der Unterschied zwischen Java und JavaScript ist größer als der zwischen [Dress und Dressing](http://selfhtml.apsel-mv.de/java-javascript/index.php?buchstabe=D#dress).  
![](http://www.billiger-im-urlaub.de/kreis_sw.gif)  

[Carmen]

Hallo Matthias,

„name“ ist so ein nichtssagender Klassenbezeichner. „Mitarbeiterin“?

dann nennen ich es "personal" :) hab auch zwei Jungs die zur Aushilfe ab und an hier sind, wenn es eng wird.

Dazu hätte ich aber noch eine Frage. Wenn ich mir große Seiten ansehe, dann sehe ich oft, dass classen nur eine "Nummer" haben z.B. "ghzu7898568" hat dieses eine bestimmte Bedeutung oder wollen die einfach den ganzen CSS und HTML Code neutral halten?

[Der Martin]

Hallo,

Wenn ich mir große Seiten ansehe, dann sehe ich oft, dass classen nur eine "Nummer" haben z.B. "ghzu7898568" hat dieses eine bestimmte Bedeutung oder wollen die einfach den ganzen CSS und HTML Code neutral halten?

weder noch.

In der Regel wird es so sein, dass die mit irgendwelchen Tools sowohl den HTML- als auch den CSS-Code aus einem völlig anderen Datenformat automatisch generieren lassen. Also vergibt das Tool Klassennamen einfach stur nach irgendeinem Schema, ohne dass die in irgendeiner Form sinnvoll sein müssen.

So long,
 Martin

[Matthias Apsel]

Om nah hoo pez nyeetz, Carmen!

Nun möchte ich gerne wenn ich mit der Maus auf das Bild fahre der Text erscheint und gleichzeig sollte das Bild leicht durchsichtig werden also ein weiße Farbe bekommen, wie könnte ich das am besten anstellen?

Ohne dein Beispiel angeschaut zu haben: Dies könnte vielleicht auch etwas für dich sein http://wiki.selfhtml.org/wiki/CSS/Anwendung_und_Praxis/Bilder_präsentieren

Matthias

[Carmen]

Guten Morgen,

ich hätte noch eine kleine Frage zur Darstellung der Adresse, Öffnungszeiten und Kontaktmöglichkeiten.

Wie ihr auf meiner Demo Seite unter "Kontakt" sehen könnt, möchte ich gerne alle drei Rubriken nebeneinander stellen:

  
    	<div class="adresse">  
        	Name & Vorname<br>  
			Straße & Hausnummer<br>	  
			PLZ Ort  
        </div>  
        <div class="kontakt">0000 - 000000<br>eMail Adresse</div>  
        <div class="zeiten">Mo. - Fr. 9.00 bis 18.00 Uhr <br>Sa. 9.00 bis 14.00 Uhr<br>Termine nach Vereinbarung</div>  

Ich weiß allerdings nicht, ob dieses so die beste Option ist, da ich geren vor der Adresse noch eine kleine Grafik hätte, genauso bei den Öffnungszeiten und Kontakt.

Gibt es hier eine bessere alternative?

[Auge]

Guten Morgen,

Mojens

Wie ihr auf meiner Demo Seite unter "Kontakt" sehen könnt, möchte ich gerne alle drei Rubriken nebeneinander stellen:
…
Ich weiß allerdings nicht, ob dieses so die beste Option ist, da ich geren vor der Adresse noch eine kleine Grafik hätte, genauso bei den Öffnungszeiten und Kontakt.

Gibt es hier eine bessere alternative?

<wortklauber>Naja, es gibt Alternativen. Nicht jede ist per definitionem besser.</wortklauber>

Ich würde in folgende Richtung tendieren.

  
<div id="adresse" class="kontaktinfos">  
 <span>Name & Vorname</span>  
 <span>Straße & Hausnummer</span>	  
 <span>PLZ Ort</span>  
</div>  
<div id="kontakt" class="kontaktinfos">  
 <span>0000 - 000000</span>  
 <span>eMail Adresse</span>  
</div>  
<div id="zeiten" class="kontaktinfos">  
 <span>Mo. - Fr. 9.00 bis 18.00 Uhr</span>  
 <span>Sa. 9.00 bis 14.00 Uhr</span>  
 <span>Termine nach Vereinbarung</span>  
</div>

Den von mir aus deinen Klassen generierten IDs (#adresse, #kontakt und #zeiten) weist du nun die jeweiligen Bilder als Hintergrund zu. Über .kontaktinfos span gibst du an, dass die spans als Blockelemente angezeigt werden, damit die Infos zeilenweise angezeigt werden. Über den selben Selektor (.kontaktinfos span) regelst du auch den Abstand der Texte zum linken Rand des jeweiligen div, so dass sie rechts neben den Hintergrundbildern stehen (das ist, wenn ich dich richtig verstanden habe, dein Wunsch).

Tschö, Auge

[Carmen]

Hallo,

Ich würde in folgende Richtung tendieren.

<div id="adresse" class="kontaktinfos">
<span>Name & Vorname</span>
<span>Straße & Hausnummer</span>
<span>PLZ Ort</span>
</div>
<div id="kontakt" class="kontaktinfos">
<span>0000 - 000000</span>
<span>eMail Adresse</span>
</div>
<div id="zeiten" class="kontaktinfos">
<span>Mo. - Fr. 9.00 bis 18.00 Uhr</span>
<span>Sa. 9.00 bis 14.00 Uhr</span>
<span>Termine nach Vereinbarung</span>
</div>

>   
> Den von mir aus deinen Klassen generierten IDs (`#adresse`{:.language-css}, `#kontakt`{:.language-css} und `#zeiten`{:.language-css}) weist du nun die jeweiligen Bilder als Hintergrund zu. Über `.kontaktinfos span`{:.language-css} gibst du an, dass die spans als Blockelemente angezeigt werden, damit die Infos zeilenweise angezeigt werden. Über den selben Selektor (`.kontaktinfos span`{:.language-css}) regelst du auch den Abstand der Texte zum linken Rand des jeweiligen div, so dass sie rechts neben den Hintergrundbildern stehen (das ist, wenn ich dich richtig verstanden habe, dein Wunsch).  
  
vielen Dank für deine Hilfe und Erklärung. Hab dieses nun so umgesetzt  
  
~~~html
  
        <div id="adresse" class="kontaktinfos">  
            <span>Name & Vorname</span>  
            <span>Straße & Hausnummer</span>  
            <span>PLZ Ort</span>  
        </div>  

Und mein CSS dazu sieht so aus

  
#adresse {  
	width:32%;  
	display:inline-block;  
	margin-top:3.5em;  
	background:url(../img/icons/kontakt.jpg) no-repeat;  
	min-height:4.063em;  
}  
.kontaktinfos span {  
	display:block;  
	vertical-align:top;  
	padding-left:4em;  
}  

Online ist es auch zu sehen: http://friseursalon.bplaced.net/ sollte es nicht gleich angezeigt werden, bitte STRG + F5 drücken.

[Carmen]

Hallo,

hab noch eine kleine Zusatzfrage, ist dieses im HTML erlaubt?

  
        <div id="zeiten" class="kontaktinfos">  
            <span>Mo. - Fr. <span class="geoeffnet">9.00 bis 18.00 Uhr</span></span>  
            <span>Sa. <span class="geoeffnet">9.00 bis 14.00 Uhr</span></span>  
            <span>Termine nach Vereinbarung</span>  
        </div>  

Damit möchte ich erreichen, dass die beiden Uhrzeiten untereiander sehen.

[Matthias Apsel]

Om nah hoo pez nyeetz, Carmen!

ist dieses im HTML erlaubt?

<div id="zeiten" class="kontaktinfos">

<span>Mo. - Fr. <span class="geoeffnet">9.00 bis 18.00 Uhr</span></span>
            <span>Sa. <span class="geoeffnet">9.00 bis 14.00 Uhr</span></span>
            <span>Termine nach Vereinbarung</span>
        </div>

  
erlaubt schon. Schau dir aber mal das [time-Element](http://wiki.selfhtml.org/wiki/HTML/Textauszeichnung/time) an.  
  
Matthias

-- 
Der Unterschied zwischen Java und JavaScript ist größer als der zwischen [Lake und Laken](http://selfhtml.apsel-mv.de/java-javascript/index.php?buchstabe=L#lake).  
![](http://www.billiger-im-urlaub.de/kreis_sw.gif)  

[Gunnar Bittersmann]

@@Matthias Apsel:

nuqneH

Schau dir aber mal das time-Element an.

Und Schema.org: LocalBusiness, openingHours, address, email, …

Qapla'

[Carmen]

Hallo Matthias,

erlaubt schon. Schau dir aber mal das time-Element an.

auch dieses habe ich geändert. Mein HTML sieht nun so aus:

  
            <span>Carmen's Friseursalon</span>  
            <span>Musterstraße 8</span>  
            <span>50933 Köln - Braunsfeld</span>  
        </div>  
        <div id="telefon" class="kontaktinfos">  
            <span><span class="bezeichnung">Fon.:</span>0000 - 000000</span>  
            <span><span class="bezeichnung">eMail:</span>[e-mail]</span>  
        </div>  
        <div id="zeiten" class="kontaktinfos">  
            <span><span class="bezeichnung">Mo. - Fr.</span><time class="geoeffnet">9.00 bis 18.00 Uhr</time></span>  
            <span><span class="bezeichnung">Sa.</span><time class="geoeffnet">9.00 bis 14.00 Uhr</time></span>  
            <span class="termin">Termine nach Vereinbarung</span>  
        </div>  

Und das CSS dazu so:

  
#adresse {  
	width:30%;  
	display:inline-block;  
	margin-top:3.5em;  
	margin-left: 1.5em;  
	background:url(../img/icons/kontakt.jpg) no-repeat;  
	min-height:4.063em;  
	vertical-align:top;  
}  
  
#telefon {  
	width:37%;  
	display:inline-block;  
	margin-top:3.5em;  
	background:url(../img/icons/kontakt.jpg) no-repeat;  
	min-height:4.063em;  
	vertical-align:top;  
}  
  
#zeiten {  
	width:29%;  
	display:inline-block;  
	margin-top:3.5em;  
	background:url(../img/icons/kontakt.jpg) no-repeat;  
	min-height:4.063em;  
	vertical-align:top;  
}  
  
.kontaktinfos span {  
	vertical-align: top;  
	padding-left: 1.9em;  
	line-height: 1.4em;  
}  
  
.anschrift span {  
	vertical-align: top;  
	padding-left: 3.9em;  
	display:inline-block;  
	line-height: 1.4em;  
}  
.bezeichnung {  
	width: 103px;  
	display: inline-block;  
}  
.geoeffnet {  
	margin-left:10px;  
}  
  
.termin {  
	margin-left: 30px;  
	padding-top: 7px;  
	display: inline-block;  
}

Ein Live Beispiel auch wieder hier: http://friseursalon.bplaced.net/

[Carmen]

Guten Morgen,

welche Version für die Team Seite gefällt euch am besten, oder doch lieber etwas ganz anderes nehmen?

Version 1

Version 2

Version 3

Ich hab leider nur 5 Leute die auf die Seite können.

[Gunnar Bittersmann]

@@Carmen:

nuqneH

welche Version für die Team Seite gefällt euch am besten, oder doch lieber etwas ganz anderes nehmen?

Version 1 (olympische Ringe).

Und wie ordnest du die auf schmalen Bildschirmen an? (lt. deiner Aussage wichtiger als große Bildschirme) Wie die ⚄ auf einem Würfel?

Ich hab leider nur 5 Leute die auf die Seite können.

Und das bleibt auch bei 5?

Qapla'

[Carmen]

Hallo,

Version 1 (olympische Ringe).

OK, dann muss ich etwas mein CSS und HTML umbauen, werde dieses im laufe des Tages umsetzten.

Und wie ordnest du die auf schmalen Bildschirmen an? (lt. deiner Aussage wichtiger als große Bildschirme) Wie die ⚄ auf einem Würfel?

Auf einem schmalen Bildschirmen? Also Handy größe ist klar, alle untereinader. Auf einem Tablet wie du schon gesagt hast wie eine 5 auf einem Wurfel (da habe ich allerdings noch 0 Ahnung wie ich dieses in HTML und CSS umsetzten könnte).

Handy un Tablet habe ich hier nur als Beispiel genommen, funktioniert natürlich auch, wenn der Bildschirm kleiner gezogen wird.

Und das bleibt auch bei 5?

Kann ich dir leider nicht nicht sagen. Oder weißt du wo du in ca. 5 - 10 Jahren stehst (also Beruflich gemeint)?

[Matthias Apsel]

Om nah hoo pez nyeetz, Carmen!

Ich würde auch die olympischen Ringe vorziehen, bei der Anordnung wie auf einem Würfel kommt der Person in der Mitte imho automatisch eine Sonderrolle zu.

Matthias

[Gunnar Bittersmann]

@@Carmen:

nuqneH

Version 1 (olympische Ringe).

OK, dann muss ich etwas mein CSS und HTML umbauen, werde dieses im laufe des Tages umsetzten.

Nein, HTML solltest du dazu nicht umbauen müssen.

Auf einem schmalen Bildschirmen? Also Handy größe ist klar, alle untereinader. Auf einem Tablet wie du schon gesagt hast wie eine 5 auf einem Wurfel (da habe ich allerdings noch 0 Ahnung wie ich dieses in HTML und CSS umsetzten könnte).

Mit media queries und :nth-child solltest du alle 3 Varianten hinbekommen.

Und das bleibt auch bei 5?

Kann ich dir leider nicht nicht sagen. Oder weißt du wo du in ca. 5 - 10 Jahren stehst (also Beruflich gemeint)?

Ich wollte nur zu bedenken geben, ob eine allgemeine Lösung der Anordnung oder eine spezielle für 5 Elemente sinnvoll ist. Die Antwort kann in deinem Fall durchaus spezielle Lösung lauten. Wenn es zukünftig mehr oder weniger Mitarbeiter werden, musst du halt _dann_ die Anordnung neu überdenken.

Qapla'

[Carmen]

Hallo,

Nein, HTML solltest du dazu nicht umbauen müssen.

wenn ich mein HTML aber nicht ändere bzw. weitere Klassen vergeben, dann sieht es so aus http://friseursalon.bplaced.net/ ist nicht das verhalten wie auf meinem Bild :/

Mein HTML Aufbau

  
      <div class="content">  
        <h2>Der Friseur</h2>  
        <p class="teaser">Wir sind Friseure aus Leidenschaft. Für Ihre Schönheit.</p>  
        <div class="personalImage" style="background-image: url(img/salon/01.jpg)">  
          <p class="personalName">Test Name 1</p>  
        </div>  
        <div class="personalImage" style="background-image: url(img/salon/02.jpg)">  
          <p class="personalName">Test Name 2</p>  
        </div>  
        <div class="personalImage" style="background-image: url(img/salon/03.jpg)">  
          <p class="personalName">Test Name 3</p>  
        </div>  
        <div class="personalImage" style="background-image: url(img/salon/03.jpg)">  
          <p class="personalName">Test Name 3</p>  
        </div>  
        <div class="personalImage" style="background-image: url(img/salon/03.jpg)">  
          <p class="personalName">Test Name 3</p>  
        </div>  
      </div>  

In der ersten Reihe sollen drei Bilder sein und darunter dann eben 2 aber etwas nach rechts versetzt.

Und hier noch das passende CSS

  
	min-height:100%  
}  
  
.personalImage {  
	border: 5px solid rgb(210, 181, 91);  
	border-radius: 50%;  
	box-shadow: 0 0 0 0.313em rgba(210, 181, 91, 0.3) inset;  
	width: 13.750em;  
	height: 13.750em;  
	transition: all 0.5s ease-in-out 0s;  
	margin: 2em 8em 1.875em 0;  
	display:inline-block;  
	cursor:pointer;  
}  
  
.personalImage:last-child {  
	margin: 2em 0em 1.875em 0;  
}  
  
.personalImage:first-child {  
	margin: 2em 8em 1.875em 2em;  
}  
  
.personalImage:hover {  
	box-shadow: 0 0 0 6.875em rgba(255,255,255, 0.9) inset;  
}  
  
.personalImage .personalName {  
	text-align: center;  
	padding-top: 80px;  
	opacity: 0;  
	font-weight:bold;  
	transition: all 0.8s ease-in-out 0s;  
}  
  
.personalImage:hover .personalName {  
	opacity: 1;  
}  

Ich würde den unteren beiden Bildern eine weitere Klasse geben dass die eben ein Abstand nach links bekommen und somit weiter nach rechts rutschen.

[Auge]

Hallo

Mein HTML Aufbau

<div class="content">
        <h2>Der Friseur</h2>
        <p class="teaser">Wir sind Friseure aus Leidenschaft. Für Ihre Schönheit.</p>
        <div class="personalImage" style="background-image: url(img/salon/01.jpg)">
          <p class="personalName">Test Name 1</p>
        </div>
        <!-- weitere Blöcke -->
      </div>

  
Sollen weitere Absätze in die <div>s eingesetzt werden oder bleibt es beim Mitarbeiternamen? Wenn ja, kannst du die <p>s mit `.personalImage p`{:.language-css} ansprechen und brauchst, wo nicht anderweitig notwendig, nicht noch die Klasse `.personalName`{:.language-css} nutzen. Selbst wenn dem Namen ein weiterer Absatz zur Vorstellung folgen würde, kämst du an die Namen selbst mit `.personalImage:first-child`{:.language-css} heran. Das macht den HTML-Quelltext etwas übersichtlichern.  
  
Tschö, Auge  

-- 
Verschiedene Glocken läuteten in der Stadt, und jede von ihnen vertrat eine ganz persönliche Meinung darüber, wann es Mitternacht war.  
Terry Pratchett, "Wachen! Wachen!"  
  
ie:{ fl:| br:> va:) ls:[ fo:) rl:( ss:| de:> js:| zu:} 

[Carmen]

Hallo,

Sollen weitere Absätze in die <div>s eingesetzt werden oder bleibt es beim Mitarbeiternamen? Wenn ja, kannst du die <p>s mit .personalImage p ansprechen und brauchst, wo nicht anderweitig notwendig, nicht noch die Klasse .personalName nutzen. Selbst wenn dem Namen ein weiterer Absatz zur Vorstellung folgen würde, kämst du an die Namen selbst mit .personalImage:first-child heran. Das macht den HTML-Quelltext etwas übersichtlichern.

ja, in diesen Bereich kommen später noch weitere Bereiche sprich Texte, die ich aber erst noch erstellen muss.

[Carmen]

Hallo,

Nein, HTML solltest du dazu nicht umbauen müssen.

vielleicht hast du ja kurz Zeit mir zu erklären, wie ich meine Bilder so anordnen kann, dass es aussieht wie auf meinem Bild

Di hast ja geschrieben ich muss mein HTML nicht umbauen, dann frage ich mich aber, wie kann ich mit meinem HTML es erreichen, dass es so aussieht? Meine Version ist hier zu sehen:

http://friseursalon.bplaced.net/ unter dem Punkt "Salon"

[Gunnar Bittersmann]

@@Carmen:

nuqneH

Di hast ja geschrieben ich muss mein HTML nicht umbauen, dann frage ich mich aber, wie kann ich mit meinem HTML es erreichen, dass es so aussieht?

reponsive stack

Qapla'

[Matthias Apsel]

Om nah hoo pez nyeetz, Gunnar Bittersmann!

reponsive stack

Ich denke, da schießt du über das Ziel hinaus. Was spricht gegen

ul {  
  text-align: center;  
  width: 100%;  
  max-width: 30em;  
  margin: auto  
}  
li {  
  display: inline-block;  
}

Matthias

[Carmen]

Hallo,

ein kleiner Bereich fehlt mir noch und zwar dsa Kontaktformular. In Gimp habe ich es bereits fertig, so sollte es später aussehen:

Meine Idee ist folgende:

• Ein Div um das ganze Formular, dass ich dem eine Breite geben kann
• In dem Div zwei weitere Divs für den linken und rechten Bereich

Die Felder setzte ich so um

  
    <p class="">	  
    	<label for="nachricht" class="textare_label">Mitteilung</label>	  
        <textarea name="nachricht" class="text_area" cols="40" rows="7" id="nachricht" ></textarea>  
    </p>  
  
    <p class="">  
    	<label for="anrede">Anrede <abbr class="pflicht" title="Pflichtfeld">*</abbr></label>  
        <select name="anrede" class="select" id="anrede"><option  value ='Frau'>Frau</option><option  value ='Herr'>Herr</option></select>  
    </p>  
  
    <p class="">  
    	<label for="vorname">Vorname <abbr class="pflicht" title="Pflichtfeld">*</abbr></label>  
        <input name="vorname" class="text_input" type="text" id="vorname" value=""/>  
    </p>  

und werden dann in das linke und rechte div verteilt.

Bin ich hier auf dem richtigen Weg, oder könnte ich es auch noch anderes ohne den DIVS machen?

[Gunnar Bittersmann]

@@Carmen:

nuqneH

ein kleiner Bereich fehlt mir noch und zwar dsa Kontaktformular. In Gimp habe ich es bereits fertig, so sollte es später aussehen:

Vorname und Name gehören zusammen, stehen aber versetzt.

(Brauchst du beides wirklich getrennt oder reicht nicht auch ein Feld „Name“?)

Dito für PLZ und Ort.

Das Formular solltest du nochmal überarbeiten.

Meine Idee ist folgende:

• Ein Div um das ganze Formular, dass ich dem eine Breite geben kann

Wozu? Mit form hast du bereits ein alles gruppierendes Element.

• In dem Div zwei weitere Divs für den linken und rechten Bereich
  […]
  Bin ich hier auf dem richtigen Weg, oder könnte ich es auch noch anderes ohne den DIVS machen?

Nein, bist du nicht.

Wozu die div? Eingabefelder/Label bekommen 50% Breite und floaten. Oder Flexbox. Oder display: inline-box.

Wie willst du mit divs für links/rechts ein responsive design hinbekommen?

Qapla'

[Carmen]

Hallo,

ich habe nun mein Kontaktformular in HTML ertellt, ist das denn so richtig? Kann ich damit mein Vorhaben wie auf dem Bild umsetzten?

  
<form action="#" method="post" class="kontakt_form">  
  
    <p class="mitteilung">	  
    	<label for="nachricht">Nachricht</label>	  
        <textarea name="nachricht" class="text_area" cols="40" rows="7" id="nachricht" ></textarea>  
    </p>  
  
    <p class="mitteilung">  
    	<label for="anrede">Anrede <abbr class="required" title="required">*</abbr></label>  
        <select name="anrede" class="select" id="anrede">  
        	<option  value ="Frau">Frau</option>  
            <option  value ="Herr">Herr</option>  
        </select>  
    </p>  
  
   <p class="mitteilung_1">  
    	<label for="firma">Firma</label>  
        <input name="firma" class="text_input" type="text" id="firma" value=""/>  
    </p>  
  
	<p class="mitteilung_2">  
    	<label for="vorname">Vorname <abbr class="required" title="required">*</abbr></label>  
        <input name="vorname" class="text_input" type="text" id="vorname" value=""/>  
    </p>  
  
    <p class="mitteilung_1">  
    	<label for="name">Name <abbr class="required" title="required">*</abbr></label>  
    	<input name="name" class="text_input" type="text" id="name" value=""/>  
    </p>  
       	  
    <p class="mitteilung_2">  
    	<label for="strasse">Strasse <abbr class="required" title="required">*</abbr></label>  
    	<input name="strasse" class="text_input" type="text" id="strasse" value=""/>  
    </p>  
  
    <p class="mitteilung_1">  
    	<label for="plz">PLZ <abbr class="required" title="required">*</abbr></label>  
        <input name="plz" class="text_input" type="text" id="plz" value=""/>  
    </p>  
  
    <p class="mitteilung_2">  
    	<label for="ort">Ort <abbr class="required" title="required">*</abbr></label>  
        <input name="ort" class="text_input" type="text" id="ort" value=""/>  
    </p>  
  
    <p class="mitteilung_1">  
    	<label for="telefon">Telefon <abbr class="required" title="required">*</abbr></label>  
    	<input name="telefon" class="text_input" type="tel" id="telefon" value=""/>  
    </p>  
  
    <p class="mitteilung_2">  
    	<label for="email">E-Mail <abbr class="required" title="required">*</abbr></label>  
        <input name="email" class="text_input" type="email" id="email" value=""/>  
    </p>  
  
    <input type="submit" value="Abschicken" class="button" />  
</form>  

Online habe ich es auch zur Verfügung gestellt: http://friseursalon.bplaced.net/kontakt.html

Nur ich verstehe noch nicht, wie ich das nun ohne DIVS nach links und rechts bringen soll. Bei kleinen größen sollte alles einfach untereinander stehen.

[Carmen]

Hallo,

ok, wenn das HTML so in Ordnung ist, wie hier gezeigt, dann sollte mein CSS bestimmt auch passen oder?

  
.kontakt_form {  
	width:600px;  
	margin:0 auto;  
}  
  
.text_area {  
	width:100%;  
	background:#efefef;  
	border:#666;  
}  
  
.kontakt_form label {  
	padding-bottom:5px;  
	display:block;  
}  
  
.mitteilung_1 {  
	display:inline-block;  
	width:48%;  
}  
  
.mitteilung_2 {  
	display:inline-block;  
	width:48%;  
}  
  

Mein online Beispiel habe ich auch aktualisiert http://friseursalon.bplaced.net/kontakt.html

[Carmen]

Guten Abend,

warum wird das Feld "Anrede" so klein dargestellt?

Hab so formatiert

  
.text_input, .select {  
	width:100%;  
	padding:0.625em;  
	background:#fcfcfc;  
	border:1px solid #ebebeb;  
}  

[Matthias Apsel]

Om nah hoo pez nyeetz, Carmen!

warum wird das Feld "Anrede" so klein dargestellt?

Ich kann da nichts ungewöhnliches entdecken, außer dass Straße mit ß geschrieben wird.

Die p-Elemente sind sicher nicht notwendig, wenn du die texarea resp. inputs in die label-Elemente steckst. Dann braucht nur das erste label-Element anders formatiert zu werden.

label {display: block; width: 48%;}  
label:first-child {width: 100%;}  
label:nth-child(2n) {margin-right: 3%;}

ungetestet

Matthias

[Carmen]

Hallo Matthias,

Ich kann da nichts ungewöhnliches entdecken, außer dass Straße mit ß geschrieben wird.

schau mal auf das Feld "Anrede" und vergleiche dieses mit z.B. "Firma". Jetzt müsste dir auffallen dass alle Felder einen Abstand haben padding:0.625em; auf dem Desktop wird dieses auch richtig dargestellt nur auf dem Handy eben nicht.

Auf dem Desktop sieht es so aus

Jetzt müsste es dir eigentlich auch auffallen :)

[Auge]

Hallo

schau mal auf das Feld "Anrede" und vergleiche dieses mit z.B. "Firma". Jetzt müsste dir auffallen dass alle Felder einen Abstand haben padding:0.625em; auf dem Desktop wird dieses auch richtig dargestellt nur auf dem Handy eben nicht.

Auf dem Desktop sieht es so aus

Jetzt müsste es dir eigentlich auch auffallen :)

Das kann daran liegen, dass für den Lauftext eine andere Schrift benutzt wird, als für die Formularfelder. Selbst bei gleich angegebener Schriftgröße ergeben sich durch die Konstruktion der Schriften Größenunterschiede. Wenn meine Vermutung zutrifft, solltest du das Problem durch die explizite Vorgabe *einer* Schriftart für alle Elemente abschaffen.

Tschö, Auge

[Gunnar Bittersmann]

@@Carmen:

nuqneH

warum wird das Feld "Anrede" so klein dargestellt?

Weil Browser bei select ihre eigenen Vorstellungen von der Darstellung haben. Und diese auch durchdrücken.

Siehe Chris Coyier.

Qapla'

[Gunnar Bittersmann]

@@Carmen:

nuqneH

ok, wenn das HTML so in Ordnung ist, wie hier gezeigt, dann sollte mein CSS bestimmt auch passen oder?

.kontakt_form {

width:600px;
}

  
`width:600px` passt nicht zu responsive webdesign. Hast du wohl inzwischen selbst schon gemerkt; ich kann’s in deinem Online-Bespiel nicht mehr finden.  
  
(Ich frag mich, ob es gut ist, das Online-Bespiel ständig zu ändern und damit ältere Postings nicht mehr nachvollziehbar zu machen, oder ob es sinnvoller wäre, jede Version unter anderem URI zu referenzieren.)  
  
  
Was immer noch nicht passt, ist das Design des Formulars.  
  
Jetzt hast du zwar Vorname und Familienname (das Label „Name“ ist unpassend) in einer Zeile, aber auch Anrede und Firma, was nicht zusammengehört.  
  
Dass bei Anrede „Herr“ vorausgewählt ist, ist problematisch. Dass eine Person nur zwischen „Herr“ und „Frau“ wählen kann, [ist diskriminierend](http://www.zeit.de/wissen/2013-10/intersexualitaet-geschlechtsangabe-personenstandsgesetz-aenderung).  
  
Und was, wenn man „Firma“ wählt? Vorname und Familienname sind dennoch Pflichtfelder? Es ist nicht klar, was man in dem Formular überhaupt eingeben sollte.  
  
  
Was du tust ist, Eingabefelder auf Teufel-komm-raus auf zwei Spalten zu verteilen. Das kann nur schiefgehen.  
  
Überlege dir, welche Daten du abfragen musst. Dazu gehört auch, welche du getrennt abfragen musst. Brauchst du [Vorname und Familienname getrennt?](http://www.w3.org/International/questions/qa-personal-names#singlefield) Brauchst du PLZ und Ort getrennt?  
  
Dann überlegst du, welche Eingabefelder inhaltlich(!) zusammengehören.  
  
\_Daraus\_ ergibt sich deren Anordnung. Wenn in manchen Zeilen nur Eingabefeld ist und in anderen vielleicht sogar drei, dann ist das halt so. Form follows function.  
  
Qapla'

-- 
„Talente finden Lösungen, Genies entdecken Probleme.“ (Hans Krailsheimer)

[Gunnar Bittersmann]

@@Gunnar Bittersmann:

nuqneH

Wenn in manchen Zeilen nur Eingabefeld ist und in anderen vielleicht sogar drei, dann ist das halt so. Form follows function.

Sollte heißen:
Wenn in manchen Zeilen nur _ein_ Eingabefeld ist …

So eine Schande.

Qapla'

[Carmen]

Hallo,

width:600px passt nicht zu responsive webdesign. Hast du wohl inzwischen selbst schon gemerkt; ich kann’s in deinem Online-Bespiel nicht mehr finden.

Wenn ich eine Seite erstelle, dann mache ich das immer erst in px, denn damit kann _ich_ besser rechnen. Wenn alles soweit passt dann rechne ich diese Angaben in em um.

(Ich frag mich, ob es gut ist, das Online-Bespiel ständig zu ändern und damit ältere Postings nicht mehr nachvollziehbar zu machen, oder ob es sinnvoller wäre, jede Version unter anderem URI zu referenzieren.)

Ich kann natürlich auch 100 Dateien anlegen. Ob dieses allerdings nützlich ist, ist eine andere Sache.

Jetzt hast du zwar Vorname und Familienname (das Label „Name“ ist unpassend) in einer Zeile, aber auch Anrede und Firma, was nicht zusammengehört.

Gehört zwar nicht wirklich zusammen, findet man aber in der Regel genauso auf 98% aller Formular im Web. Wenn es nach dir gehen würde, dann wäre Anrede und Firma in einer jeweils eigenen Zeile und das sieht scheiße aus.

Ich könnte natürlich das Feld Firma erst einblenden lassen wenn man Firma auch gewählt hat und den Vornamen ausblenden und dafür Ansprechpartner, das müsste ich dann mit JS umsetzten davon habe ich allerdings 0 Ahnung.

Dass bei Anrede „Herr“ vorausgewählt ist, ist problematisch. Dass eine Person nur zwischen „Herr“ und „Frau“ wählen kann, ist diskriminierend.

Ich kann leider nur die Felder abfragen die auch in meiner Software wie gerade schon geschrieben vorhanden sind. Mehr als Herr, Frau und Firma habe ich nicht zur Verfügung.

Und was, wenn man „Firma“ wählt? Vorname und Familienname sind dennoch Pflichtfelder? Es ist nicht klar, was man in dem Formular überhaupt eingeben sollte.

Was soll denn da bitte nicht klar sein? Jeder ist es gewohnt die Felder die ein * haben auch auszufüllen. Außerdem bekommt er einen Hinweis wenn er dieses Formular abschicken will.

[Gunnar Bittersmann]

@@Carmen:

nuqneH

width:600px passt nicht zu responsive webdesign. Hast du wohl inzwischen selbst schon gemerkt; ich kann’s in deinem Online-Bespiel nicht mehr finden.

Wenn ich eine Seite erstelle, dann mache ich das immer erst in px, denn damit kann _ich_ besser rechnen. Wenn alles soweit passt dann rechne ich diese Angaben in em um.

Noch entscheidender war die Änderung von width auf max-width.

Gehört zwar nicht wirklich zusammen, findet man aber in der Regel genauso auf 98% aller Formular im Web.

Du musst in einem anderen Web unterwegs sein als ich. Und selbst wenn die Zahl stimmen sollte, wäre das eine unsinnige Begründung.

Wenn es nach dir gehen würde, dann wäre Anrede und Firma in einer jeweils eigenen Zeile und das sieht scheiße aus.

Design ist nicht (nur), wie etwas aussieht, sondern vor allem, wie es funktioniert.

Ich könnte natürlich das Feld Firma erst einblenden lassen wenn man Firma auch gewählt hat und den Vornamen ausblenden und dafür Ansprechpartner, das müsste ich dann mit JS umsetzten davon habe ich allerdings 0 Ahnung.

Jetzt wäre eine guter Anlass, dass zu ändern.

Dass bei Anrede „Herr“ vorausgewählt ist, ist problematisch. Dass eine Person nur zwischen „Herr“ und „Frau“ wählen kann, ist diskriminierend.

Ich kann leider nur die Felder abfragen die auch in meiner Software wie gerade schon geschrieben vorhanden sind. Mehr als Herr, Frau und Firma habe ich nicht zur Verfügung.

Doch: keine Auswahl? Das sollte dann auch Default-Option sein.

Und was, wenn man „Firma“ wählt? Vorname und Familienname sind dennoch Pflichtfelder? Es ist nicht klar, was man in dem Formular überhaupt eingeben sollte.

Was soll denn da bitte nicht klar sein? Jeder ist es gewohnt die Felder die ein * haben auch auszufüllen. Außerdem bekommt er einen Hinweis wenn er dieses Formular abschicken will.

Wenn man „Firma“ wählt, muss man keinen Firmennamen angeben? (Ist ja kein Pflichtfeld.)

Aber Vornamen und Familiennamen einer Person? (Pflichtfelder.)

Qapla'

[Carmen]

Guten Morgen,

ich habe eine weitere Frage zu einem Slider, den ich gerne im Kopf meiner Seite verwenden würde. Wo derzeit das große Bild eingebunden ist, sollen später 2-3 Bilder laufen. Meine Frage ist nun, sollte ich den Slider lieber mit CSS3 machen oder herkömmlich mit JavaScript?

Nachteil CSS3:
Wenn ein Bild dazu kommt bzw. weg fällt muss ich ständig meinen CSS Code anpassen

Was sagt ihr?

[Auge]

Guten Morgen,

Mojens

ich habe eine weitere Frage zu einem Slider, den ich gerne im Kopf meiner Seite verwenden würde. Wo derzeit das große Bild eingebunden ist, sollen später 2-3 Bilder laufen. Meine Frage ist nun, sollte ich den Slider lieber mit CSS3 machen oder herkömmlich mit JavaScript?

Nachteil CSS3:
Wenn ein Bild dazu kommt bzw. weg fällt muss ich ständig meinen CSS Code anpassen

Vorteil CSS:
Eine Technik weniger, die vorausgesetzt wird.

Zudem stellen sich die Fragen, wie oft du denn Bilder auszutauschen gedenkst und ob es *relevante* Browser(versionen) gibt, die die Slideshow mit CSS nicht darstellen können. Letzteres ist allerdings auch kein Beinbruch. Kann ein Browser das nicht, bekommt er halt ein statisches Bild angeboten. Nur über die (Datei-)Größe der Bilder würde ich mir noch Gedanken machen. Das Jetzige Eine hat fast 1.4Mb. Das ist schon heftig.

Tschö, Auge

[Carmen]

Hallo Auge,

Vorteil CSS:
Eine Technik weniger, die vorausgesetzt wird.

Stimmt, und es muss nicht erst jQuery und Co geladen werden. Daher habe ich mich für einen CSS - Slider entschieden.

Zudem stellen sich die Fragen, wie oft du denn Bilder auszutauschen gedenkst und ob es *relevante* Browser(versionen) gibt, die die Slideshow mit CSS nicht darstellen können. Letzteres ist allerdings auch kein Beinbruch. Kann ein Browser das nicht, bekommt er halt ein statisches Bild angeboten.

Die alten Brwosern sind mir jetzt erstmal egal. Hab vor einiger Zeit ja bereits geschrieben dass ich mehr Jugendliche als Kunden habe, die sind zu 90% mit dem Handy unterwegs :)

Hab mal etwas erstellt http://friseursalon.bplaced.net/slider.html (bitte _nicht_ mit dem Handy drauf gehen, verbraucht zu viel Traffic). Allerdings habe ich jetzt ein Problem.

Mein Hintergrundbild habe ich bis jetzt so eingebunden:

  
background:url(../img/slider/header/bild01.jpg) no-repeat center;  
background-size:cover;  

Im Slider ist dieses nicht mehr möglich, wie kann ich nun das background-size:cover; anwenden? Stehe gerade total auf dem Schlauch.

Nur über die (Datei-)Größe der Bilder würde ich mir noch Gedanken machen. Das Jetzige Eine hat fast 1.4Mb. Das ist schon heftig.

Ich habe mir eine Demo Version von Photoshop installiert, laut einer Anleitung muss ich dort einfach auf "Für Web speichern" klicken, habe ich auch gemacht. Das Bild wurde von 6 MB auf 1.4 MB reduziert, ist aber wie du schon richtig schreibst noch viel zu groß. Allerdings kann auch http://www.jpegmini.com/ nicht viel an der Größe machen. Mal schauen wie ich die Bilder noch kleiner bekomme.

[Gunnar Bittersmann]

@@Carmen:

nuqneH

Stimmt, und es muss nicht erst jQuery und Co geladen werden. Daher habe ich mich für einen CSS - Slider entschieden.

Es gibt auch welche, die ohne jQuery auskommen: Swipe bspw.

Im Slider ist dieses nicht mehr möglich, wie kann ich nun das background-size:cover; anwenden? Stehe gerade total auf dem Schlauch.

Das Bild soll also mindestens so breit und mindestens so hoch sein wie seine umgebende Box:

… img  
{  
	min-width: 100%;  
	min-height: 100%;  
}

Ich habe mir eine Demo Version von Photoshop installiert, laut einer Anleitung muss ich dort einfach auf "Für Web speichern" klicken, habe ich auch gemacht.

Mit einfach klicken ist es nicht getan. Du kannst dort auch die Größe (Pixel) und die Qualität einstellen.

Qapla'

[Carmen]

Hallo,

Das Bild soll also mindestens so breit und mindestens so hoch sein wie seine umgebende Box:

… img

{
min-width: 100%;
min-height: 100%;
}

  
aber das ist nicht das gleiche wie wenn ich `background-size:cover;`{:.language-css} verwende.  
  
Meine Idee aus diesem Code  
  
~~~html
  
<div id="slider_home">  
    <img src="img/slider/header/bild1.jpg" class="slider_img bild_1"/>  
    <img src="img/slider/header/bild2.jpg" class="slider_img bild_2"/>  
    <img src="img/slider/header/bild3.jpg" class="slider_img bild_3"/>  
</div>  

diesen zu machen

  
<div id="slider_home">  
	<div id="b1"></div>  
	<div id="b1"></div>  
	<div id="b1"></div>  
</div>  

Dann die Bilder wieder als Hintergrundbilder einzubinden.

[Gunnar Bittersmann]

@@Carmen:

nuqneH

Das Bild soll also mindestens so breit und mindestens so hoch sein wie seine umgebende Box:

… img

{
min-width: 100%;
min-height: 100%;
}

>   
> aber das ist nicht das gleiche wie wenn ich `background-size:cover;`{:.language-css} verwende.  
  
Die umgebende Box bräuchte natürlich Breiten- und Höhenangabe und `overflow: hidden`.  
  
Qapla'

-- 
„Talente finden Lösungen, Genies entdecken Probleme.“ (Hans Krailsheimer)

[Carmen]

Hallo,

Die umgebende Box bräuchte natürlich Breiten- und Höhenangabe und overflow: hidden.

habe ich gemacht

  
#slider_home {  
	overflow:hidden;  
	min-height:100%;  
	min-width:100%;  
}  
  
#slider_home img {  
    min-width: 100%;  
    min-height: 100%;  
}  

bringt aber nicht, das Bild wird immer noch in voller Größe dargestellt und background-size:cover; kann ich weiterhn nicht anwenden.

[Gunnar Bittersmann]

@@Carmen:

nuqneH

Die umgebende Box bräuchte natürlich Breiten- und Höhenangabe und overflow: hidden.

habe ich gemacht

[code lang=css]
#slider_home {
overflow:hidden;
min-height:100%;
min-width:100%;
}

Das sind keine Größenangaben im o.g. Sinn. width und height sind welche.

Qapla'

[Carmen]

Hallo,

Das sind keine Größenangaben im o.g. Sinn. width und height sind welche.

ok, hab es nun so abgeändert

  
#slider_home {  
	height:100%;  
	width:100%;  
	overflow:hidden;  
}  
  
#slider_home img {  
	width: 100%;  
    height: 100%;  
}  

Ist das nun der gleiche Effekt, wie vorhin?

  
background-size:cover;  

Also wird das Bild immer voll zu sehen sein und nicht verzerrt?

[Gunnar Bittersmann]

@@Carmen:

nuqneH

ok, hab es nun so abgeändert

#slider_home img {

width: 100%;
    height: 100%;
}

  
Sagte ich nicht `min-` für img?  
  
  

> background-size:cover;  
> Also wird das Bild immer voll zu sehen sein und nicht verzerrt?  
  
„Voll zu sehen“ ist nicht das was `cover` tut. Das wäre `contain`. Wenn du das willst: `max-` für img.  
  
Qapla'

-- 
„Talente finden Lösungen, Genies entdecken Probleme.“ (Hans Krailsheimer)

[Carmen]

Hallo,

Sagte ich nicht min- für img?
„Voll zu sehen“ ist nicht das was cover tut. Das wäre contain. Wenn du das willst: max- für img.

ok hab ich nun hoffentlich richtig geändert

  
#slider_home {  
	height:100%;  
	width:100%;  
	overflow:hidden;  
}  
  
#slider_home img {  
	max-width: 100%;  
    max-height: 100%;  
}  

Kennst du vielleicht eine Seite wo man sich solche keyframes zusammen klicken kann? Meine Übergänge laufen einfach nicht flüssig :/

[Carmen]

Hallo,

Sagte ich nicht min- für img?
„Voll zu sehen“ ist nicht das was cover tut. Das wäre contain. Wenn du das willst: max- für img.

es funktioniert einfach nicht. Hier zwei Beispiele:

  
#slider_home img {  
    min-width: 100%;  
    min-height: 100%;  
}  

http://friseursalon.bplaced.net/slider1.html

das Bild wird über die volle Breite angezeigt, so dass ich scrollen muss, ist nicht das was ich möchte.

  
#slider_home img {  
	max-width: 100%;  
    max-height: 100%;  
}  

http://friseursalon.bplaced.net/slider.html

Das Bild wird ganz angezeigt, habe aber rechts einen weißen leeren Raum, was ich auch nicht will. Ich habe das Gefühl ich muss es mit diversen Divs machen und dann als Background einbinden.

[Gunnar Bittersmann]

@@Carmen:

nuqneH

das Bild wird über die volle Breite angezeigt, so dass ich scrollen muss, ist nicht das was ich möchte.

Was möchtest du dann?

Das Bild wird ganz angezeigt, habe aber rechts einen weißen leeren Raum, was ich auch nicht will.

Über volle Breite willst du nicht, nicht über volle Breite willst du auch nicht?

Qapla'

[Carmen]

Hallo,

Was möchtest du dann?

ich möchte es genua so haben wie hier http://friseursalon.bplaced.net/

[Matthias Apsel]

Om nah hoo pez nyeetz, Carmen!

Was möchtest du dann?

ich möchte es genua so haben wie hier http://friseursalon.bplaced.net/

Na, dann hast du es doch genau so.

Btw: Nicht, dass es am Ende keinem mehr auffällt: Du möchtest bestimmt keine Lesitungen anbieten und auch auf das Deppenapostroph verzichten.

Matthias

[Carmen]

Hallo Matthias,

Na, dann hast du es doch genau so.

Mit dem Hintergrund habe ich nun eine Lösung gefunden, ich mach es über <ul><li> damit kann ich jedem <li> einen Background geben und damit wieder mein cover anwenden. Jetzt habe ich erstmal noch dieses Problem, da komme ich allerdings gar nicht weiter. Gunnar meinte ja, ich brauch für dieses Problem mein HTML nicht zu ändern.

Btw: Nicht, dass es am Ende keinem mehr auffällt: Du möchtest bestimmt keine Lesitungen anbieten und auch auf das Deppenapostroph verzichten.

Ich scrolle so oft durch die Seite und dieser Fehler mit "Lesitungen" ist mir noch nie aufgefallen :/ Werde ich natürlich gleich verbessern.

[Matthias Apsel]

Om nah hoo pez nyeetz, Carmen!

Ich scrolle so oft durch die Seite und dieser Fehler mit "Lesitungen" ist mir noch nie aufgefallen :/ Werde ich natürlich gleich verbessern.

Den Deppenapostroph nicht vergessen: „Carmen’s“ Ein Apostroph ist ein Auslassungszeichen, wie bei „Was ’n das für ’n Quatsch?“ Auch wenn er als Genitivkennzeichnung für Eigennamen grundsätzlich erlaubt ist, würde ich darauf verzichten. Das zeugt imo von gutem Stil.

Matthias

[Auge]

Hallo

… Auch wenn er als Genitivkennzeichnung für Eigennamen grundsätzlich erlaubt ist

Quelle? Soweit ich weiß, gilt das nur für Namen/Worte, die auf s, ss,/ß, x, tz oder z enden, dann jedoch ohne angeklebtes s (der Duden hierzu). Bio hat das mal schön und auf seine Art typisch zugespitzt auseinander genommen.

Wenn jemand Carlos heisst, dann heisst sein Imbiss Carlos' Imbiss, wenn er Carlo heisst Carlos Imbiss, wenn er Carl heisst Carls Imbiss - alles gar kein Problem, es sei denn, man ist ein strunzdummer, generalverblödeter Idiotenapostroph-Nutzer.

Tschö, Auge

[Gunnar Bittersmann]

@@Auge:

nuqneH

Wenn jemand Carlos heisst, dann heisst sein Imbiss Carlos' Imbiss, wenn er Carlo heisst Carlos Imbiss, wenn er Carl heisst Carls Imbiss - alles gar kein Problem, es sei denn, man ist ein strunzdummer, generalverblödeter Idiotenapostroph-Nutzer.

Wenn man nun aber Carlos oder Carlo heißt, kann sein Imbiss durchaus Carl’s Imbiss heißen, oder?

Qapla'

[Auge]

Hallo

Wenn jemand Carlos heisst, dann heisst sein Imbiss Carlos' Imbiss, wenn er Carlo heisst Carlos Imbiss, wenn er Carl heisst Carls Imbiss - alles gar kein Problem, es sei denn, man ist ein strunzdummer, generalverblödeter Idiotenapostroph-Nutzer.

Wenn man nun aber Carlos oder Carlo heißt, kann sein Imbiss durchaus Carl’s Imbiss heißen, oder?

Klar, von mir aus auch „Bei Mutti ihre Bratpfanne“ oder so.

Tschö, Auge

[Matthias Apsel]

Om nah hoo pez nyeetz, Auge!

… Auch wenn er als Genitivkennzeichnung für Eigennamen grundsätzlich erlaubt ist

Quelle?

https://de.wikipedia.org/wiki/Apostroph, ich habe es allerdings nicht weiter zurückverfolgt.

Matthias

[Auge]

Hallo

… Auch wenn er als Genitivkennzeichnung für Eigennamen grundsätzlich erlaubt ist

Quelle?

https://de.wikipedia.org/wiki/Apostroph, ich habe es allerdings nicht weiter zurückverfolgt.

Hmm … aus dem Text:

Nach der neuen deutschen Rechtschreibung darf der Apostroph beim Genitiv verwendet werden, um die Grundform eines Personennamens zu verdeutlichen. Beispiele:

Andrea’s Friseursalon
    Willi’s Würstchenbude[23]
    Einstein’s Relativitätstheorie

Das einzige der drei Beispiele, das sich mir erschließt, ist jenes mit Andrea. Es gibt ja auch Andreas, wobei dessen Friseursalon „Andreas' Friseursalon“ hieße. Mit den anderen beiden Beispielen kann ich aber nichts anfangen. Ob das damit „grundsätzlich erlaubt“ ist, sei dahingestellt.

Tschö, Auge

[Camping_RIDER]

Aloha ;)

Stimmt, und es muss nicht erst jQuery und Co geladen werden. Daher habe ich mich für einen CSS - Slider entschieden.

Oh brave new world, in der gegen JavaScript-Einsatz mit jQuery argumentiert wird... RIP, du schöne, herkömmliche Scripting-Arbeit...

Scheint, dass ich mich in diesem Sinne wohl langsam wirklich zu den ewig gestrigen zählen kann...

Grüße,

RIDER

[Carmen]

Hallo,

ich finde einfach den Fehler nicht. Ich habe auf meiner Seite http://friseursalon.bplaced.net/carmen.html nun endlich einen JavaScript leider eingebaut (keine Ahnung ob es hier etwas besseres gibt) allerdings habe ich nun auf der rechten Seite verdammt viel freier raum, woher kommt dieser? Ich finde den Fehler einfach nicht.

Auf der Projektseite vom Slider http://buildinternet.com/project/supersized/slideshow/3.2/fade.html geht dieser schön über die ganze Seite.

Vielleicht findet ihr ja den Fehler.

[Carmen]

Hallo,

hier Version 2 vom Slider, die funktioniert, allerdings wird das Bild beim start nicht gleich dargestellt, ich habe eine weiße Lücke, kann ich dieses irgendwie umgehen?

http://friseursalon.bplaced.net/sl.html

[Carmen]

Hallo,

zu meiner ersten Frage vor vorhin, habe ich noch eine weitere Frage und zwar, warum funktioniert ":nth-child(3n)" bei mir nicht?

http://friseursalon.bplaced.net/sl.html unter dem Punkt "Salon" wird das erste angesprochen, ich benötige aber jeweils das dritte.

[Gunnar Bittersmann]

@@Carmen:

nuqneH

zu meiner ersten Frage vor vorhin, habe ich noch eine weitere Frage und zwar, warum funktioniert ":nth-child(3n)" bei mir nicht?

http://friseursalon.bplaced.net/sl.html unter dem Punkt "Salon" wird das erste angesprochen, ich benötige aber jeweils das dritte.

Du hast dich verzählt. Es _wird_ das dritte, sechste, … Kind angesprochen. _Kind_, nicht div.

Du möchtest deine gleichartigen Elemente gruppieren (eine Liste bietet sich an; ich glaube, das sagte ich schon) und kannst dann :nth-child verwenden.

Oder du möchtest :nth-of-type verwenden, was bei einem solche generischen Element wie div aber auch nicht gerade robust ist.

Qapla'

[Carmen]

Hallo,

Du hast dich verzählt. Es _wird_ das dritte, sechste, … Kind angesprochen. _Kind_, nicht div.

Verstehe ich nicht ganz, wie du das meinst. Ich spreche die Klasse "personalImage" an und möchte von diesen jeweils das dritte haben, wo bzw. wie habe ich mich dann verzählt?

Du möchtest deine gleichartigen Elemente gruppieren (eine Liste bietet sich an; ich glaube, das sagte ich schon) und kannst dann :nth-child verwenden.

Wie kann ich hier eine Liste nehmen? Mit Liste meinst du <ul><li>?

  
        <div class="personalImage" style="background-image: url(img/salon/01.jpg)">  
          <p class="personalName">Test Name 1</p>  
        </div>  
        <div class="personalImage" style="background-image: url(img/salon/02.jpg)">  
          <p class="personalName">Test Name 2</p>  
        </div>  
        <div class="personalImage" style="background-image: url(img/salon/03.jpg)">  
          <p class="personalName">Test Name 3</p>  
        </div>  
        <div class="personalImage" style="background-image: url(img/salon/03.jpg)">  
          <p class="personalName">Test Name 4</p>  
        </div>  
        <div class="personalImage" style="background-image: url(img/salon/03.jpg)">  
          <p class="personalName">Test Name 5</p>  
        </div>  
        <div class="personalImage" style="background-image: url(img/salon/03.jpg)">  
          <p class="personalName">Test Name 6</p>  
        </div>  

[Gunnar Bittersmann]

@@Carmen:

nuqneH

Du hast dich verzählt. Es _wird_ das dritte, sechste, … Kind angesprochen. _Kind_, nicht div.

Verstehe ich nicht ganz, wie du das meinst. Ich spreche die Klasse "personalImage" an und möchte von diesen jeweils das dritte haben, wo bzw. wie habe ich mich dann verzählt?

Du hast :nth-child() falsch verstanden.

.personalImage:nth-child(3n) selektiert eben nicht das dritte, sechste, … Element der Klasse "personalImage"; sondern die Elemente der Klasse "personalImage", die drittes, sechstes, … Kind ihres Elternelements sind.

Das erstes Element der Klasse "personalImage" ist das dritte Kind seines Elternelements, deshalb wird dieses selektiert.

Wie kann ich hier eine Liste nehmen? Mit Liste meinst du <ul><li>?

Ja.

Qapla'

[Gunnar Bittersmann]

@@Gunnar Bittersmann:

nuqneH

Zum Rumprobieren: Lea Verous CSS3 structural pseudo-class selector tester.

Qapla'

[Carmen]

Hallo,

Zum Rumprobieren: Lea Verous CSS3 structural pseudo-class selector tester.

Ok, ich habe es so hinbekommen:

  
.personalImage:nth-child(3n+5) {  
	margin: 2em 0em 1.875em 0;  
}  

Ich verstehe es zwar noch immer nicht, wie gezählt wird, aber ok. Mit der Liste wie du es mir geschrieben hast, verstehe ich leider ebenfalls nicht. Aber es geht ja auch so.

[Gunnar Bittersmann]

@@Carmen:

nuqneH

Ich verstehe es zwar noch immer nicht, wie gezählt wird, aber ok.

Was gibt es an „Das erstes Element der Klasse "personalImage" ist das dritte Kind seines Elternelements“ nicht zu erstehen?

Mit dem Entwicklerwerkzeug dein DOM angeschaut:

▼ <section id="salon"
  ▼ <div class="content">
    ► <h2></h2>
    ► <p class="teaser"></p>
    ► <div class="personalImage" style="background-image: url(http://placehold.it/220x220)"></div>
    ► <div class="personalImage" style="background-image: url(http://placehold.it/220x220)"></div>

Welches ist das Elternelement der Elemente der Klasse "personalImage"?
Welches ist dessen erstes Kindelement?
Welches ist dessen zweites Kindelement?

Das Problem umgehst du, wenn du – wie gesagt – die Elemente der Klasse "personalImage" gruppierst:

▼ <section id="salon"
  ▼ <div class="content">
    ► <h2></h2>
    ► <p class="teaser"></p>
    ▼ <div>
      ► <div class="personalImage" style="background-image: url(http://placehold.it/220x220)"></div>
      ► <div class="personalImage" style="background-image: url(http://placehold.it/220x220)"></div>

Mit der Liste wie du es mir geschrieben hast, verstehe ich leider ebenfalls nicht.

Und dann kannst du statt div auch sinnvoll ul/li verwenden:

▼ <section id="salon"
  ▼ <div class="content">
    ► <h2></h2>
    ► <p class="teaser"></p>
    ▼ <ul>
      ► <li class="personalImage" style="background-image: url(http://placehold.it/220x220)"></li>
      ► <li class="personalImage" style="background-image: url(http://placehold.it/220x220)"></li>

Aber es geht ja auch so.

„Geht“ hat mit „gut“ nur die Ränder gemeinsam, das essentielle Innere ist grundverschieden.

<div class="content"> ist übrigens auch überflüssig. Mit den section-Elementen darum hast du bereits einen Container.

Qapla'