FUH22860/OneForAll
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Übersicht nach Muster pRoGrAmMiErT

Browse Source
This commit is contained in:
Tamara Geiter 2022-03-30 17:18:00 +02:00
parent 0962b1662b
commit 987472178f
2 changed files with 37 additions and 20 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

44
oneforall/index.css
View File

@ -9,12 +9,12 @@ h2 {
.divtop { .divtop {
border:1px; border:1px;
border-bottom-style:solid; border-bottom-style:solid;
width:100vw; display:flex;
padding:5px; padding:5px;
} }
.divsubtop { .divsubtop {
border-bottom: 1px solid black; /* remove after testing */ /*border-bottom: 1px solid black; /* remove after testing */
} }
.searchtop { .searchtop {
@ -27,24 +27,36 @@ h2 {
.buttontop2 { .buttontop2 {
width:7em; width:7em;
} }
.divmain { #divmain {
display:flex; border:1px solid;
justify-content: center; margin:50px;
height:80vh;
display:grid;
grid-template-areas:
'header header'
'main main'
'news costs';
grid-template-rows: 15% 65% 20%;
} }
.divmaintop { .divmaintop {
/* border:1px solid; For testing purposes*/ grid-area: header;
height:50px; border-bottom:1px solid;
text-align:center; text-align:center;
/* margin: 0 auto; Old way of centering*/
position:absolute;
left:0;
right:0;
} }
.divcontent { .divmaincontent {
border:1px solid; grid-area: main;
position:absolute; text-align:center;
left:0; }
right:0; .divmainnews {
grid-area: news;
border-top:1px solid;
border-right:1px solid;
text-align:center;
}
.divmaincosts {
grid-area: costs;
border-top:1px solid;
text-align:center;
} }
hr { hr {

13
oneforall/index.php
View File

@ -22,13 +22,18 @@
<button type="button" class="buttontop2">Benutzer</button> <button type="button" class="buttontop2">Benutzer</button>
</div> </div>
<div class="divmain"> <div id="divmain">
<div class="divmaintop"> <div class="divmaintop">
<h2>Übersicht</h2> <h2>Übersicht</h2>
<hr>
</div> </div>
<div class="divcontent"> <div class="divmaincontent">
<p>Test</p> <p>Generelle Übersicht</p>
</div>
<div class="divmainnews">
<p>News Übersicht</p>
</div>
<div class="divmaincosts">
<p>Kosten Übersicht</p>
</div> </div>
</div> </div>