Sturmverliebt: Wie wird so etwas umgesetzt?

0 78

Wie wird so etwas umgesetzt?

Sturmverliebt
  • html
  1. 0
    Matthias Scharwies
    1. 0
      Sturmverliebt
      1. 0
        MrMurphy
        1. 0
          ChrisB
          1. 0
            MrMurphy
        2. 0
          Sturmverliebt
          1. 0
            MrMurphy
            1. 0
              Sturmverliebt
        3. 0
          Matthias Scharwies
          1. 0
            MrMurphy
            1. 0
              Sturmverliebt
              1. 0
                MrMurphy
                1. 0
                  Sturmverliebt
                  1. 0
                    M.
                    1. 0
                      Sturmverliebt
                      1. 0
                        M.
                        1. 0
                          Gunnar Bittersmann
                          1. 0
                            M.
                            1. 0
                              Gunnar Bittersmann
                              1. 0
                                M.
                                1. 0
                                  Sturmverliebt
                                  1. 0
                                    M.
                                    1. 0
                                      Sturmverliebt
                                      1. 0
                                        M.
                                        1. 0
                                          Sturmverliebt
                                          1. 0
                                            M.
                                            1. 0
                                              Gunnar Bittersmann
                                              1. 0

                                                Eine Frage zu :nth-child(3n)

                                                Sturmverliebt
                                                1. 0
                                                  Gunnar Bittersmann
                                                  1. 0
                                                    Sturmverliebt
                                                    1. 0
                                                      Gunnar Bittersmann
                                                      1. 0
                                                        Sturmverliebt
                                                        1. 0
                                                          Gunnar Bittersmann
                                                          1. 0
                                                            Sturmverliebt
                                              2. 0
                                                M.
                                                1. 0
                                                  Gunnar Bittersmann
                                                  1. 0
                                                    M.
                                                    1. 0
                                                      Gunnar Bittersmann
                                                      1. 0
                                                        M.
                                                        1. 1
                                                          Gunnar Bittersmann
                                                          1. 0
                                                            M.
                                                            1. 0
                                                              Gunnar Bittersmann
                                        2. 0
                                          Gunnar Bittersmann
                                          1. 0
                                            M.
                                            1. 0
                                              Gunnar Bittersmann
                                              1. 0
                                                M.
                                                1. 0
                                                  Gunnar Bittersmann
                                    2. 0
                                      Gunnar Bittersmann
                                      1. 0
                                        M.
                                        1. 0
                                          Gunnar Bittersmann
                                          1. 0
                                            M.
                                  2. 0
                                    Gunnar Bittersmann
                      2. 0
                        Gunnar Bittersmann
                        1. 0
                          Sturmverliebt
                          1. 0
                            Gunnar Bittersmann
                            1. 0
                              Sturmverliebt
                              1. 0
                                Gunnar Bittersmann
                  2. 0
                    Gunnar Bittersmann
  2. 0

    Frage zu figure

    Sturmverliebt
    • css
    1. 0
      Gunnar Bittersmann
      1. 0
        Sturmverliebt
  3. 0

    float aufheben

    Sturmverliebt
    1. 0
      Gunnar Bittersmann
      1. 0
        Gunnar Bittersmann
  4. 0

    Frage zu einer Team-Seite

    Sturmverliebt
    1. 0
      MrMurphy
      1. 0
        Sturmverliebt
        1. 0
          MrMurphy
          1. 0
            Sturmverliebt
            1. 0
              MrMurphy
              1. 0
                Sturmverliebt
                1. 0
                  MrMurphy
    2. 0

      bplaced.net - Benutzung

      MrMurphy
  5. 0

    Umschalten auf Knopfdruck

    Sturmverliebt
    1. 0
      MrMurphy
      1. 0
        Sturmverliebt
        1. 0
          MrMurphy
SELF-Forum

Wie wird so etwas umgesetzt?

Sturmverliebt
– Informationen zu den Bewertungsregeln

Moin,

hab mal wieder ein kleine Frage, mir gefällt die Bilder Animation sehr gut (wenn man mit der Maus über ein Bild fährt)

http://tdaboulder.com/leadership

Wie könnte ich so etwas umsetzten?

Beitrag melden
–
Informationen zu den Bewertungsregeln

  1. Wie wird so etwas umgesetzt?

    Matthias Scharwies
    – Informationen zu den Bewertungsregeln

    Moin,

    hab mal wieder ein kleine Frage, mir gefällt die Bilder Animation sehr gut (wenn man mit der Maus über ein Bild fährt)

    http://tdaboulder.com/leadership

    Wie könnte ich so etwas umsetzten?

      
<li class=" " style="display: block;">  
    <div class="wrapper" style="height: 150px; display: block;"></div>  
    <div class="content" style="opacity: 1; display: block;"></div>  
</li>

    hier wird mit inline-Styles gearbeitet, -> nicht so schön!

    Du könntest das HTML so machen:

      
<figure>  
   <img ...>  
   <figcaption> .... </figcaption>  
</figure>

    und dann das css so:

      
figure {height:200px;}  
img {height:150px;}  
figcaption {height:50px;}  
  
figure:hover img {height:200px;}  
figure:hover figcaption {height:0;}

    Alternativ arbeitest Du wie im Beispiel mit opacity
    Noch transition einfügen für einen sanften Übergang.

    LG Matthias

    Beitrag melden
    –
    Informationen zu den Bewertungsregeln

    1. Wie wird so etwas umgesetzt?

      Sturmverliebt
      – Informationen zu den Bewertungsregeln

      Hallo Matthias,

      Du könntest das HTML so machen:

      <figure>
         <img ...>
         <figcaption> .... </figcaption>
      </figure>

      
>   
> und dann das css so:  
> ~~~css
  

> figure {height:200px;}  
> img {height:150px;}  
> figcaption {height:50px;}  
>   
> figure:hover img {height:200px;}  
> figure:hover figcaption {height:0;}  
>

      hab ich mal getestet. Mein Code sieht so aus

        
<body>  
  
<h1>Bilder Seite</h1>  
  
<figure>  
   <img src="Thomas_Website.jpg" alt="Test Bild">  
<figcaption>Sturmverliebt<br>Ich bin ein Test</figcaption>  
</figure>  
  
  
</body>  
</html>  


        
<style>  
figure {height:200px;}  
img {height:150px;}  
figcaption {height:50px;}  
  
figure:hover img {height:200px;}  
figure:hover figcaption {height:0;}  
</style>

      Die Ausgabe sieht dann so aus

      http://www.bilder-upload.eu/upload/ddb0ee-1408043012.png

      Wenn ich mit der Maus drüber fahre wird das Bild nur etwas breiter und der Text bleibt stehen, das Bild geht nicht über den Text.

      Beitrag melden
      –
      Informationen zu den Bewertungsregeln

      1. Wie wird so etwas umgesetzt?

        MrMurphy
        – Informationen zu den Bewertungsregeln

        Hallo,

        ohne Link zur Seite können wir dir kaum konkret helfen. Und aus deinen Quellcodeschnipseln eine Datei zusammenzubasteln werden sich auch die wenigsten antuen.

        Da mich das Thema auch interessiert und ich Transtions noch nicht benutzt habe, habe ich mal eine Beispieldatei erstellt.

        Allerdings funktioniert die Transition nur in ein Richtung. Vielleicht hat ja jemand einen Tip, was ich ändern muss, damit die Transition in beide Richtungen funktioniert.

        http://foreninfo.bplaced.net/seiten_fremdprobleme/2014_08_14_sturmverliebt_02_bilder_transition.html

        Gruss

        MrMurphy

        Beitrag melden
        –
        Informationen zu den Bewertungsregeln

        1. Wie wird so etwas umgesetzt?

          ChrisB
          – Informationen zu den Bewertungsregeln

          Hi,

          Allerdings funktioniert die Transition nur in ein Richtung. Vielleicht hat ja jemand einen Tip, was ich ändern muss, damit die Transition in beide Richtungen funktioniert.

          Du musst transition für beide „Zustände“ einer Eigenschaft angeben, wenn du willst dass die Änderung in beide „Richtungen“ als transition ausgeführt wird.

          .figure>div:hover { transition:all 2s; }

          Und das overflow:visible muss raus, das macht dir sonst nämlich den Effekt kaputt.

          Btw., dein Template solltest du mal überarbeiten – derzeit werden da verschiedene Ressourcen, wie pfad/name.js und pfad/name.css, doppelt eingebunden (mit jeweils unterschiedlichen Kommentaren markiert als „Basisangaben“ und „seitenspezifische Angaben“ – aber zwei mal die selbe Ressource wird wohl nicht zwei unterschiedliche Versionen liefern, nehme ich an).

          MfG ChrisB

          --
          Autocomplete has spoiled me to a point where it happens every so often that I encounter a CAPTCHA, and I just type in the first character … and then wait for the rest of the code to be automatically suggested :/
          Beitrag melden
          –
          Informationen zu den Bewertungsregeln

          1. Wie wird so etwas umgesetzt?

            MrMurphy
            – Informationen zu den Bewertungsregeln

            Danke

            Und das overflow:visible muss raus, das macht dir sonst nämlich den Effekt kaputt.

            Das War's. Irgendwie war ich auf dem Trichter, das das "hidden" überschrieben werden müsse.

            http://foreninfo.bplaced.net/seiten_fremdprobleme/2014_08_14_sturmverliebt_03_bilder_transition.html

            Du musst transition für beide „Zustände“ einer Eigenschaft angeben, wenn du willst dass die Änderung in beide „Richtungen“ als transition ausgeführt wird.

            Da ist meine Lösung richtig. Wenn transition beim Ursprungszustand eingegeben wird gilt es für beide Zustände. Wenn transition nur im geänderten Zustand (z. B. beim :hover) wird es nur beim Hin aktiv, das Zurück geschieht hingegen ruckartig.

            Wenn beim Transition bestimmte Zustände bevorzugt wirksam werden sollen, können die wie bei mir "ausgelagert" werden. Dann brauchen andere Elemente, für die die gleichen Werte gelten sollen, dort nur noch hinzugefügt werden. Einzelne Änderungen (zum Beispiel der Ablauf) können dann bei den Elementen einzeln geändert werden.

            Zudem sind in längeren CSS-Dateien die Einstellungen viel schneller wiederzufinden. Und zentrale Änderungen müssen nur an einer Stelle durchgeführt werden. Deshalb mein Ansatz.

            Btw., dein Template solltest du mal überarbeiten...

            Das hast du falsch verstanden. Das ist mein Grundlagen-Layout. Deshalb gibt es in der Datei viele Platzhalter und Vorlagen. So ist die Wahrscheinlichkeit etwas zu vergessen viel geringer. Ich spare mir Tiparbeit, da überflüssige Angaben nur gelöscht werden müssen. Ansonsten muss ich ja alle Angaben neu Eintippen. Und viele Angaben, die in ähnlicher Form auftreten, brauche ich nur zu kopieren und zu ändern.

            Und sachlich ist das auch in Ordnung, der W3C-Validator gibt keine Fehler aus.

            Ich könnte die "überflüssigen" Angaben zwar löschen die paar Mehrfachangaben im CSS zusammenfassen. Aber warum? Die User, die die Datei öffnen, merken genau Null Unterschied. Das ist also bei 99,9% aller Seiten reine Theorie.

            Wenn eine Homepage täglich 20.000 oder mehr Aufrufe erreicht werden solche Anpassungen natürlich sinnvoll. wenn der Quelltext wie bei mir übersichtlich und strukturiert aufgebaut ist, sind solche Änderungen aber kein Problem.

            Gruss

            MrMurphy

            Beitrag melden
            –
            Informationen zu den Bewertungsregeln

        2. Wie wird so etwas umgesetzt?

          Sturmverliebt
          – Informationen zu den Bewertungsregeln

          Guten Morgen,

          Da mich das Thema auch interessiert und ich Transtions noch nicht benutzt habe, habe ich mal eine Beispieldatei erstellt.

          vielen Dank für dein Beispiel. Ich denke ich weiß nun warum es bei mir nicht geklappt hat. Du hast innerhalb von <figure> noch ein DIV gelegt. Ist das denn wirklich nötigt? Es wird ja immer gesagt schau dass du so wenig wie möglich an unnötigen Code schreibst.

          Beitrag melden
          –
          Informationen zu den Bewertungsregeln

          1. Wie wird so etwas umgesetzt?

            MrMurphy
            – Informationen zu den Bewertungsregeln

            Hallo

            Ist das denn wirklich nötigt?

            Wenn die Schrift wie in meinem Beispiel stehen bleiben soll - ja.

            Es wird ja immer gesagt schau dass du so wenig wie möglich an unnötigen Code schreibst.

            Nun ja, ohne Code geht gar nichts.

            Zu dem schreibst du ja selbst

            unnötigen

            Das Problem sind die Seiten, bei denen sich technisch nicht notwendige Elemente (Stichwort div-Wüste) im Quellcode befinden. Und zwar nicht nur zwei, drei oder vier, sondern 50, 100, 150.

            Bei dem Thema wird leider auch viel theoretisiert. Da werden teilweise aggressive Diskussionen geführt, obwohl die Auswirkungen in der Praxis für 99,9% aller Webseiten gar keine Auswirkungen haben.

            Und die Leute, die die 0,01% der betroffenen Seiten betreuen sind Profis, die in Foren wie diesen wohl kaum um Rat fragen werden.

            Gruss

            MrMurphy

            Beitrag melden
            –
            Informationen zu den Bewertungsregeln

            1. Wie wird so etwas umgesetzt?

              Sturmverliebt
              – Informationen zu den Bewertungsregeln

              Hallo MrMurphy,

              Das Problem sind die Seiten, bei denen sich technisch nicht notwendige Elemente (Stichwort div-Wüste) im Quellcode befinden. Und zwar nicht nur zwei, drei oder vier, sondern 50, 100, 150.

              Bei dem Thema wird leider auch viel theoretisiert. Da werden teilweise aggressive Diskussionen geführt, obwohl die Auswirkungen in der Praxis für 99,9% aller Webseiten gar keine Auswirkungen haben.

              Danke für deine Erklärung und Hilfe. Also spielt ein Div mehr oder weniger in Wirklichkeit keine Rolle :) dann bau ich auf dein Beispiel auf.

              Beitrag melden
              –
              Informationen zu den Bewertungsregeln

        3. Wie wird so etwas umgesetzt?

          Matthias Scharwies
          – Informationen zu den Bewertungsregeln

          Allerdings funktioniert die Transition nur in ein Richtung. Vielleicht hat ja jemand einen Tip, was ich ändern muss, damit die Transition in beide Richtungen funktioniert.

          Wie Chris schon gesagt hat, leg transition nicht auf das :hover.

          hier Dein Beispiel ohne div:
          http://www.jsr-hersbruck.de/site/subdomains/test/2014_08_14_sturmverliebt_02_bilder_transition.html

            
figure {  
  position: relative;  
  width: 400px;  
  height: 320px;  
  border: 1px solid gainsboro;  
  overflow:hidden;  
}  
	  
figure img {  
}  
  
figcaption {  
  display: block;  
  position: absolute;  
  background:white;  
  width: 400px;  
  height:50px;  
  bottom: 0px;  
  text-align: center;  
  z-index: 5;  
  transition: all 2s;  
}  
  
figure:hover figcaption{  
  bottom:-50px;  
}

          Noch schöner wird's mit opacity, die von 1 auf 0 geht.
          LG Matthias

          Beitrag melden
          –
          Informationen zu den Bewertungsregeln

          1. Wie wird so etwas umgesetzt?

            MrMurphy
            – Informationen zu den Bewertungsregeln

            Hallo,

            hier Dein Beispiel ohne div:

            Mir ging es darum das gezeigte Beispiel mit CSS so genau wie möglich nachzubilden, um zu zeigen, das JavaScript bei solchen Effekten nicht mehr notwendig ist. Die Schrift soll also stehenbleiben.

            Noch schöner wird's mit opacity, die von 1 auf 0 geht.

            Mit der Ansicht, das Schrifteffekte zu Bildern mit opacity oder wenn die Schrift ins Bild gleitet, edler aussehen, rennst du bei mir offene Türen ein.

            Gruss

            MrMurphy

            Beitrag melden
            –
            Informationen zu den Bewertungsregeln

            1. Wie wird so etwas umgesetzt?

              Sturmverliebt
              – Informationen zu den Bewertungsregeln

              Hallo,

              Mir ging es darum das gezeigte Beispiel mit CSS so genau wie möglich nachzubilden, um zu zeigen, das JavaScript bei solchen Effekten nicht mehr notwendig ist. Die Schrift soll also stehenbleiben.

              Danke für deine Hilfe. Ich habe noch eine Frage zu deinem HTML Code

                
 <figure>  
         <div>  
            <img src="design/img/team/Thomas_Website.jpg" alt="Demo Bild" />  
         </div>  
         <figcaption>Name der Person</figcaption>  
      </figure>

              Wenn ich in <figcaption> zwei Zeilen benötige wie im Beispiel dann mache ich das einfach mit einem <br> oder kommt innerhalb von <figcaption> noch ein DIV oder Span oder sogar noch ein <figcaption>?

              Beitrag melden
              –
              Informationen zu den Bewertungsregeln

              1. Wie wird so etwas umgesetzt?

                MrMurphy
                – Informationen zu den Bewertungsregeln

                Hallo

                Wenn ich in <figcaption> zwei Zeilen benötige wie im Beispiel dann mache ich das einfach mit einem <br>

                Das kannst du machen, ist aber wenig sinnvoll. Zudem musst du dann auch die Größenangaben anpassen. Einfach mal selbst ausprobieren.

                oder kommt innerhalb von <figcaption> noch ein DIV oder Span oder sogar noch ein <figcaption>?

                Nein, das wäre technisch falsch und würde zum Beispiel vom Validator als Fehler angekreidet werden.

                Zur Erläuterung:

                Das figcaption-Element ist schlicht dazu gedacht, einem oder mehreren Bildern innerhalb eines figure-Elements eine einfache Beschreibung mit auf den Weg zu geben. Das br-Element ist zwar technisch zulässig, geht aber bereits in die Richtung, dem figcaption-Element in die falsche Richtung zu nutzen. Um gar nicht erst auf einen falschen Weg zu geraten sollte man in das figcaption-Element nur kurzen, reinen Text schreiben.

                Um einen längern, in sich aufgeteilten oder formatiertent Text einem Bild zuzuordnen ist das dl-Element geeignet.

                Oder du schreibst die Information ganz einfach in einem Absatz unter das figure-Element. Dann ist für die User allein durch die Nähe schon der Zusammenhang gegeben.

                Gruss

                MrMurphy

                Beitrag melden
                –
                Informationen zu den Bewertungsregeln

                1. Wie wird so etwas umgesetzt?

                  Sturmverliebt
                  – Informationen zu den Bewertungsregeln

                  Hallo,

                  Das kannst du machen, ist aber wenig sinnvoll. Zudem musst du dann auch die Größenangaben anpassen. Einfach mal selbst ausprobieren.

                  oder kommt innerhalb von <figcaption> noch ein DIV oder Span oder sogar noch ein <figcaption>?

                  Nein, das wäre technisch falsch und würde zum Beispiel vom Validator als Fehler angekreidet werden.

                  Ich hab es so getestet

                    
<!doctype html>  
<html>  
<head>  
<meta charset="utf-8">  
<title>Projekt Seite</title>  
<link href="css/index.css" rel="stylesheet" type="text/css">  
</head>  
  
<body>  
  
 <figure>  
         <div>  
            <img src="img/team/Thomas_Website.jpg" alt="Demo Bild" />  
         </div>  
         <figcaption>  
            <span>Name der Person</span>  
            <span>Was macht diese Person in der Firma?</span>  
         </figcaption>  
 </figure>  
  
</body>  
</html>

                  Laut dem validator.w3.org sollte dieses auch richtig sein (This document was successfully checked as HTML5!), bekomme aber 2 warning(s) die ich leider nicht verstehe:

                  • Info Using Direct Input mode: UTF-8 character encoding assumed
                  • Using experimental feature: HTML5 Conformance Checker.
                  Beitrag melden
                  –
                  Informationen zu den Bewertungsregeln

                  1. Wie wird so etwas umgesetzt?

                    M.
                    – Informationen zu den Bewertungsregeln

                    Mahlzeit,

                    <div>
                                <img src="img/team/Thomas_Website.jpg" alt="Demo Bild" />
                             </div>

                      
Wieso das div?  
  

> ~~~html
  

>          <figcaption>  
>             <span>Name der Person</span>  
>             <span>Was macht diese Person in der Firma?</span>  
>          </figcaption>  
>

                    Wozu das span?

                    --
                    42
                    Beitrag melden
                    –
                    Informationen zu den Bewertungsregeln

                    1. Wie wird so etwas umgesetzt?

                      Sturmverliebt
                      – Informationen zu den Bewertungsregeln

                      Mahlzeit,

                      <div>
                                  <img src="img/team/Thomas_Website.jpg" alt="Demo Bild" />
                               </div>

                      
>   
> Wieso das div?  
  
Von [dieser](http://tdaboulder.com/leadership) Seite gehe ich aus. Um das Bild über den Text zu legen benötige ich wohl das DIV  
  

> > ~~~html
  

> >          <figcaption>  
> >             <span>Name der Person</span>  
> >             <span>Was macht diese Person in der Firma?</span>  
> >          </figcaption>  
> >

                      Wozu das span?

                      Wie bekomme ich sonst zwei Zeilen Text in das <figcaption>? Außerdem soll der erste Text Fett sein und der darunter etwas kleiner, mein neuer Code sieht so aus

                        
 <figure>  
         <div>  
            <img src="upload/vorschau/1.jpg" alt="Bild 1" />  
         </div>  
         <figcaption>  
            <span class="titel">Name der Person</span>  
            <span class="bezeichnug">Was macht diese Person?</span>  
         </figcaption>  
 </figure>

                      Und hier mein CSS Code

                        
div {  
         transition: all 1s ease;  
      }  
      figure {  
         position: relative;  
         width: 310px;  
         height: 200px;  
      }  
      figure>div {  
         position: relative;  
         width: 310px;  
         height: 150px;  
         overflow: hidden;  
         z-index: 10;  
      }  
      figure>div:hover {  
         width: 310px;  
         height: 320px;  
         z-index: 10;  
      }  
      figure>div img {  
         z-index: 10;  
      }  
      figcaption {  
         display: block;  
         position: absolute;  
         width: 400px;  
         bottom: 5px;  
         z-index: 5;  
      }  
  
      figcaption span {  
         display: block;  
      }  
	  
	  .titel {  
		  font-weight:bold;  
		  margin-bottom:2px;  
	  }  
	  
	  .bezeichnug {  
		  font-size:14px;  
		  color:#333;  
	  }
                      Beitrag melden
                      –
                      Informationen zu den Bewertungsregeln

                      1. Wie wird so etwas umgesetzt?

                        M.
                        – Informationen zu den Bewertungsregeln

                        Mahlzeit,

                        Von dieser Seite gehe ich aus. Um das Bild über den Text zu legen benötige ich wohl das DIV

                        Also vermutest du es nur? Ich behaupte, was du mit dem div machst, kannst du mit dem img auch machen.

                        Wie bekomme ich sonst zwei Zeilen Text in das <figcaption>? Außerdem soll der erste Text Fett sein und der darunter etwas kleiner, mein neuer Code sieht so aus

                        Und wieso hat die erste Zeile dann kein hX-Element (also h1 - h6) um eine Überschrift auszuzeichnen?

                        --
                        42
                        Beitrag melden
                        –
                        Informationen zu den Bewertungsregeln

                        1. Wie wird so etwas umgesetzt?

                          Gunnar Bittersmann Homepage des Autors
                          – Informationen zu den Bewertungsregeln

                          @@M.:

                          nuqneH

                          Also vermutest du es nur? Ich behaupte, was du mit dem div machst, kannst du mit dem img auch machen.

                          Ich behaupte, wenn du die Höhe des Bildes änderst, skalierst bzw. verzerrst du es.

                          Und wieso hat die erste Zeile dann kein hX-Element (also h1 - h6) um eine Überschrift auszuzeichnen?

                          Weil es keine Überschrift ist.

                          Qapla'

                          --
                          „Talente finden Lösungen, Genies entdecken Probleme.“ (Hans Krailsheimer)
                          Beitrag melden
                          –
                          Informationen zu den Bewertungsregeln

                          1. Wie wird so etwas umgesetzt?

                            M.
                            – Informationen zu den Bewertungsregeln

                            Mahlzeit,

                            Weil es keine Überschrift ist.

                            Also ein Text bei dem die erste Zeile fett ist, ist diese Zeile für mich eine Überschrift.
                            Zumindest sehe ich sonst keinen Grund, die erste Zeile hervorzuheben.

                            Und ja, darüber kann man geteilter Meinung sein, aber ein span ist hier IMO falsch.

                            --
                            42
                            Beitrag melden
                            –
                            Informationen zu den Bewertungsregeln

                            1. Wie wird so etwas umgesetzt?

                              Gunnar Bittersmann Homepage des Autors
                              – Informationen zu den Bewertungsregeln

                              @@M.:

                              nuqneH

                              Also ein Text bei dem die erste Zeile fett ist, ist diese Zeile für mich eine Überschrift.

                              Ob etwas eine Überschrift ist oder nicht, bestimmt nicht die Gestaltung, sondern die Bedeutung des fraglichen Textfragments in seinem Kontext.

                              Zumindest sehe ich sonst keinen Grund, die erste Zeile hervorzuheben.

                              Ob der Name gegenüber der Rolle hervorgehoben wird, liegt im Auge des Designers. Wenn der Designer beides gleich typografiert, wäre es auf einmal keine Überschrift mehr?

                              Und ja, darüber kann man geteilter Meinung sein, aber ein span ist hier IMO falsch.

                              Da ein span keine Bedeutung hat, kann es überflüssig, aber nicht falsch sein. ;-b

                              Wovon sollte der Name der Person denn die Überschrift sein? Von deren Rolle/Titel? Nö. Wenn’s eine Überschrift wäre, dann müsste sie es eine für den ganzen Block zu der Person sein, also auch von dem Bild. Innerhalb von figcaption den Namen als Überschrift anzusehen macht IMHO keinen Sinn.

                              Da es in HTML keine Elemente zur Auszeichnung von Personennamen gibt, ist span mit Klasse eine gute Wahl.

                              Statt Klassen könnte man mit RDFa Lite (bzw. Microdata) auch Schema.org- oder FOAF-Vokabular einsetzen. Im Styelsheet dann Attributselektoren.

                              Qapla'

                              --
                              „Talente finden Lösungen, Genies entdecken Probleme.“ (Hans Krailsheimer)
                              Beitrag melden
                              –
                              Informationen zu den Bewertungsregeln

                              1. Wie wird so etwas umgesetzt?

                                M.
                                – Informationen zu den Bewertungsregeln

                                Mahlzeit,

                                ist span mit Klasse eine gute Wahl.

                                Und wozu die Klasse?

                                --
                                42
                                Beitrag melden
                                –
                                Informationen zu den Bewertungsregeln

                                1. Wie wird so etwas umgesetzt?

                                  Sturmverliebt
                                  – Informationen zu den Bewertungsregeln

                                  Hallo,

                                  Und wozu die Klasse?

                                  um meine Schrift zu ändern? Wie ich bereits geschrieben habe, der Titel ist etwas größer und die Zeile darunter etwas kleiner

                                    
.titel {  
    font-weight:bold;  
    font-size:0.85em;  
    margin-bottom:2px;  
}  
  
.bezeichnug {  
    font-size:0.75em;  
    color:#333;  
}

                                  <h1> kann ich hier nicht nehmen da eine H1 ja nur einmal vorkommen darf und ich diese bereits im Kopf meiner Seite verwendet habe.

                                  Beitrag melden
                                  –
                                  Informationen zu den Bewertungsregeln

                                  1. Wie wird so etwas umgesetzt?

                                    M.
                                    – Informationen zu den Bewertungsregeln

                                    Mahlzeit,

                                    um meine Schrift zu ändern? Wie ich bereits geschrieben habe, der Titel ist etwas größer und die Zeile darunter etwas kleiner

                                    Dachte ich mir. Und genau deshalb ist die Angabe einer Klasse völlig überflüssig und bläht nur den Code auf.

                                    <h1> kann ich hier nicht nehmen da eine H1 ja nur einmal vorkommen darf und ich diese bereits im Kopf meiner Seite verwendet habe.

                                    Und wieso kannst du h2-h6 nicht nutzen?

                                    --
                                    42
                                    Beitrag melden
                                    –
                                    Informationen zu den Bewertungsregeln

                                    1. Wie wird so etwas umgesetzt?

                                      Sturmverliebt
                                      – Informationen zu den Bewertungsregeln

                                      Hallo,

                                      Dachte ich mir. Und genau deshalb ist die Angabe einer Klasse völlig überflüssig und bläht nur den Code auf.

                                      Könntest du mir dann vielleicht auch verraten wie ich die beiden <span> unterscheiden kann um genau das CSS zu verwenden wie die Klassen derzeit?

                                      Und wieso kannst du h2-h6 nicht nutzen?

                                      Darf eine <h2> öfters auf einer Seite vorkommen? Soweit ich weiß dürfen diese Überschriften nur einmal pro Seite vorkommen. Sollte ich hier falsch liegen kann ich dieses gerne ändern.

                                      Beitrag melden
                                      –
                                      Informationen zu den Bewertungsregeln

                                      1. Wie wird so etwas umgesetzt?

                                        M.
                                        – Informationen zu den Bewertungsregeln

                                        Mahlzeit,

                                        Könntest du mir dann vielleicht auch verraten wie ich die beiden <span> unterscheiden kann um genau das CSS zu verwenden wie die Klassen derzeit?

                                        Gerne :)

                                        Erstes:
                                        span:first-child{} oder span:nth-child(1){}

                                        Zweites:
                                        span:last-child{} oder span:nth-child(2){}

                                        Darf eine <h2> öfters auf einer Seite vorkommen? Soweit ich weiß dürfen diese Überschriften nur einmal pro Seite vorkommen. Sollte ich hier falsch liegen kann ich dieses gerne ändern.

                                        Du liegst hier falsch. Es kann natürlich mehrere Überschriften geben. Es sollte nur sematisch sinnvoll sein. Und vor allem sollten nicht mehrere Überschriften gleicher Ordnung verschachtelt werden.

                                        --
                                        42
                                        Beitrag melden
                                        –
                                        Informationen zu den Bewertungsregeln

                                        1. Wie wird so etwas umgesetzt?

                                          Sturmverliebt
                                          – Informationen zu den Bewertungsregeln

                                          Hallo,

                                          Gerne :)

                                          Erstes:
                                          span:first-child{} oder span:nth-child(1){}

                                          Zweites:
                                          span:last-child{} oder span:nth-child(2){}

                                          Danke für deine Erklärung, hab es nun so umgesetzt

                                            
 <figure>  
     <div>  
     	<img src="team/vorschau/2.jpg" alt="Mitarbeiter 1" />  
     </div>  
     <figcaption>  
        <span>Name der Person</span>  
        <span>Was macht diese Person in der Firma?</span>  
     </figcaption>  
 </figure>  
  


                                            
figure span:nth-child(1){  
    font-weight:bold;  
    font-size:0.85em;  
    margin-bottom:2px;  
}  
  
figure span:nth-child(2){  
    font-size:0.75em;  
    color:#333;  
}

                                          ein Vorteil sehe ich hier jetzt nicht wirklich. Ob ich deine Schreibweise nehme oder meine, im Endeffekt habe ich gleich viel Code.

                                          Beitrag melden
                                          –
                                          Informationen zu den Bewertungsregeln

                                          1. Wie wird so etwas umgesetzt?

                                            M.
                                            – Informationen zu den Bewertungsregeln

                                            Mahlzeit,

                                            ein Vorteil sehe ich hier jetzt nicht wirklich. Ob ich deine Schreibweise nehme oder meine, im Endeffekt habe ich gleich viel Code.

                                            Bei einem Bild hast du recht. Und wenn du 10 Bilder hast, sparst du dir 20x die Klasse, musst aber nur einmal ein paar Zeichen mehr ins CSS schreiben.

                                            --
                                            42
                                            Beitrag melden
                                            –
                                            Informationen zu den Bewertungsregeln

                                            1. Wie wird so etwas umgesetzt?

                                              Gunnar Bittersmann Homepage des Autors
                                              – Informationen zu den Bewertungsregeln

                                              @@M.:

                                              nuqneH

                                              Und wenn du 10 Bilder hast, sparst du dir 20x die Klasse

                                              Wenn man das HTML per Template generiert, hat man das auch für 100 Bilder nur einmal im Quellcode. (Und wenn nicht, ist das per Copy & Paste auch schnell erledigt.)

                                              Bei der Übertragung vom Server zum Client holt die Kompression die wiederkehrenden Token raus.

                                              Beiben dann noch die Attributknoten im DOM. Nun, davon friert der Browser nicht ein.

                                              Was ist dein Punkt?

                                              Qapla'

                                              --
                                              „Talente finden Lösungen, Genies entdecken Probleme.“ (Hans Krailsheimer)
                                              Beitrag melden
                                              –
                                              Informationen zu den Bewertungsregeln

                                              1. Eine Frage zu :nth-child(3n)

                                                Sturmverliebt
                                                – Informationen zu den Bewertungsregeln

                                                Hallo,

                                                hab eine Frage zu :nth-child(3n) damit wollte ich mein drittes <figure> ansprechen, dieses habe ich so umgesetzt

                                                  
figure {  
    position: relative;  
    width: 310px;  
    height: 200px;  
	float:left;  
	margin:0 7px 20px 0  
}  
  
figure:nth-child(3n){  
	margin:0 0px 20px 0  
}

                                                leider zeigt das 0 Wirkung! Geht das an figure gar nicht?

                                                Beitrag melden
                                                –
                                                Informationen zu den Bewertungsregeln

                                                1. Eine Frage zu :nth-child(3n)

                                                  Gunnar Bittersmann Homepage des Autors
                                                  – Informationen zu den Bewertungsregeln

                                                  @@Sturmverliebt:

                                                  nuqneH

                                                  leider zeigt das 0 Wirkung! Geht das an figure gar nicht?

                                                  Doch, geht. Lass mal sehen, was die „0 Wirkung“ bei dir ist!

                                                  Und da haben wir ihn, den sinnvollen Anwendungsfall von :nth-child(). Die spans in figcaption solltest du eher nicht mit :nth-child() stylen.

                                                  Qapla'

                                                  --
                                                  „Talente finden Lösungen, Genies entdecken Probleme.“ (Hans Krailsheimer)
                                                  Beitrag melden
                                                  –
                                                  Informationen zu den Bewertungsregeln

                                                  1. Eine Frage zu :nth-child(3n)

                                                    Sturmverliebt
                                                    – Informationen zu den Bewertungsregeln

                                                    Hallo,

                                                    Doch, geht. Lass mal sehen, was die „0 Wirkung“ bei dir ist!

                                                    Mein HTML sieht so aus

                                                      
 <figure>  
     <div>  
     	<img src="team/vorschau/1.jpg" alt="Mitarbeiter 1" />  
     </div>  
     <figcaption>  
        <span>Name der Person</span>  
        <span>Was macht diese Person in der Firma?</span>  
     </figcaption>  
 </figure>  
  
 <figure>  
     <div>  
     	<img src="team/vorschau/2.jpg" alt="Mitarbeiter 1" />  
     </div>  
     <figcaption>  
        <span>Name der Person</span>  
        <span>Was macht diese Person in der Firma?</span>  
     </figcaption>  
 </figure>  
  
 <figure>  
     <div>  
     	<img src="team/vorschau/3.jpg" alt="Mitarbeiter 1" />  
     </div>  
     <figcaption>  
        <span>Name der Person</span>  
        <span>Was macht diese Person in der Firma?</span>  
     </figcaption>  
 </figure>

                                                    Mein CSS so

                                                      
figure:nth-child(3n){  
    position: relative;  
    width: 310px;  
    height: 200px;  
	float:left;  
	margin:0 0px 20px 0  
}  
  
figure {  
    position: relative;  
    width: 310px;  
    height: 200px;  
	float:left;  
	margin:0 7px 20px 0  
}  
  
figure>div {  
    transition: all 1s ease;  
    position: relative;  
    width: 310px;  
    height: 150px;  
    overflow: hidden;  
    z-index: 10;  
}  
  
figure>div:hover {  
    width: 310px;  
    height: 320px;  
    z-index: 10;  
}  
  
figure>div img {  
    z-index: 10;  
}  
  
figcaption {  
    display: block;  
    position: absolute;  
    width: 400px;  
    bottom: 5px;  
    z-index: 5;  
}  
  
figcaption span {  
    display: block;  
}  
  
figure span:nth-child(1){  
	font-weight:bold;  
    font-size:0.85em;  
    margin-bottom:2px;  
}  
  
figure span:nth-child(2){  
	font-size:0.75em;  
    color:#333;  
}

                                                    Das dritte  <figure> hat weiterhin den Abstand nach rechts.

                                                    Beitrag melden
                                                    –
                                                    Informationen zu den Bewertungsregeln

                                                    1. Eine Frage zu :nth-child(3n)

                                                      Gunnar Bittersmann Homepage des Autors
                                                      – Informationen zu den Bewertungsregeln

                                                      @@Sturmverliebt:

                                                      nuqneH

                                                      Mein HTML sieht so aus

                                                      Und wie sieht das Drumherum aus?

                                                      Und nein, ich hab keine Lust, mir deine Seite nachzubauen. Verlinke sie oder erstelle ein Dabblet o.ä.

                                                      Qapla'

                                                      --
                                                      „Talente finden Lösungen, Genies entdecken Probleme.“ (Hans Krailsheimer)
                                                      Beitrag melden
                                                      –
                                                      Informationen zu den Bewertungsregeln

                                                      1. Eine Frage zu :nth-child(3n)

                                                        Sturmverliebt
                                                        – Informationen zu den Bewertungsregeln

                                                        Hallo,

                                                        Und wie sieht das Drumherum aus?

                                                        Hab es mal hier hochgeladen: http://jsfiddle.net/rf079y1d/

                                                        Beitrag melden
                                                        –
                                                        Informationen zu den Bewertungsregeln

                                                        1. Eine Frage zu :nth-child(3n)

                                                          Gunnar Bittersmann Homepage des Autors
                                                          – Informationen zu den Bewertungsregeln

                                                          @@Sturmverliebt:

                                                          nuqneH

                                                          Hab es mal hier hochgeladen: http://jsfiddle.net/rf079y1d/

                                                          Ich vermute, es sollen drei nebeneinander, nicht zwei?

                                                          Am fünften figure-Element kannst du sehen, dass :nth-child(3n) wirkt. Warum beim fünften? Weil’s das sechste Kindelement ist. Unterscheide zwischen :nth-child() und :nth-of-type().

                                                          Es ist auch nicht gut, die für figure geltenden Angaben für figure:nth-child(3n) zu wiederholen. Ebenso die für figure>div geltenden für figure:hover>div. Weg damit! Nur das angeben, was abweicht.

                                                          Qapla'

                                                          --
                                                          „Talente finden Lösungen, Genies entdecken Probleme.“ (Hans Krailsheimer)
                                                          Beitrag melden
                                                          –
                                                          Informationen zu den Bewertungsregeln

                                                          1. Eine Frage zu :nth-child(3n)

                                                            Sturmverliebt
                                                            – Informationen zu den Bewertungsregeln

                                                            Hallo,

                                                            Es ist auch nicht gut, die für figure geltenden Angaben für figure:nth-child(3n) zu wiederholen. Ebenso die für figure>div geltenden für figure:hover>div. Weg damit! Nur das angeben, was abweicht.

                                                            OK, ich hab etwas aufgeräumt

                                                              
figure:nth-of-type(3n){  
	margin:0 0px 20px 0  
}  
  
figure {  
    position: relative;  
    width: 300px;  
    height: 200px;  
	float:left;  
	margin:0 17px 20px 0  
}  
  
figure>div {  
    transition: all 1s ease;  
    position: relative;  
    height: 150px;  
    overflow: hidden;  
    z-index: 10;  
}  
  
figure>div:hover {  
    height: 320px;  
}
                                                            Beitrag melden
                                                            –
                                                            Informationen zu den Bewertungsregeln

                                              2. Wie wird so etwas umgesetzt?

                                                M.
                                                – Informationen zu den Bewertungsregeln

                                                Mahlzeit,

                                                Wenn man das HTML per Template generiert, hat man das auch für 100 Bilder nur einmal im Quellcode. (Und wenn nicht, ist das per Copy & Paste auch schnell erledigt.)

                                                Klar. Und wenn der Mond nicht 385.000 km von der Erde entfernt wäre, könnte man nen Kirschkern rüberspucken.

                                                Bei der Übertragung vom Server zum Client holt die Kompression die wiederkehrenden Token raus.

                                                Stimmt, hab ich vergessen. Kompression ist ja mittlerweile per Gesetz vorgeschrieben, da wäre es ja praktisch Blasphemie, auf die Codegrösse zu achten. Was hab ich mir nur gedacht.

                                                Beiben dann noch die Attributknoten im DOM. Nun, davon friert der Browser nicht ein.

                                                Smartwatch, 300MHz, 512MB RAM. Klar. Da kannste mit Ressourcen nur so um dich werfen.

                                                Was ist dein Punkt?

                                                Das du aktuell ein Klugscheisser bist, der sich lächerlich macht. Keine Ahnung, wieso und seit wann, es wird aber in letzter Zeit schlimmer. Aber langsam wirds extrem.

                                                --
                                                42
                                                Beitrag melden
                                                –
                                                Informationen zu den Bewertungsregeln

                                                1. Wie wird so etwas umgesetzt?

                                                  Gunnar Bittersmann Homepage des Autors
                                                  – Informationen zu den Bewertungsregeln

                                                  @@M.:

                                                  nuqneH

                                                  Stimmt, hab ich vergessen. Kompression ist ja mittlerweile per Gesetz vorgeschrieben
                                                  […]
                                                  Smartwatch, 300MHz, 512MB RAM.

                                                  Ähm, erst willst du das Zeugs nicht gezippt (mod_deflate) übertragen, dann kommst du mit einem Mobilgerät? Du erkennst den Widerspruch?

                                                  Da kannste mit Ressourcen nur so um dich werfen.

                                                  Moment mal. Ich war’s, der hier im Thread das unnütze div um das img eingespart hat. Dafür hab ich was gut. Also kann ich Attribute setzen, zumal sie der Auszeichnung des Inhalts dienen.

                                                  Wenn du Bytes sparen willst, verwende doch b statt span, das ist kürzer. Ja, Polemik kann ich auch.

                                                  Qapla'

                                                  --
                                                  „Talente finden Lösungen, Genies entdecken Probleme.“ (Hans Krailsheimer)
                                                  Beitrag melden
                                                  –
                                                  Informationen zu den Bewertungsregeln

                                                  1. Wie wird so etwas umgesetzt?

                                                    M.
                                                    – Informationen zu den Bewertungsregeln

                                                    Mahlzeit,

                                                    Ähm, erst willst du das Zeugs nicht gezippt (mod_deflate) übertragen, dann kommst du mit einem Mobilgerät? Du erkennst den Widerspruch?

                                                    Du siehst einen Widerspruch in der Existenz von schwachen Endgeräten und Servern die nicht zippen?
                                                    Dann erklär mir mal, wie diese Techniken sich gegenseitig ausschliessen.

                                                    --
                                                    42
                                                    Beitrag melden
                                                    –
                                                    Informationen zu den Bewertungsregeln

                                                    1. Wie wird so etwas umgesetzt?

                                                      Gunnar Bittersmann Homepage des Autors
                                                      – Informationen zu den Bewertungsregeln

                                                      @@M.:

                                                      nuqneH

                                                      Server die nicht zippen?

                                                      Sowas gibt’s noch? Das wäre ein guter Grund, den Hoster zu wechseln.

                                                      Qapla'

                                                      --
                                                      „Talente finden Lösungen, Genies entdecken Probleme.“ (Hans Krailsheimer)
                                                      Beitrag melden
                                                      –
                                                      Informationen zu den Bewertungsregeln

                                                      1. Wie wird so etwas umgesetzt?

                                                        M.
                                                        – Informationen zu den Bewertungsregeln

                                                        Mahlzeit,

                                                        Sowas gibt’s noch? Das wäre ein guter Grund, den Hoster zu wechseln.

                                                        Das wird dem Seitenbesucher echt enorm helfen, diese Erkenntnis. Sind die Scheuklappen angewachsen oder trägst du die freiwillig?
                                                        Die Welt ist nicht so wie du sie gerne hättest, also akzeptiere sie, wie sie ist.

                                                        --
                                                        42
                                                        Beitrag melden
                                                        –
                                                        Informationen zu den Bewertungsregeln

                                                        1. Wie wird so etwas umgesetzt?

                                                          Gunnar Bittersmann Homepage des Autors
                                                          +1 Informationen zu den Bewertungsregeln

                                                          @@M.:

                                                          nuqneH

                                                          Sowas gibt’s noch? Das wäre ein guter Grund, den Hoster zu wechseln.

                                                          Das wird dem Seitenbesucher echt enorm helfen, diese Erkenntnis.

                                                          Jetzt verstehe ich worauf du hinauswillst: Anstatt den Hoster zu wechseln, wenn sein Server nicht zippt, schlägst du dem Seitenbetreiber vor, auf Klassen zu verzichten, die den Quellcode ja so doll aufblähen.

                                                          Die Welt ist nicht so wie du sie gerne hättest, also akzeptiere sie, wie sie ist.

                                                          Ich frag mich, ob wir in derselben Welt leben.

                                                          Qapla'

                                                          --
                                                          „Talente finden Lösungen, Genies entdecken Probleme.“ (Hans Krailsheimer)
                                                          Beitrag melden
                                                          +1
                                                          Informationen zu den Bewertungsregeln

                                                          1. Wie wird so etwas umgesetzt?

                                                            M.
                                                            – Informationen zu den Bewertungsregeln

                                                            Mahlzeit,

                                                            Ich frag mich, ob wir in derselben Welt leben.

                                                            Vermutlich nicht, Qo'noS ist schon recht weit weg von dem Planeten auf dem ich lebe.

                                                            --
                                                            42
                                                            Beitrag melden
                                                            –
                                                            Informationen zu den Bewertungsregeln

                                                            1. Wie wird so etwas umgesetzt?

                                                              Gunnar Bittersmann Homepage des Autors
                                                              – Informationen zu den Bewertungsregeln

                                                              @@M.:

                                                              nuqneH

                                                              Vermutlich nicht, Qo'noS ist schon recht weit weg von dem Planeten auf dem ich lebe.

                                                              Möge sich das Wurmloch wieder öffnen und dich zurückbringen.

                                                              Qapla'

                                                              --
                                                              „Talente finden Lösungen, Genies entdecken Probleme.“ (Hans Krailsheimer)
                                                              Beitrag melden
                                                              –
                                                              Informationen zu den Bewertungsregeln

                                        2. Wie wird so etwas umgesetzt?

                                          Gunnar Bittersmann Homepage des Autors
                                          – Informationen zu den Bewertungsregeln

                                          @@M.:

                                          nuqneH

                                          Könntest du mir dann vielleicht auch verraten wie ich die beiden <span> unterscheiden kann um genau das CSS zu verwenden wie die Klassen derzeit?

                                          Erstes:
                                          span:first-child{} oder span:nth-child(1){}

                                          Zweites:
                                          span:last-child{} oder span:nth-child(2){}

                                          Hatten wir das nicht kürzlich erst, dass das Unsinn ist?

                                          Was, wenn später noch Informationen hinzukommen, bspw. E-Mail-Adresse und Telefonnummer unter der Rolle? Ich glaub nicht, dass eins davon wie der Name typografiert sein sollte.

                                          :nth-child() ist gut geeignet, *gleichartige* Elemente zu stylen, bspw. Zebrastreifen in einer Tabelle. Oder Blöcke mit Bild und Text in einer Bildergalerie oder auf einer Produktübersichtsseite (think :nth-child(4n) { clear: both }).

                                          :nth-child() ist eher nicht dazu geeignet, *verschiedenartige* Elemente zu stylen. Dazu gibt es besseres. Die Verschiedenartigkeit sollte im Markup ausgezeichnet sein, z.B. mittels Klassen.

                                          Qapla'

                                          --
                                          „Talente finden Lösungen, Genies entdecken Probleme.“ (Hans Krailsheimer)
                                          Beitrag melden
                                          –
                                          Informationen zu den Bewertungsregeln

                                          1. Wie wird so etwas umgesetzt?

                                            M.
                                            – Informationen zu den Bewertungsregeln

                                            Mahlzeit,

                                            Was, wenn später noch Informationen hinzukommen, bspw. E-Mail-Adresse und Telefonnummer unter der Rolle? Ich glaub nicht, dass eins davon wie der Name typografiert sein sollte.

                                            Achja, wenn nach nth-child(2) noch was kommt, verschiebt sich da der Rest. <ironie/>

                                            Und das die Anforderung war, dass die _erste_ Zeile hervorgehoben wird, scheint dir völlig egal zu sein.

                                            Wieso gehst du nicht auf die Anforderung des OP ein sondern versuchst hier etwas zu konstruieren, was absolut nicht du den Anforderungen des OP passt.

                                            --
                                            42
                                            Beitrag melden
                                            –
                                            Informationen zu den Bewertungsregeln

                                            1. Wie wird so etwas umgesetzt?

                                              Gunnar Bittersmann Homepage des Autors
                                              – Informationen zu den Bewertungsregeln

                                              @@M.:

                                              nuqneH

                                              Achja, wenn nach nth-child(2) noch was kommt, verschiebt sich da der Rest. <ironie/>

                                              Oops, ich hatte :nth-child(1n) und :nth-child(2n) gelesen.

                                              Und das die Anforderung war, dass die _erste_ Zeile hervorgehoben wird, scheint dir völlig egal zu sein.

                                              Gegenwärtig. Was, wenn vor dem Namen auch noch was stehen kann, bspw. akademischer Grad? Willst du den dann groß schreiben, den Namen klein?

                                              Ich glaub eher, die Anforderung ist, den *Namen* etwas größer hervorzuheben; egal, an welcher Stelle dieser steht.

                                              Qapla'

                                              --
                                              „Talente finden Lösungen, Genies entdecken Probleme.“ (Hans Krailsheimer)
                                              Beitrag melden
                                              –
                                              Informationen zu den Bewertungsregeln

                                              1. Wie wird so etwas umgesetzt?

                                                M.
                                                – Informationen zu den Bewertungsregeln

                                                Mahlzeit,

                                                Gegenwärtig. Was, wenn vor dem Namen auch noch was stehen kann, bspw. akademischer Grad? Willst du den dann groß schreiben, den Namen klein?

                                                Wie soll denn ein Markup un Kombination mit CSS jede evtl. Änderung abdecken können?
                                                Glaubst du wirklich, es ist möglich, alle Eventualitäten einzuplanen?

                                                Ich raube dir jetzt eine Illiusion: Die Änderung des Inhaltes wird sehr oft die Anpassung des Designs nach sich ziehen. Auch wenn dich das jetzt erschüttern wird, aber das ist so.

                                                BTW: Ein akademischer Grad benötigt kein eigenes Markup. Auch wenn du das evtl. so machst, aber ein

                                                <span>Dr. Achsel Schweiss<span>

                                                ist genauso möglich wie ein

                                                <span>Hr. Achsel Schweiss<span>

                                                Ich hab keine Ahnung, was du grad für ein Problem hast, aber normal ist anders.

                                                --
                                                42
                                                Beitrag melden
                                                –
                                                Informationen zu den Bewertungsregeln

                                                1. Wie wird so etwas umgesetzt?

                                                  Gunnar Bittersmann Homepage des Autors
                                                  – Informationen zu den Bewertungsregeln

                                                  @@M.:

                                                  nuqneH

                                                  Die Änderung des Inhaltes wird sehr oft die Anpassung des Designs nach sich ziehen.

                                                  Ja. Und je besser man vorher nachdenkt, desto weniger wird das der Fall sein.

                                                  Man kann ohne Aufwand den Code von Vornherein robust gestalten. Wie bspw. nicht die erste Zeile hervorheben, sondern den Namen, auch wenn beides gegenwärtig(!!) noch dasselbe ist.

                                                  BTW: Ein akademischer Grad benötigt kein eigenes Markup. Auch wenn du das evtl. so machst, aber ein
                                                  <span>Dr. Achsel Schweiss<span>
                                                  ist genauso möglich wie ein
                                                  <span>Hr. Achsel Schweiss<span>

                                                  Es ist aber auch

                                                  <span class="honorificPrefix">Dr.</span>  
<span class="name">Achsel Schweiss<span>

                                                  möglich. Mit diesem Markup kann man den „Doktor“ in dieselbe Zeile wie den Namen schreiben oder in eine Extra-Zeile. Und wenn die Darstellung geändert werden soll, muss man das Markup nicht mehr anfassen, sondern nur das Stylesheet. Und genau das …

                                                  Ich hab keine Ahnung, was du grad für ein Problem hast, aber normal ist anders.

                                                  … sollte das Normale sein.

                                                  Qapla'

                                                  --
                                                  „Talente finden Lösungen, Genies entdecken Probleme.“ (Hans Krailsheimer)
                                                  Beitrag melden
                                                  –
                                                  Informationen zu den Bewertungsregeln

                                    2. Wie wird so etwas umgesetzt?

                                      Gunnar Bittersmann Homepage des Autors
                                      – Informationen zu den Bewertungsregeln

                                      @@M.:

                                      nuqneH

                                      um meine Schrift zu ändern? […]
                                      Dachte ich mir.

                                      Ich nicht.

                                      Und genau deshalb ist die Angabe einer Klasse völlig überflüssig und bläht nur den Code auf.

                                      Die Klasse dient der Auszeichnung des Inhalts, ist also berechtigt und nützlich.

                                      Und wieso kannst du h2-h6 nicht nutzen?

                                      Weil es keine Überschrift ist.

                                      Qapla'

                                      --
                                      „Talente finden Lösungen, Genies entdecken Probleme.“ (Hans Krailsheimer)
                                      Beitrag melden
                                      –
                                      Informationen zu den Bewertungsregeln

                                      1. Wie wird so etwas umgesetzt?

                                        M.
                                        – Informationen zu den Bewertungsregeln

                                        Mahlzeit,

                                        Die Klasse dient der Auszeichnung des Inhalts, ist also berechtigt und nützlich.

                                        Ok, ich wusste nicht, dass der OP entmündigt ist und du sein Betreuer bist. Das erklärt auch, wieso du was anderes sagst als der OP.

                                        Weil es keine Überschrift ist.

                                        Wird schon stimmen, du kennst das Problem des OP wohl besser als er selbst.

                                        --
                                        42
                                        Beitrag melden
                                        –
                                        Informationen zu den Bewertungsregeln

                                        1. Wie wird so etwas umgesetzt?

                                          Gunnar Bittersmann Homepage des Autors
                                          – Informationen zu den Bewertungsregeln

                                          @@M.:

                                          nuqneH

                                          Die Klasse dient der Auszeichnung des Inhalts, ist also berechtigt und nützlich.

                                          Ok, ich wusste nicht, dass der OP entmündigt ist und du sein Betreuer bist. Das erklärt auch, wieso du was anderes sagst als der OP.

                                          Sturmverliebt sagte nicht, dass die Klassen unberechtigt und unnütz wären. Das warst du! Und ob *du* einen Betreuer brauchst, wage ich aus der Ferne mal nicht zu beurteilen. ;-)

                                          Wird schon stimmen, du kennst das Problem des OP wohl besser als er selbst.

                                          Dass nicht die erste unter dem Bild stehende Information, sondern eine ganz bestimmte (nämlich der Name) visuell hervorgehoben werden soll, scheint mir in der Tat die bessere Problembeschreibung zu sein. Womöglich hat der/die OP selbst noch gar nicht so weit gedacht. Schön, dass wir drüber gesprochen haben.

                                          Qapla'

                                          --
                                          „Talente finden Lösungen, Genies entdecken Probleme.“ (Hans Krailsheimer)
                                          Beitrag melden
                                          –
                                          Informationen zu den Bewertungsregeln

                                          1. Wie wird so etwas umgesetzt?

                                            M.
                                            – Informationen zu den Bewertungsregeln

                                            Mahlzeit,

                                            Sturmverliebt sagte nicht, dass die Klassen unberechtigt und unnütz wären. Das warst du!

                                            Stimmt. Und zwar traf ich eine Aussage aufgrund des Posts von Sturmverliebt. Und DU hast den widersprochen.

                                            --
                                            42
                                            Beitrag melden
                                            –
                                            Informationen zu den Bewertungsregeln

                                  2. Wie wird so etwas umgesetzt?

                                    Gunnar Bittersmann Homepage des Autors
                                    – Informationen zu den Bewertungsregeln

                                    @@Sturmverliebt:

                                    nuqneH

                                    Und wozu die Klasse?

                                    Um Name und Rolle semantisch(!!) auseinanderzuhalten.

                                    um meine Schrift zu ändern?

                                    Nei-en! Ob Name und Rolle typografisch unterschieden werden, spielt bei der Vergabe der Klassen keine Rolle.

                                    Qapla'

                                    --
                                    „Talente finden Lösungen, Genies entdecken Probleme.“ (Hans Krailsheimer)
                                    Beitrag melden
                                    –
                                    Informationen zu den Bewertungsregeln

                      2. Wie wird so etwas umgesetzt?

                        Gunnar Bittersmann Homepage des Autors
                        – Informationen zu den Bewertungsregeln

                        @@Sturmverliebt:

                        nuqneH

                        Um das Bild über den Text zu legen benötige ich wohl das DIV

                        Ich würde den Text über das Bild legen. Dann brauchst du kein div. Außerdem hat deine Lösung den Nachteil, dass du von einer festen Höhe des Textfeldes ausgehst. Was ist, wenn der Text länger ist und mehr Zeilen beansprucht?

                        In meiner Lösung ist die Textbox so hoch wie es der Inhalt erfordert. Sie liegt über dem Bild und deren Höhe wird beim Hovern per 'clip' geändert. Per 'clip' deshalb, damit sich die Schrift nicht verschiebt.

                        Beim Verlassen des figure-Elements mit dem Mauszeiger erscheint die Unterschrift nicht sofort wieder, sondern gegen Ende der Transition-Zeit. Ich finde das aber nicht schlimm, im Gegenteil.

                        (Man könnte auch 'max-height' ändern. Dann wird sie Schrift mit der Textbox geschoben. Dann tritt die Verzögerung aber beim Hovern auf, was sich störend bemerkbar macht. Das lässt sich aber einsetzen, wenn die Unterschrift initial nicht zu sehen ist, sondern beim Hovern.)

                        Wozu das span?

                        Wie bekomme ich sonst zwei Zeilen Text in das <figcaption>? Außerdem soll der erste Text Fett sein und der darunter etwas kleiner, mein neuer Code sieht so aus

                        Die span sind völlig in Ordnung.

                        Qapla'

                        --
                        „Talente finden Lösungen, Genies entdecken Probleme.“ (Hans Krailsheimer)
                        Beitrag melden
                        –
                        Informationen zu den Bewertungsregeln

                        1. Wie wird so etwas umgesetzt?

                          Sturmverliebt
                          – Informationen zu den Bewertungsregeln

                          Hallo,

                          In meiner Lösung ist die Textbox so hoch wie es der Inhalt erfordert. Sie liegt über dem Bild und deren Höhe wird beim Hovern per 'clip' geändert. Per 'clip' deshalb, damit sich die Schrift nicht verschiebt.

                          Danke für dein Beispiel. Eine Frage was macht das <cite> in deinem Quelltext? Es geht zwar auf, wird aber nicht mehr geschlossen. Ist das ausversehen rein gekommen?

                            
<figure>  
	<img src="http://upload.wikimedia.org/wikipedia/commons/3/38/Leonardo_da_Vinci_-_presumed_self-portrait_-_WGA12798.jpg" alt=""/>  
	<figcaption>  
		<span class="name">Leonardo da Vinci</span>  
		<span class="title">Künstler und Wissenschaftler</span>  
		<cite>  
	</figcaption>  
</figure
                          Beitrag melden
                          –
                          Informationen zu den Bewertungsregeln

                          1. Wie wird so etwas umgesetzt?

                            Gunnar Bittersmann Homepage des Autors
                            – Informationen zu den Bewertungsregeln

                            @@Sturmverliebt:

                            nuqneH

                            Danke für dein Beispiel. Eine Frage was macht das <cite> in deinem Quelltext? Es geht zwar auf, wird aber nicht mehr geschlossen. Ist das ausversehen rein gekommen?

                            Ja. Ich war mir erst nicht sicher, ob ich die Bildquelle angeben muss. Muss ich nicht.

                            Es ist übrigens von Wikimedia Commons.

                            Qapla'

                            --
                            „Talente finden Lösungen, Genies entdecken Probleme.“ (Hans Krailsheimer)
                            Beitrag melden
                            –
                            Informationen zu den Bewertungsregeln

                            1. Wie wird so etwas umgesetzt?

                              Sturmverliebt
                              – Informationen zu den Bewertungsregeln

                              Hallo,

                              Ja. Ich war mir erst nicht sicher, ob ich die Bildquelle angeben muss. Muss ich nicht.

                              Danke! Aber ich kann dein Beispiel leider nicht nehmen da es einfach nicht in das Konzept passt da bei dir der Text auf dem Bild liegt.

                              Die beiden Zeilen können später nicht länger werden, da beim Eingeben nur eine bestimmte Anzahl an Zeichen zugelassen ist. Danke aber für deine Mühe. Ich werde wohl das DIV einfach lassen.

                              Beitrag melden
                              –
                              Informationen zu den Bewertungsregeln

                              1. Wie wird so etwas umgesetzt?

                                Gunnar Bittersmann Homepage des Autors
                                – Informationen zu den Bewertungsregeln

                                @@Sturmverliebt:

                                nuqneH

                                Aber ich kann dein Beispiel leider nicht nehmen da es einfach nicht in das Konzept passt da bei dir der Text auf dem Bild liegt.

                                ?? Das ist doch visuell dasselbe. Ob nun das Bild oben ist und seine Höhe (d.h. die des dazu notwendigen(?) div-Containers) geändert wird oder ob die Textbox oben ist und deren Höhe geändert wird – es sieht gleich aus.

                                Warum denkst du, du könntest mein Beispiel nicht übernehmen?

                                Die beiden Zeilen können später nicht länger werden, da beim Eingeben nur eine bestimmte Anzahl an Zeichen zugelassen ist.

                                Das ist ein zwar weitverbreiteter, aber fataler Irrtum.

                                Man kennt weder die beim Nutzer tatsächlich verwende Schriftart noch die die beim Nutzer tatsächlich verwende Schriftgröße. Und selbst dieselbe Schriftart in derselben Größe wird auf verschiedenen Systemen verschieden gerendert: unterschiedliche Glyphen, veschiedene Schriftglättungsalgorithmen. Folglich kann derselbe Text bei verschiedenen Nutzern unterschiedlich breit sein.

                                Und die Anzahl der Zeichen sagt nichts über die Breite des Textes – jedenfalls nicht in den üblicherweise verwendeten Proportionalschriften. 42 W sind viel breiter als 42 i. Anzahl der Zeichen ist ein ziemlich ungeeignetes Maß abzuschätzen, ob Text in eine Zeile passt.

                                Deshalb immer daran denken, dass Text auch mehrzeilig werden kann! Also so layouten, dass Text in der Höhe wachsen kann, oder am Zeilenende per 'ellipsis' abschneiden.

                                Qapla'

                                --
                                „Talente finden Lösungen, Genies entdecken Probleme.“ (Hans Krailsheimer)
                                Beitrag melden
                                –
                                Informationen zu den Bewertungsregeln

                  2. Wie wird so etwas umgesetzt?

                    Gunnar Bittersmann Homepage des Autors
                    – Informationen zu den Bewertungsregeln

                    @@Sturmverliebt:

                    nuqneH

                    Laut dem validator.w3.org sollte dieses auch richtig sein (This document was successfully checked as HTML5!), bekomme aber 2 warning(s) die ich leider nicht verstehe:

                    • Info Using Direct Input mode: UTF-8 character encoding assumed

                    Steht doch da: „Unlike the “by URI” and “by File Upload” modes, the “Direct Input” mode of the validator provides validated content in the form of characters pasted or typed in the validator's form field. This will automatically make the data UTF-8, and therefore the validator does not need to determine the character encoding of your document, and will ignore any charset information specified.“

                    • Using experimental feature: HTML5 Conformance Checker.

                    Verwende den Nu Markup Checker.

                    Qapla'

                    --
                    „Talente finden Lösungen, Genies entdecken Probleme.“ (Hans Krailsheimer)
                    Beitrag melden
                    –
                    Informationen zu den Bewertungsregeln

  2. Frage zu figure

    Sturmverliebt
    – Informationen zu den Bewertungsregeln

    Moin,

    kann es sein dass <figure> vom Browser ein Abstand von "1em" bekommt?

    http://www.bilder-upload.eu/upload/7b5737-1408198226.jpg

    In meinem CSS Code steht davon nämlich nichts

      
	.seite {  
		width:980px;  
		margin:0 auto;  
	}  
  
	div {  
         transition: all 1s ease;  
      }  
	  
      figure {  
         position: relative;  
		 float:left;  
         width: 310px;  
         height: 200px;  
		  
      }  
      figure>div {  
         position: relative;  
         width: 310px;  
         height: 150px;  
         overflow: hidden;  
         z-index: 10;  
      }  
      figure>div:hover {  
         width: 310px;  
         height: 320px;  
         z-index: 10;  
      }  
      figure>div img {  
         z-index: 10;  
      }  
      figcaption {  
         display: block;  
         position: absolute;  
         width: 310px;  
         bottom: 5px;  
         z-index: 5;  
      }  
  
      figcaption span {  
         display: block;  
      }  
	  
	  .titel {  
		  font-weight:bold;  
		  margin-bottom:2px;  
	  }  
	  
	  .bezeichnug {  
		  font-size:14px;  
		  color:#333;  
	  }
    Beitrag melden
    –
    Informationen zu den Bewertungsregeln

    1. Frage zu figure

      Gunnar Bittersmann Homepage des Autors
      – Informationen zu den Bewertungsregeln

      @@Sturmverliebt:

      nuqneH

      kann es sein dass <figure> vom Browser ein Abstand von "1em" bekommt?

      Ja, wie bspw. p auch.

      Und auch links und rechts 40px, wie bspw. blockquote auch.

      Qapla'

      --
      „Talente finden Lösungen, Genies entdecken Probleme.“ (Hans Krailsheimer)
      Beitrag melden
      –
      Informationen zu den Bewertungsregeln

      1. Frage zu figure

        Sturmverliebt
        – Informationen zu den Bewertungsregeln

        Hallo,

        Ja, wie bspw. p auch.

        Und auch links und rechts 40px, wie bspw. blockquote auch.

        Ah ok. Sollte ich also auch zuerst komplett auf 0 setzten um vernünftig damit arbeiten zu können.

        Beitrag melden
        –
        Informationen zu den Bewertungsregeln

  3. float aufheben

    Sturmverliebt
    – Informationen zu den Bewertungsregeln

    Hallo,

    hab noch ein weiteres "Problem" um mein "float" aufzuheben nehme ich ein

    <div style="clear:both;"></div>

    ich kann mir denken, dass dieses bestimmt total überflüssig ist. Wie macht ihr das?

    Mein HTML Code

      
 <nav>  
 	<ul>  
    	<li><a href="#">Nav 1</a></li>  
    	<li><a href="#">Nav 2</a></li>  
    	<li><a href="#">Nav 3</a></li>  
    	<li><a href="#">Nav 4</a></li>  
    </ul>  
 </nav>  
  
 <div style="clear:both;"></div>  
  
 <figure>  
     <div>  
     	<img src="team/vorschau/1.jpg" alt="Mitarbeiter 1" />  
     </div>  
     <figcaption>  
        <span>Name der Person</span>  
        <span>Was macht diese Person in der Firma?</span>  
     </figcaption>  
 </figure>

    und mein CSS Code

      
nav ul {  
	font-size:0.89em;  
}  
  
nav ul li {  
	float: left;  
	display: block;  
	margin: 0 10px 0 0;  
}  
  
nav ul li a {  
	padding:5px 7px 3px 7px;  
}  
  
figure:nth-of-type(3n){  
	margin:0 0px 20px 0  
}  
  
figure {  
    position: relative;  
    width: 300px;  
    height: 200px;  
	float:left;  
	margin:0 17px 20px 0  
}  
  
figure>div {  
    transition: all 1s ease;  
    position: relative;  
    height: 150px;  
    overflow: hidden;  
    z-index: 10;  
}  
  
figure>div:hover {  
    height: 320px;  
}  
  
figure>div img {  
    z-index: 10;  
}  
  
figcaption {  
    display: block;  
    position: absolute;  
    width: 400px;  
    bottom: 5px;  
    z-index: 5;  
}  
  
figcaption span {  
    display: block;  
}
    Beitrag melden
    –
    Informationen zu den Bewertungsregeln

    1. float aufheben

      Gunnar Bittersmann Homepage des Autors
      – Informationen zu den Bewertungsregeln

      @@Sturmverliebt:

      nuqneH

      hab noch ein weiteres "Problem" um mein "float" aufzuheben nehme ich ein
      <div style="clear:both;"></div>
      ich kann mir denken, dass dieses bestimmt total überflüssig ist.

      Ganz bestimmt.

      Wie macht ihr das?

      Wie Nicolas Gallagher, nur ohne Klasse "cf".

      Qapla'

      --
      „Talente finden Lösungen, Genies entdecken Probleme.“ (Hans Krailsheimer)
      Beitrag melden
      –
      Informationen zu den Bewertungsregeln

      1. float aufheben

        Gunnar Bittersmann Homepage des Autors
        – Informationen zu den Bewertungsregeln

        @@Gunnar Bittersmann:

        nuqneH

        Wie Nicolas Gallagher, nur ohne Klasse "cf".

        s.a. molilys etwas älteren Artikel.

        Qapla'

        --
        „Talente finden Lösungen, Genies entdecken Probleme.“ (Hans Krailsheimer)
        Beitrag melden
        –
        Informationen zu den Bewertungsregeln

  4. Frage zu einer Team-Seite

    Sturmverliebt
    – Informationen zu den Bewertungsregeln

    Hallo,

    ich habe noch eine kleine Frage zur Umsetzung einer Team Seite. Gehen wir wieder von diesem Beispiel aus. Ich dachte an folgendes

      
  
 <main>  
 	<article>  
 	    <h2>Sturmverliebt</h2>  
            <img src="team/sturmverliebt.jpg" alt="Sturmverliebt" />  
 	</article>  
  
    <aside>  
    	<section>  
            <h2>Nächste Mitarbeiterin</h2>  
            <h3>Position der Mitarbeiterin</h3>  
            <p>Hier kommt eine Beschreibung rein, was diese Mitarbeiterin macht</p>  
        </section>  
    </aside>  
 </main>

    Liege ich hier richtig? Sorry wenn ich vielleicht etwas viel Frage, aber ich will die Seite nicht in ein paar Wochen / Monaten schon wieder neu anfangen. Es wird auch keine Seite für eine Firma sondern für mich privat, ich finde das schlichte Design von der verlinken Seite einfach schön.

    Hab mir vor einer Stunde ca. einen Account bei bplaced.net angelegt dass ich etwas zeigen kann was ich hier umsetzte, aber leider sehe ich außer Werbung derzeit nichts :/

    Beitrag melden
    –
    Informationen zu den Bewertungsregeln

    1. Frage zu einer Team-Seite

      MrMurphy
      – Informationen zu den Bewertungsregeln

      Hallo,

      ich finde das schlichte Design von der verlinken Seite einfach schön.

      Nicht nur du. Das Entscheidende sollten jedoch deine Besucher sein - und die freuen sich über solche schlichten Seiten, weil sie die Informationen, die sie haben möchten, schnell finden.

      Liege ich hier richtig?

      Nein. Da ist die Seite vielleicht doch etwas zu schlicht. "Nächste Mitarbeiterin" ist ein Link zur nächsten Mitarbeiterin und hat mit dem Text darunter nichts zu tun. Der bezieht sich auf das Bild des grade gezeigten Mitarbeiters. Der Link hätte etwas weiter abgesetzt werden müssen.

      Gruss

      MrMurphy

      Beitrag melden
      –
      Informationen zu den Bewertungsregeln

      1. Frage zu einer Team-Seite

        Sturmverliebt
        – Informationen zu den Bewertungsregeln

        Hallo MrMurphy,

        Nein. Da ist die Seite vielleicht doch etwas zu schlicht. "Nächste Mitarbeiterin" ist ein Link zur nächsten Mitarbeiterin und hat mit dem Text darunter nichts zu tun. Der bezieht sich auf das Bild des grade gezeigten Mitarbeiters. Der Link hätte etwas weiter abgesetzt werden müssen.

        ok dann lass ich den Link erstmal weg, wüsstet auf Anhieb eh nicht wie ich das mit PHP umsetzten könnte. Stimmten denn sonst mein HTML?

        Beitrag melden
        –
        Informationen zu den Bewertungsregeln

        1. Frage zu einer Team-Seite

          MrMurphy
          – Informationen zu den Bewertungsregeln

          Hallo

          Stimmt denn sonst mein HTML?

          So wie es da steht, nur ohne die h2-"Nächste Mitarbeiterin"?

          Nein, leider nicht. Da die Informationen im section-Element auf das Bild im article bezieht, gehört das gesamte section-Element in den article. Das aside ist in diesem Fall überflüssig.

          Gruss

          MrMurphy

          Beitrag melden
          –
          Informationen zu den Bewertungsregeln

          1. Frage zu einer Team-Seite

            Sturmverliebt
            – Informationen zu den Bewertungsregeln

            Hallo MrMurphy,

            Nein, leider nicht. Da die Informationen im section-Element auf das Bild im article bezieht, gehört das gesamte section-Element in den article. Das aside ist in diesem Fall überflüssig.

            also so?

              
 <main>  
 	<article>  
 		<h2>Titel</h2>  
        <img src="team/1.jpg" alt="Bild 1" />  
  
    	<section>  
        	<h3>Position</h3>  
            <p>  
            Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.  
            </p>  
        </section>  
  
 	</article>  
  
 </main>
            Beitrag melden
            –
            Informationen zu den Bewertungsregeln

            1. Frage zu einer Team-Seite

              MrMurphy
              – Informationen zu den Bewertungsregeln

              Hallo,

              genau, das HTML ist korrekt. Ob du eventuell noch einen Container brauchst oder das section-Element sogar auch wegfallen kann hängt jetzt noch davon ab, wie die einzelnen Elemente im Browser angezeigt werden sollen.

              Wie ich bereits schrieb: Im Endeffekt kommt es auf den gesamten Inhalt an. Mit Teilinhalten kann niemand dir ein endgültiges OK geben.

              Gruss

              MrMurphy

              Beitrag melden
              –
              Informationen zu den Bewertungsregeln

              1. Frage zu einer Team-Seite

                Sturmverliebt
                – Informationen zu den Bewertungsregeln

                Hallo MrMurphy,

                genau, das HTML ist korrekt. Ob du eventuell noch einen Container brauchst oder das section-Element sogar auch wegfallen kann hängt jetzt noch davon ab, wie die einzelnen Elemente im Browser angezeigt werden sollen.

                OK, dann mache ich so weiter

                  
    <article>  
 		  
        <h2>Titel</h2>  
  
    	<figure>  
	        <img src="team/1.jpg" alt="Mitarbeiter 1" />  
		</figure>  
    	  
        <section>  
        	<h3>Position der Mitarbeiterin</h3>  
            <p>  
            Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.  
            </p>  
        </section>  
  
 	</article>

                Ich habe mein Bild noch in ein <figure> gelegt so kann ich es nach links floten und den Text nach rechts, wie in meinem CSS Code zu sehen ist

                  
article h2 {  
	font-size: 1.35em;  
	font-weight: normal;  
	margin-bottom:1em;  
}  
  
article figure {  
	float:left;  
	width:630px;  
}  
  
section {  
	float:left;  
	width:200px;  
}  
  
section h3 {  
	font-size: 1.35em;  
	font-weight: normal;  
	font-weight: bold;  
	border-top: 2px solid #e0e0e0;  
	padding: 1.56em 0 1.56em 0;  
}  
  
section p {  
	color: #909090;  
	line-height: 1.5em;  
	font-size:0.85em;  
}

                Mein Beispiel nimmt gestallt an :)

                Beitrag melden
                –
                Informationen zu den Bewertungsregeln

                1. Frage zu einer Team-Seite

                  MrMurphy
                  – Informationen zu den Bewertungsregeln

                  Hallo

                  Ich habe mein Bild noch in ein <figure> gelegt

                  Das ist eine sowohl ... als auch Entscheidung.

                  so kann ich es nach links floten und den Text nach rechts, wie in meinem CSS Code zu sehen ist

                  Die Begründung ist wiederum falsch. Um Text um ein Bild zu floaten ist das figure-Element nicht notwendig. Wenn du es also extra deshalb eingefügt hast machst du also keinen Fehler, aber zur Problemlösung ist es nicht erforderlich.

                  Gruss

                  MrMurphy

                  Beitrag melden
                  –
                  Informationen zu den Bewertungsregeln

    2. bplaced.net - Benutzung

      MrMurphy
      – Informationen zu den Bewertungsregeln

      Hallo,

      der placed.net-Benutzung wollte ich eine extra Antwort geben.

      In der Regel (und auch jetzt, ich habe das grade ausprobiert) ist die Benutzung von bplaced.net sofort möglich.

      Ich gehe mal davon aus, das du folgende Schritte durchgeführt hast:

      a) Du meldest ich mit einem Benutzernamen und einem Passwort an

      b) Du erhälst eine E-Mail mit einem Link, den du zur Bestätigung anklicken musst. Im Browser öffent sich ein Fenster mit einer Bestätigung

      Jetzt weiter im Text:

      c) Jetzt kannst du versuchen, dich über deinen Browser bei bplaced.net anzumelden. Auf der Hauptseite musst du bei Userlogin nur deinen Benutzernamen (ohne irgendwelche Zusätze) und dein Passwort eingeben. Dann sollte dir eine Seite "Zusammenfassung" angezeigt werden. Dann funktioniert dein Zugang.

      d) Du kannst links in dem Fenster probeweise auf FTP-Verwaltung klicken, dort aber nichts ändern. Hintergrund: Um zu prüfen, ob die Seite noch genutzt wird, erhälst du alle 3 bis 4 Monate eine E-Mail und musst dann genau das durchführen. Also die FTP-Verwaltung aufrufen, ohne etwas zu ändern. Das muss aber nicht sofort mit Erhalt der E-Mail passieren, aber schon zeitnah. Ansonsten wird dein Account gelöscht.

      e) Jetzt kannst du dich wieder ausloggen.

      f) Deine Seite rufst du unter

      http://benutzername.bplaced.net/

      auf. Wenn du noch nichts hochgeladen hast sollte eine weiße Seite erscheinen. Ist bei mir jedenfalls grade der Fall.

      g) Deine Daten kannst du mittels eines beliebigen FTP-Programms hochladen.

      Folgende Einstellungen sind in der Regel sinnvoll bzw. erforderlich. Die Bezeichnung der Eingabefelder kann natürlich leicht abweichen:

      Titel (oder Name): Eintrag ist bliebig, sollte aber sinnvoll sein, um die Verbindung zu beschreiben. Da ich bei mehreren Providern mehrere Seiten verwalte, mache ich das in der Regel mit Provider Seitenname, also z.B. "Bplaced Benutzername".

      Servername: benutzername.bplaced.net

      Benutzername: benutzername

      Passwort: Dein gewähltes Passwort

      Passiver Modus: sollte aktiviert werden

      Alle anderen Vorgabe-Einstellungen passen in der Regel

      h) Direkt nach dem Hochladen der Datei kannst du sie in deinem Browser aufrufen. Wenn eine Datei direkt gestartet werden soll nennst du sie index.html. Wenn keine index.html vorhanden ist wird dir ein Verzeichnis aller vorhandenen Dateien angezeigt, die du dann zum Aufrufen anklicken kannst.

      Wenn die Dateien irgendwelche persönlichen oder sonstwie schützenswerten Daten enthalten solltest du also in jedem Fall eine index.html erstellen, auch wenn die gar keinen Inhalt hat.

      i) Die bereits von bplaced angelegten Dateien und Verzeichnisse solltest du weder ändern noch löschen.

      Gruss

      MrMurphy

      Beitrag melden
      –
      Informationen zu den Bewertungsregeln

  5. Umschalten auf Knopfdruck

    Sturmverliebt
    – Informationen zu den Bewertungsregeln

    Hallo,

    sorry ich muss nochmals etwas fragen. Aus dem Quelltext werde ich nicht richtig schlau bzw. verstehe überhaupt nichts.

    Auf der Team Seite bzw. auf den Referenzen sieht man es auf der Seite besser gibt es rechts oben zwei kleine Buttons, da kann man zwischen Bilder untereinander / Bilder nebeneinander umschalten. In der URL ändert sich überhaupt nichts. Ein Frame wird auch nicht eingeblendet. Also wird es wohl über CSS oder Javascript umgesetzt.

    Daher meine Frage:

    • Ist es schwer so ein Effekt umzusetzten und wie wird dieses umgesetzt?
    Beitrag melden
    –
    Informationen zu den Bewertungsregeln

    1. Umschalten auf Knopfdruck

      MrMurphy
      – Informationen zu den Bewertungsregeln

      Hallo,

      • Ist es schwer so ein Effekt umzusetzten

      Wenn du dir ein passendes Script suchst und anpasst? Nein.

      Wenn du dich mit JavaScript auskennst? Nein.

      Als Anfänger, der nicht mal mit HTML / CSS zurechtkommt? Ja.

      wie wird dieses umgesetzt?

      Durch JavaScript wird das CSS geändert.

      Gruss

      MrMurphy

      Beitrag melden
      –
      Informationen zu den Bewertungsregeln

      1. Umschalten auf Knopfdruck

        Sturmverliebt
        – Informationen zu den Bewertungsregeln

        Hallo MrMurphy,

        Wenn du dir ein passendes Script suchst und anpasst? Nein.

        ich würde ja auf die suche gehen, aber ich weiß nicht mal wie diese Funktion bzw. dieser Effekt heißt.

        Beitrag melden
        –
        Informationen zu den Bewertungsregeln

        1. Umschalten auf Knopfdruck

          MrMurphy
          – Informationen zu den Bewertungsregeln

          Hallo

          ich würde ja auf die suche gehen, aber ich weiß nicht mal wie diese Funktion bzw. dieser Effekt heißt.

          Ich auch nicht. Wonach suche ich dann? Zum Beispiel

          javascript css ansicht umschalten

          Und dann findest du in den Seiten weitere Informationen und auch andere Suchbegriffe. Nach denen suchst du dann. u.s.w. Bis du ein Ergebnis hast.

          Gruss

          MrMurphy

          Beitrag melden
          –
          Informationen zu den Bewertungsregeln