• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

Frage Ausrichtung Seitenelemente

PleinCiel

Neues Mitglied
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.

27401218uh.jpg
 
Werbung:
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
 
Dein Wunsch ist zwar nicht grade aussagekräftig beschrieben
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 bearbeitet von einem Moderator:
Werbung:
@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?
 
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
 
Werbung:
Code:
<!-- ################################ -->
<!-- ########## EXPERIENCE ########## -->
<!-- ################################ -->
<section class="o-section t-section ">

<div class="o-section__header-bg t-section__header"></div>
<div class="o-section__content-bg t-section__content"></div>

<div class="o-container">
<div class="o-section__container">

<header class="o-section__header t-section__header">
<div class="o-content">
<h2 class="o-section__heading">
Experience
</h2>
<div class="o-content__body o-section__description">
Yes. I&#39;ve been around.
</div>
</div>
</header><!-- /o-section__header -->

<div class="o-section__content t-section__content u-pb-0">
<div class="a-experience-timeline c-timeline t-border-color">

<div class="c-timeline__item">
<div class="c-timeline__point t-timeline__point t-primary-bg"></div>
<div class="o-content">
<div class="o-grid">
<div class="o-grid__col-md-5">
<div class="c-work__timeframe">
2015 &ndash; Present
</div>
<h3 class="c-work__heading">
Unicorn Incubator Inc.
</h3>
<h4 class="c-work__title">
Senior Interface Designer
</h4>
<div class="c-work__location">
Portland, OR
</div>
</div>
<div class="o-grid__col-md-7">
<p>
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.
</p>
</div>
</div><!-- /o-grid -->
</div><!-- /o-content -->
</div><!-- /c-timeline__item -->

<div class="c-timeline__item">
<div class="c-timeline__point t-timeline__point t-primary-bg"></div>
<div class="o-content">
<div class="o-grid">
<div class="o-grid__col-md-5">
<div class="c-work__timeframe">
2013 &ndash; 2015
</div>
<h3 class="c-work__heading">
California Design Bureau
</h3>
<h4 class="c-work__title">
Creative Director
</h4>
<div class="c-work__location">
Cupertino, CA
</div>
</div>
<div class="o-grid__col-md-7">
<p>
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.
</p>
</div>
</div><!-- /o-grid -->
</div><!-- /o-content -->
</div><!-- /c-timeline__item -->

<div class="c-timeline__item">
<div class="c-timeline__point t-timeline__point t-primary-bg"></div>
<div class="o-content">
<div class="o-grid">
<div class="o-grid__col-md-5">
<div class="c-work__timeframe">
2010 &ndash; 2013
</div>
<h3 class="c-work__heading">
Dreamland Creative
</h3>
<h4 class="c-work__title">
Front-end Designer
</h4>
<div class="c-work__location">
New York, NY
</div>
</div>
<div class="o-grid__col-md-7">
<p>
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.
</p>
</div>
</div><!-- /o-grid -->
</div><!-- /o-content -->
</div><!-- /c-timeline__item -->

</div><!-- /c-timeline -->

</div><!-- /o-section__content -->

</div><!-- /o-section__container -->
</div><!-- /o-container -->

</section><!-- /o-section -->

Die CSS ist leider zu groß
 
Werbung:
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?

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.
 
Werbung:
Allerdings geht es mir ums Prinzip dass ich "Fremdprodukte" nicht supporte.

Ach was solls, ich will mal nicht so sein.

Aus:
Code:
.c-timeline {
    border-left-width: 2px;
    border-left-style: solid;
    margin-left: calc(1rem - 2px);
    padding-left: 25px;
    position: relative;
}

Wird:
Code:
.c-timeline {
    border-right-width: 2px;
    border-right-style: solid;
    margin-right: calc(1rem - 2px);
    padding-right: 25px;
    position: relative;
}

Und statt:
Code:
.c-timeline__point {
    left: -31px;
}

Kommt:
Code:
.c-timeline__point {
    right: -31px;
}
 
Werbung:
Ach was solls, ich will mal nicht so sein.

Aus:
Code:
.c-timeline {
    border-left-width: 2px;
    border-left-style: solid;
    margin-left: calc(1rem - 2px);
    padding-left: 25px;
    position: relative;
}

Wird:
Code:
.c-timeline {
    border-right-width: 2px;
    border-right-style: solid;
    margin-right: calc(1rem - 2px);
    padding-right: 25px;
    position: relative;
}

Und statt:
Code:
.c-timeline__point {
    left: -31px;
}

Kommt:
Code:
.c-timeline__point {
    right: -31px;
}

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?
 
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?
Mach halt für die rechts vom Punkt ausgerichteten:
CSS:
.c-timeline.right {
    border-left-width: 2px;
    border-left-style: solid;
    margin-left: calc(1rem - 2px);
    padding-left: 25px;
    position: relative;
}
.c-timeline__point.right {
    left: -31px;
}
und für die links vom Punkt ausgerichteten:
CSS:
.c-timeline.left {
    border-right-width: 2px;
    border-right-style: solid;
    margin-right: calc(1rem - 2px);
    padding-right: 25px;
    position: relative;
}
.c-timeline__point.left {
    right: -31px;
}
Muss ich dann in der html index Datei noch was anpassen?
Ja, den jeweiligen Elementen noch die Klasse left oder right geben
 
Zurück
Oben