flexbox_etwas_kompliziert.php
Quell Code
<!DOCTYPE HTML>
<html lang="de">
<head>
<title>Test</title>
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<style>
* {
margin: 0;
padding: 0;
font-family: monospace;
}
main{
display:flex;
border: 1px solid red;
padding: 5px;
height:calc(100vh - 70px);/*Minus header*/
}
.flex-container-navigation {
display: flex;
flex-direction: row;
align-content:space-around;
}
#oben{
height:20vh;
}
#mitte{
display:flex;
flex:1 auto;
}
#left{
flex:1 auto;
display: flex;
flex-direction: row;
flex-wrap: nowrap;
justify-content: center;
align-content: center;
align-items: center;
}
#left>span{
flex:1 0 auto;
text-align:center;
}
#rechts{
flex: 1 auto;
}
.mitte{
display:flex;
flex: 1 0 auto;
align-self: stretch;
font-family: Coolvetica;
font-weight: bold;
flex:1;
font-size:1rem;
}
#last{
background:url('http://www.animatedimages.org/data/media/35/animated-eye-image-0024.gif');
display:block;
width:100%;
height:100%;
border:none;
background-position:center;
background-repeat:no-repeat;
background-size:60% 180%;
font-weight:bolder;
text-align:center;
font-size:3em;
color:rgba(255,0,0,0.3)
}
.left-container {
display:flex;
flex-direction: column;
flex-basis: auto;
}
.left1 {
background:#aaa;
}
.dropdown span{
display:flex;
flex-direction:column;
margin-top:-100%;
}
.left2{
padding: 5px;
flex: 1;
overflow:auto;
height:calc(100% - 12px);/*Minus padding und border*/
}
.left2> span{
height:auto;
display:flex;
flex-direction:column;
}
.left2>span button,.left1 span>button{
cursor:pointer;
height:30px;
border:none;
background: none;
text-align:left;
}
.left3 {
background: #AA00CC;
}
.right-container {
display:flex;
flex-direction: column;
flex:1;
}
.right1 {
background: #AAAA00;
flex: 1;
}
.right2 {
background: #AAAAEE;
flex: 1;
}
.right3 {
background: #AAAAFF;
flex: 1;
}
.dropdown > input[type="checkbox"] {
position: absolute;
left: -100vw;
}
.dropdown > label{
display:block;
padding: 5px;
}
.dropdown > label:after {
content: ">>>>";
float:right;
}
.dropdown:hover span{
margin-top:0%;
}
button:hover,span button:hover,#last:hover{
background: lightblue;
}
@media (max-width:570px){
.flex-container-navigation{
background:red;
flex-direction:column;
}
main{
flex-direction:column;
}
main>*{
height:200px;
}
}
.right-container div,.left-container div{
border:1px solid black;
}
main .left3 label input {
display: none; /* hide the default checkbox */
}
/* style the artificial checkbox */
main .left3 label span {
height: 30px;
width: 30px;
border: 3px solid grey;
display: inline-block;
position: relative;
background:red;
}
main .left3 [type=checkbox]:checked + span:before {
content: '\2714';
position: absolute;
top: -2px;
height:30px;
width:26px;
border:3px solid red;
left: -3px;
font-size:25px;
font-weight:900;
line-height:1.32;
padding-left:4px;
background:green;
}
</style>
</head>
<body>
<form target="_self" action="#" method="post">
<div id="oben" class="flex-container-navigation">
<div id="left"><span>
headline</span>
</div>
<div id="mitte" class="headline">
<button class="mitte" type="submit" name="headline">1</button>
<button class="mitte" type="submit" name="headline">2</button>
<button class="mitte" type="submit" name="headline">3</button>
<button class="mitte" type="submit" name="headline">
4</button>
<button class="mitte" type="submit" name="headline">
5
</button>
<button class="mitte" type="submit" name="headline">
6
</button>
<button class="mitte" type="submit" name="headline">
7
</button>
</div>
<div id="rechts">
<button id="last" type="submit" name="headline">
letzter</button>
</div>
</div>
<main>
<aside class="left-container">
<div class="left1">
<div class="dropdown">
<input type="checkbox" id="my-dropdown" name="my-checkbox">
<label for="my-dropdown" data-toggle="dropdown"> Alle anzeigen </label>
<span>
<button type="submit" class="b1">
file1
</button>
<button type="submit" class="b1">
file2
</button>
<button type="submit" class="b1">
längerals die anderen bla boa der der
</button>
</span>
</div>
</div>
<div class="left2">
<span> <button type="submit" name="b2">text1</button>
<button type="submit" name="b2">text2</button>
<button type="submit" name="b2">text3</button>
<button type="submit" name="b2">text4</button>
<button type="submit" name="b2">text1</button>
<button type="submit" name="b2">text2</button>
<button type="submit" name="b2">text3</button>
<button type="submit" name="b2">text4</button>
<button type="submit" name="b2">text1</button>
<button type="submit" name="b2">text2</button>
<button type="submit" name="b2">text3</button>
<button type="submit" name="b2">text4</button>
<button type="submit" name="b2">text1</button>
<button type="submit" name="b2">text2</button>
<button type="submit" name="b2">text3</button>
</span>
</div>
<div class="left3"> left3
<label>
<input type='checkbox'>
<span></span>
Checkbox label text
</label>
</div>
</aside>
<aside class="right-container">
<div class="right1"> right1</div>
<div class="right2"> right2 </div>
<div class="right3"> right3 </div>
</aside>
</main>
</form>
<script>
$(document).ready(function(){
t=$('#left>span').html()
go(t);
$(window).resize(function(){
go(t)
});
function go(t){
var h=$('#mitte').height();
var h1=h;
$('#left').html('')
if(h>30){
h=h*2;
normal=100+h;
}else{
h=h*2;
normal=100+h/2;
}
$('#left,.mitte,#last').css('font-size',normal+'%')
$('#left').html(t+','+h1+','+normal+'%');
}
});
</script>
</body>
</html>
Comments