Design your Life!
Blog über Blog soweit das Netz reicht…(leider) schläft die Konkurrenz nicht, da bedarf es allerhand Einfallsreichtum,Wissen und Tricks darüber, wie man seinen eigenen Blog für den User so attraktiv wie möglich gestaltet. Das Zauberwort heißt: Einzigartigkeit! Sei anders als die zahllosen anderen Blogs, sei mutig und unique!
Der Leser möchte unterhalten UND informiert werden. Infotainment zieht eine Menge User an. Der Mensch wünscht sich Brot und Spiele- daran hat sich bis heute nichts geändert.
Sei immer auf dem neuesten Stand und verbinde deine Aktualität mit etwas Entertainment, das den Leser erfreut. Verbinde Deine News mit unterhaltsamen Details. Schreibe über Dinge, die Erstaunen wecken.
Erschaffe Dir Deine eigenen Wortwelten. Der Leser möchte ein Stück „nach Hause kommen“ fühlen, wenn er Deinen Blog besucht. Deshalb überlege Dir eine charakteristische Wortwahl für Deine Artikel- das steigert den Wieder Erkennungseffekt. Allerdings darfst Du auch immer Überraschungen in Deine Sprache einbauen- denn es soll ja auf gar keinen Fall langweilig werden. Balanciere gekonnt aus, zwischen dem Gewohntem und den Innovationen in Deinen Texten.
Die visuelle Umsetzung Deiner Inhalte sind der eigentliche Kern Deines Blog. Ein langweiliges oder schon oft gesehenes Design- das gibt die meisten Looser- Punkte auf dem Blog- Markt.
Der User klickt direkt weiter, auch wenn die Inhalte noch so gut sein mögen.
Lerne von den Besten! Schau Dir die Seiten an, die eine hohe Besucherfrequenz vorweisen können.
Wie gehen andere Dein Thema an? Inhaltlich und visuell? Schau den Profis über die Schulter, speziell im internationalen Bereich. Wie sind die Blogs über Dein Thema jenseits des großen Teichs aufgemacht? Aus den USA kommen immer noch die neuesten Innovationen und Tipps.
Höflichkeit und Respekt sind heute rar. Mach Du es anders. Deine Leser sollten Deine Wertschätzung zwischen den Zeilen lesen können. Es sind Deine geschätzten Gäste, sei also so gastfreundlich und höflich zu Ihnen, als ob sie in Deinem Wohnzimmer sitzen würden. Sie werden es Dir zu danken wissen, indem Sie wieder zu Dir kommen werden.
Content, den es im Netz tausendfach zu lesen gibt, bringt Dir Null ein. Weder bei Google noch bei Deinen Usern. Sei ein Fischer, der das wirklich Interessante an einer aktuellen Meldung aus dem Informationsozean der Medien heraus holt! Verbinde die Aktualität mit Hintergrundwissen und Querdenken zu anderen Themen. Damit erreichst Du einen unique Content.
Hänge Deine Fahne nie nach dem Wind. Nichts ist soo langweilig wie ein ewiger Jasager. Sei auch mal unbequem, wenn es um deine Prinzipien geht. Allerdings solltest Du Deine Meinung auch immer sachlich begründen können. Bringe Deine Überzeugungen ruhig emotional rüber in Deinen Texten, aber vergesse nie die Argumente an zuführen, Die Dich bewegen.
Sei bunt und überraschend in Deinen Ansichten über die Welt und zu Deinem speziellem Thema, mache Deinen Blog zu einer Wundertüte voller Überraschungen. Niemand kann Wundertüten widerstehen, egal ob groß oder klein!
Ein Bild sagt mehr als tausend Worte. Untermale Deinen Blog mit Fotos und Videos. Niemand will heute nur noch lesen, der visuelle Hunger will gestillt werden!
Passe Dein Webdesign an Deine Inhalte an. Es sollte eine stille Grundharmonie zwischen Bildern und Inhalten bestehen. Wenig ist dabei oft mehr, damit nicht die Gefahr der Reizüberflutung und damit des sofortigen weiter klickens vom User besteht. Lege Feinarbeit nicht nur in die Texte, sondern auch in die Abstimmung zwischen dem Webdesign und den Artikeln.
Denke auch mal an die 13. Fee, die bei der Taufe Deines Blogs (heimlich) anwesend war. Sie wird Dir die nötige Inspiration schenken, um ungewöhnliche Dinge in Deinem Blog einzubauen. Fotos, die auf den ersten Blick so gar nicht zum Thema passen wollen und deshalb länger betrachtet werden, denn der Mensch sehnt sich nach sinnvollen Zusammenhängen.
Oder Kommentare, die frecher ausfallen als gewöhnlich.
Der geneigte Leser bewegt sich auf Deiner Seite, weil ihn genau Dein Thema interessiert. Deshalb schweife nicht zu weit ab. Lasse Deinen Fokus auf Deinem besonderen Thema. Natürlich sind die Randgebiete auch von Interesse, aber versuche diese sinnvoll und nicht zu textreich ein zu binden. Deine Beiträge sollten in ihrem Kern auch wirklich Dein Thema behandeln.
Dieser Punkt ist eigentlich recht einfach zu verwirklichen: mit Verweisen in neuen Beiträgen auf einzelne Worte oder Themen lenkst Du den Leser auf Dein Archiv. Mach ihn neugierig darauf, was er dort alles findet! Gestalte die Überschriften und Themen in Deinem Archiv so, dass sich Neugierde beim User aufbaut und er das Gefühl bekommt unbedingt dort weiter lesen zu wollen!
Der Informationshungrige ist immer auf der Suche nach dem Gral der Weisheit.
Es gibt Millionen von Blogs. (Das war die schlechte Nachricht) Die Gute Nachricht ist, dass Dein Blog einzigartig ist und gut besucht sein kann mit der Hilfe dieser Tipps.
Das gestalten von Blog erweist sich für einige Designer als ein etwas schwieriges Unterfangen. In der Folgenden Serie zerteile ich den Blog in verschiedene Elemente und gehe speziell auf diese ein. Die gesamte Serie besteht aus kleinen “HowTos” und soll Euch helfen Fehler zu vermeiden sowie Struktur und herangehensweise beim entwerfen zu verbessern.
Die Seirie setzt sich aus folgenden Teilen zusammen:
1. Header
2. Content Box
3. Top Navigation
4. Sidebar
5. Headlines und Formatierungen
6. Comments
7. Footer
8. Werbung
Blogs gehören zum heutigen Leben dazu wie früher wohl die Tagebücher. Oftmals sind sie das auch heute noch – eben nur in digitaler Form. Mehr und mehr jedoch werden Blogs auch von Unternehmen verwendet um beispielsweise sich selbst nach außen und damit für den Kunden besser darzustellen. Zusätzlich gibt es auch viele Blogs von Einzelpersonen oder Gruppen von Autoren, die sich einem bestimmten Thema oder Lebensbereich verschrieben haben und dazu regelmäßig Einträge ins Netz – eben in den Blog setzten.
Der Blick des Besuchers wird als erstes vom Header des Blogs angezogen. Dieser Header ist in gewisser Weise das Aushängeschild des Blogs und sollte demnach auch einen kleinen Einblick in das Thema geben.
Wie jedoch erstellt man einen solchen Header und was sollte dabei beachtet werden? Der Header wird als erstes gesehen und ist auch der Teil des Designs, der den Leser visuell erinnert. Dementsprechend ist auch seine Gestaltung individuell zu gestallten. Nach Möglichkeit heb sich dieser von anderen Blogs ab. Er ist vergleichbar mit einer Marke, die den eigenen Blog von all den anderen im Internet unterscheidet.
Ziel ist es unter vor allem dem Betrachter aufzufallen und sich im Gedächnis des Besuchers zu manifestieren.
1. Veerle
Dieser Header sticht in erster Linie durch die Farbe heraus. Das Blau ist kaum woanders auf dem Blog vertreten. Ebendso die Farbe jungen Frau.
2. Hörbücher
Visualisierung der Zielgruppe. Thematisch gestaltete Kopfgrafik.
3. Cult
Locker wirkende Grafik. Mit unterschiedlichen Font-Type.
Gerade weil der Header also im Hinblick auf den gesamten Blog so wichtig ist, sollte er auch als erster erstellt werden. Dadurch wird bereits im Vorfeld der Ton des gesamten Designs festgelegt. Die Farben und restlichen Gestaltungen können sich an ihm orientieren und es gibt ein harmonisches Bild. Zu Beginn der Erstellung des Headers steht die Überlegung zu den Inhalten des Blogs und was er dem Leser nahebringen soll. Dies kann sich in eigener Form auch im Header wiederspiegeln.
Es gibt eine Vielzahl von Möglichkeiten den Header für den Blog zu gestalten. Dennoch sollte immer und vor allem unbedingt die Message im Vordergrund stehen. Ein Header mit einem super Design bringt dem besten Blog nichts, wenn er dessen Inhalt oder Thema nicht entsprechend wiederspiegelt. Es ist sicher die einfachste Variante verschiedene Möglichkeiten auszuprobieren um schließlich den persönlich besten Header zu finden. Dennoch sollten die Überlegungen und der grob erdachte Weg nicht aus den Augen verloren werden, denn gerade beim Ausprobieren ist die Gefahr groß, sich in den verschiedenen Möglichkeiten zu verlaufen.
Bedenkt man dies alles jedoch, dann sollte der eigenen Kreativität ungezügelt nachgegeben werden. Die wichtigsten Elemente für den Header hat man sich bereits im Vorfeld überlegt – sie bilden den Ansatzpunkt. Nun können verschiedene Möglichkeiten der Kombination und auch Farbe ausprobiert werden, denn solange diese Grundelemente gleich bleiben, geht auch der Hintergedanke des Headers nicht verloren. Während der vielen Versuche ergeben sich mehrere verschiedene Varianten für den letztlichen Header des eigenen Blogs. Bei der endgültigen Auswahl sollte jedoch auch bedacht werden, dass der Header zwar einerseits den ersten Blick erhält aber auch das ist, was in Erinnerung bleibt. Der Header sollte also nicht nur zum Lesen animieren sondern auch zum Erinnern und regelmäßigen Zurückkehren zum Blog.
Bei Aufträgen im Webbereich stellt sich immer die Frage „Wie viel kostet mich der Spaß?“. Wir wollen nun ein bisschen Licht ins Dunkle bringen. Heute im ersten Teil geht es um das Umsetzen einer grafischen Vorlage in HTML bzw. XHTML Code. Wir gehen hierbei von einer grafischen Vorlage im PSD oder TIFF Format aus. Natürlich ist der Aufwand je nach Design unterschiedlich hoch. Komplexe Webseiten mit einem Anspruchsvollen Design brauchen für die Umsetzung mehr Zeit.
Es gibt Internetagenturen / Webagenturen die speziell solch einen Service einzeln anbieten. Die Preise schwanken hier von 75 bis 400€.
Hier eine Liste mit Anbietern dieses Service:
http://www.xhtmlteam.com/ 75$
http://xhtmlslicer.com/ 200-350$ 1-3 days
http://www.xhtmlmaster.com/ 77$ 8hours
http://www.xhtmlized.com/ 199$ 7days
http://www.xhtmlit.com/ 119$ 8hours
http://www.xhtmlin24hours.com/ 199$ 25hours
http://www.xhtmlgenius.com/ 250$ 3days
http://www.xhtml2go.com/ 119$
http://www.xhtmlslashcss.com/ 150$ 3days
http://www.wellcodeit.com/ 199$ days
http://www.slicerus.com/ 135$
http://www.slicendiceit.com/ 279-399$ 3-6days
http://www.slicemydesign.com/ 165$ 3days
http://www.psdxhtml.com/ 89$
http://www.psdtocode.com/ $110
Alle dieser Anbieter versprechen ein Slice in XHTML Form mit validen Code.
Ausgangssituation:
Wir haben in Photoshop ein Layout erstellt. Dieses Design liegt uns als PSD oder anderer Form vor.
Beispiel
Zielstellung:
Aus dieser Vorlage wollen wir eine möglichst browserkompatible Website bauen.
Planung:
Die Fragen die sich beim betrachten der Vorlage stellt ist:
Wie fang ich an?
Welche Elemente kann ich nicht in HTML darstellen und muss daher Grafiken erstellen?
Mit ein bisschen Erfahrung erkennt man wie sich die Seite Glieder lässt. Zum einen habe ich den Hintergrund. Dann kommt die eigentliche Seite mit dem grünlichen Balken, der den Kopf der Webseite bildet. Diesen brauch ich als eine Grafik, weil er einen Verlauf hat den ich mit HTML nicht darstellen kann. Als nächstes kommt der mittlere Teil der Seite ran. Zum einen die Navigation mit den Buttons (diese brauche ich auch als Grafik. Dann ist noch der Contentbereich, den man später mit beliebigen Inhalten füllen kann. Den Schluss der Seite bildet der Footer (Fuß der Website). Der wird auch als grafisches Element genommen, da wir hier ein Logo haben und rechts noch kleine Quadrate.
Zusammenfassung: Wir brauchen 13 Grafiken
1 Headergrafik
5 Buttons x2
1 Footergrafik
1 Hintergrundgrafik
Dateistruktur
Bevor wir jedoch mit dem schneiden der einzelnen Grafiken beginnen, kümmern wir uns um die richtige Dateistruktur. Wir schaffen uns einen Ordner für das Websiteprojekt. In diesem kommen 2 Ordner (slice & img). Für die HTML Umsetzung benötigen wir natürlich ein HTML Dokument und dazu 2 passende CSS Dateien. Ihr eine Textdatei erstellen und diese in das entsprechende Dateiformat speichern. Das ganze sieht dann so aus:
Wieso wir 2 CSS benötigen, dazu später. Erst einmal schneiden wir wie geplant unsere Bilder zurrecht. Dazu schmeißen wir unser schicke Photoshop an und laden uns die Vorlage.
Slicen
So nun sind wir im beliebten Photoshop. Zur besseren Aufteilung kann man Hilfslinien ziehen. Einfach mit der Maus auf das Lineal klicken (gedrückt halten) und an die gewünschte Position ziehen
Falls Ihr das Lineal nicht sehen könnt, versucht es einfach mit „strg+r“.
Wie Ihr nun sehen könnt habe ich die Vorlage mit den Hilfslinien schon einmal grob eingeteilt in einzelne Bereiche.
Nun wähle ich das Slicewerkzeug aus der Liste aus. 
Dann beginnen wir mit dem schneiden des ersten Bildes (den Header).
Wenn wir unsere erste Slice-Auswahl gemacht haben, überprüfen wir, ob die breite eine gerade Zahl ist in dem ich mit dem Slicewerkzeug auf die linke obere Ecke der Auswahl klicken und dann auf „Slice bearbeiten“.
Im Folgenden Fenster können wir sehen wie breit unsere Auswahl ist und dem entsprechen anpassen.
Wieso sollte die Breite eine gerade Zahl sein?
Damit wir es später leichter haben. Zum Beispiel ist das ausrichten mit „mittig“ einfacher als mit ungeraden Zahlen.
Nun kommen die Buttons dran. Dazu ziehe ich mir ein paar weitere Hilfslinien in denen ich dann die Slicerahmen ziehe.
Die Buttons sollen nachher einen Rollovereffekt haben. Dazu brauchen wir für jeden Button 2 Grafiken mit einem unterschiedlichen Hintergrund. Wenn man später auf der fertigen Website mit der Maus über den Button fährt, ändert sich die Hintergrundfarbe des einzelnen Buttons.
Jetzt muss der Footer dran glauben.
So, alle Grafiken wir markiert. Ab geht’s zum speichern der Bilder in den extra angelegten Slice Ordner. Geht auf Datei � Für Webseite speichern …
Es öffnet das magische Fenster. Hier können wir einzelne Einstellungen vornehmen, in welchem Format die Bilder gespeichert werden sollen.
Die obere Grafik speichern wir als jpeg mit einer Qualität von 60%. Dazu einfach auf die 3 klicken, im rechten bereich das Format JPEG wählen und die Qualität entsprechend runterschrauben.
Warum kein PNG oder GIF Format?
PNG ist nicht Browserkompatibel und wird auch nur von neuen Browserversionen richtig dargestellt.
GIF eignet sich bei einem Verlauf weniger, da nur 256 in diesem Format abgespeichert werden können.
Die Buttons wählen wir auf die selbe weise aus. Doch hier wählen wir hier das Format GIF mit und stellen 16 Farben ein.
Wir brauchen bei den Buttons nicht mehr Farben. Da bietet sich das GIF förmlich an um die Dateigröße so klein wie möglich zu halten.
Als letztes kommt der Footer dran, den wir mit JPEG Qualität 60% Einstellungen belegen.
Nun wird alles gespeichert. Als Dateityp wird „Nur Bilder“ ausgewählt. Lasst euch vom „*jpg“ dahinter nicht irritieren. Die Grafiken werden in dem ausgewählten Format gespeichern. Wählt dazu noch den Ordner „slice“ aus.Worum nicht als HTML speichern?
Das was Dreamweaver hier produktiert ist ein haufen unbrauchbarer HTML Code.
Ab geht es in den Slice Ordner. Dort werden die brauchbaren Grafiken kopiert und im angelegten „img“ Ordner abgelegt. Wir bennen noch die einzelnen Bilder um.
War da nicht noch etwas?
Richtig, wir wollen ja Rolloverbuttons. Das heißt wir brauchen eine 2te Version, wenn die Maus über die Buttons fährt. Sprich wir ändern die Hintergrund den Buttons und speichern das ganze noch mal wie oben schon mal beschrieben.
Hier die 2te Version der Buttons (der Rollovereffekt)
Nach dem speichern kopieren wir die Button-Bilder und speichern diese in den „img“ Ordner, wo auch die anderen sind. Und nicht das umbennen vergessen.
Für die 2te Version verwenden wir z.B. 1bahover.gif
Der erste Teil ist geschafft. Der Slice ist KOMPLETT
Auf geht’s zum umsetzen des ganzen in HTML und CSS
Als erstes bauen wir uns die Grundstrukturen und legen die Voreinstellungen fest.
Wir öffnen die drei Dateien im Dreamweaver:
index.html
formate.css
formate-ie.css
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>Hier kommt der Seitentitel rein</title> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <meta name="Author" content="WME" /> <meta name="Publisher" content="WME" /> <meta name="Copyright" content=" WME " /> <meta http-equiv="content-language" content="de" /> <meta name="keywords" content="Template" /> <meta name="description" content="Beischreibungstext der Seite " /> <meta name="Audience" content="Alle" /> <meta name="allow-search" content="yes" /> <meta name="robots" content="index, follow" /> <meta name="revisit-after" content="1 days" /> <link rel="stylesheet" type="text/css" xhref="formate.css" /> <!-- Browserweiche fuer den InternetExplorer, der Bugs behebt --> <!--[if IE]> <link rel="stylesheet" type="text/css" xhref="formate-ie.css" ><![endif]--> </head><body><!-- Hier kommt der Seiteninhalt rein--> </body></html><strong></strong>
Erklärung zu der Grundgerüst des HTML Dokuments:
1.+ 2. Geben den Doctype des Dokumentes an. In unserem Fall schreiben wir nach dem W3C Standart XHTML
4. Hier beginnt der „head“ (Kopf) Bereich in diesen werden bestimmte Tags geschrieben. Bsp.: META-Tags
5. Titel unserer Website
6. Norm in der das Dokument verfasst ist
7. – 16 Verschiedene Meta-Tags mit zusätzlichen Informationen
17. Link zur Datei CSS Datei (formate.css) in der die Gestaltung/Layout definiert wird
18.+ 19. Eine Browserweiche für den InternetExplorer. Wir wollen das auf allen Browser eine gleiche Darstellung zu sehen ist. Deshalb wird eine 2te CSS Datei (formate-ie.css) verwendet, explizit für den IE.
20. Der Kopf wird geschlossen.
21. Body Bereich beginnt. Hier kommt der Inhalt der Seite rein.
22. Kommentar der nicht auf der Seite zu sehen ist.
23. Body endet hier
24. Html endet hier
Jetzt die Grundeinstellung für die formate.css Datei
*{ margin:0px; padding:0px;}
Erklärung zum Grundgerüst der CSS Datei:
* die Einstellungen gelten für alle Element im HTML. Sprich kein Außenabstand (margin) und kein Innenabstand (padding).
Beim bau einer Website fangen wir vom Hintergrund an und arbeiten uns zum Vordergrund oder von außen nach innen. Als erstes legen wir die Hintergrundfarbe fest, die wir auch der PSD Datei entnehmen können. Dazu schreiben wir in die CSS folgendes
html
{
background-color:#1d2d3c;
text-align:center;
}
Im HTML Dokument schaffen wir nun eine Hülle für Webseite, die auch genau die Breite der Seite einnimmt. Die Breite entnehmen wir vom Bild top.jpg . Bei mir sind das jetzt 560 Pixel. Dazu schreiben wir folgendes in die HTML im Body Bereich. Ein Div-Block mit einer ID. Der Wrapper wird noch mittig ausgerichtet (margin).
HTML:
<div id=”wrapper”></div>
CSS:
#wrapper
{
Width:560px;
margin-left:auto;
margin-right:auto;
}
In diese Hülle (wrapper) kommt nun der Bannerbereich. Das sieht dann wie Folgt aus
HTML:
… <div id=”wrapper”> <div id="banner"></div> </div> …
CSS:
#banner
{
background-image:url(img/top.jpg);
width:560px;
height:42px;
margin-left:auto;
margin-right:auto;
margin-top:40px;
}
Wir legen hierbei das Hintergrundbild fest. Und weisen dem Block eine Breite und Höhe des Bildes „top.jpg“ zu. Schließlich positionieren wir es wie den wrapper und geben dem Element noch einen Abstand zum oberen Rand von 40 Pixeln.
Es folgt der mittlere Bereich der Webseite. Wir errichten hierfür eine container (Hülle) mit der id „middle“ und teilen diesen wieder die Breite der Seite zu mit dem passenden Hintergrundbild content_bg.gif.
HTML:
… <div id="wrapper"> <div id="banner"></div><div id="middle"> Inhalt </div> </div> …
CSS:
#middle
{
background-image:url(img/content_bg.gif);
}
Schließlich wird noch ein Abschluss für die Seite genötigt. Wie bei dem Menschen sind ganz unten die Füße (footer). Deshalb geben wir dem div Block die ID footer. Wie im middle Bereich wird wieder ein Hintergrundbild, was wir am Anfang des Tutorials ausgeschnitten hatten, festgelegt. Zu beachten ist hierbei, dass wir eine feste Höhe haben, die wir angeben müssen.
Und so schaut es aus:
HTML:
… <div id="wrapper"> <div id="banner"></div> <div id="middle">Inhalt</div> <div id="footer"> </div> </div> …
CSS:
#footer
{
background-image:url(img/footer.jpg);
height:35px;
}
Bisheriges Ergebnis:
Inhalte
Wir haben nun die hinterste Ebene, den Hintergrund und die 2te Ebene erstellt, das Grundgerüst der Seite. Es fehlen uns nun Inhalte für die Seite und deren Formatierung + Positionierung.
Den ersten Inhalt den wir einfügen wird die Überschrift der Seite sein im grünlichen Bereich. Dazu verwenden wir im banner Bereich den h1-Tag. Der wird anschließend im CSS formatiert. Im CSS legen wir noch einen Abstand nach links (margin-left: …) fest, damit die Schrift nicht gegen den Rand klatscht und Innenabstand nach oben (padding-top:…) aus dem selben Grund.
HTML:
…<div id="banner"> <h1>Titel der Seite</h1> </div>…
CSS:
#banner
{
…
text-align:left;
…
}#banner h1
{
margin-left:30px;
padding-top:5px;
}
Resultat:
Weiter geht’s mit dem mittleren Bereich der Seite. Es folgt nun der schwierigste Teil der Seite, die Navigation.Wir weisen noch davor in der id #middle ein text-align:left; zu, um auch wieder auf der linken Seite zu starten. Navigationen werden generell in Listen angelegt. Hierfür gibt es zwei Möglichkeiten. 1. die horizontale 2. die vertikale
Als erstes legen wir eine Liste an. Die Liste bekommt eine ID und die Listenpunkte, in der die einzelnen Buttons eingefügt werden, eine jeweils eigene class (Klasse). In den Listenpunkten fügen wir die Links ein mit einem beliebigen Textlink (z.B. Button1).
Das ganze sieht im HTML so aus:
HTML:
…<div id="middle"> <br /> <ul id="navi"> <li class="b1"><a xhref="http://muse-design.de/#" target="_self" title="link">Button 1</a></li> <li class="b2"><a xhref="http://muse-design.de/#" target="_self" title="link">Button 2</a></li> <li class="b3"><a xhref="http://muse-design.de/#" target="_self" title="link">Button 3</a></li> <li class="b4"><a xhref="http://muse-design.de/#" target="_self" title="link">Button 4</a></li> <li class="b5"><a xhref="http://muse-design.de/#" target="_self" title="link">Button 5</a></li> </ul> Inhalt </div> …
Jetzt wieder die richtige Formatierung im CSS daneben schreibe ich CSS Kommentar der die Einstellung erklärt ( /*CSS Kommentar */ )
CSS:
#navi ul, li
{
padding:0px; /* Innenabstand in den Elementen */
margin-top:3px; /* Abstand nach oben, damit sie nicht zusammhängen */
}#navi{
margin-left:8px; /* Abstand nach links der ganzen Navigation */
width:140px; /* Gesamtbreite */
text-align:left; /* Textausrichtung in der Navigation */
margin:0px; /* Wieder Außenabstand auf Null gesetzt */
padding:0px; /* ebenso der Innenabstand */
overflow:hidden; /* Alles was über width und height geht wird abgeschnitten und nicht gezeigt */
}#navi a /* alle “a-Elemente” im div-block navi haben folgende eigenschaften */
{
display:block; /* das Element a wird zum Block Element */
width:133px; /* Die Breite wird festgelegt (die Breite der Bilder */
height:20px; /* ebenso die Höhe -5 padding left */
padding-left:5px; /* damit Text nicht am Rand klebt */
}.b1 a /* wirkt sich auf das element a aus */
{
background-image:url(img/b1a.gif); /* hintergrund für den ersten button */
}.b1 a:hover /* nun das ganze beim mouseover */
{
background-image:url(img/b1ahover.gif); /*hier kommt der Hintergrund als Highlight rein*/
}
.b2 a /* das ganze wiederholt sich für die anderen */
{
background-image:url(img/b1a.gif);
}
.b2 a:hover
{
background-image:url(img/b1ahover.gif);
}
.b3 a
{
background-image:url(img/b2a.gif);
}
.b3 a:hover
{
background-image:url(img/b3ahover.gif);
}
.b4 a
{
background-image:url(img/b4a.gif);
}
.b4 a:hover
{
background-image:url(img/b4ahover.gif);
}
.b5 a
{
background-image:url(img/b5a.gif);
}
.b5 a:hover
{
background-image:url(img/b5ahover.gif);
}
Ergebnis:
Nach der Liste „navi“ eröffnen wir ein DIV-Block für den Contentbereich.
HTML:
… </ul> <div id="content"> Inhalt </div> <div class=”clr”></div> …
Damit wir den Contentbereich nicht unter der Navigation wieder finden erhält die „navi“ ein float:left; Resultat ist, dass die nachfolgenden Element und bedingt an den linken Rand der Webseite fließen wollen. So landet dann Content Element direkt neben die Navigation. Nach dem Contentblock muss ein Element eingefügt werden, der den Fluß (float:left;) wieder aufhebt, damit sich die einzelnen Blöcke danach nicht überlappen.
Und so schaut es aus:
CSS:
#navi
{
…
float:left;
…
}#content
{
width:395px;
margin-left:155px;
text-align:left;
}.clr
{
clear:left;
}
Nun kann auch ein beliebiger Text in die Contebox eingefügt werden.
Wir runden das ganze ein bisschen und packen in den Footer noch einen kleinen Vermerk des Autors rein.
Die CSS formatieren wir wie folgt:
CSS:
#footer
{
background-image:url(img/footer.jpg);
height:20px;
font-size:9px;
padding-top:15px;
text-align:left;
padding-left:45px;
}
#footer a
{
font-size:9px;
color:#000000;
}#footer a:hover
{
font-size:9px;
color:#ff0000;
}
Wir benutzen wieder einen Padding um den Text im Footer richtig zu Positionieren. Nicht vergessen den Padding dann wieder von der Höhenangabe abzuziehen. Hier sind es 15px. Bei der Breite braucht man das nicht, da keine angegeben wurde
Das ganze sieht doch schon ganz nett aus. Doch halt. Es sieht im Internet Explorer ganz anders aus. Die Navigation ragt zu weit nach rechts raus. Und genau dafür haben wir eine Browserweiche. Wir können mit der 2ten CSS den Fehler vom IE korrigieren. Der Internet Explorer scheint hier ein padding oder margin anders zu interpretieren.
FireFox Ansicht InternetExplorer Ansicht
Also wir öffnen nun die Datei formate-ie.css und fügen folgendes ein:
CSS:
#navi
{
margin-left:4px;
}
Damit wird der „margin-doppler bug“ vom IE aufgehoben.
