WS 3.0 Footer Box

    Diese Seite verwendet Cookies. Durch die Nutzung unserer Seite erklären Sie sich damit einverstanden, dass wir Cookies setzen. Weitere Informationen

    • Ich muss auch nochmal "nerven". Hatte bisher immer 3 Boxen anzeigen lassen. Dafür hatte ich hier im Thema einen CSS Code erhalten, damit die Abstände zwischen den Boxen passen.

      Nun habe ich mir eine 4. Box dazugeholt und schon schaut das alles leicht verschoben aus... ?(

      Hier der Code, den ich aktuell nutze:

      CSS-Quellcode

      1. /* Footer-Boxen - Größe der Boxen anpassen */
      2. @include screen-lg { /*@media (min-width:1025px)*/
      3. .footerBoxRow1 {
      4. padding-left: 70px;
      5. }
      6. .footerbox2 h2, .footerbox3 h2 {
      7. padding-left: 35px;
      8. }
      9. .footerbox2 {
      10. padding-left: 30px;
      11. }
      12. .footerbox1 .box1Content {
      13. padding-right: 30px;
      14. padding-left: 30px;
      15. }
      16. .footerbox1 .boxContentHeader {
      17. padding-left: 30px
      18. }
      19. }
      20. @include screen-sm-md { /*@media (min-width: 545px) and (max-width:1024px)*/
      21. .footerBoxRow1 {
      22. padding-left: 20px;
      23. }
      24. .footerbox2 h2, .footerbox3 h2 {
      25. padding-left: 35px;
      26. }
      27. .footerbox2 {
      28. padding-left: 20px;
      29. }
      30. }
      Alles anzeigen

      Natürlich fehlt dort im Code die Box Nr. 4, aber ich weiß nicht, welche Werte ich anpassen müsste, damit es wieder alles gleichmäßig angezeigt wird.

      So sieht der Footer nun aus:


      PS: Den Code für die Unterstreichung der Überschriften nehme ich direkt mit auf. ;)

      EDIT: Hmmm, das mit den Überschriften sieht bei mir nun komisch aus - vielleicht wegen der Aufzählungen?

    • PoooMukkel schrieb:

      Natürlich fehlt dort im Code die Box Nr. 4, aber ich weiß nicht, welche Werte ich anpassen müsste, damit es wieder alles gleichmäßig angezeigt wird
      Was meinst mit gleichmäßig ?( Alle Boxen haben doch ein Breite von 25%!
      Vielleicht kommt dir das nur so vor weil die ersten drei Boxen links ausgerichtet sind und die letzte zentriert ;)

      PoooMukkel schrieb:

      EDIT: Hmmm, das mit den Überschriften sieht bei mir nun komisch aus - vielleicht wegen der Aufzählungen?
      Nein, wg. diesem Code:

      CSS-Quellcode

      1. .footerbox2 h2, .footerbox3 h2 {
      2. padding-left: 35px;
      3. }
      Wenn du ihn raus nimmst sitzt der Unterstrich auch direkt über der Überschrift ;)
      Mit freundlichen Grüßen

      Pacco

    • Pacco schrieb:

      Wenn du ihn raus nimmst sitzt der Unterstrich auch direkt über der Überschrift
      Tatsächlich. Habe den Code entfernt und nun passt der Unterstrich. :)

      Pacco schrieb:

      Vielleicht kommt dir das nur so vor weil die ersten drei Boxen links ausgerichtet sind und die letzte zentriert
      Das stimmt natürlich. Sieht aber trotzdem irgendwie nicht schön aus oder? Kann man da noch etwas machen? Wenn ich die Box Nr 4 nicht mehr zentriere, dann sieht das auch komisch aus... ?(

    • PoooMukkel schrieb:

      Wenn ich die Box Nr 4 nicht mehr zentriere, dann sieht das auch komisch aus...
      Das ist Ansichtssache ;) Komisch ist es für denjenigen der sich zu viel Gedanken darüber macht :D bzw. wenn es überhaupt jemand wahrnimmt :eyes:
      Es soll für dich stimmig sein ;)
      Du kannst die letzte Box auch nach links ausrichten, wenn es für dich besser passt

      CSS-Quellcode

      1. #pageFooter .footerbox4 .Image_1,
      2. #pageFooter .footerbox4 .boxFooterSocial {
      3. text-align: left;
      4. }
      Mit freundlichen Grüßen

      Pacco

    • PoooMukkel schrieb:

      Ok, dann verschiebe ich das Logo aber auch mit nach links... Kann ich die Social Icons nach links schieben und das Logo mittig über die Icons zentrieren?
      Yep, so ist es ;)
      Das Logo zentriert sich nur zu dem Boxeninhalt nicht zu den Social-icons. Das sieht auch nicht aus.
      Dann musst wieder mit padding-left arbeiten um das Logo über den Social-Icons zu zentrieren .

      CSS-Quellcode

      1. #pageFooter .footerbox4 .Image_1 {
      2. padding-left: 60px;
      3. }
      Mit freundlichen Grüßen

      Pacco

    • Perfekt. So nutze ich das jetzt. Das gefällt mir. :)
      Danke!

      Muss ich meinen restlichen Code für die Footerboxen nun auch in der Hinsicht aktualisieren, dass ich vor .footerbox nun noch #pageFooter hinzufüge?

      Aktuell sieht der Code nun so aus:

      CSS-Quellcode

      1. /* Footer-Boxen - Größe der Boxen anpassen */
      2. @include screen-lg { /*@media (min-width:1025px)*/
      3. .footerBoxRow1 {
      4. padding-left: 70px;
      5. }
      6. .footerbox2 {
      7. padding-left: 30px;
      8. }
      9. .footerbox1 .box1Content {
      10. padding-right: 40px;
      11. padding-left: 30px;
      12. }
      13. .footerbox1 .boxContentHeader {
      14. padding-left: 30px
      15. }
      16. #pageFooter .footerbox4 .Image_1,
      17. #pageFooter .footerbox4 .boxFooterSocial {
      18. text-align: left;
      19. }
      20. #pageFooter .footerbox4 .Image_1 {
      21. padding-left: 60px;
      22. }
      23. }
      24. @include screen-sm-md { /*@media (min-width: 545px) and (max-width:1024px)*/
      25. .footerBoxRow1 {
      26. padding-left: 20px;
      27. }
      28. .footerbox2 {
      29. padding-left: 20px;
      30. }
      31. }
      Alles anzeigen