Ich möchte mit dem CustomPages Plugin eine Seite erstellen soweit so gut.
Hab ich auch 
Nun möchte ich zwei Boxen anzeigen lassen und zwar so
Wie genau mach ich das nun ?
Man kann in dem Plugin Html oder template wählen
Ich bräuchte den Code um solche zwei boxen zu erstellen
Kann mir dabei jemand helfen hab da nicht so die Ahnung
Gibt zwar ein paar Codes im Netz aber welcher wäre der sauberste
.div1 {
width: 400px;
float: left;
}
.div1 {
width: 400px;
float: right;
}
irgendwie so
Sowas in der art habe ich auch gefunden aber dann sieht es nicht so aus wie im Screen 
.box1, .box2 {
float: left;
width: 50%;
}
Das wäre für halbe halbe. Je nachdem mit Rand und allem drum und dran sind 50% Breite auch zu viel, da musst du schauen welcher Wert da genau passt.
Du brauchst einen container, der zwei subcontainer enthält.
<div id="container">
<div id="header">
</div>
<div id="content">
</div>
</div>Display MoreOk ich hab nun in der Html Seite
Code<div> <p class="hallboxbottom">Überschrift </p> <p class="hallboxleft"></p> <p class="hallboxright"></p> <p class="hallboxbottom">Fusstext</p> </div>
und in der CSS Erweiterung
CodeDisplay More//Hall Boxen .hallboxleft { width:49%; border: 1px solid #ccc; float: left; min-height: 200px; margin-top: 10px; } .hallboxright{ width:49%; border: 1px solid #ccc; float:right; min-height: 200px; margin-top: 10px; } .hallboxbottom { clear: both; min-width:100%; padding:1px; }
und das sieht derzeit so aus
wie bekomme ich da jetzt noch den blauen balken in die boxen ?
du musst in die Halbboxen einen Subcontainer mit der gewünschten Höhe und Farbe einfügen, sowie einen container für den Inhalt, der die Resthöhe einnimmt.
<!DOCTYPE html>
<html dir="ltr" lang="de">
<head>
<style type="text/css" media="screen">
//Hall Boxen
.hallboxleft {
width:48%;
border: 1px solid #000;
float: left;
min-height: 200px;
margin-top: 10px;
}
.hallboxright{
width:48%;
border: 1px solid #000;
float: right;
min-height: 200px;
margin-top: 10px;
}
.hallboxbottom {
clear: both;
min-width:100%;
padding:1px;
}
.header {
height: 20px;
background: blue;
}
</style>
</head>
<body>
<div id="wrapper">
<div class="hallboxleft">
<div class="header">
</div>
<div class="content">
</div>
</div>
<div class="hallboxright">
<div class="header">
</div>
<div class="content">
</div>
</div>
<div class="hallboxbottom">
</div>
</div>
</body>
</html>
irgendwie so^^
Im mobilen Style den den float entfernen und den width auf 100% setzen.
//Hall Boxen
.hallboxleft {
width:48%;
border: 1px solid #ccc;
float: left;
min-height: 200px;
margin-top: 10px;
}
.hallboxright{
width:48%;
border: 1px solid #ccc;
float: right;
min-height: 200px;
margin-top: 10px;
}
.hallboxbottom {
clear: both;
min-width:100%;
padding:1px;
}
.header {
height: 30px;
border: 1px solid #ccc;
background: #3875af;
color: #FFF;
font-size: 15px;
font-family: Tahoma;
font-weight: bold !important;
text-transform: uppercase;
}So hab ich das nun im CSS muss ich für den Mobilen Style jetzt sowas nochmal machen ?
Sorry das ich frag aber ich glaub das ist heut das erste mal das ich sowas zusammen bastel
//Hall Boxen
.hallboxleft, .hallboxright {
width:100%;
float: none;
}Dank dir 
Don’t have an account yet? Register yourself now and be a part of our community!