Aufgefrischtes Layout

19. Juli 2010 um 13:38 | Artikel von Johannes Sebald | 0 Kommentare

Nach gut eineinhalb Jahren bekommt das Layout des techblogs einen neuen, übersichtlicheren Anstrich. Zuerst fällt auf, dass die Seite in die Mitte gerückt ist. Die Suchfunktion und die ‘Abonnieren’ Links sind zur besseren Übersicht ganz nach oben gerutscht. Auch ist die Tag-Wolke vom Fußbereich in die Seitenleiste nach oben gewandert.

Die Hauptnavigation wurde herausgenommen, da die Elemente unter den ‘Kategorien’ jederzeit erreichbar sind, und somit mehr Platz für die Beiträge zur Verfügung steht. Die Ecken der Seite wurden mithilfe des neuen CSS 3 Standard (border-radius) auf 15 Pixel abgerundet. Alle gängigen, neuen Browser (Firefox 4, Safari 5, Chrome 6 und Internet Explorer 9) unterstützen HTML 5 sowie CSS 3.

Einen Pixel mehr, also von 12 auf  13 Pixel, wurde die Schrift vergrößert, da immer mehr Besucher mit einer hohen Auflösung diesen Blog lesen. Als einheitliche Hyperlinkfarbe wurde das markante Blau übernommen. Die großen Werbebanner oben und auf der rechten Seite sind nun verschwunden und durch kleinere Textwerbung ersetzt worden.

Kleinere und größere Fehler wurden behoben und somit stand nach der zweiwöchigen Arbeit nichts mehr im Wege um das neue Design zu veröffentlichen.

Wir freuen uns umso mehr, wenn Ihr uns als Kommentar Eure Meinung zum neuen Layout hinterlassen würdet.

HowTo: Positionierung der Container mit CSS

06. März 2010 um 17:24 | Artikel von Johannes Sebald | 2 Kommentare

Die Positionierungsmöglichkeiten der Divs (beziehungsweise Layer, Ebenen, Container) werden selten gut erklärt, vor allem im deutschsprachigen Raum. Daher hab ich mich entschlossen, das kleine HowTo von Terrikay (Autorin Teresia Kuhr) zu übernehmen und es wieder zu veröffentlichen, da es die Seite nicht mehr gibt.

Mich hat damals zum Verstehen von CSS dieses HowTo sehr weitergeholfen, da es einfach erklärt wie Divs funktionieren. Hier zwei Ausschnitte als Illustration von diesem Blog:

#inhalt {

background: #fff;

float: left;

width: 520px;

padding: 5px 30px 30px 30px;

border-right: 1px solid #dfdfdf;

}

<!–Das CSS Schnipsel–>

<div id=”inhalt”></div>

<!–Und hier der dazugehörige DIV Container–>

weiterlesen…