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

CSS - Layout mit zwei Spalten (fest, flexibel) und Unterzelle

Wie schaffe ich es eigentlich in "right.one" einen Text vertical zu zentrieren? "vertical-align: middle;" klappt irgendwie nicht!

HTML: 
        div.right.one {
            flex-basis: 26px;
            flex-shrink: 0;
        }
 
Füll mal bitte die Fileliste (left.two) mit nochmal so vielen Einträgen und schaue ob er über das Browserfenster hinauswächst!

Genau das gleiche Problem besteht mit "right.two", welche den Fileinhalt aufnimmt und
vertikal und horizontal scrollbar sein soll, wenn es über sich hinaus wächst.
Zusätzlich enthält "right.two" noch "white-space: nowrap".
 
Hier jetzt mal der komplette Quelltext. Der Fehler besteht weiter... Dein Quelltext funktioniert bei mir!
PHP: 
<?php

    echo "<HTML>";
    echo "<HEAD>";
    echo "</HEAD>";

    echo "<body>";

?>

    <style>
        
        body {
            margin: 0;
            padding: 0;
        }
 
        .wrapper {
            display: flex;
            flex-direction: row;
            text-align: left;
            width: 100vw;
            height: 98vh;
        }
 
        aside.left {
            flex-basis: 380px;
        }
 
        main {
            flex-grow: 1;
            flex-shrink: 1;
        }
 
        main,
        aside.left {
            display: flex;
            flex-direction: column;
        }
 
        div:not(.wrapper) {
            margin: 3px;
            border: 1px solid black;
        }
 
        div.left.one {
            flex-basis: 26px;
        }
        
        div.left.two {
            flex-grow: 1;
            flex-shrink: 1;
            height: 100%;
        }

        div.left.three {
            flex-basis: auto;
        }
 
        div.right.one {
            flex-basis: 26px;
            flex-shrink: 0;
            display: flex;
            align-items: center;
            justify-content: center;
        }
 
        div.right.two {
            flex-grow: 1;
            flex-shrink: 1;
            background-color: white;
        }
        
        div.left.two select {
            height: 100%;
            width: 100%;
        }
        
        div.right.three {
            flex-basis: auto;
        }
 
        div.right.four {
            flex-basis: auto;
        }
    </style>
    
    
<?php

echo "<form action='aside-main.php' method='POST'>";

        echo "<div class='wrapper'>";
            echo "<aside class='left'>";
                echo "<div class='left one'>";

                echo "<select name='selection_folder' onclick='this.form.submit();';>";

                echo "<option value='0'>Alle Dateien anzeigen</option>";

                echo "<option value='x' disabled>-------------------------------</option>";

                echo "</select>";
                
                
                
                
                echo "</div>";

                echo "<div class='left two'>";
                
                
            echo "<select multiple='multiple' name='filename_with_path' onClick='this.form.submit();'>";
                
                    for($i=0; $i<100; $i++)
                    {
                        echo "<option value='xyz'>xyz</option>";
                    }

                echo "</select>";
                
                
                echo "</div>";
                
                echo "<div class='left three'>";
                
                echo "<u><b>Anzeige zuletzt aktualisiert</b></u><br>";
                echo "<br><br>";

                echo "<INPUT name='refresh' style='width: 150px; height: 30px;' type=submit value='aktualisieren'>";
                echo "<br><br>";
                echo "<u><b>letzte Aktualisierung</b></u><br>";
                echo "<br><br>";
                echo "<u><b>letzte Aktualisierung</b></u><br>";
                echo "<br><br>";
                echo "files aktualisieren sich aut!";
                
                
                
                echo "</div>";
            echo "</aside>";
            echo "<main>";
                echo "<div class='right one'>";

                echo "&nbsp;- keine Datei geladen -";

                echo "</div>";
                echo "<div class='right two'>";
                
                echo"Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed d ";
                
                echo "</div>";
                echo "<div class='right four'>";
                
                
                echo "<INPUT style='width: 210px; height: 20px;' name='search_text' value='".$search_text."'>&nbsp;- Nach was suchst du denn eigentlich?";

                echo "<INPUT name='run_search' style='width: 150px;' type=submit value='Suchen'>&nbsp;&nbsp;&nbsp;";
                
                echo "<input type='checkbox' name='show_only_searchlines' value='1'";
                if ($_SESSION['show_only_searchlines'] == "1") { echo "checked"; }
                echo " onclick='this.form.submit();'>- nur Zeilen mit Suchergebnissen anzeigen";

                echo "</div>";
            echo "</main>";
        echo "</div>";

    echo "</form>";
    
    echo "</body>";
    echo "</html>";

?>
 
Wie bekomme ich es hin, dass wenn ein container "right.four" leer ist, dass er den container garnichts anzeigt. Mit if-Bedingung würde ich es schaffen aber sicherlich gibt es über css noch ne andere Möglichkeit?
 
halloICKEbins schrieb:
PHP: 
<?php

echo "<form action='aside-main.php' method='POST'>";

        echo "<div class='wrapper'>";
            echo "<aside class='left'>";
                echo "<div class='left one'>";

                echo "<select name='selection_folder' onclick='this.form.submit();';>";

                echo "<option value='0'>Alle Dateien anzeigen</option>";

                echo "<option value='x' disabled>-------------------------------</option>";

                echo "</select>";
            
            
            
            
                echo "</div>";

                echo "<div class='left two'>";
            
            
            echo "<select multiple='multiple' name='filename_with_path' onClick='this.form.submit();'>";
Zum Vergrößern anklicken....
Ein echo-Marathon, der völlig sinnlos ist, da außer der for-Schleife kein PHP vorkommt. Und wenn man schon alles per echo ausgeben will, dann doch bitte so:
PHP: 
<?php
<?php
echo "<form action='aside-main.php' method='POST'>
       <div class='wrapper'>
         <aside class='left'>
          <div class='left one'>
           <select name='selection_folder' onclick='this.form.submit();';>
             <option value='0'>Alle Dateien anzeigen</option>
             <option value='x' disabled>-------------------------------</option>
           </select>
         </div>
         <div class='left two'>
         <select multiple='multiple' name='filename_with_path' onClick='this.form.submit();'>";
?>

?>
Das ist deutlich lesbarer.
 
Morgen,
danke für die viele Arbeit, die du dir machst... 2 kleine Problemchen habe ich noch:

1.) Ich würde gerne, dass "right.two" immer den kompletten Platz ausfüllt, auch wenn sie leer ist. Habe es mit min-width: 100% probiert, aber das hat nicht geklappt!
2.) Wenn "right.two" soviel Inhalt aufnimmt, dass es scrollbar ist, erscheint ein Scrollbar(horizontal) auf der ganzen Seite!
 
Desweiteren würde ich gerne alles in "left.three" zentrieren. Hätte gedacht, dass mein nachfolgender Quellcode den Erfolg bringt - macht er aber nicht. Der fette Text und die Schaltfläche ist linksbündig und das Datum ist rechts - mittig.

HTML: 
div.left.three {
   flex-basis: auto;
}

div.left.three button, p {
   display: flex;
   justify-content: center;
}

***************************************************
<div class='left three'>
 <p><u><b>Anzeige zuletzt aktualisiert</b></u><br><?php echo $datum; ?></p>
 <br><br>
 <INPUT name='refresh' style='width: 150px; height: 30px;' type=submit value='Aktualisieren'>
</div>
 
Ich verstehs nicht...ich würde genauso erwarten, dass er mir den Text auch vertikal zentriert!

HTML: 
div.right.three {
   flex-basis: auto;
   padding: 3px;
   align-items: center;
   justify-content: left;
}

************************************

<div class='right three'>
 <input type='checkbox' name='line_count' value='1' <?php if ($_SESSION['line_count'] == "1") { echo "checked"; } ?> onclick='this.form.submit();'>Zeilennummerierung anzeigen
</div>
 
Morgen,

jetzt funktioniert alles ;-)

Würde jetzt gerne noch einen Container über die ganze Länge (.wrapper) einfügen. Also quasi oberhalb von "right one" und "left.one". Dieser soll nach Bedarf immer eingeblendet werden, wenn sich was in einer Datei ändert - würde hierzu ein iframe in den Container einbetten, welches sich sekündlich aktualisiert und bei Änderungen auch die Hauptseite refresht.

http://webentwicklung.ulrichbangert.de/aside-main-2.php

Vorrangig geht es um den CSS-Flex-Code für den zusätzlichen Container aber für eventuell bessere oder andere Ideen für das iframe bin ich natürlich auch dankbar. Benutze übrigens php.
 
Zuletzt bearbeitet:
So breit wie der .wrapper ... also die Außenkanten von "left.one" und "right.one" (also margin: 5px).

Mit der Höhe variabel wäre natürlich die 120%-Lösung. Eigentlich kommt da immer nur eine Zeile Text rein...Ich könnte sie also auf eine Höhe (26 px) begrenzen...cooler wäre das andere

Steht nicht die entsprechende Zeile in der Datei soll das "top" verschwinden, steht sie da soll es erscheinen.
 
Abend,

habe eine Lösung ohne Java gebaut. Weiß allerdings nicht wie kompatibel oder richtig sie ist. Der Quellcode ist der Gleiche nur das ich "body", iframe.top" und "wrapper" geändert und Java rausgenommen habe.

HTML: 
body {
   margin: 0;
   padding: 0;
   height: 98vh; 
   }
 iframe.top {
   height: 50px;
   width: 100%;
   }
 
 .wrapper {
   display: flex;
   flex-direction: row;
   width: 100vw;
   height: calc(98vh - 50px)
}

Plan ist jetzt immer die Höhe von "iframe.top" von ".wrapper" abzuziehen. Da ich mit php arbeite kann ich vorher ermitteln wieviel Zeilen meine Datei hat, die das iframe füllt und entsprechend mit einen Wert addieren oder subtrahieren.

Ziel ist kein Java zu nutzen! Jemand Gegenvorschläge oder Anmerkungen!
 
Gegenvorschlag NEIN ,aber wenn du es ganz ohne Javascript und Php hinbekommst ,bist du mein Held.Ich suche gerade auch nee möglichkeit die höhe eines Containers ohne Script auszulesen zb sobald die max-height erreicht ist
 
basti1012 schrieb:
Ich suche gerade auch nee möglichkeit die höhe eines Containers ohne Script auszulesen
Zum Vergrößern anklicken....
keine Chance. Du kannst maximal mit attr() arbeiten, wird dir aber nicht wirklich weiterhelfen.

basti1012 schrieb:
zb sobald die max-height erreicht ist
Zum Vergrößern anklicken....
Naja die max-height ist eigentlich ein Pixelwert, ansonsten kannst du dir max-height schließlich sparen.
Den könntest du theoretisch in eine CSS-Variable packen. Mehr ist mit CSS nicht drinn.
 
@Aaron3219 bei den Script um den es bei mir geht, darf nur CSS verwendet werden (Wegen Ebay mal wieder). Wenn ein div Container eine große erreicht ( Height:Auto voreingestellt) die genauso groß ist wie der div daneben (Der hat feste Höhe), soll der Container über den anderen hinüber weggehen .

*** Link entfernt, weil nicht mehr erreichbar ***
in der Fiddle sieht man was ich meine . Gibt es dafür einen Weg? Media Queries auf Boxen anzuwenden ,nenne ich mal so.
 
Zuletzt bearbeitet:
Du musst dich einloggen oder registrieren, um hier zu antworten.

Neueste Beiträge

Zurück
Oben