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

SELF-Forum

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

HD (Versionen)
– Informationen zu den Bewertungsregeln

Hi!

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.

<!DOCTYPE HTML>

<?php

session_start();

include 'res/functions.php';

error_reporting(E_ALL ^  E_NOTICE); 

$isntactive = '';

$submyt = $_POST['submit'];

if(isset($submyt)) {

$uzernm = strip_tags($_POST['username']);


$connect = new PDO('*ausgeblendet*');

/* HIER BEREITE ICH DIE QUERIES VOR! */

$fetch = $connect->prepare("SELECT * FROM usertablex WHERE usern=:uzernm");
/* QUERIES WERDEN AUSGEFÜHRT */

$fetch->execute(array(":uzernm"=>$uzernm));
$row = $fetch->fetch(PDO::FETCH_ASSOC);
 
$pwentered = md5(strip_tags($_POST['password']));
$pwindbase = $row['passw'];
$prfid = $row['id'];

if($pwentered==$pwindbase) {

$isactive = $row['active'];

if($isactive == 1) {

$ipfetch = $_SERVER['REMOTE_ADDR'];
$updateip = $connect->prepare("UPDATE usertablex SET ipaddr=:ipaddr WHERE usern=:uzernm");
$updateip->execute(array(":uzernm"=>$uzernm, ":ipaddr"=>$ipfetch));
$_SESSION['uname'] = $uzernm;

} else {

$isntactive = 'Ihr Konto ist noch nicht aktiv! Bitte überprüfen Sie Ihr E-Mail-Postfach!';

}

} else {

  echo 'FEHLSCHLAG!';

}

}

?>

<html>
      <head>
            <title>Daniel Haider</title>
            <link rel="stylesheet" type="text/css" href="css/main.css"/>
            <meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=no">
      </head>

      <body>
        <div id="main-outer">
        <?php

            if(!$_SESSION['uname']) {

        ?> 
            <h1>Hier entsteht die Website von Daniel !</h1>
            <hr>
            <div id="logonform">
              <?php echo $isntactive; ?>
            <form name="logon" action="index.php" method="POST">
                
                <h2>Bitte loggen Sie sich ein!</h2>
                <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>
            <a href="res/md5gen.php">MD5 Converter</a><br>
            <a href="register/">Registrieren?</a>
            </div>
  
            <?php

            } else {
            
            ?>

          <div id="content">
            <!-- LOGOUT BAR -->

            <div id="memBar">
              <div id="logoutBar">
                <p class="logouttext">
            <?php
              echo 'Eingeloggt als <a href="profile.php?proid='.$prfid.'" target="_blank">' .$_SESSION['uname'].'</a> ! <a href="logout.php">Ausloggen?</a>';
              //var_dump($prfid);
            ?>
                </p>
              </div>
            </div>
          <article name="" class="content">

          </article>
          </div>
          
            <!-- END OF LOGOUT BAR -->

            <?php

            }


          ?>
        </div>
      </body>
</html>

Hier das CSS:

**************
body {
  background-color: blue;
}

#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;
}

header {
  width: 100%;
  background-color: green;
  border-top: 1px solid black;
  border-bottom: 1px solid black;
  margin: 0;
  text-align: center;
}

ul {
  margin: auto 0 auto 0;
  padding: 0;
}

li {
  list-style-type: none;
  margin: 0;
  padding: 0;
  list-style-position: outside;
  text-align: center;
}

.field {

}

#memBar {

  position: absolute;
  top: 0px;
  width: 100%;
  margin: 0;
  padding: 0;
  border-bottom: 1px solid black;
  height: 5%;
  display: flex;
  justify-content: space-between;
  align-items: center;

}

#logoutBar {
  
  position: absolute;
  margin: 0;
  padding: 0;
  right: 0px;
  height: 100%;
  display: inline;

}

.logouttext {

  margin: 0;
  padding: 0;

}

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

body {
  background-size: auto;
}

#main-outer {

  text-align: center;
  left: 0px;
  width: 100%;
  margin: 0;
  padding: 0;

}

.headfont {
  display: inline-block;
  font-size: 3em;
}

}
–-—-—-—-—-—-

Danke im vorraus :)

Beitrag melden
–
Informationen zu den Bewertungsregeln

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

    Gunnar Bittersmann Homepage des Autors
    – Informationen zu den Bewertungsregeln

    @@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.

    Ein Online-Beispiel würde helfen. Serverseitiger Code hilft bei einem clientseitigen Problem nicht.

    LLAP 🖖

    --
    “When UX doesn’t consider all users, shouldn’t it be known as ‘Some User Experience’ or... SUX? #a11y” —Billy Gregory
    Beitrag melden
    –
    Informationen zu den Bewertungsregeln

  2. 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

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

      Gunnar Bittersmann Homepage des Autors
      +1 Informationen zu den Bewertungsregeln

      @@marctrix

      <html>

      Hier fehlt die Sprachangabe.

      Warum man Sprachattribute verwenden sollte

            <head>

      Hier fehlt die Angabe der Zeichenkodierung

      Angabe der Zeichencodierung in HTML

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

      Also weg mit user-scalable=no!

      Und

      head { display: block }
head * { display: none }

meta[content*="user-scalable=no"]
{
	display: block;
	height: 4em;
	margin-bottom: 1em;
	background: red;
	ERROR: 'user-scalable=no set';
}

      ins Stylesheet! 😏

                  <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!

      Ich übersetze das mal: <hr> weg, Linie mit CSS: border-bottom.

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

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

      Ich übersetze das mal: <h2> weg, stattdessen <p>, Schriftstil mit CSS: font-size, font-weight.

                  </form>
            <br>

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

      Ich übersetze das mal: <br> weg, Abstand mit CSS: margin-bottom.

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

      Noch mehr davon. Du brauchst dringend ein starkes Antidivotikum!

      🤣 ROFL.

      LLAP 🖖

      --
      “When UX doesn’t consider all users, shouldn’t it be known as ‘Some User Experience’ or... SUX? #a11y” —Billy Gregory
      Beitrag melden
      +1
      Informationen zu den Bewertungsregeln

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

        marctrix Homepage des Autors
        – Informationen zu den Bewertungsregeln

        Hej Gunnar,

        Danke!

        Marc

        Beitrag melden
        –
        Informationen zu den Bewertungsregeln

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

        Gunnar Bittersmann Homepage des Autors
        +1 Informationen zu den Bewertungsregeln

        @@Gunnar Bittersmann

        Also weg mit user-scalable=no!

        Und

        head { display: block }
head * { display: none }

meta[content*="user-scalable=no"]
{
	display: block;
	height: 4em;
	margin-bottom: 1em;
	background: red;
	ERROR: 'user-scalable=no set';
}

        ins Stylesheet! 😏

        TIL: Es gibt noch andere schlechte Werte. Ich hab den Selektor mal etwas ergänzt:

        meta[content*="user-scalable"]:not([content*="user-scalable=zoom"]):not([content*="user-scalable=yes"]):not([content*="user-scalable=device-width"]):not([content*="user-scalable=device-height"]):not([content*="user-scalable=1"]):not([content*="user-scalable=2"]):not([content*="user-scalable=3"]):not([content*="user-scalable=4"]):not([content*="user-scalable=5"]):not([content*="user-scalable=6"]):not([content*="user-scalable=7"]):not([content*="user-scalable=8"]):not([content*="user-scalable=9"]):not([content*="user-scalable=-1"]):not([content*="user-scalable=-2"]):not([content*="user-scalable=-3"]):not([content*="user-scalable=-4"]):not([content*="user-scalable=-5"]):not([content*="user-scalable=-6"]):not([content*="user-scalable=-7"]):not([content*="user-scalable=-8"]):not([content*="user-scalable=-9"])

        LLAP 🖖

        --
        “When UX doesn’t consider all users, shouldn’t it be known as ‘Some User Experience’ or... SUX? #a11y” —Billy Gregory
        Beitrag melden
        +1
        Informationen zu den Bewertungsregeln

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

      MudGuard Homepage des Autors
      +1 Informationen zu den Bewertungsregeln

      Hi,

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

      Noch mehr davon. Du brauchst dringend ein starkes Antidivotikum!

      Hilft das gegen ein divirium tremens?

      .headfont

      Was ist denn ein headfont?

      Einen Headfont braucht man, damit man nicht ;-) oder :-( sieht, sondern 😉 und 😟 ;-)

      cu,
      Andreas a/k/a MudGuard

      Beitrag melden
      +1
      Informationen zu den Bewertungsregeln

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

        marctrix Homepage des Autors
        – Informationen zu den Bewertungsregeln

        Hej MudGuard,

        Danke 🙏 für den Beitrag! 👋🏼

        Ich habe mir erlaubt in deinen Tags „rumzupfuschen“ (habe Humor ergänzt).

        Ich kaufe hiermit übrigens einen 🤚-Font ;-)

        An den OP: ich mache mich hier nicht über dich lustig, wollte nur darauf hinweisen, dass du dir über deinen Code noch mal Gedanken machen solltest. Manches kann man da vermutlich noch verbessern. Wir helfen gerne dabei!

        Das ist hier nur ein wenig vom Thema abgekommen (thread drift). Hat nichts mit dir zu tun…

        No pun intended!

        Marc

        Beitrag melden
        –
        Informationen zu den Bewertungsregeln