Ankündigung

Einklappen
Keine Ankündigung bisher.

<ol class="type"> Aufzählung responsive setzen

Einklappen
X
 
  • Filter
  • Zeit
  • Anzeigen
Alles löschen
neue Beiträge

  • <ol class="type"> Aufzählung responsive setzen

    Hallo und guten Abend,

    ich hoffe ich bin bei euch richtig...! Seit Jahren erstelle ich Webseiten im privaten Bereich. Dazu nutze freie Templates die ich entsprechend individualisiere!
    Die grundlegende HTML Sprache ist mir einigermaßen geläufig, wenn es in die Tiefe geht, leider noch nicht...!
    Es geht darum, dass ich für einen Bekannten eine Webseite für seine Kfz-Werkstatt gemacht habe und zwar natürlich im responsive Design!
    Dort gibt es eine "Aufzählung" mit <ol class="type"> und diese Aufzählungen bzw. Themen worunter per Klick die verschiedenen Bilder erscheinen, liegen übereinander und nicht angeordnet wie es
    bei responsive sein sollte...!
    Ich hoffe ihr wisst, was ich meine.
    Ich habe es mal eingefügt... Der fett markierte Bereich ist mein Problem! Ihr könnt ja mal mit dem Smartphone die Seite öffnen: www.kfz-service-freier.de und unter LEISTUNGEN seht ihr schon was ich meine!

    Danke im Voraus für eure Tipps!

    Gruß
    Tobias

    <div class="categories">
    <ul class="cat">
    <li>
    <ol class="type">
    <li><a href="#" data-filter="*" class="active">Unsere Leistungen</a></li>
    <li><a href="#" data-filter=".instwar">Inspektion / Wartung</a></li>
    <li><a href="#" data-filter=".verrep">Verschleiss / Reparaturen</a></li>
    <li><a href="#" data-filter=".unfka">Unfall / Karosserie</a></li>

    </ol>
    </li>
    </ul>
    <div class="clearfix"></div>
    </div>
    <div class="row">
    <div class="portfolio-items">
    <div class="col-sm-6 col-md-4 col-lg-4 instwar">
    <div class="portfolio-item">
    <div class="hover-bg"> <a href="img/portfolio/01-large.jpg" title="Achsvermessung" data-lightbox-gallery="gallery1">
    <div class="hover-text">
    <h4>Achsvermessung</h4>
    </div>
    <img src="img/portfolio/01-small.jpg" class="img-responsive" alt="Achsvermessung"> </a> </div>
    </div>
    </div>
    <div class="col-sm-6 col-md-4 col-lg-4 instwar">
    <div class="portfolio-item">
    <div class="hover-bg"> <a href="img/portfolio/02-large.jpg" title="alle KFZ-Marken" data-lightbox-gallery="gallery1">
    <div class="hover-text">
    <h4>alle KFZ-Marken</h4>

  • #2
    Da musste ich jetzt etwa suchen. Die Erklärung für die Überdeckung habe ich dann hier gefunden:
    https://stackoverflow.com/questions/...-tags/24683620
    Lösung indem Du, wie dort beschrieben, den a-Elementen ein display: inline-block; gibst.

    Richtig schön sieht das Ganze dann immer noch nicht aus, wenn das Browserfenster kleiner ist und die Zeile umgebrochen wird. Möglicher Weise wäre es hier besser, Gridlayout zu verwenden und die Verteilung auf eine oder mehrere Zeilen durch Mediaqueries gezielt steuern.

    Kommentar


    • #3
      PS: Ich habe das mit Grid ausprobiert und es funktionier gut, sieh selbst. Das Styling war einfacher, wenn ich die Ränder bei den li-Elementen definiert habe.
      HTML-Code:
      <!DOCTYPE html>
      <html>
      <head>
          <title>Gridlayout für ol</title>
          <style>
              body {
                  text-align: center;
              }
              a {
                  text-decoration: none;
              }
              ol.type li {
                  color: #a7c44c;
                  padding: 10px 20px;
                  border: 2px solid #a7c44c;
                  border-radius: 10px 0 10px 0;
              }
              ol.type li a {
                  font-weight: 400;
                  font-size: 15px;
                  text-transform: uppercase;
                  letter-spacing: 0.5px;
              }
              ol.type {
                  display: inline-grid;
                  grid-template-columns: auto auto auto auto;
                  list-style: none;
              }
              @media all and (max-width: 65em) {
                  ol.type {
                      grid-template-columns: 1fr 1fr;
                  }
              }
              @media all and (max-width: 40em) {
                  ol.type {
                      grid-template-columns: 1fr;
                  }
              }
          </style>
      </head>
      <body>
          <ol class="type">
              <li><a href="#" data-filter="*" class="active">Unsere Leistungen</a></li>
              <li><a href="#" data-filter=".instwar">Inspektion / Wartung</a></li>
              <li><a href="#" data-filter=".verrep">Verschleiss / Reparaturen</a></li>
              <li><a href="#" data-filter=".unfka">Unfall / Karosserie</a></li>
          </ol>
      </body>
      </html>

      Kommentar


      • #4
        Hi dertobi82, schickes Template,
        mir ist aufgefallen, dass der JavaScript-Teil nicht sauber geschrieben wurde. Auch wenn die Skripe am Ende stehen solltest du bei jQuery immer mit
        Code:
        $(document).ready()
        anfangen.

        Gruss Localfu
        PS: Wenn euch mein Post gefallen hat, dann lasst mir ein "Daumen hoch" da!

        Kommentar


        • #5
          Auch wenn die Skripe am Ende stehen solltest du bei jQuery immer mit
          Code:
          $(document).ready()
          anfangen.
          Begründung?

          Kommentar


          • #6
            Dank für den Tipp SEMPERVIVUM, scheint zu funktionieren! :-)
            Perfekt und vielen Dank nochmal!!

            Schönen Sonntagabend

            Kommentar

            homepage-forum.de - Hilfe für Webmaster! Statistiken

            Einklappen

            Themen: 56.839   Beiträge: 430.423   Mitglieder: 28.593   Aktive Mitglieder: 54
            Willkommen an unser neuestes Mitglied, digital-mc.

            Online-Benutzer

            Einklappen

            221 Benutzer sind jetzt online. Registrierte Benutzer: 3, Gäste: 218.

            Mit 3.502 Benutzern waren am 23.01.2020 um 17:20 die meisten Benutzer gleichzeitig online.

            Die neuesten Themen

            Einklappen

            • arnego2
              Antwort auf Besucher-Explosion am 10.4.2021
              Hi Karl
              Bei Google brauchst du gar nicht erst nachzuhaken, schau in die Serverstats da findest du die Rohdaten.
              Google geht den Weg der Kirche und hält uns für doof....
              Gestern, 23:02
            • Nightland Driver
              Antwort auf Upload Script gibt Undefined array key "file" zurück
              Vielen Dank für deine Antwort, da liegt der fehler nicht. Wie oben zu erkennen ist, ist der name des inputs welcher den File enthält "file".
              PHP-Code:
              <?php echo '<input onchange="$(submit_profileimage).click();" name="file" type="file" class="custom-file-input
              ...
              Gestern, 21:01
            • Megabyte
              Antwort auf Hompage erstellen lassen?
              Mein Fazit:

              CMS wäre hier totaler Unsinn. CMS = ContentManagementSystem. Hier muss kein Content 'gemanagt' werden. Weder Firmenname, noch Anschrift oder angebotene Leistungen müssen hier intervalartig redaktionell bearbeitet werden.

              Baukasten... B-Lösung. Ich kenne 'Wix'...
              Gestern, 20:46
            • Megabyte
              Antwort auf Upload Script gibt Undefined array key "file" zurück
              Wenn ich es richtig gelesen habe wird hier das Wort 'file' das erste Mal als 'key' verwendet:
              $lastDot = strrpos($_FILES["file"]["name"], ".");

              Es soll hier also die letzte Position ermittelt werden wo ein '.' steht inhalb der Variablen (Array) $_FILES["file"]["name"]...
              Gestern, 20:26
            • speedy1
              Antwort auf Hompage erstellen lassen?
              AW: Homepage erstellen lassen?

              Ich habe mit dem Website-Builder Wix gute Erfahrungen gemacht, welcher auch ein gutes Preis-Leistungs-Verhältnis besitzt.

              Die Vorteile:
              - Einfach zu bedienender Editor, mit einem Seitenmenü zum Hinzufügen von Bildern und Anwendungen...
              Gestern, 20:23

            Die neuesten Beiträge

            Einklappen

            • admin
              Besucher-Explosion am 10.4.2021
              Hallo,

              wir hatten am 10.4.2021 eine extrem hohe Zahl an Besuchern hier im Homepage-Forum - hier ein Screenshot von Google Analytics:



              6.4.2021: 346 Seitenaufrufe
              7.4.2021: 302 Seitenaufrufe
              8.4.2021: 289 Seitenaufrufe
              9.4.2021: 312 Seitenaufrufe...
              12.04.2021, 17:18
            • arnego2
              Antwort auf Besucher-Explosion am 10.4.2021
              Hi Karl
              Bei Google brauchst du gar nicht erst nachzuhaken, schau in die Serverstats da findest du die Rohdaten.
              Google geht den Weg der Kirche und hält uns für doof....
              Gestern, 23:02
            • Nightland Driver
              Upload Script gibt Undefined array key "file" zurück
              Hey,

              ich habe mit meinem Upload Script ein kleines Problem, es gibt mir nurnoch

              Warning: Undefined array key "file" in E:\Benutzer\Documents\Xampp\htdocs\Projekt\Homepag e\includes\user.inc.php on line 20
              Warning: Trying to access array offset on value of type...
              Gestern, 17:44
            • Nightland Driver
              Antwort auf Upload Script gibt Undefined array key "file" zurück
              Vielen Dank für deine Antwort, da liegt der fehler nicht. Wie oben zu erkennen ist, ist der name des inputs welcher den File enthält "file".
              PHP-Code:
              <?php echo '<input onchange="$(submit_profileimage).click();" name="file" type="file" class="custom-file-input
              ...
              Gestern, 21:01
            • Megabyte
              Antwort auf Hompage erstellen lassen?
              Mein Fazit:

              CMS wäre hier totaler Unsinn. CMS = ContentManagementSystem. Hier muss kein Content 'gemanagt' werden. Weder Firmenname, noch Anschrift oder angebotene Leistungen müssen hier intervalartig redaktionell bearbeitet werden.

              Baukasten... B-Lösung. Ich kenne 'Wix'...
              Gestern, 20:46
            • Megabyte
              Antwort auf Upload Script gibt Undefined array key "file" zurück
              Wenn ich es richtig gelesen habe wird hier das Wort 'file' das erste Mal als 'key' verwendet:
              $lastDot = strrpos($_FILES["file"]["name"], ".");

              Es soll hier also die letzte Position ermittelt werden wo ein '.' steht inhalb der Variablen (Array) $_FILES["file"]["name"]...
              Gestern, 20:26
            • speedy1
              Antwort auf Hompage erstellen lassen?
              AW: Homepage erstellen lassen?

              Ich habe mit dem Website-Builder Wix gute Erfahrungen gemacht, welcher auch ein gutes Preis-Leistungs-Verhältnis besitzt.

              Die Vorteile:
              - Einfach zu bedienender Editor, mit einem Seitenmenü zum Hinzufügen von Bildern und Anwendungen...
              Gestern, 20:23
            • ST747
              impfen oder schrott
              A

              nachdem wegen astraZ. das impfen ausgesetzt wurde, wird das jetzt wieder fortgesetzt. aber der grund ist, den impfstoff kann man leicher in den arztpraxen an "den mann" bringen.
              nur so etwas zu empfehlen, weil man das besser in der praxis bewältigen kann, ist schlecht....
              20.03.2021, 12:15
            • ST747
              Antwort auf impfen oder schrott
              hallo,

              zwei hinweise:

              1. Ärzte empfehlen selbst die Hintergrundimmuniät zu stärken:

              .... wichtig zum Schutz vor dem schweren Verlauf einer Infektion ist auch die "Hintgergrundimmunität". Dazu zählen z.B. eine ausreichend gute Vit D- Versorgung, Selen,
              ...
              GlaxoSmithKline plc (LSE/NYSE: GSK) und CureVac N.V. (Nasdaq: CVAC) veröffentlichen heute eine neue Kooperation über 150 Millionen Euro, die auf ihrer bestehenden Zusammenarbeit aufbaut. Ziel der Kooperation ist die Entwicklung von mRNA-Impfstoffen der nächsten Generation, die das Potential eines multivalenten Ansatzes gegen potenziell aufkommenden Virusvarianten in einem Impfstoff mit sich bringt.
              Gestern, 14:47
            • ST747
              Antwort auf Besucher-Explosion am 10.4.2021
              hallo admin,
              ich bin bei alfahosting. da gibt es eine gute funktion.
              man kann sich die umfangreiche serverstatistik anschauen.
              da sieht man auch z.b. die bots.
              gerhard...
              Gestern, 13:38
            Lädt...
            X