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

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

H

halloICKEbins

Mitglied
Mahlzeit,

probiere jetzt schon seit längerem an meinen Layout rum, aber irgendwie stellt er es nicht so dar wie ich es möchte. Ziel ist eine feste linke Spalte mit 400 Pixel nicht scrollbar und in der Höhe immer auf 98%(multiple-select-box soll Rest auffüllen). Die rechte Spalte soll in der Höhe 98% haben und bei Verkleinerung des Fensters auch kleiner werden (dynamisch). Der Container "file-content" soll den Rest auffüllen um auf 100% der Spaltenbreite zu kommen.

In der linken und rechten Spalte selber beinhalten noch weitere Container. Hier mein bisheriger Quellcode...

HTML: 
<HTML>
    <HEAD>
        <style type='text/css'>
            select[multiple], select[size] { height: 100%; width: 100%}
        </style>
    </HEAD>
    
    <body style='height: 98%; width: 100%; margin: 0px; padding: 5px; background-color: #E6E6E6;'>

        <form action='overview_files.php' method='POST'>

    <div id='body-content' style='padding: 5px; width: 100%; height: 100%%; border: 2px solid red;'>

        <div id='main-content-left' style='float: left; padding: 5px; width: 400px; height: 98%; border: 2px solid green;'>

            <div id='main-content-left-selection' style='clear: both; width: 100% ; height: 26 px; border: 1px solid brown;'>
                <select name='selection_folder' onclick='this.form.submit();' style='width: 100%; height: 26px;' border=0>
                    <option value='x'>test</option>
                </select>
            </div>

            <div id='main-content-left-overview' style='float: both; width: 100%; height: 100%; border: 1px solid brown;'>
                <select multiple='multiple' name='log' border=0 onClick='parent.frame_right.location.href=seite.html'>
                    <option value='t'>Test</option>
                </select>
            <div>

            <div id='main-content-left-infos' style='float: both; width: 100% ; height: auto; border: 1px solid brown;'>
                Info
            </div>

        </div>

        <div id='main-content-right' style='float: right; padding: 5px; height: 98%; width: 100%; border: 2px solid blue;'>

            <div id='main-content-right-filename' style='clear: both; height: 30px; border: 1px solid black;'>
                Dateiname
            </div>


            <div id='main-content-right-file-content' style='float: both; height: 100%; border: 1px solid black; white-space:nowrap; overflow: auto; background-color: #FFFFFF;'>
                Dateitext
            </div>

            <div id='main-content-right-show-line-number' style='float: both; border: 1px solid black;'>
                Zeilennummer ja/nein
            </div>

        </div>

    </div>

    </form>
    
    </body>
    </html>
 
Werbung:
2 Spalten?
Na dann schau dir einfach Flexboxen an:
https://css-tricks.com/snippets/css/a-guide-to-flexbox/

und hier ein kurzer Guide:
https://www.w3schools.com/css/css3_flexbox.asp

Um Scrollbars zu verhindern, zu erzwingen, etc.
schau dir mal das CSS-Attribut 'overflow' an.

Die festen und dynamischen Größen kannst du natürlich mit width und height machen.
Prozentangaben sind dann dynamisch zum Elternelement.
Pixelgrößen sind fest.

Man schreibt HTML-Elemente eigentlich klein. Sprich:
<HMTL> und <HEAD> werden zu <html>, <head>

Edit:
Ich habe mir mal deinen HTML-Code genauer angeschaut und leider muss ich sagen, es ist eine komplette Katastrophe. Ich steige nicht genau durch, was jetzt links und rechts hin soll.
Dein Plan, Container den restlichen Platz füllen zu lassen, ist eher ein Ding für Anfänger und sollte unterlassen werden. Stattdessen sollte man sich mit CSS beschäftigen, denn es gibt Techniken, die so etwas auch ohne Container als Platzfüller umsetzen können.
Vielleicht machst du mal eine Paint-Skizze oder sowas.
 
Zuletzt bearbeitet:
Ich bin eigentlich immer einer mit der ersten, der eine Fiddle baut und hilft.
In diesen Fall muss ich sagen, dass ein neu geschriebener Code einfacher wäre.
Da ich kein Flexbox Experte bin, hast du hier ein Super Beispiel, was du mit 1-2 Zeilen Code so angepasst hast wie du es brauchst


*** Link entfernt, weil nicht mehr erreichbar ***

EDIT: Habe bei dir im Code gesehen das du noch border="0" benutzt. Meines Wissens ist das veraltet und wird heute sowieso alles in der CSS geklärt.
CSS solltest du dir unbedingt anschauen, weil wie in deinen Code jedes Element eine style="" zu geben ist unübersichtlich und verbraucht mehr Zeilen Code als wie nötig
 
Zuletzt bearbeitet:
Werbung:
Abend,

ich weiß, dass ich es nicht so klar geschrieben habe...
Den Link http://boratb.bplaced.net/index002.html habe ich mir angeschaut, allerdings sehe ich durch den vielen Quelltext dort nicht durch...würde es gerne verstehen...habe mal ein Designabbild von meinen Vorstellungen gemacht...ich hoffe, dass es damit klarer wird.

upload_2018-2-5_19-26-26.png
 

Anhänge

  • upload_2018-2-5_19-25-28.png
    upload_2018-2-5_19-25-28.png
    65,1 KB · Aufrufe: 1
Genauso habe ich es gemeint ... sieht sehr gut aus... werde es morgen in "mein System einspielen" und bei Fragen melde ich mich nochmal..recht herzlichen Dankeschon mal bis hierhin
 
So ein Mist..ich werde es wohl nie verstehen ...ich wollte das Raster jetzt mit Leben füllen aber sobal ich in die class="left one" den nachfolgenden Quelltext einfüge stellt er nur noch diese eine Feld dar...hat er Probleme mit der Schleife oder IF-Anweisung:

PHP: 
echo "<select name='selection_folder' onclick='this.form.submit();' style='width: 400px; height: 26px;'>";

    echo "<option value='0'"; if ($_SESSION['selection_folder'] == '0') { echo "selected"; } echo ">Alle Files anzeigen</option>";   
    echo "<option value='x' disabled>-------------------------------</option>";

    foreach (new DirectoryIterator($directory) as $file)
    {
        if ($file->isDir() && !$file->isDot())
        {
            echo "<option value='".$file."'>".$file->getFilename()."</option>";
        }
    }
    
echo "</select>";
 
Werbung:
Genau das ist das Problem gewesen ... $filedir war nicht definiert...hatte alles auskommentiert um es Step-by-Step wieder einzuarbeiten.

Warum reagiert es so empfindlich drauf? Gibt es dafür Literatur?
 
Werbung:
Mahlzeit/Abend,

Sempervivum schrieb:
Habe versucht, dein Bild umzusetzen:
Zum Vergrößern anklicken....

Hatte nochmal ein paar Fragen zu dem Quelltext:

Wie lege ich fest, dass "wrapper" maximal 98% Höhe des Browserfensters bekommt?
Wie lege ich fest, dass "left.two" sich in der Höhe ausdehnen kann um den Rest zu füllen ("one/three" sollen so groß bleiben, wie sie Platz benötigen (auto) bzw. feste Größe?
 
Ich versuchs mal zu erklären und ein Codeschnipsel füge ich noch bei ... an deiner Vorlage habe ich nichts geändert und im "left.two" steht der nachfolgende Quellcode. Es sind ca. 500 Dateien, die dort aufgelistet werden und er macht auch ein Scrollbar...Er streckt, dass Feld zusätzlich mit der Größe von "left.three" denke ich1? In "left.three" steht nur Text.

PHP: 
echo "<div class='left two'>";
   echo "<select multiple='multiple' name='filename_with_path' onClick='this.form.submit();'>";

   for($i=0; $i<count($entrys); $i++)
   {
       echo "<option value='"$entrys[$i]['file']."'"; if ($_SESSION['filename_with_path'] == $entrys[$i]['file'])
       { echo "selected"; }  echo ">".$entrys[$i]['file']."</option>";
   }
   echo "</select>";
echo "</div>";
 
Werbung:
Zur Info .Habe das mal versucht mit den Scrollbars im Selectmenü. Im Opera und Firefox sind sie weg ,und trotzdem kann man Scrollen.
Bin wieder im Hintergrund:)
 
Werbung:
Die eine Variante funktioniert bei mir in Opera und Firefox und die andere nur in Opera. Obwohl ich bei Google einige Einträge gefunden habe, das es auch in Firefox gehen sollte. Wahrscheinlich liegt es auch an der Version, die die Leute benutzt haben.

*** Link entfernt, weil nicht mehr erreichbar ***
 
Zuletzt bearbeitet:
Morgen,

schon mal Danke für die Mühe...habe es jetzt mit "calc gelöst". Mit "height: calc(100% - 322px);" füllt er "left.two" mit dem select-Feld genau auf. Kann ich das so machen?

HTML: 
    <style>
      ...
        div.left.one {
            flex-basis: auto;
        }
 
        div.left.two {
            flex-grow: 1;
            flex-shrink: 1;
        }
 
        div.left.three {
           flex-basis: auto;
        }
   ...
    </style>

<div class='left one'>
    <select name='selection_folder' onclick='this.form.submit();' style='height: 26px;'>
    </select>
</div>

<div class='left two'>
    <select multiple='multiple' name='filename_with_path' onClick='this.form.submit();' style='height: calc(100% - 322px);  width: 100%;'>
    </select>
</div>

<div class='left three' style='height: 260px;'>
</div>
 
Werbung:
Leider noch nicht! ... Er macht "left.two" wieder zu lang - und zwar als Summe soviel wie alle Abstände und Ränder + "left.one" und "left.three"
 
Du musst dich einloggen oder registrieren, um hier zu antworten.

Neueste Beiträge

Zurück
Oben