Flexbox-Konstrukt mit Left-Hand-Menu und Applikation

[Uwe Jädick]

Die Umsetzung bereitet einige Probleme: CSS

@media (min-width: 32em)  {	/* zweispaltiges Layout für breitere Viewports */ 
  nav {
    width: 13em;
    background-color:rgb(211,220,232);
    -webkit-flex-basis: 20%;
    flex-basis: 20%;
    -webkit-order: 1;
    order: 1;
    font: Calibri;
    color: #4119DF; /* Definition der Textfarbe */
  }
  main {
    margin-left: 15em;
    background-color:rgb(255,255,255);
    -webkit-flex-basis: 80%;
    flex-basis: 80%;
    display: flex;
    flex-direction: column;
    -webkit-order: 2;
    order: 2;
  } 

HTML-Teil des Menüs:

<nav marginwidth="0" topmargin="0" leftmargin="0" bottommargin="0" rightmargin="0">
  <table class="PAGELET" width="178" cellpadding="0" cellspacing="0" border="1">
    <tr>
      <td class="PAGELETBODY" width="100%">
        <form name="srchnav" method="get" target="_top"style="margin-bottom: 0px">
          <table cellpadding="0" cellspacing="0" border="0" width="100%">
            <tr>
              <td class="PTNAVBACKGROUND"></td>
            </tr>
            <tr class="NAVBACKGROUND">
              <td>
                <table cellspacing=0 cellpadding=0 border=0>
                  <tr>
                    <td valign=TOP>
                      <p style="padding-left: 10pt; padding-right: 3pt; text-indent: -10pt">
                        <a name="100001" class=NAVPARENTLINK title="Change Password" href="amesads.php?lang=ENG&Page=100001">Change Password</a>
                      </p>
                    </td>
                  </tr>
                </table>
              </td>
            </tr>
          </table>
        </form>
      </td>
    </tr>
  </table>
</nav>

Die Page in HTML:

<main>
  <div class="box_layout" id="LLayout" valing="top">
    <form name="AL_CHANGE_PASSWORD" method="post" action="">
      <div class="box_layout0103" id="LLayout0103">
        <div class="corner_left_top"></div>
        <div class="corner_left_bottom"></div>
        <div class="corner_right_top"></div>
        <div class="corner_right_bottom"></div>
        <table>
          <tr>
            <td width="100%" height="100%" align="center" valign="middle">
              <table width="100%">
                <tr>
                  <td>
                    <center>Amesads Labs (ENG)</center>			
                  </td>
                </tr>
                
                <tr>
                  <td>
                    <?php print Feldnamen(2, $_SESSION["Language"], "Benutzer") ?><br>			  
                    <input name="benutzername" type="text" class="general_text_input" value="Uwe">			
                  </td>
                </tr>
                
                <tr>
                  <td>
                    <?php print Feldnamen(3, $_SESSION["Language"], "Passwort") ?><br>			  
                    <input name="passwort" type="password" class="general_text_input">			
                  </td>
                </tr>
                
                <tr>
                  <td width="100%" height="30px" align="center" valign="middle">			  
                    <input name="Submit" type="submit" class="general_button" value="Anmelden">			
                  </td>
                </tr>
              </table>
            </td>
          </tr>
        </table>
      </div>
    </form>
  </div>
</main>

Es funktioniert bis dahin alles korrekt, nur Menü und Page stehen nicht nebeneinander, sondern versetzt. Siehe Bild

Wird flex-direction: column; in flex-direction: row; geändert stehen Logo, Menü, Page und Footer nebeneinander, was auch nicht beabsichtigt ist.

[Matthias Apsel]

Hallo Uwe Jädick,

Nicht böse gemeint: Tabellenlayout mit flexbox stylen zu wollen ist ein bisschen so wie einem Ackergaul Super bleifrei als Treibstoff zu geben. Schau dich mal in unserem Wiki um. https://wiki.selfhtml.org/wiki/CSS/Eigenschaften/Flexbox, https://wiki.selfhtml.org/wiki/HTML/Tutorials/Navigation

Bis demnächst
Matthias

[Rolf B]

Hallo Matthias,

Tabellenlayout mit flexbox stylen zu wollen

Das Problem ist nicht das Tabellenlayout. Ja ok - das ist schon ein Problem, aber nicht in Bezug auf die Flexbox.

Die display:flex Eigenschaft wirkt auf die direkten Kind-Elemente und ist ziemlich sinnlos, wenn der Flexcontainer nur genau ein Kind-Element hat. Im Falle von nav wäre es das table Element, im Falle von main das div.box-layout.

Wenn Du mit Flexbox Menü und Seiteninhalt nebeneinander stellen willst, dann müssen die beiden einen gemeinsamen Container haben und dieser Container benötigt display:flex.

Was ist das überhaupt für ein class-Zeugs in deiner Seite? Pagelet, Pageletbody - das klingt irgendwie nach einem Seitengenerator, dem Du ein anderes Aussehen beibiegen willst... Aber ein Seitengenerator der Table-Layout generiert - den sollte man auf die Regenbogenbrücke schicken.

Rolf

[MudGuard]

Hi,

Aber ein Seitengenerator der Table-Layout generiert - den sollte man auf die Regenbogenbrücke schicken.

das wäre dann aber schade um die Regenbogenbrücke …

cu,
Andreas a/k/a MudGuard

[Uwe]

Hallo Rolf,

das wird schon so richtig sein, dass ursprünglich dafür ein Generator verwendet wurde. Das Zeug ist eben auch schon fast 20 Jahre alt. Ich hatte gehofft, dass ich das noch irgendwie verwenden kann, da ich mich so wenig wie irgend möglich damit befassen wollte. Aber wie es aussieht, bleibt mir nichts anderes übrig als mal etwas neues zu lernen.

Vielen Dank für die Hinweise, ich werde mir das alles noch mal genauer anschauen und im schlimmsten Fall das PHP komplett umbauen müssen. Dann eben ohne Tabellen.

Gruss Uwe

[Uwe]

Hallo Matthias

Danke, ich schau mir das mal an. Die bisherige Konstruktion ist historisch gewachsen und ich habe nach einigen Jahren Abstinenz wieder angefangen damit zu arbeiten. Ich wollte eben nicht alles neu erfinden müssen.

Wird sich aber wie es aussieht nicht vermeiden lassen.

Gruß Uwe

[Uwe]

Hallo Matthias, hallo Rolf,

noch einmal vielen Dank für Eure Hilfe. Nach Verwendung des Besipiel-Codes für die Flexbox kann ich den ersten Erfolg vermelden: (siehe Bild 1)

Wenn ich allerdings das Menü mit den Elementen aus der Liste darstellen will, passiert folgendes: (siehe Bild 2)

Das CSS ist komplett neu und enthält keinerlei Anweisungen wie man mit der Liste umzugehen hat:

.flex-container {
	display: flex;
}

.flex-item {
	border: 1px solid;
	border-radius: 0 .5em .5em;
	margin: .5em;
	padding: .5em;
    font: Calibri;
    color: #4119DF;
    background: rgb(211,220,232); 
}

p.flex-item {
	/* font-weight: bold; */
	text-align: left;
	-webkit-flex-basis: 15%;
    flex-basis: 15%;
}

.flex-item:nth-of-type(2) {
	background: #fdfcf3;
	-webkit-flex-basis: 65%;
    flex-basis: 65%;
    background: rgb(255,255,255);
}

.flex-item:nth-of-type(3) {
	background: #ebf5d7;
	-webkit-flex-basis: 20%;
    flex-basis: 20%;
}

Allein das hinzufügen der beiden Tags:

$menu_html .= '<nav>';
$menu_html .= '<ul>';

vor der Erzeugung des Menüs und am Ende mit den schliessenden Tags verändert das komplette Aussehen. Hat dazu einer von Euch noch eine Idee?

Vielen Dank und vielen Gruß Uwe

[Uwe]

Nachtrag Bild 2

[Matthias Apsel]

Hallo Uwe,

display: flex ordnet ausschließlich die Kinder eines Elementes an.

Bis demnächst
Matthias

[Rolf B]

Hallo Uwe,

gerade wenn man das HTML stückweise zusammen baut, sind die Entwicklungswerkzeuge des Browsers eine unschätzbare Hilfe. Dort siehst Du den Sourcecode (also das, was der Server schickt) und unter "Elemente" auch das DOM (also das, was der Browser daraus interpretiert).

Ich gehe davon aus, dass deine Änderungen dazu führen, dass die Liste nicht mehr Kind des <nav> Elements ist, sondern zum Geschwister wird. Deswegen stellt die Flexbox die Liste neben das <nav> Element.

Rolf