1. Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!
    Information ausblenden

Frage Ausrichtung Seitenelemente

Dieses Thema im Forum "HTML, XHTML & CSS" wurde erstellt von PleinCiel, 11 November 2016.

  1. PleinCiel

    PleinCiel Neues Mitglied

    Registriert seit:
    11 November 2016
    Beiträge:
    7
    Punkte für Erfolge:
    1
    Hey,

    ich wollte mal Fragen ob ich bei der Linie mit den Punkten nicht nur nach Rechts sondern auch nach Links kann damit das ganze immer abwechselnd ist.

    [​IMG]
     
    Werbung:

    Jetzt registrieren, damit diese Werbung verschwindet
  2. MrMurphy

    MrMurphy Senior HTML'ler

    Registriert seit:
    28 Juli 2009
    Beiträge:
    1.396
    Punkte für Erfolge:
    63
    Hallo

    Dein Wunsch ist zwar nicht grade aussagekräftig beschrieben und es fehlt jede Information, wie sich die Seite zum Beispiel auf Smartphones verhalten soll.

    Aus dem Bauch raus deshalb ein eindeutiges ja.

    Wobei ich davon ausgehe dass du HTML5 und CSS3 verwendest. Der Aufwand hängt dann von deinen genauen Wünschen ab.

    Gruss

    MrMurphy
     
  3. felixprogram

    felixprogram Guest

    Na ja; er will ja, dass ein Text rechts vom Punkt ist, der darunter links davon, dann der darunter wieder rechts davon, usw.

    @PleinCiel Womit Mr Murphy aber recht hat, ist, dass wir dir nur helfen können, wenn wir den Quellcode/ einen Link zu der Seite haben.

    Den Quellcode kannst du mithilfe des [CODE] [/CODE]-BB-Codes einfügen.
     
    Zuletzt von einem Moderator bearbeitet: 11 November 2016
  4. PleinCiel

    PleinCiel Neues Mitglied

    Registriert seit:
    11 November 2016
    Beiträge:
    7
    Punkte für Erfolge:
    1
    @felixprogram

    Du triffst den Nagel auf den Kopf...die Frage ist natürlich nun wie sich das ganze auf einem Smartphone oder Tablet verhält wenn das ganze skaliert.

    Reicht euch der Code vom entsprechenden Stück?
     
  5. Spicelab

    Spicelab Mod | ZENmechanic Team Moderator

    Registriert seit:
    27 November 2015
    Beiträge:
    1.669
    Punkte für Erfolge:
    83
    Als her damit (HTML + CSS) :)
     
  6. MrMurphy

    MrMurphy Senior HTML'ler

    Registriert seit:
    28 Juli 2009
    Beiträge:
    1.396
    Punkte für Erfolge:
    63
    Hallo

    Besser wäre ein Link zu der Seite. Ansonsten brauchen wir alle Informationen die notwendig sind um die Seite wie auf dem Bild anzuzeigen. Also HTML-Quelltext, CSS und Bilder, falls welche verwendet werden.

    Gruss

    MrMurphy
     
  7. scbawik

    scbawik Senior HTML'ler

    Registriert seit:
    14 Juli 2011
    Beiträge:
    2.308
    Punkte für Erfolge:
    83
    Spicelab gefällt das.
  8. PleinCiel

    PleinCiel Neues Mitglied

    Registriert seit:
    11 November 2016
    Beiträge:
    7
    Punkte für Erfolge:
    1
    Code (text):
    1.  
    2. <!-- ################################ -->
    3. <!-- ########## EXPERIENCE ########## -->
    4. <!-- ################################ -->
    5. <section class="o-section t-section ">
    6.  
    7. <div class="o-section__header-bg t-section__header"></div>
    8. <div class="o-section__content-bg t-section__content"></div>
    9.  
    10. <div class="o-container">
    11. <div class="o-section__container">
    12.  
    13. <header class="o-section__header t-section__header">
    14. <div class="o-content">
    15. <h2 class="o-section__heading">
    16. Experience
    17. </h2>
    18. <div class="o-content__body o-section__description">
    19. Yes. I&#39;ve been around.
    20. </div>
    21. </div>
    22. </header><!-- /o-section__header -->
    23.  
    24. <div class="o-section__content t-section__content u-pb-0">
    25. <div class="a-experience-timeline c-timeline t-border-color">
    26.  
    27. <div class="c-timeline__item">
    28. <div class="c-timeline__point t-timeline__point t-primary-bg"></div>
    29. <div class="o-content">
    30. <div class="o-grid">
    31. <div class="o-grid__col-md-5">
    32. <div class="c-work__timeframe">
    33. 2015 &ndash; Present
    34. </div>
    35. <h3 class="c-work__heading">
    36. Unicorn Incubator Inc.
    37. </h3>
    38. <h4 class="c-work__title">
    39. Senior Interface Designer
    40. </h4>
    41. <div class="c-work__location">
    42. Portland, OR
    43. </div>
    44. </div>
    45. <div class="o-grid__col-md-7">
    46. <p>
    47. Consectetuer adipiscing elit. Phasellus hendrerit. Pellentesque aaliquet nibh nec urna. In nisi neque, aliquet vel, dapibus id, mattis vel, nisi. Sed pretium, ligula sollicitudin laoreet viverra, tortor libero sodales leo, eget blandit nunc tortor eu nibh. Nullam mollis. Ut justo. Suspendisse potenti.
    48. </p>
    49. </div>
    50. </div><!-- /o-grid -->
    51. </div><!-- /o-content -->
    52. </div><!-- /c-timeline__item -->
    53.  
    54. <div class="c-timeline__item">
    55. <div class="c-timeline__point t-timeline__point t-primary-bg"></div>
    56. <div class="o-content">
    57. <div class="o-grid">
    58. <div class="o-grid__col-md-5">
    59. <div class="c-work__timeframe">
    60. 2013 &ndash; 2015
    61. </div>
    62. <h3 class="c-work__heading">
    63. California Design Bureau
    64. </h3>
    65. <h4 class="c-work__title">
    66. Creative Director
    67. </h4>
    68. <div class="c-work__location">
    69. Cupertino, CA
    70. </div>
    71. </div>
    72. <div class="o-grid__col-md-7">
    73. <p>
    74. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Phasellus hendrerit. Pellentesque aaliquet nibh nec urna. In nisi neque, aliquet vel, dapibus id, mattis vel, nisi. Sed pretium, ligula sollicitudin laoreet viverra, tortor libero sodales leo, eget blandit nunc tortor eu nibh. Nullam mollis.
    75. </p>
    76. </div>
    77. </div><!-- /o-grid -->
    78. </div><!-- /o-content -->
    79. </div><!-- /c-timeline__item -->
    80.  
    81. <div class="c-timeline__item">
    82. <div class="c-timeline__point t-timeline__point t-primary-bg"></div>
    83. <div class="o-content">
    84. <div class="o-grid">
    85. <div class="o-grid__col-md-5">
    86. <div class="c-work__timeframe">
    87. 2010 &ndash; 2013
    88. </div>
    89. <h3 class="c-work__heading">
    90. Dreamland Creative
    91. </h3>
    92. <h4 class="c-work__title">
    93. Front-end Designer
    94. </h4>
    95. <div class="c-work__location">
    96. New York, NY
    97. </div>
    98. </div>
    99. <div class="o-grid__col-md-7">
    100. <p>
    101. Fusce lacinia arcu et nulla. Nulla vitae mauris non felis mollis faucibus. Phasellus hendrerit. Pellentesque aaliquet nibh nec urna. In nisi neque, aliquet vel, dapibus id, mattis vel, nisi. Sed pretium, ligula sollicitudin laoreet viverra, tortor libero sodales leo, eget blandit nunc tortor eu nibh.
    102. </p>
    103. </div>
    104. </div><!-- /o-grid -->
    105. </div><!-- /o-content -->
    106. </div><!-- /c-timeline__item -->
    107.  
    108. </div><!-- /c-timeline -->
    109.  
    110. </div><!-- /o-section__content -->
    111.  
    112. </div><!-- /o-section__container -->
    113. </div><!-- /o-container -->
    114.  
    115. </section><!-- /o-section -->
    116.  
    Die CSS ist leider zu groß
     
  9. PleinCiel

    PleinCiel Neues Mitglied

    Registriert seit:
    11 November 2016
    Beiträge:
    7
    Punkte für Erfolge:
    1
    Hm kann mir nun jemand helfen dabei?
     
  10. Tronjer

    Tronjer Moderator Team Moderator

    Registriert seit:
    8 Oktober 2010
    Beiträge:
    4.871
    Punkte für Erfolge:
    83
    Im Zweifelsfall die Jobbörse.
     
  11. felixprogram

    felixprogram Guest

    Hmm, das Problem, das sich mir leider stellt, ist, dass wir den CSS-Code nicht wissen. Könntest du den vielleicht als Anhang anhängen, wenn der zu groß ist/ irgendwo extern hochladen und uns den Link dazu schicken?
     
  12. scbawik

    scbawik Senior HTML'ler

    Registriert seit:
    14 Juli 2011
    Beiträge:
    2.308
    Punkte für Erfolge:
    83
    Habe oben bereits den Link gepostet.
    Das Theme ist sehr sauber aufgebaut und die gewünschten Änderungen lassen sich mit wenigen Handgriffen umsetzen. Allerdings geht es mir ums Prinzip dass ich "Fremdprodukte" nicht supporte.
     
    Spicelab gefällt das.
  13. PleinCiel

    PleinCiel Neues Mitglied

    Registriert seit:
    11 November 2016
    Beiträge:
    7
    Punkte für Erfolge:
    1
  14. PleinCiel

    PleinCiel Neues Mitglied

    Registriert seit:
    11 November 2016
    Beiträge:
    7
    Punkte für Erfolge:
    1
    Hat jemand eine Idee...wäre echt super
     
  15. scbawik

    scbawik Senior HTML'ler

    Registriert seit:
    14 Juli 2011
    Beiträge:
    2.308
    Punkte für Erfolge:
    83
    Ach was solls, ich will mal nicht so sein.

    Aus:
    Code (text):
    1. .c-timeline {
    2.     border-left-width: 2px;
    3.     border-left-style: solid;
    4.     margin-left: calc(1rem - 2px);
    5.     padding-left: 25px;
    6.     position: relative;
    7. }
    Wird:
    Code (text):
    1. .c-timeline {
    2.     border-right-width: 2px;
    3.     border-right-style: solid;
    4.     margin-right: calc(1rem - 2px);
    5.     padding-right: 25px;
    6.     position: relative;
    7. }
    Und statt:
    Code (text):
    1. .c-timeline__point {
    2.     left: -31px;
    3. }
    Kommt:
    Code (text):
    1. .c-timeline__point {
    2.     right: -31px;
    3. }
     
  16. PleinCiel

    PleinCiel Neues Mitglied

    Registriert seit:
    11 November 2016
    Beiträge:
    7
    Punkte für Erfolge:
    1
    Hey vielen lieben Dank für deine Antwort. Muss ich dann in der html index Datei noch was anpassen? Weil wenn ich das So in der CSS andere richten sich doch alle nach links aus oder?
     
  17. felixprogram

    felixprogram Guest

    Mach halt für die rechts vom Punkt ausgerichteten:
    Code (CSS):
    1. .c-timeline.right {
    2.     border-left-width: 2px;
    3.     border-left-style: solid;
    4.     margin-left: calc(1rem - 2px);
    5.     padding-left: 25px;
    6.     position: relative;
    7. }
    8. .c-timeline__point.right {
    9.     left: -31px;
    10. }
    11.  
    und für die links vom Punkt ausgerichteten:
    Code (CSS):
    1. .c-timeline.left {
    2.     border-right-width: 2px;
    3.     border-right-style: solid;
    4.     margin-right: calc(1rem - 2px);
    5.     padding-right: 25px;
    6.     position: relative;
    7. }
    8. .c-timeline__point.left {
    9.     right: -31px;
    10. }
    11.  
    Ja, den jeweiligen Elementen noch die Klasse left oder right geben