Re-Design XPUsermanager Homepage

[RWarnecke]

Hallo Michael,

was mir gerade so spontan aufgefallen ist, ich finde keinen Preis auf Deiner Seite. Das wäre auf jedenfall noch eine Zeile wert auf der Seite Lizenz erwerben.

P.S. : Habe den Preis gefunden.

[Luckie]

Das Problem ist aber, dass wenn die Boxen nicht aneinander kleben sollen, ich für die mitteleren Box einen Rand brauche. Gebe ich jetzt im Stylesheet für box einen rechten Rand an, hat auch die rechte Boy rechts einen Rand und schließt somit nicht mehr bündig mit der großen Box in der Mitte ab.

Und die Boxen hab eich deshalb nicht mit einem Rahmen versehen oder farblich hinterlegt (Das ist jetzt nur um sie sichtbar zumachen.), weil es dann blöd aussieht, wenn sie nicht gleich hoch sind. Gut, ich könnte ihnen auch eine feste Höhe geben.

Stimmt der Preis fehlt.

[Florian Hämmerle]

Problem mit der mittleren Box:

CSS

Code:

.middle {margin: 0px 10px;}

HTML

Code:

<div class="box middle">...</div>

dadurch erhält nur die mittlere Box einen Außenabstand.

[Luckie]

Man kann also zwei Klassen angeben? Gut, hab eich nicht gewusst. Aber passen tut es immer noch nicht.

Code:

.middle {
   margin-top: 20px;
   margin-left: 10px;
   margin-right: 10px;
}

div.body {
   text-align: justify;
   width: 800px;
   padding: 20px;
   margin-left:auto;
   margin-right:auto;
   background-color: #E8E8E8;
}

div.bottom {
   width: 800px;
   margin-left:auto;
   margin-right:auto;
   padding-top: 5px;
}

div.boxes {
   float: left;
   width: 233px;
   padding: 20px;
   margin-top: 20px;
   margin-left: 0px;
   margin-right: 0px;
   background-color: #E8E8E8;
}

[Florian Hämmerle]

.middle muss in der css nach .boxes definiert werden sonst werden die werte wieder überschrieben...

Code:

.bottom
{
   width: 840px;
}

.boxes, .middle
{
   float: left;
   width: 230px;
   padding: 20px;
   margin-top: 20px;
   margin-left: 0px;
   margin-right: 0px;
   background-color: #E8E8E8;
}

.middle
{
   margin-left: 15px;
   margin-right: 15px;
}

Das dürfte klappen (nur aus dem Kopf heraus jetzt)

mfg Florian

[Luckie]

Code:

.boxes  {
   float: left;
   width: 213px;
   height: 150px;
   padding: 20px;
   margin-top: 20px;
   margin-left: 0px;
   margin-right: 0px;
   background-color: #E8E8E8;
}

.middle {
   margin-top: 20px;
   margin-left: 10px;
   margin-right: 10px;
}

Die Boxen links und rechts scheinen immer noch einen Rand zu haben. Und wenn ich sie breiter mache rutscht die rechte Box wieder unter die mittlere.

[Florian Hämmerle]

.bottom muss noch 840px breit werden wie alles darüber

Du hast .body width auf 800px und padding auf 20px => absolute Breite = padding-left + width + padding-right = 20 + 800 + 20 = 840px.

mfg Florian

[pustekuchen]

Try this

Code:

.navigation {
    background-color: lightblue;
    border-bottom: 2px solid #818485;
    border-left: 2px solid #818485;
    border-right: 2px solid #818485;
    margin-bottom: 20px;
    padding: 5px;
    text-align: right;
}
body {
    background-color: #F8F8FC;
    font-family: Arial,Sans-Serif;
    font-size: 90%;
    margin-left: auto;
    margin-right: auto;
    width: 840px;
}
h1.title {
    background-color: lightblue;
    border-left: 2px solid #818485;
    border-right: 2px solid #818485;
    border-top: 2px solid #818485;
    color: white;
    font-style: italic;
    margin: 0;
    padding: 5px;
}
h2, h3 {
    margin: 0;
    padding: 0;
}
p {
    margin: 0;
    padding: 0;
}
font.em {
    font-weight: 600;
}
.navigation a {
    color: black;
    font-weight: bold;
}
.middle {
    margin-left: 10px;
    margin-right: 10px;
    margin-top: 20px;
}
div.body {
    background-color: #E8E8E8;
    margin-left: auto;
    margin-right: auto;
    padding: 20px;
    text-align: justify;
    width: 800px;
}
div.bottom {
    margin-left: 0;
    margin-right: 0;
    padding-top: 0;
    width: 880px;
}
div.boxes {
    background-color: #E8E8E8;
    float: left;
    margin-left: 0px;
    margin-right: 5px;
    margin-top: 15px;
    padding: 15px;
    width: 28%;
}
div.footer {
    clear: both;
    font-size: small;
    padding-top: 10px;
    text-align: right;
}
div.hintbuy {
    font-weight: bold;
    text-align: right;
}
div.downloadlink {
    font-weight: bold;
    text-align: center;
}
table {
    border: 2px solid gray;
    border-collapse: collapse;
    font-size: 90%;
}
th {
    border-style: solid;
    border-width: 1px;
    font-weight: bold;
    padding: 3px;
    text-align: left;
}
td {
    border-style: solid;
    border-width: 1px;
    padding: 3px;
}

Und die mittlere Box wieder auf

Code:

class="boxes"

Kleiner Tipp: Falls du Firefox benutzt, lad dir das Addon Firebug runter. Damit kannst du on the fly die Daten ändern und siehst direkt das Ergebnis.