Re-Design XPUsermanager Homepage

[Florian Hämmerle]

Ich würd die Boxen irgendwie noch mit einem dezenten Rahmen versehen, damit es ne Grenze gibt.

mfg Florian

€dit: achja und padding gibts bei CSS auch noch

[Namenloser]

Ich weiß nicht, ob es schon gesagt wurde, aber ich würde die Kopf- und Fußzeile genau so breit machen wie den Inhalt in der Mitte, sodass die Ränder bündig abschließen. Außerdem würde ich das <hr> im Footer entfernen, und ggf. durch eine CSS-Border ersetzen. <hr> wirkt irgendwie sehr altbacken (wobei man es per CSS natürlich auch moderner aussehen lassen könnte, aber eigentlich hat das Tag im semantischen Web eh nichts verloren).

[Luckie]

So ich habe jetzt ein festes Layout genommen von ungefähr 800 Pixeln Breite. Leider habe ich Probleme mit den drei Boxen am unterem Rand. Ich bekomme sie nicht zentriert und auf die richtige Breite.

http://www.michael-puff.de/Privat/Dev/XPUsermanager/

Mein Stylesheet:

Code:

/*
   Bildschirm Stylesheet für xpusermanager.de
   2011-01-20
*/

.navigation {
   text-align: right; 
   margin-bottom: 20px;
   padding: 5px;
   background-color: lightblue;
   border-left: 2px solid #818485;
   border-right: 2px solid #818485;
   border-bottom: 2px solid #818485;
}

body {
   font-family: Arial, Sans-Serif;
   font-size: 90%;
   width: 840px;
   margin-left: auto;
   margin-right: auto;
   background-color: #F8F8FC;
}

h1.title {
   font-style: italic;
   background-color: lightblue;
   color: white;
   margin: 0px;
   padding: 5px;
   border-left: 2px solid #818485;
   border-right: 2px solid #818485;
   border-top: 2px solid #818485;
}

h1 {
   padding: 0px;
}

h2, h3 {
   padding: 0px;
}

p {
   padding: 0px;
}

font.em {
   font-weight: 600;
}

.navigation a {
    color: black;
   font-weight: bold;
}

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: 200px;
   padding: 20px;
   margin: 5px;
   background-color: #E8E8E8;
}

div.footer {
   clear: both;
   padding-top: 10px;
   text-align: right;
   font-size: small;
}

div.hintbuy {
   text-align: right;
   font-weight: bold;
}

div.downloadlink {
   text-align: center;
   font-weight: bold;
}

table {
   border-collapse: collapse;
   border-width: 2px;
   border-style: solid;
   border-color: gray;
   font-size: 90%;
}

th {
   text-align: left;
   border-width: 1px;
   border-style: solid;
   padding: 3px;
   font-weight: bold;
}

td {
  padding: 3px;
  border-width: 1px;
  border-style: solid;
}

Und wem ein besseres Farbschema einfällt..nur her damit. Denn damit bin ich auch noch nicht zufrieden.

Ach so, warum ist das Padding oben und unten in der großen Box größer als am Rand? Das Padding von den Überschriften habe ich doch auf null gesetzt?

[Florian Hämmerle]

Zum Padding-Problem: margin der Überschrift ist aber nicht Null (deshalb auch der größere Abstand)

Boxen unten: musst du rechnen: Absolute Breite = Margin + Borderwidth + Padding + Width. Deine Breite dividiert durch 3 (Anzahl der Boxen) gibt dir die maximale Breite einer Box). Damit kannst du dann herumexperimentieren.

mfg Florian

[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.