Re-Design XPUsermanager Homepage

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

[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

[Luckie]

Zitat:

Zitat von Florian Hämmerle (Beitrag 1076162)

.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

Verdammt, das wars. Jetzt passt es.

So, bleibt noch ein vernünftiges Farbschema. Was würdet ihr da vorschlagen? Ich habe für so was kein Auge.

[Florian Hämmerle]

Farbschema: ich würde ein dunkleres blau für den header nehmen.. das jetzige sieht irgendwie etwas "ausgewaschen" aus. Color-Code: #024978;

Was für einen Browser verwendest du denn?
Firefox? --> Addon Firebug
Chrome? Maus-Rechtsklick->Element untersuchen
dann kannst du die einzelnen HTML-Nodes ansehen und bearbeiten ohne jedesmal direkt in der Datei etwas zu ändern.

[Luckie]

Firebug habe ich installiert. Das kenne ich. Ich lade es nur hoch, damit ihr seht, wie es aussieht.

OK, den Banner ein etwas dunkleres Blau und den Rest so lassen?

[Florian Hämmerle]

gut (:

ich will dich jetzt nicht von meinem Geschmack beeinflussen aber ich finde es sehr angenehm, wenn der haupttextblock (bei dir div.body) einen (sehr) dezenten Rahmen hat (also nur etwas dunkler als die Hintergrundfarbe).

Ansonsten am Design fällt mir nichts mehr auf, nur noch am Aufbau der HTML-Datei. Da gäbe es noch einige Dinge die man machen könnte um es leichter wartbar zu halten.
.wrapper
.header
.footer

<hr /> ist eigentlich nicht notwendig, dafür kann man auch .footer einen border-top verpassen.

das nur als Anregung.

mfg Florian

[Bernerbaer]

Hallo Luckie, ich hab dir mal ein alternatives Template als PM gesendet (da ich noch immer nicht besonders begeistert bin von deinem Template :wink:).

[Luckie]

Ich habe jetzt vom berner Bären ein Template bekommen. Das werde ich mal bei mir hochladen. Aber ich muss euch waren, dagegen sieht meins mehr als bescheiden aus. Hätte ich das zur Veröffentlichung von XP gehabt, könnte ich mich jetzt zur Ruhe setzen. ;)

[Luckie]

Es gibt eine neue Version. Wie schon angekündigt, wird jetzt das Template von Bernerbaer verwendet.

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

[stahli]

Das ist RICHTIG KLASSE!
Sieht super aus (professionell aber schlicht) und ist sehr übersichtlich.

Nur die Schriftgröße im Impressum passt (noch) nicht.