Text zentrieren

TakeOnMii · 1. Januar 2021

Hallo,

ich bin gerade dabei meine Website responsive zu machen, jedoch bekomme ich einen Text nicht zentriert und vertikalen text nicht an beide Ränder. Alle sind oben links in der Ecke.

Da ich aber erst am Anfang vom Programmieren generell bin habe ich auch keine Ahnung, was sonst noch machen könnte.

HTML: Index.html

<div class="Home">
            <a href="Index.html"><h1><center>HOME</center></h1></a></div>
    <div class="About">
            <a href="About.html"><h1><center>ABOUT</center></h1></a></div>

    <div class="Contact">
            <a href="Contact.html"><h1><center>CONTACT</center></h1></a></div>

CSS: Stylesheet

.Home {
    display: flex;
    align-self: center;
    align-content: center;
    z-index: 3;
    justify-content: center;
    align-items: center;
    position: fixed;
}
    
.About{
    display: flex;
    transform: rotate(90deg);
    z-index: 3;
    float: left;
    position: fixed;
}

.Contact{
    display: flex;
    transform:rotate(-90deg);
    z-index: 3;
    float: right;
    position: fixed;
}

Alles anzeigen

Wie es oben links in der Ecke aussieht:

[Blockierte Grafik: https://prnt.sc/we0725]

Danke schonmal an alle die helfen.

Sempervivum · 1. Januar 2021

Guten Morgen TakeOnMii, ein frohes neues Jahr und willkommen im Forum!

Da geht ja einiges durcheinander:

<center> ist veraltet und sollte nicht mehr verwendet werden.

float ist für diesen Zweck ebenfalls veraltet und die Kombination mit Flex macht keinen Sinn.

Mit flex bist Du dagegen auf dem richtigen Weg, um das Element in beiden Richtungen zu zentrieren.

Um es vertikal zu zentrieren ist freier Raum nötig, daher habe ich zur Demonstration die Höhe auf 100vh gesetzt.

So funktioniert es dann:

HTML

<!doctype html>
<html>

<head>
    <title>
        Test centered alignment
    </title>
    <style>
        .About {
            height: 100vh;
            display: flex;
            /* transform: translateY(-50%); */
            text-outline: 20% 20% #6f6f6f;
            z-index: 3;
            transform: rotate(90deg);
            text-align: center;
            /* bottom: 50%; */
            /* float: left; */
            margin: auto;
            flex-direction: row;
            align-items: center;
            justify-content: center;
        }
    </style>
</head>

<body>
    <h1 class="About">
        <a href="About.html" data-transition="flow">
            ABOUT
        </a>
    </h1>
</body>

</html>

Alles anzeigen

TakeOnMii · 1. Januar 2021

Frohes neues auch von mir und danke für die Hilfe.

Nur leider ist es auch horizontal zentriert und mit justify-content: flex-end; bewegt es sich fast gar nicht. Zudem folgt es auch nicht position: fixed; dabei ist es oben links im Eck.

Sempervivum · 1. Januar 2021

Wenn ich das richtig verstehe oder errate, willst Du "Home" in der Mitte und die anderen beiden links und rechts?

Versuche, ob dies das ist, was Du dir vorstellst:

HTML

<!doctype html>
<html>

<head>
    <title>
        Test centered alignment
    </title>
    <style>
        .Home {
            display: flex;
            align-self: center;
            align-content: center;
            z-index: 3;
            justify-content: center;
            align-items: center;
            position: fixed;
            top: 0;
            left: 50%;
            transform: translateX(-50%);
        }

        .About {
            display: flex;
            transform: rotate(90deg);
            z-index: 3;
            position: fixed;
            left: 0;
            top: 5em;
        }

        .Contact {
            display: flex;
            transform: rotate(-90deg);
            z-index: 3;
            position: fixed;
            right: 0;
            top: 5em;
        }
    </style>
</head>

<body>
    <div class="About">
        <a href="About.html">
            <h1>
                <center>ABOUT</center>
            </h1>
        </a>
    </div>
    <div class="Home">
        <a href="Index.html">
            <h1>
                <center>HOME</center>
            </h1>
        </a>
    </div>
    <div class="Contact">
        <a href="Contact.html">
            <h1>
                <center>CONTACT</center>
            </h1>
        </a>
    </div>
</body>

</html>

Alles anzeigen

TakeOnMii · 1. Januar 2021

Ja du hattest das richtig verstanden und danke nochmal das du auch aktiv mithilfst.

Nur leider hat das jetzt meine ganze Seite umdesigned. Ich hatte da vorher einen Zeitstrahl mit HTML, CSS und JS aber jetzt existiert nur noch der Text und die Videos von dem Zeitstrahl.

Sempervivum · 1. Januar 2021

Da kommt sich dann wohl irgend etwas ins Gehege. Um das korrigieren zu können, müsste man jetzt die ganze Seite im Zusammenhang sehen. Wenn Du sie online hast, dann poste die URL.

TakeOnMii · 1. Januar 2021

Ich habe die Seite zwar noch nicht Online, aber ich kann dir den Code eben schicken:

HTML: Work.html

<!doctype html>
<html lang="de">
<head>
    <link rel="stylesheet" href="Work.css">
    <script language="javascript" type="text/javascript" src="Zeitstrahl.js"></script>
<meta charset="utf-8">
<title>Work | Florian</title>
</head>
<body>
    
    <!--Links-->
    
    <div class="About">
        <a href="About.html">
            <h1>
                <center>ABOUT</center>
            </h1>
        </a>
    </div>
    <div class="Home">
        <a href="Index.html">
            <h1>
                <center>HOME</center>
            </h1>
        </a>
    </div>
    <div class="Contact">
        <a href="Contact.html">
            <h1>
                <center>CONTACT</center>
            </h1>
        </a>
    </div>
    
    <!--Timeline-->
    <div class="timeline-container" id="timeline-1">
  <div class="timeline-header">
    <h2 class="timeline-header__title">Meine Projekte</h2>
    <h3 class="timeline-header__subtitle"><a href="Work2.html">Alt &rarr; Neu</a></h3>
  </div>
    </div>
      <div class="timeline-item" data-text="Wie gründe ich eine Partei? | April 2020">
      <div class="timeline__content"><video class="timeline__img" src="Work/Videos/Wie gründe ich eine Partei.mp4" controls></video>
        <p class="timeline__content-desc">Meine erste Animation die ich gemacht habe. Zum Thema wie man in Deutschland eine Partei gründet.</p>
        </div>
    </div>
    <div class="timeline-item" data-text="E-Autos, die Zukunft? | März 2020">
      <div class="timeline__content"><video class="timeline__img" src="Work/Videos/E-Autos, die Zukunft.mp4" controls></video>
        <p class="timeline__content-desc">In meinem 2. Animierten Video informiere ich über das Thema E-Mobilität, was an ihr gut und schlecht ist. Die Recherche, das Skript, die Grafiken und das Video wurden wurde von mir gemacht.</p>
      </div>
    </div>
    <div class="timeline-item" data-text="At the Jobcentre | Oktober 2020">
      <div class="timeline__content"><video class="timeline__img" src="Work/Videos/at the jobcentre_final_farbig_gt20d_jan_kamischke_florian_tuens.mp4" controls></video>
        <p class="timeline__content-desc">Es ist nicht nur die erste Animation die ich in After Effects gemacht habe, sondern auch das erste mal das ich was in Blender modelliert habe. Die beiden Figuren wurden von einem Freund gemacht.</p>
        </div>
    </div>
    <div class="timeline-item" data-text="Website Start animation | Dezember 2020">
      <div class="timeline__content"><video class="timeline__img" src="Ohne Schrift.mp4" controls></video>
        <p class="timeline__content-desc">Die 4. Animation die ich gemacht habe ist zugleich die Animation auf der Startseite. Das ist die Erste Körper Animation. Die Körperanimation wurde mit dem AE Plugin Duik V2 gemacht.</p>
        </div>
    </div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
 <script>
    
    (function($) {
  $.fn.timeline = function() {
    var selectors = {
      id: $(this),
      item: $(this).find(".timeline-item"),
      activeClass: "timeline-item--active",
      img: ".timeline__img"
    };
    selectors.item.eq(0).addClass(selectors.activeClass);
    selectors.id.css(
      "background-image",
      "url(" +
        selectors.item
          .first()
          .find(selectors.img)
          .attr("src") +
        ")"
    );
    var itemLength = selectors.item.length;
    $(window).scroll(function() {
      var max, min;
      var pos = $(this).scrollTop();
      selectors.item.each(function(i) {
        min = $(this).offset().top;
        max = $(this).height() + $(this).offset().top;
        var that = $(this);
        if (i == itemLength - 2 && pos > min + $(this).height() / 2) {
          selectors.item.removeClass(selectors.activeClass);
          selectors.id.css(
            "background-image",
            "url(" +
              selectors.item
                .last()
                .find(selectors.img)
                .attr("src") +
              ")"
          );
          selectors.item.last().addClass(selectors.activeClass);
        } else if (pos <= max - 40 && pos >= min) {
          selectors.id.css(
            "background-image",
            "url(" +
              $(this)
                .find(selectors.img)
                .attr("src") +
              ")"
          );
          selectors.item.removeClass(selectors.activeClass);
          $(this).addClass(selectors.activeClass);
        }
      });
    });
  };
})(jQuery);

$("#timeline-1").timeline();

    </script>
      </div></div></body>
</html>

Alles anzeigen

CSS: Work.css

@charset "utf-8";
/* CSS Document */
    a:link {
    color: #FFFFFF;
    text-decoration: none;
}
a:visited {
    text-decoration: none;
    color: #FFFFFF;
}
a:hover {
    text-decoration: none;
    color: #FFFFFF;
}
a:active {
    text-decoration: none;
    color: #FFFFFF;
}

body {
    margin: 0;
    padding: 0;
    line-height: 1.5;
    background: #03FFEA;
    overflow-x: hidden;
}

h1 {
 font-color: #6f6f6f;
    font-size: 300%;
    z-index: 2;
color: white;
}
 .Home {    
             flex-direction: row;
            display: flex;
            align-self: center;
            align-content: center;
            z-index: 3;
            justify-content: center;
            align-items: center;
            position: fixed;
            top: 0;
            left: 50%;
            transform: translateX(-50%);
             text-align: center;
        }
        .About {
            flex-direction: row;
            display: flex;
            transform: rotate(90deg);
            z-index: 3;
            position: fixed;
            left: 0;
            top: 5em;
            text-align: center;
        }
        .Contact {
            flex-direction: row;
            display: flex;
            transform: rotate(-90deg);
            z-index: 3;
            position: fixed;
            right: 0;
            top: 5em;
            text-align: center;

/*Zeitleiste CREDIT: https://www.youtube.com/watch?v=GrQ7IVQZtgs */

*,
*::before,
*::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font: normal 16px/1.5 "Helvetica Neue", sans-serif;
  color: #fff;
  overflow-x: hidden;
  padding-bottom: 50px;
}  /* INTRO SECTION
–––––––––––––––––––––––––––––––––––––––––––––––––– */

.intro {
  padding: 100px 0;
}

.container {
  width: 90%;
  max-width: 1200px;
  margin: 0 auto;
  text-align: center;
}

h1 {
  font-size: 2.5rem;
}


/* TIMELINE
–––––––––––––––––––––––––––––––––––––––––––––––––– */

*{
            margin: 0;
            padding: 0;
        }
.timeline {
  display: flex;
  margin: 0 auto;
  flex-wrap: wrap;
  flex-direction: column;
  max-width: 700px;
  position: relative;
}
.timeline__content-title {
  font-weight: normal;
  font-size: 66px;
  margin: -10px 0 0 0;
  transition: 0.4s;
  padding: 0 10px;
  box-sizing: border-box;
  font-family: 'Oswald', sans-serif;
  color: #fff;
}
.timeline__content-desc {
z-index: 5;
  margin: 0;
  font-size: 20px;
  box-sizing: border-box;
  color: rgba(255, 255, 255, 1);
  font-family: Segoe, "Segoe UI", "DejaVu Sans", "Trebuchet MS", Verdana, "sans-serif";
  font-weight: normal;
  line-height: 25px;
}
.timeline:before {
  position: absolute;
  left: 50%;
  width: 2px;
  height: 100%;
  margin-left: -1px;
  content: "";
  background: rgba(255,255,255,0.80);
}
@media only screen and (max-width: 767px) {
  .timeline:before {
    left: 40px;
  }
}
.timeline-item {
  padding: 40px 0;
  opacity: 0.3;
  filter: blur(2px);
  transition: 0.5s;
  box-sizing: border-box;
  width: calc(50% - 40px);
  display: flex;
  position: relative;
  transform: translateY(-80px);
}
.timeline-item:before {
  content: attr(data-text);
  letter-spacing: 3px;
  width: 100%;
  position: absolute;
  color: rgba(255, 255, 255, 1);
    font-weight: bold;
  font-size: 16px;
  font-family: 'Pathway Gothic One', sans-serif;
  border-left: 2px solid rgba(255, 255, 255, .5);
  top: 70%;
  margin-top: -5px;
  padding-left: 15px;
  opacity: 0;
  right: calc(-100% - 56px);
}
.timeline-item:nth-child(even) {
  align-self: flex-end;
}
.timeline-item:nth-child(even):before {
  right: auto;
  text-align: right;
  left: calc(-100% - 56px);
  padding-left: 0;
  border-left: none;
  border-right: 2px solid rgba(255, 255, 255, .5);
  padding-right: 15px;
}
.timeline-item--active {
  opacity: 1;
  transform: translateY(0);
  filter: blur(0px);
}
.timeline-item--active:before {
  top: 50%;
  transition: 0.3s all 0.2s;
  opacity: 1;
}
.timeline-item--active .timeline__content-title {
  margin: -50px 0 20px 0;
}
@media only screen and (max-width: 767px) {
  .timeline-item {
    align-self: baseline !important;
    width: 100%;
    padding: 0 30px 150px 80px;
  }
  .timeline-item:before {
    left: 10px !important;
    padding: 0 !important;
    top: 50px;
    text-align: center !important;
    width: 60px;
    border: none !important;
  }
  .timeline-item:last-child {
    padding-bottom: 40px;
  }
}
.timeline__img {
  max-width: 100%;
  box-shadow: 0 10px 15px rgba(0, 0, 0, .4);
}
.timeline-container {
  width: 100%;
  position: relative;
  padding: 80px 0;
  transition: 0.3s ease 0s;
  background-attachment: fixed;
  background-size: cover;
}
.timeline-container:before {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  content: "";
}
.timeline-header {
  width: 100%;
  text-align: center;
  margin-bottom: 80px;
  position: relative;
}
.timeline-header__title {
  color: #ffff;
  font-size: 58px;
  font-family: Segoe, "Segoe UI", "DejaVu Sans", "Trebuchet MS", Verdana, "sans-serif";
  font-weight: bold;
  margin: 0;
}
.timeline-header__subtitle {
  color: rgba(255, 255, 255, 1);
  font-family: Segoe, "Segoe UI", "DejaVu Sans", "Trebuchet MS", Verdana, "sans-serif";
  font-size: 20px;
  letter-spacing: 5%;
  margin: 10px 0 0 0;
  font-weight: normal;
}

Alles anzeigen

Sempervivum · 1. Januar 2021

Da fehlt die schließende geschweifte Klammer bei .Contact:

Code

.Contact {
    flex-direction: row;
    display: flex;
    transform: rotate(-90deg);
    z-index: 3;
    position: fixed;
    right: 0;
    top: 5em;
    text-align: center;
} /* <-- fehlte */

TakeOnMii · 1. Januar 2021

Nur so ein kleiner Fehler und fast alles bricht zusammen.

Naja danke dir und wie mach ich die an der Seite wieder zentriert?

Sorry das ich dich so Durchlöcher mit Fragen.

Sempervivum · 1. Januar 2021

Zitat

Sorry das ich dich so Durchlöcher mit Fragen.

Kein Problem, dafür ist das Forum ja da.

Zitat

wie mach ich die an der Seite wieder zentriert?

Ein Möglichkeit ist, margin: 0 auto; zu verwenden:

Code

.timeline-item {
    margin: 0 auto;
}

Oder mit Flexlayout.

TakeOnMii · 1. Januar 2021

Also ich meinte den Contact und About Text

Sempervivum · 1. Januar 2021

Die sehen mit meiner Testdatei so aus:

html-seminar.de/woltlab/attachment/2779/

Ich dachte, so wolltest Du es haben? Wenn nicht, dann beschreibe wie es aussehen soll.

TakeOnMii · 1. Januar 2021

Ich wollte, dass das ABOUT und CONTACT Vertikal Mittig sind.

Sempervivum · 1. Januar 2021

Auch kein Problem:

Code

.Contact {
    flex-direction: row;
    display: flex;
    transform: rotate(-90deg) translateY(-50%);
    z-index: 3;
    position: fixed;
    right: 0;
    top: 50vh;
    text-align: center;
}

Ebenso für ABOUT.

TakeOnMii · 1. Januar 2021

Danke hast mir echt geholfen

Sempervivum · 1. Januar 2021

Gern geschehen, sieht jetzt alles so aus, wie Du es die vorgestellt hast?

TakeOnMii · 1. Januar 2021

Ja

tk1234 · 1. Januar 2021

Zitat von TakeOnMii

Ich habe die Seite zwar noch nicht Online, aber ich kann dir den Code eben schicken:

Ich weiß dass dein Problem (zumindest anscheinend) bereits gelöst ist, aber trotzdem: Bevor du die Seite mit CSS entsprechend formatierst, solltest du erstmal die Fehler im HTML beseitigen: der Code enthält 12 Fehler und 2 Warnungen. Auch Semantisch ist der Code eine Katastrophe und eine einzige div-Suppe: verwende semantisch passende Elemente mit dem du dem Client auch mitteilst was da steht. Die Links zum Beispiel wären gerne eine Liste (<ul>) in einem nav-Element - der Kommentar "Links" ist dann auch überflüssig da das Element selbsterklärend ist. Jeder Link ist dann in einem <li> wobei <h1> und <center> ersatzlos entfallen (vergiss dass es <center> überhaupt mal gab und <h1> ist für die Hauptüberschrift der Seite, nicht für die Navigationslinks).

Übrigens: eine CSS-Eigenschaft "font-color" gibt es nicht.

TakeOnMii · 1. Januar 2021

Sorry für die späte Antwort, aber bei mir in Visual Studio Code zeigt der mir keine Fehler an.

tk1234 · 1. Januar 2021

Zitat von TakeOnMii

Sorry für die späte Antwort, aber bei mir in Visual Studio Code zeigt der mir keine Fehler an.

den Fehler mit font-color zeigt VS Code an, die Fehler im HTML nicht da der Code (standardmäßig) nicht validiert wird, nur das <center> wäre anhand der anderen Farbe als falsch erkennbar (wobei der farbliche Unterschied etwas gering ist). Semantisch falsche Elemente kann VS Code (und auch der Validator) nicht erkennen, woher sollen die beiden wissen was da genau geschrieben wurde?

Was mir gerade noch auffällt: warum schreibst du statt → nicht den Pfeil direkt in den Code? Mit UTF-8 ist das kein Problem …

Text zentrieren

Jetzt mitmachen!

Teilen

Tags