Auf Thema antworten

Beitrag

[QUOTE="Sunlion, post: 14758, member: 5208"]
Hallo zusammen!
Ich habe zwar schon viele Jahre Webprogrammier-Erfahrung, diese aber schon lange nicht mehr aktiv angewandt und bin daher etwas eingerostet.
Im nachfolgenden Beispiel möchte ich die hellgrauen Spalten, die aktuell oben ausgerichtet sind, vertikal auf dem Bildschirm zentrieren. Wenn neue (hellblaue) Elemente hinzugefügt werden, sollen sie sich in der Höhe weiter ausdehnen (machen sie jetzt bereits), dabei aber weiterhin vertikal zentriert bleiben. Ich hab schon Verschiedenes versucht, zum Beispiel mit Flexbox, ich bekomme es aber nicht hin. Entweder nutze ich das falsche Werkzeug oder die Syntax ist falsch.
Habt Ihr eine Idee?

__________

[CODE=html]<html>
<style>

body {background-color:#5c676d;}
.rahmen {background:none; display:flex; justify-content:center; align-items:flex-start; flex-flow:row; width:100%; gap:12px; margin-top:25px; padding:0 20px}
.spalte {width:304px; height:100%; background-color:#6c787e; border-radius:8px; padding-bottom:15px;}
.spaltenkopf {background:none; margin-bottom:14px}

.linkcontainer {display:flex; justify-content:center; align-items:flex-start; flex-flow:row wrap; gap:36px 12px; padding:0 10px 20px 10px}
.linkcontainer2 {display:flex; justify-content:center; align-items:flex-start; flex-flow:row wrap; gap:36px 12px; padding:0 10px}
.link {background-color:none; position:relative; width:80px; height:102px; border-radius:8px; align-self:normal;text-align: center;}
.linkimage {background-color:aqua; margin:0 0 3px 0; padding:0;}
img {width:95%; border-radius:8px; margin:0; padding:0; box-shadow:rgba(0,0,0,0.5) 0 2px 4px;}
img:hover {box-shadow:rgba(255,255,255,1.0) 0 1px 5px;}
.linktext {background-color:none; width:100%; font-family:kcl; color:#fff; font-size:15px; line-height:20px; text-align:center; text-decoration:none; text-shadow:rgba(0,0,0,0.7) 0 2px 2px; letter-spacing:0.3px;}

h1 {font-family:kl; color:#fff; font-size:16px; line-height:5px; text-align:center; text-shadow:rgba(0,0,0,0.5) 0 2px 4px; margin-bottom:0px;}
hr {border:none; width:auto; border-top:1px dashed; height:1px; color:#ccc; margin:16px 14px; padding:0px; display:block}
a {text-decoration:none; color:#888;}

</style>

<main>

<div class="spalte">
            <div class="spaltenkopf">
                <h1>Spalte 1</h1>
                <hr>
            </div>

<div class="linkcontainer">                 
                <div class="link">
                    <a href="#" target="_blank" rel="noopener">
                        <div class="linkimage">
                            <img src="img/startseite/*.jpg">
                        </div>
                  
                        <div class="linktext">
                            Linktext
                        </div>
                    </a>
                 </div>
              
              
                <div class="link" id="desktop">
                    <a href="" target="_blank" rel="noopener">
                        <div class="linkimage">
                            <img src="img/startseite/*.jpg">
                        </div>
                  
                        <div class="linktext">
                            Linktext
                        </div>
                    </a>
                </div>
              
              
                <div class="link" id="desktop">
                    <a href="" target="_blank" rel="noopener">
                        <div class="linkimage">
                            <img src="img/startseite/*.jpg">
                        </div>
                  
                        <div class="linktext">
                            Linktext
                        </div>
                    </a>
                </div>         
            </div>
        </div>

<div class="spalte">
            <div class="spaltenkopf">
                <h1>Spalte 2</h1>
                <hr>                 
            </div>
              
          
            <div class="linkcontainer">                 
                <div class="link">
                    <a href="#" target="_blank" rel="noopener">
                        <div class="linkimage">
                            <img src="img/startseite/*.jpg">
                        </div>
                  
                        <div class="linktext">
                            Linktext
                        </div>
                    </a>
                 </div>
              
              
                <div class="link" id="desktop">
                    <a href="" target="_blank" rel="noopener">
                        <div class="linkimage">
                            <img src="img/startseite/*">
                        </div>
                  
                        <div class="linktext">
                            Linktext
                        </div>
                    </a>
                </div>
              
              
                <div class="link" id="desktop">
                    <a href="" target="_blank" rel="noopener">
                        <div class="linkimage">
                            <img src="img/startseite/*">
                        </div>
                  
                        <div class="linktext">
                            Linktext
                        </div>
                    </a>
                </div>         
            </div>
        </div>

<div class="spalte">
            <div class="spaltenkopf">
                <h1>Spalte 3</h1>
                <hr>
            </div>
          
            <div class="linkcontainer">                 
                <div class="link">
                    <a href="" target="_blank" rel="noopener">
                        <div class="linkimage">
                            <img src="img/startseite/*">
                        </div>
                  
                        <div class="linktext">
                            Linktext
                        </div>
                    </a>
                 </div>
              
              
                <div class="link" id="desktop">
                    <a href="" target="_blank" rel="noopener">
                        <div class="linkimage">
                            <img src="img/startseite/*">
                        </div>
                  
                        <div class="linktext">
                            Linktext
                        </div>
                    </a>
                </div>
              
              
                <div class="link" id="desktop">
                    <a href="" target="_blank" rel="noopener">
                        <div class="linkimage">
                            <img src="img/startseite/*">
                        </div>
                  
                        <div class="linktext">
                            Linktext
                        </div>
                    </a>
                </div>
            </div>
        </div>
    </div>

</main>
</html>[/CODE]
[/QUOTE]

Authentifizierung