Ecke rund, CSS Layout : Designen für Entwickler

Guten Abend ihr lieben,

ich plage mich gerade mit dem Design einer Seite für die Anmeldung zu einem Newsletter, da das Backend hier nicht wirklich aufwendig ist, wollte ich mich mal am „Designen“ versuchen. Das war und ist nicht meine Stärke.

Problem Nummer 1 : Wie bekomme ich schnell und „sicher“ ein Design mit 3 Spalten auf die Page. Nach kurzer Suche bin ich auf das „BlueTrip CSS Framework“ gekommen.

Dieses bietet das einfache Grid System vom 960er Grid CSS Framework inklusive einigen netten Formatierungen für Formulare und so weiter.

Die Nutzung ist denkbar einfach, nach dem Einbinden der .CSS Files braucht es nur ein, ich nenne es mal „Div Gerüst“ in folgendem Format:

<div class=“container“>

<div class=“span-8″> Content </div>

<div class=“span-4″> Content </div>

<div class=“span-8 last“> Content </div>

</div>

Und das war es auch schon. Man kann nebenbei auch noch weitere „Parameter“ nutzen , zum Beispiel prefix und suffix um abstände zwischen den Spalten zu erhalten. Sehr nett und einen Blick wert.

Anschließend wollte ich nun auch noch die schönen runden Ecken um ein paar Div-Boxen, erst habe ich mich an CSS + Bildern versucht. Geht ganz klar, aber viel zu aufwendig. Gelöst habe ich es mit JQuery und dem Corner Plugin.

Nach dem Download einfach nur die Javascript + CSS Datei einbinden (wenn nicht bereits vorhanden auch JQuery), und im Head der Page mit folgendem Code die DIV’s angeben welche „Ecken“ bekommen sollen:

<script type=“text/javascript“>
$(document).ready(function() {
$(„#highlightsBox“).corner(„5px“);
$(„#projectDescription“).corner(„5px“);
$(„#footer“).corner(„5px“);
});
</script>

Fertig sind die runden Ecken 🙂