Guten Tag,
ich baue gerade ein kleines Design zusammen und stoße mit meinen doch noch recht neuen HTML und CSS Kenntnissen schnell an meine Grenzen. Margin und Padding verschieben / skalieren meine Boxen. Jedoch möchte ich eine normale 100 % Ausfüllung der Boxen in meinem Wrapper, sowie keine lästigen Sprünge wenn ich zwei Boxen untereinander mache (verschiebt alles nach unten). Leider kann ich die Dateien nirgends hochladen (sperre).
Schon einmal vielen Dank für eure Hilfe. 
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="style.css" type="text/css" />
<title>Something!</title>
</head>
<body>
<header>
</header>
<div id="wrapper">
<h1>Mc K doubleV</h1>
<!-- Erste Reihe -->
<!-- HEADER -->
<div class="accordian box row" id="white">Sehr viel blabla bla.
</div>
<!-- second -->
<div class="color box normal" id="green">Grün</div>
<div class="grow box wide" id="yellow">Blau</div>
<div class="grow box normal" id="red">Gelb</div>
<!-- third -->
<div class="rotate box high" id="blue">Blau</div>
<div class="rotate box both" id="red">Gelb</div>
<div class="color box normal" id="green">Grün</div>
<div class="color box normal" id="green">Grün</div>
<div class="color box normal" id="green">Grün</div>
<div class="rotate box normal" id="yellow">Gelb</div>
<div class="color box wide" id="blue">Blau</div>
</div>
</body>
</html>
Alles anzeigen
@charset "utf-8";
* {
margin: auto;
text-shadow: 1px 1px 1px #4d4d4d;
}
body {
background-image: url(bg.jpg);
}
#wrapper {
height:700px;
width:80%;
}
h1 {
color:white;
text-align:center;
}
header {
margin-top:20px;
margin-bottom:20px;
padding:20px;
}
#content {
padding:10px;
}
.box {
padding:10px;
float:left;
border-radius:2px;
transition:all 0.3s ease;
font-size:40;
margin: 5px;
overflow:hidden
}
.normal { /*einfache Box*/
height:200px;
width:23%;
}
.wide { /*Box mit doppelter Länge */
height:200px;
width:46%;
}
.row { /*Box als komplette Reihe */
width:96%;
text-align:justify;
}
.high /*einfache Box mit doppelter Höhe */{
height:400px;
width:23%;
}
.both{ /*box mit doppelter Höhe und doppelter Länge */
height:400px;
width:46%;
} /*Box Farben*/
#red {background-color:#ff8080;}
#yellow {background-color:#ffff66;}
#green {}
#blue {background-color:#6699ff;}
#brown {background-color:#cc6600;}
#white {background: transparent url(transparent.png) repeat; font-size:20px;}
/*Effekte */
.grow:hover
{
-webkit-transform: scale(1.3);
-ms-transform: scale(1.3);
transform: scale(1.3);
}
.circle:hover
{
border-radius:40%;
}
.rotate:hover
{
-webkit-transform: rotateZ(-5deg);
-ms-transform: rotateZ(-5deg);
transform: rotateZ(-5deg);
}
.color
{
background-color:#33cc33;
}
.color:hover
{
background-color:#b3ff66;
}
.accordian{height:182px; transition: height 1s ease-in-out;}
.accordian:hover{height:400px;}
Alles anzeigen
