DidgeFrank
Mitglied
Wie der Titel schon sagt. Meine Tabs gehen nicht mehr weiter nach rechts, jedoch
wäre es von der Anordnung sowieso günstiger in mehreren Zeilen zu arbeiten.
Ich würde gerne eine zweite Tab Zeile anfangen, weiss jedoch nicht wie...
Ich füge mal einen Auszug aus dem html und dem css ein...
wäre es von der Anordnung sowieso günstiger in mehreren Zeilen zu arbeiten.
Ich würde gerne eine zweite Tab Zeile anfangen, weiss jedoch nicht wie...
Ich füge mal einen Auszug aus dem html und dem css ein...
HTML:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width">
<title>Catsuitapprentice – Farben</title>
<link rel="stylesheet" type="text/css" href="stylesheet.css"/>
<link rel="stylesheet" type="text/css" media="print" href="print.css"/>
<!--<link rel="stylesheet" type="text/css" media="screen and (max-width:630px),
screen and (max-device-width: 630px)" href="mobile.css"/> -->
<meta name="description" content="Hier seht ihr Bilder von Kunden." >
<link rel="icon" type="image/x-icon" href="favicon.ico" />
</head>
<body>
<div id="container">
<div id="kopfleiste">
<h2><a href="index.html">Catsuitapprentice - Farben</a></h2>
</div>
<img src="Bilder/Catsuits/bb.jpg" class="bild" alt="bodybag_pink" width="960" height="279">
<div id="container2">
<div id="links">
<div id="menu">
<ul>
<li><a href="index.html">ÜBER MICH (UND MEINE "VISION")</a></li>
<li><a href="werkzeuge.html">MEINE WERKZEUGE</a></li>
<li><a href="Catsuits.html">CATSUITS</a></li>
<li class="current"><a href="Colors.html">FARBEN</a></li>
<li><a href="kontakt.html">KONTAKT</a></li>
<li><a href="Links.html">LINKS</a></li>
<li><a href="impressum.html">IMPRESSUM</a></li>
</ul>
</div>
</div>
<div id="inhalt">
<h2>verfügbare Farben</h2>
<p>
<div class="tabbed">
<input name="tabbed" id="tabbed1" type="radio" checked>
<section>
<h1>
<label for="tabbed1">Standardfarben</label>
</h1>
<div>
<p>
<div style="display: table; width: 100%;">
<figure style="display: table-cell; padding: 0 4px; text-align: center;">
<img src="Bilder/Colors/Four_D/apfelgrün.jpg" alt="apfelgrün">
apfelgrün
</figure>
<figure style="display: table-cell; padding: 0 4px; text-align: center;">
<img src="Bilder/Colors/Four_D/aubergine.jpg" alt="aubergine">
aubergine
</figure>
</div>
</p>
<p>
<div style="display: table; width: 100%;">
<figure style="display: table-cell; padding: 0 4px; text-align: center;">
<img src="Bilder/Colors/Four_D/babypink.jpg" alt="babypink">
babypink
</figure>
<figure style="display: table-cell; padding: 0 4px; text-align: center;">
<img src="Bilder/Colors/Four_D/black.jpg" alt="black">
schwarz
</figure>
</div>
</p>
Code:
.tabbed{
float : left;
width : 100%;
}
.tabbed > input{
display : none;
}
.tabbed > section > h1{
float : left;
box-sizing : border-box;
margin : 0;
padding : 0.5em 0.5em 0;
overflow : hidden;
font-size : 1em;
font-weight : normal;
}
.tabbed > input:first-child + section > h1{
padding-left : 1em;
}
.tabbed > section > h1 > label{
display : block;
padding : 0.25em 0.75em;
border : 1px solid #ddd;
border-bottom : none;
border-top-left-radius : 4px;
border-top-right-radius : 4px;
box-shadow : 0 0 0.5em rgba(0,0,0,0.0625);
background : #fff;
cursor : pointer;
-moz-user-select : none;
-ms-user-select : none;
-webkit-user-select : none;
}
.tabbed > section > div{
position : relative;
z-index : 1;
float : right;
box-sizing : border-box;
width : 100%;
margin : 2.5em 0 0 -100%;
padding : 0.5em 0.75em;
border : 1px solid #ddd;
border-radius : 4px;
box-shadow : 0 0 0.5em rgba(0,0,0,0.0625);
background : #fff;
}
.tabbed > input:checked + section > h1{
position : relative;
z-index : 2;
}
.tabbed > input:not(:checked) + section > div{
display : none;
}