Auge: Darstellung Adresse, Öffnungszeiten und Kontaktmöglichkeiten

Beitrag lesen

Guten Morgen,

Mojens

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

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

Gibt es hier eine bessere alternative?

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

Ich würde in folgende Richtung tendieren.

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

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

Tschö, Auge

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

Bild über die ganze Breite

Carmen
  • meinung
  1. 0
    Mattes
    1. 0
      Carmen
      1. 0
        Mattes
      2. 0
        Gunnar Bittersmann
        1. 0

          Grafik-Software: Wo und was lernen?

          Robert R.
          • multimedia (audio & video)
  2. 0
    Robert R.
    1. 0
      Carmen
  3. 0
    1UnitedPower
    1. 0
      Auge
      1. 0
        Gunnar Bittersmann
        1. 0
          Gunnar Bittersmann
          1. 0
            Auge
            1. 0
              Gunnar Bittersmann
              1. 0
                Auge
    2. 0
      Gunnar Bittersmann
      1. 0
        Carmen
        1. 0
          Matthias Apsel
  4. 0

    Online Beispiel + Navigations Frage

    Carmen
    1. 0
      Camping_RIDER
      1. 0
        Matthias Apsel
        1. 0
          Camping_RIDER
      2. 0
        Carmen
  5. 0

    <h1> gestallten

    Carmen
    • css
    1. 0
      Mattes
      1. 0
        Carmen
        1. 0
          Gunnar Bittersmann
          • multimedia (audio & video)
        2. 0
          Mattes
          1. 0
            Gunnar Bittersmann
            1. 0
              Mattes
              1. 0
                Gunnar Bittersmann
                1. 0
                  Mattes
      2. 0
        Gunnar Bittersmann
    2. 0
      Der Martin
      1. 0
        Matthias Apsel
        1. 1
          Matthias Apsel
          1. 0
            Carmen
            1. 0
              Matthias Apsel
              1. 0
                Carmen
                1. 0
                  Matthias Apsel
                  1. 0
                    Carmen
    3. 0
      ChrisB
  6. 0

    Warnung beim validator

    Carmen
    • html
    1. 0
      Der Martin
  7. 0

    PX und EM

    Carmen
    1. 0
      Camping_RIDER
      1. 0
        Carmen
        1. 0
          Camping_RIDER
        2. 0
          Gunnar Bittersmann
          1. 0
            Carmen
            1. 0
              Gunnar Bittersmann
              1. 0

                Sass und Co.

                Camping_RIDER
                1. 0
                  Gunnar Bittersmann
    2. 0
      Der Martin
      1. 0
        Carmen
  8. 0

    Bild & Text bei hover ändern

    Carmen
    • css
    1. 0
      Carmen
      1. 0
        Carmen
        1. 0
          Carmen
          1. 0
            Carmen
            1. 0
              Gunnar Bittersmann
      2. 0
        Tabellenkalk
        1. 0
          Carmen
          1. 0
            Matthias Apsel
            1. 0
              Carmen
              1. 0
                Matthias Apsel
                1. 0
                  Carmen
                  1. 0

                    Update - figure & figcaption

                    Carmen
                    1. 0
                      Matthias Apsel
                      1. 0
                        Carmen
                        1. 0
                          Gunnar Bittersmann
                          1. 0
                            Camping_RIDER
                            1. 0
                              Gunnar Bittersmann
                              1. 0
                                Carmen
                              2. 0
                                Camping_RIDER
                          2. 0
                            Carmen
                            1. 0

                              Der Name der Friseuse (Friseurin?)

                              Camping_RIDER
                              • meinung
                  2. 0
                    Matthias Apsel
                    1. 0
                      Carmen
                  3. 0
                    Gunnar Bittersmann
                    1. 0
                      Carmen
                      1. 0
                        Gunnar Bittersmann
                        1. 0
                          Carmen
                          1. 0
                            Camping_RIDER
                            1. 0
                              Carmen
                              1. 0
                                Matthias Apsel
                                1. 0
                                  Carmen
                                  1. 0
                                    Der Martin
    2. 0
      Matthias Apsel
  9. 0

    Darstellung Adresse, Öffnungszeiten und Kontaktmöglichkeiten

    Carmen
    1. 0
      Auge
      1. 0
        Carmen
        1. 0
          Carmen
          1. 0
            Matthias Apsel
            1. 0
              Gunnar Bittersmann
            2. 0
              Carmen
  10. 0

    Design Frage - Anordnung der Bilder

    Carmen
    • design/layout
    1. 0
      Gunnar Bittersmann
      1. 0
        Carmen
        1. 0
          Matthias Apsel
        2. 0
          Gunnar Bittersmann
          1. 0
            Carmen
            1. 0
              Auge
              1. 0
                Carmen
          2. 0
            Carmen
            1. 0
              Gunnar Bittersmann
              1. 0
                Matthias Apsel
  11. 0

    Kontaktformular

    Carmen
    • css
    1. 0
      Gunnar Bittersmann
      1. 0
        Carmen
        1. 0
          Carmen
          1. 0
            Carmen
            1. 0
              Matthias Apsel
              1. 0
                Carmen
                1. 0
                  Auge
            2. 0
              Gunnar Bittersmann
          2. 0
            Gunnar Bittersmann
            • design/layout
            1. 0
              Gunnar Bittersmann
            2. 0
              Carmen
              1. 0
                Gunnar Bittersmann
  12. 0

    Bilderslider - CSS oder JavaScript?

    Carmen
    1. 0
      Auge
      1. 0
        Carmen
        1. 0
          Gunnar Bittersmann
          1. 0
            Carmen
            1. 0
              Gunnar Bittersmann
              1. 0
                Carmen
                1. 0
                  Gunnar Bittersmann
                  1. 0
                    Carmen
                    1. 0
                      Gunnar Bittersmann
                      1. 0
                        Carmen
                      2. 0

                        Es funktioniert einfach nicht!

                        Carmen
                        1. 0
                          Gunnar Bittersmann
                          1. 0
                            Carmen
                            1. 0
                              Matthias Apsel
                              1. 0
                                Carmen
                                1. 0
                                  Matthias Apsel
                                  1. 0
                                    Auge
                                    1. 0
                                      Gunnar Bittersmann
                                      1. 0
                                        Auge
                                    2. 0
                                      Matthias Apsel
                                      1. 0
                                        Auge
        2. 0

          jQuery != JavaScript

          Camping_RIDER
  13. 0

    JavaScript - Slider hat zu viel Abstand nach rechts!

    Carmen
    • css
    1. 0

      JavaScript - Slider Version 2 (aktuelle Version)

      Carmen
  14. 0

    Warum funktioniert :nth-child(3n) nicht?

    Carmen
    • css
    1. 0
      Gunnar Bittersmann
      1. 0
        Carmen
        1. 0
          Gunnar Bittersmann
          1. 1
            Gunnar Bittersmann
            1. 0
              Carmen
              1. 0
                Gunnar Bittersmann