Positionierung von Kacheln

Voditzka

html-seminar.de/woltlab/attachment/1375/

Guten Tag,

ich brauch eure Hilfe. Ich hab ein Problem das ich einfach nicht hinbekomme. Ich habe 3 Spalten die gleich aufgebaut sind mit Kacheln ausgestattet, die als Bedienfeld dienen sollen.

Ich möchte die Kacheln in den Spalten die immer nach Links fließen mittig anordnen. So wie die Überschriften über den Kacheln ("Links"). Also wenn des Fenster gezogen wird: 1 Kachel wird mittig positioniert und sobald genügend Platz vorhanden ist für 2 Kacheln sollen die sich nebeneinander mittig zentrieren. Ich hoffe ihr könnt mir helfen =).

HTML

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Intranet</title>
<link href="main.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div class="allgemein">Intranet<a href="Intranet.html"><div class="logo"></div></a><a href="Intranet.html"><div class="exe"></div></a></div>
<div id="main">
<div class="box1"><p class="header1">Links</p><div class="area"><div class="button"><div class="header2">Konstruktions-
richtlinien</div><div class="datei-word"></div></div><div class="button">hallo</div><div class="button">hallo</div><div class="button">hallo</div><div class="button">hallo</div></div><p class="header1">Links</p><div class="area"><div class="button">hallo</div><div class="button">hallo</div><div class="button">hallo</div></div></div>
<div class="abstand">&nbsp;</div>
<div class="box2"><p class="header1">Links</p><div class="area"><div class="button"><div class="header2">Konstruktions-
richtlinien</div><div class="datei-ordner"></div></div><div class="button">hallo</div><div class="button">hallo</div></div><p class="header1">Links</p><div class="area"><div class="button">hallo</div><div class="button">hallo</div><div class="button">hallo</div></div></div>
<div class="abstand">&nbsp;</div>
<div class="box3"><p class="header1">Links</p><div class="area"><div class="button"><div class="header2">Konstruktions-
richtlinien</div><div class="datei-ordner"></div></div><div class="button">hallo</div><div class="button">hallo</div></div><p class="header1">Links</p><div class="area"><div class="button">hallo</div><div class="button">hallo</div><div class="button">hallo</div></div></div>
</div>
</body>
</div>
</html>
@charset "utf-8";
/* CSS Document */
body
{
    width:100%;
    height:100%;
    z-index:-1;
    margin:0px;
    padding:0px;
    background-image:url(Bilder/pexels-photo-534164.jpeg);
    background-size:100%;
    background-repeat:no-repeat;
    background-color:black;
}

.allgemein
{
    width:100%;
    height:50px;
    text-align:center;
    vertical-align: middle;
    display: block;
    margin-left: auto;
    margin-right: auto;
    color:white;
    font-size:30px;
    display: flex;
    align-items: center; 
    justify-content: center;

}
.logo
{
    position:absolute;
    right:50px;
    top:0px;
    width:50px;
    height:50px;
    background-image:url(Bilder/home.png);
        
}
.exe
{
    position:absolute;
    right:0px;
    top:0px;
    width:50px;
    height:50px;
    background-image:url(Bilder/exe.png);
        
}

#main
{
    width:100%;
    height:100%;
    margin-top:0px;
}
.box1
{
    width:33%;
    height:100%;
    margin-top:0px;
    float:left;
    min-width:160px;
    margin:auto;
    background-color:yellow;
    
}
.box2
{
    width:33%;
    height:100%;
    margin-top:0px;
    float:left;
    min-width:160px;
}
.box3
{
    width:33%;
    height:100%;
    margin-top:0px;
    float:left;
    min-width:160px;
    }
.abstand

{
    width:0.5%;
    height:100%;
    margin-top:0px;
    float:left;
}
.header1
{
    width:30%;
    height:30px;
    background-color:black;
    position:absolute;
    text-align:center;
    margin-left:1.5%;
    border-radius:15px;
    margin-top:5px;
    font-size:20px;
    display: flex;
    align-items: center; 
    justify-content: center;
    color:white;
}
.area
{
    width:100%;
    margin-top:40px;
    min-height:100px;
    height:auto;
    overflow:auto;

}
.button
{
    width:150px;
    height:100px;
    background-color:white;
    float:left;
    margin-left:5px;
    margin-top:0px;
    margin-bottom:5px;
    border-radius:20px;
    text-align:center;
    font-size:18px;
    opacity:0.8;
}
.header2
{
    color:black;
    margin-top:5px;
}
.datei-ordner
{
    width:50px;
    height:50px;
    background-image:url(Bilder/ordner.png);
    margin:auto;
}
.datei-word
{
    width:50px;
    height:50px;
    background-image:url(Bilder/word.png);
    margin:auto;
}
.datei-excel
{
    width:50px;
    height:50px;
    background-image:url(Bilder/excel.png);
    margin:auto;
}
.datei-pdf
{
    width:50px;
    height:50px;
    background-image:url(Bilder/pdf.png);
    margin:auto;
}
.datei-sw
{
    width:50px;
    height:50px;
    background-image:url(Bilder/sw.png);
    margin:auto;
}[attach=1373][/attach][attach=1374][/attach]

Alles anzeigen

basti1012

Das 2 Kästen ab einer bestimmten Größe nebeneinander stehen macht man mit @media queries. Ich habe mal in deinen ein Beispiel reingebaut ungefähr wie du es haben möchtest. Ist nur Beispiel ,deswegen nicht meckern das da etwas fehlen tut und nicht Perfekt ist.

https://basti1012.bplaced.net/index.php?ordn…-seminar&id=305

Ab einer Fenstergröße über 700 Pixel stehen jetzt immer 2 Kästen nebeneinander, unter 700 Pixel nur einer mittig.

Sempervivum

Ich bevorzuge ja das Flexlayout:

HTML

<!doctype html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Test</title>
</head>

<body>
    <style>
        main {
            display: flex;
            flex-direction: row;
            width: 100vw;
        }

        .container.left {
            display: flex;
            flex: 1 1 33%;
            flex-direction: column;
            align-items: center;
            background-color: yellow;
        }

        .container.right {
            display: flex;
            flex: 1 1 66%;
            flex-direction: row;
            flex-wrap: wrap;
            align-content: flex-start;
            justify-content: center;
            background-color: lightgrey;
        }

        .box.left, .box.right {
            flex: 1 1 50%;
            display: flex;
            flex-direction: column;
            align-items: center;
        }

        .header1 {
            width: 80%;
            height: 30px;
            background-color: black;
            text-align: center;
            margin-left: 1.5%;
            border-radius: 15px;
            margin-top: 5px;
            font-size: 20px;
            color: white;
        }

        .button {
            width: 150px;
            height: 100px;
            background-color: white;
            margin-left: 5px;
            margin-top: 0px;
            margin-bottom: 5px;
            border-radius: 20px;
            text-align: center;
            font-size: 18px;
            opacity: 0.8;
        }

        @media only screen and (max-width: 550px) {
            .container.right, .container.left {
                flex: 1 1 50%;
            }
            .box.left, .box.right {
                flex: 1 1 100%;
            }
        }
    </style>
    <header class="allgemein">Intranet
        <a href="Intranet.html">
            <div class="logo"></div>
        </a>
        <a href="Intranet.html">
            <div class="exe"></div>
        </a>
    </header>
    <main>
        <div class="container left">
            <div class="box left">
                    <p class="header1">Links</p>
                    <div class="button">
                    <div class="header2">Konstruktions- richtlinien
                    </div>
                    <div class="datei-word"></div>
                </div>
                <div class="button">hallo</div>
                <div class="button">hallo</div>
                <div class="button">hallo</div>
                <div class="button">hallo</div>
            </div>
            <div class="box left">
                    <p class="header1">Links</p>
                    <div class="button">hallo</div>
                <div class="button">hallo</div>
                <div class="button">hallo</div>
            </div>
        </div>
        <div class="container right">
            <div class="box right">
                <p class="header1">Links</p>
                <div class="button">
                    <div class="header2">Konstruktions- richtlinien
                    </div>
                    <div class="datei-ordner"></div>
                </div>
                <div class="button">hallo</div>
                <div class="button">hallo</div>
            </div>
            <div class="box right">
                <p class="header1">Links</p>
                <div class="button">
                    <div class="header2">Konstruktions- richtlinien
                    </div>
                    <div class="datei-ordner"></div>
                </div>
                <div class="button">hallo</div>
                <div class="button">hallo</div>
            </div>
            <div class="box right">
                <p class="header1">Links</p>
                <div class="button">
                    <div class="header2">Konstruktions- richtlinien
                    </div>
                    <div class="datei-ordner"></div>
                </div>
                <div class="button">hallo</div>
                <div class="button">hallo</div>
            </div>
            <div class="box right">
                <p class="header1">Links</p>
                <div class="button">
                    <div class="header2">Konstruktions- richtlinien
                    </div>
                    <div class="datei-ordner"></div>
                </div>
                <div class="button">hallo</div>
                <div class="button">hallo</div>
            </div>
        </div>
    </main>

</body>

</html>

Alles anzeigen

Positionierung von Kacheln

Jetzt mitmachen!

Tags