Beiträge von Voditzka

Voditzka · 1. August 2019

Vielen Dank =)

Voditzka · 31. Juli 2019

Hallo,

ich probiere mich gerade an einem verschachteltes Accordion . Jedoch bekomme ich es nicht hin, dass das zweite Accordion das Erste beeinflusst.

https://jsfiddle.net/6vjLrkqg/

Wenn man auf "Accordion 1" drückt soll das verschachtelte "Accordion xxx" auftauchen. -> Alles richtig bis jetzt.

Aber sobald ich dann das "Acordion xxx" anklicke passt sich das "Accordion 1" nicht an. -> Text verschwindet hinter dem "Accordion 2"

Erst sobald ich "Accordion 1" schließe und wieder öffne passt sich die Höhe darauf an.

Ich hoffe Ihr könnt mir helfen.

Voditzka · 6. Februar 2018

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