marctrix: Die Höhe eines Header-Divs and den Text darin anpassen

Beitrag lesen

SELF-Forum

Die Höhe eines Header-Divs and den Text darin anpassen

marctrix Homepage des Autors
– Informationen zu den Bewertungsregeln

Hej HD,

Wie kann ich denn dafür sorgen, dass der "Eingeloggt als <username>"-Text schön zentriert wird bzw das <div>-Element, in dem er sich befindet schön daran anpasst.

Siehe Gunnars Kommentar.

Aber mit 90%er Wahrscheinlichkeit ist CSS Grid die Lösung Deines Problems.

Ein par Dinge fallen aber auch so schon auf:

include 'res/functions.php';

Da wird ja noch mehr geladen. Wir können nicht wissen, was das tut.

<html>

Hier fehlt die Sprachangabe.

  <head>

Hier fehlt die Angabe der Zeichenkodierung

        <meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=no">

Hier verhinderst du Menschen deine Seite zu lesen, denen die Schrift zu klein ist.

    <div id="main-outer">

Sicher überflüssig.

        <h1>Hier entsteht die Website von Daniel !</h1>
        <hr>

Niemals will man, dass eine Überschrift von dem, was sie überschreibt, abgetrennt ist.

Genau das aber macht eine hr!

Ob sich Suchmaschinen auf diesen Text stürzen werden?

        <div id="logonform">

Schon wieder ein div?

        <form name="logon" action="index.php" method="POST">

            <h2>Bitte loggen Sie sich ein!</h2>

Das ist eine Handlungsanweisung. Was soll die denn überschreiben?

            <ul>
              <li><label for="username">Username:</label><br>
              <input type="text" name="username" maxlength="16"></li>
              <li><label for="password">Password:</label><br>
              <input type="password" name="password" maxlength="16"></li>
              <li><input type="submit" name="submit" value="Log in!"></li>
            </ul>
        </form>
        <br>

Hier gibt es keine Text-Zeile, wozu also ein Zeilenende erzwingen?

      <div id="content">

Du weißt schon, dass divund formnicht die einzige Elemente sind, die es in HTML gibt? Und dass jedes für einen ganz bestimmten Zweck gedacht ist? Der sich zum Beispiel von Programmen ermittewln lässt, damit diese funktionieren…

        <!-- LOGOUT BAR -->

        <div id="memBar">
          <div id="logoutBar">

Noch mehr davon. Du brauchst dringend ein starkes Antidivotikum!

      <article name="" class="content">

Erst ein div id="content und jetzt ein article class="content - welche Überlegung steckt dahinter?

Hier das CSS:

Die Sternchen gehören hoffentlich nicht zum Code?

#main-outer { background-color: rgba(255, 255, 255, 0.76); position: absolute; width: 50%; height: 100%; margin: 0; left: 25%; top: 0px; text-align: center; overflow: initial; }

Hast du bei den Deklararationen eine Reihenfolge? Macht es später leichter, daran zu arbeiten.

Ein so weit außen leigendes Element absolut zu positionieren ist sehr mutig! - Bin gespannt, wie du das responsiv bekommst!

header { width: 100%;

gefährlich, hätte ich beim Standard auto belassen. Es sei denn, du kennst das CS-Box-Modell sehr gut und hast gute Gründe hier 100% zu verwenden.

Mein Tipp lass es. Mehr noch: gebe allen Elementen und CSS-generierten Inhalten ein box-sizing: border-box; mit. Das vereinfacht dein Leben!

[…] }

.field {

}

Wenn du input meinst, brauchst du diese Klasse nciht. Es gibt keine CSS-Klassen, nur HT;L-Klassen. Eine Klasse field macht wohl kaum Sinn.

#memBar { position: absolute; display: flex; }

Unwahrscheinlich, dass diese beiden Angaben gemeinsam Sinn machen.

#logoutBar { position: absolute; }

Schon wieder? — Bist du mit der Darstellung auf dem Smartphone zufrieden?

Ist die Seite verständlich, wenn das CSS fehlt?

@media only screen and (min-device-width : 320px) and (max-device-width : 568px) {

Welche Deiner Inhalte benötigen so eine Bildschirm-Breite? Sind Dir Desktop-Nutzer egal?

.headfont

Was ist denn ein headfont?

Danke im vorraus :)

Immerr wiederr gerrne! 😉

Marc

Grundlage für Zitat #2276.

Beitrag melden
–
Informationen zu den Bewertungsregeln