Mein Buch zum Thema CSS 

Herr Strauch vom Verlag Data Becker schrieb mich an. Ob ich denn nicht Lust hätt ein Buch zu schreiben. Thema wäre CSS. Er lockte mich damit, dass ich nicht allein schreibe und dass es für Menschen sein sollte, die bereits ein wenig Ahnung von CSS hätten.

Aus der Praxis für die Praxis sollt es sein und Hannes Schluchtmann schreibt mit.

Das Schreiben am CSS Buch an sich

Es war spannend, lustvoll. Formatvorlagen sind meine deklarierten Feinde. Und es gab einen Wehmutstropfen – keine Formatvorlage für den iMac -nur für Office.

Data becker wirbt für das Basis Know-How CSS so:

Modernes Webdesign ist ohne CSS undenkbar. Dieses neuartige, intelligent zweigeteilte Arbeitsbuch ebnet Ihnen auf verblüffend leichte Art den Weg zum gekonnten Einsatz von Cascading Style Sheets. Auf einer überschaubaren Seitenzahl werden Ihnen zunächst praxisnah die essenziellen CSS-Grundlagen vermittelt. Im anschließenden “Best Practices”-Teil des Buches erwerben Sie gezielt und stets an konkreten Beispielen die praxisrelevanten Kernkompetenzen für die gekonnte Realisierung eigener Webprojekte.

Kurzer Auszug der Inhalte von Basis Know-How CSS

• Essenzielles Grundwissen zu Vererbung und Positionierung
• Expertentipps für mehr Ordnung und Übersichtlichkeit
• Leichter Aufbau eines Grundgerüsts für Ihre CSS-Dateien
• Entwurf einer Layout-Grundstruktur für alle Fälle
• Zentrale Navigationstechniken – von Breadcrumbs bis zum Tab-Menü
• Bilder attraktiver präsentieren – von CSS-Schatteneffekten bis zur Thumbnail-Gestaltung
• Formulare gestalten – vom Login- bis zum komplexen Anfrageformular
• Wichtige Techniken und Problemlösungen zum Thema “Links”
• Tabellen, Listen und Graphen – strukturierte Daten besser präsentieren
• Alle Beispiele plus Bonuskapitel zum Download auf databecker.de

Bedauerlicherweise kann ich die Leseprobe nicht verlinken, weil die in einem Pop-Up auf Data Becker drin ist – aber vielleicht wird auch dies mal benutzerfreundlicher.

Wie auch immer: ich freu mich, dass ich es bald in den Händen haben kann. Empfehl es logischweise und wünsch jedem viel Freud mit CSS und seiner Homepage.

div Container umfasst nicht das Bild 

Man hat einen Div Container und darin soll ein Bild um den Text fließen – alles funktioniert wunderbar. Bloß der Hintergrund spielt nicht mit. Ein kleiner Balken wird gefärbt, das andere nicht. Andere beschreiben dieses Problem so: Das Bild geht über den Container hinaus. Dann wird gefragt, wie kann man das div so hoch machen, dass es das Bild einfasst – und zwar wenn man ständig unterschiedlich hohe Bilder hat.

Für dieses Problem gibt es unterschiedliche Lösungsansätze. Oft hat man eine Lösung mal gefunden und nutzt dann nur mehr die, doch wie meist: Probleme haben selten 1 Lösung So stelle ich hier einige mir bekannte Lösungen für das Problem: “Bild fließt um Text und der Background ist nicht gleich hoch” vor.

Bild soll neben Text fließen und der Background sichtbar sein-meine Lösungsansätze

0 weiteren Div Containe drumherum

Die allererste Lösung, die den meisten einfällt ist einfach einen weiteren Div Container drumherum geben und in diesem den Background definieren. Ich bin sicher keine, die am Mark Up spart wo es nur geht -also weit vom Puristentum entfernt – doch dies sollte nur die absolute Notfalllösung sein.

So widme ich mich kurz den Grundvoraussetzungen:

padding fehlt

Das Div braucht ein padding, sonst erkennen sehr viele Browser nicht die Höhe des Bildes und schneiden es unten ab, es ist fast egal, wie gering das padding ist, es muss nur da sein.

Das Grund CSS meiner Beispiele ist daher:

Beispiel 1

Der Div Container hat die class bild, das Bild hat die class left.

.bild{background-color:#868686;color:#000;width:400px;padding:0.3em;}
.left{float:left;margin:10px;}

Dies reicht dem IE aus, um den Div Container in voller Höhe zu zeigen. Mozilla Browser wie der Firefox, Flock und der Opera machen dies nicht. Siehe 1. Bild in dem Artikel.

Dem Div Container eine fixe Höhe zuweisen

Beispiel 2

.bild2{background-color:#868686;color:#000;width:400px;padding:0.3em;height:180px;}

Gibt man dem Div eine fixe Höhe zeigen alle Browser den Hintergrund gut an, doch dies ist nicht immer realisierbar.

Display table hilft auch aus

Beispiel 3

.bild3{background-color:#868686;color:#000;width:400px;display:table;padding:0.3em;}

Gibt man dem Div Container die Angabe display table zeigt sich auch der volle Background, allerdings nur unter bestimmten Voraussetzungen, die man hier bei Quircksmode gut nachlesen kann. Dass dies der IE nicht kann ist irrelevant, weil er sowieso die volle Höhe des Div Containers anzeigt.

Clearfix – Auflösen des float hilft auch.

Beispiel 4

Positioneverthing hat vor Jahren bereits einen CSS Hack beschrieben der unser Problem ebenfalls gut löst.

Ich gab dem Div Container eine 2. class mit nämlich clearfix und die beschreibt sich so:

/*--clear--*/
.clearfix:after {
	content: ".";
	display: block;
	height: 0;
	clear: both;
	visibility: hidden;
}
/* Hides from IE-mac \*/
* html .clearfix {
	height: 1%;
}
/* End hide from IE-mac */

Das Div selbst auch fließen lassen float left

Beispiel 5

.bild5{background-color:#868686;color:#000;width:400px;float:left;padding:0.3em;}

Läßt man den Div Container selbst auch nach Links fließen mit der Angabe float left, zeigen die Browser ebenfalls die volle Höhe des Containers an.

Welche Methode bevorzugst Du? Wo siehst Du troubles bei den hier vorgestellten Lösungsmöglichkeiten?

Code kann aus Sicherheitsgründen nicht in den Kommentaren getippt werden. Bitte entities nutzen- Danke .

b oder strong

Hans fragte mich in einem Kommentar, um den Unterschied zu b wie bold und strong.

Bold und strong kommen aus dem Englischen, daher schau ich immer da zuerst nach:

strong bedeutet in der deutschen Übersetzung:fest, gehaltreich, haltbar, hart, kampfstark, kräftig, stabil, solide,stark, überzeugend, aber auch derb.

b wie bold bedeutet:frech, gewagt, keck, klobig, kühn, mutig,schwungvoll, verwegen, wagemutig, aber auch fettgedruckt.

HTML ist eine Auszeichnungssprache. Die nicht nur der Darstellung dient, sondern auch der Bedeutung- also der Semantik oder der Bedeutungslehre.

Fast alle Browser stellen die einzelnen HTML Tags unterschiedlich dar. Völlig egal, ob der WebDesigner etwas gestaltet hat oder nicht. Strong muß daher nicht fettgedruckt erscheinen. B wie bold wird aber garantiert als Fettdruck ausgegeben.

Betonung oder Auszeichnung

Wenn man in einem Text etwas fett druckt, dann mag man es betonen. Daher wäre hier die Verwendung von strong richtiger. Mag ich die Navigation in Fettdruck haben, damit sie besser lesbar ist, wäre b wie bold richtiger, wenn dies nicht sowieso via CSS gestaltet wurde.

Man kann davon ausgehen, dass eine Suchmaschine wie Google dies erkennt. Ich fand schon Texte, die seitenweise mit strong ausgezeichnet waren und zig H1 Überschriften 1.Ordnung beinhaltet haben. Dies ist eindeutig ein zuviel des Guten. Doch maßvolles -in sich logisches hervorheben einzelner Wörter kann sehr wohl zu einer gelungenen Onpage Optimierung beitragen.

Dass Screenreader strong anders vorlesen als b ist ein guter Nebeneffekt.

Andere zum Thema:

• b oder strong.

Newsletter sind immer noch sehr beliebt. Oft werden Text und HTML Newsletter angeboten. Doch so einen HTML Newsletter zu gestalten ist nicht einfach. Nicht jedes E-Mail Programm erkennt Style-Angaben zwischen head und /head oder auch direkt im Quelltext.

GMail oder Googlemail erkennt fast gar nichts. Outlook ist schon freundlicher

CSS Support der E-Mail Programme

Eine Übersicht der wichtigsten E-Mail Programme und welche CSS Angabe wo erkannt oder eben nicht erkannt werden bietet Campaign Monitor.

Eine wunderbare Ressource für jeden Webdesigner.

Verzweifelnd an meinem Wissen über CSS saß ich heute abend da. Ein simples horizontales Menü ließ die grauen Haare mir wachsen. Zu Testzwecken, ob auch alle Abstände mittels em passen, nahm ich für den Hovereffekt die Farbe Weiß.

Alles wundebar. Die Abstände mit em gut angepasst, das Menü strahlt mich an und ich seh den Feierabend vor mir. Der Teufel hat mich geritten noch schnell den IE 7 zu testen.

Auch hier sind alle Abstände gut und richtig, bloß – keine Hintergrundfarbe wenn ich mit der Maus über den Link fahre. Große Augen sind eine Untertreibung, die ich da bekam.

Mich an all meine Tippfehler erinnern jagte ich die style.css durch den Validator. Keine Fehler lachten mich an oder aus, je nachdem. Der IE 7 zeigt keinen a:hover Effekt an. Nichts.

Ich seh mir eines meiner anderen Desigsn im IE 7 an. Hier wird der Hover Effekt richtig gezeigt.

Immer wenn etwas nicht gleich logisch erklärbar ist mache ich mal Pause – nehm einen Kaffee und denke bei der für mich dazu gehörenden Zigarette nach.

Nachher gab ich an:

a:hover{background-color:green;}

Zugegeben sieht ein wenig verrückt aus. Aber dies zeigt der IE 7 auch an.

So zeigt der IE 7 unter WInXP a:hover mit Hintergrundfarbe an:

Schlussendlich fand ich heraus, wenn ich

a:hover{background-color:#fffffa;}

angebe oder wie auch immer die 6.te Zahl für die Farbe Weiß ändere, dann nimmt dies der IE 7 unter WinXP. Sonst nicht.

Vielleicht ist dies sowieso altbekannt, wenn nein hilfts eventuell wem anderen weniger graue Haare zu bekommen

2 Div Container mittig nebeneinander  

Shaddowrider hatte eine Frage, wie man denn 2 Div Container mittig nebeneinander setzt und dann auch noch variabel breit sollten sie sein. Nach langem Probieren, machten ihm die Divs schon ganz kirre, meinte er. Nun dies zu wissen bedeutet bloß, dass man irgendwann vorher “fast kirre” geworden war, also es ist kein wirkliches Geheimnis.

Da ich keine Angabe hatte in welches vorgefertigte HTML diese beiden Div Container hinein sollten, erstellte ich eine Grundgerüst des Box Models.

 
<div class="aussen"><!--Hauptbox-->
   <div class="innen1"><!--Innerer Boxrahmen-->
     <div class="box01">
      <h1>Kategorie 1</h1>
       <p>Lore Ipsum</p>
      </div>
      <div class="box02">
       <h1>Kategorie 2</h1>
       <p>Lore Ipsum</p><p>Lore Ipsum</p><p>Lore Ipsum</p><p>Lore Ipsum</p>
      </div>
<br class="clear" /><!--Brechen der Floats um Höhe des Boxrahmens zu erhalten-->
  </div><!--Ende innen1-->
</div><!--Ende aussen-->

Dieses Grundgerüst nutzte ich um es mit einem weiteren Div Container zu versehen, dieser wird dann die Inhalte haben. Einer fließt dabei nach rechts (float right) der andere nach links (float left). Dies erzeugt die Zentriertheit, wenn box01 und box02 gleich breit sind.

<div class="aussen">   <!--Hauptbox-->           
     <div class="innen1">    <!--Innerer Boxrahmen-->            
      <div class="box01">                   
       <div class="box01a">      
       <!--Inhalt nach Belieben-->       
       </div>        
      </div>                 
      <div class="box02">                   
       <div class="box02a">            
       <!--Inhalt nach Belieben-->  
       </div>        
      </div>        
<br class="clear" /> <!--Brechen der Floats um Höhe des Boxrahmens zu erhalten--> 
</div> <!--Ende innen1-->    
</div><!--Ende aussen-->

Das benötigte CSS zu 2 Div Container mittig und variabel breit

Ich habe alle Angaben zur Farbe weggelassen, nur die Strukturangaben und floats sind da. Wer sich sehr unsicher ist, ändert nur die Breite der Außenbox oder des Außencontainers. Sollten die beiden innersten Container im IE 6 nicht nebeneinander, sondern untereinander sein, deren Breite nur für den IE& schmaler machen.

.aussen {	width: 1000px;
	text-align: center;
        padding: 10px;
	margin: 0 auto;
	min-width: 138px;/*Opera/Mozilla brauchen dies breite aenderbar*/}
.innen1 {width: 100%;/*  für IE Win */}
.box01 {width: auto;
	min-width: 130px;
	margin-top: 10px;
	margin-right: 0.5em;
	margin-left: 0.5em;
	float: left;
	width: 47.4%;
	display: inline;}
.box01a {float: right;
	text-align: left;
	width: auto;}
.box01a img {display: inline;
	margin: 2px;
	padding: 2px;}
.box02 {	width: auto;
	min-width: 130px;
	margin-top: 10px;
	margin-right: 0.5em;
	margin-left: 0.5em;
	float: left;
	width: 47.4%;
	display: inline;}
.box02a {	float: left;
	text-align: left;
	width: auto;}
.box02a img {	display: inline;
	padding: 2px;
	margin: 2px;}

Das komplette Beispiel gibt es zu Studienzwecken einfach hier als Download. Viel Freude beim Erobern des Box Models und am Ergebnis.

Free Download

Download beim Klick auf die Schachtel

Weitersagen ausdrücklich erwünscht

Um sich das Leben als WebDesigner so einfach wie möglich zu machen, ist es unumgänglich sich an Ordnung zu gewöhnen. Jede Webseite hat ihre Ordnung / ihre Struktur. Diese Struktur zu vereinfachen ermöglicht CSS. Es nutzt aber die einfachste Struktur mittels XHTML nichts, wenn dann die benötigte Style.css ungeordnet oder unübersichtlich angelegt ist.

Struktur einer Webseite

Jeder WebDesigner hat “seine” Ordnung in der Style.css. Ich stelle hier die meine vor und erkläre auch wieso ich diese Art des Überblicks in einer Style.css gerne mag und dann auch nichts dabei vergesse. Am Schluss des Artikels gibt es eine Muster Style.css und die dazugehörige XHTML Struktur als Download für jeden der mag. Erklärungen warum was wann wieso so und nicht anders gestaltet wurde, gebe ich in diesem Artikel jedoch nicht durchgängig.

Der Screenshot zeigt ein klassisches zweispaltiges Layout. Oben die Navigation, dann der Inhalt /content rechts daneben das Menü oder die Sidebar und unten die Fußzeile oder den Footer.

Struktur der Webseite im Cascading Style Sheet übernehmen

Für mich hat es sich bewährt, wenn ich mit der Stuktur in der Style.css anfange und mir selber eine Erinnerungsstütze am Anfang einbaue.

Dies sieht dann so aus:

/* 
muster style zweispaltiges layout flexible breit
author: mts
author uri:http://www.webdesign-in.de/
*/
html {	margin: 0, padding: 0;}
body {}
li {	}
/*--structure two columns flexible width for ie css between html head --*/
.navaussen {}
.postaussen {}
.footeraussen {}
.navinnen,.postinnen,  .footerinnen {	}
.clear {}
/*--content--*/
.content {}
/*--sidebar--*/
.sidebar {}

Achtung: Wie ich diese Struktur gestaltet habe steht in der Muster Style.css drin. Hier würde es den Rahmen der Lesbarkeit sprengen.

Zwischen Schrägstrich und Stern stehen Kommentare in einer Style.css. Die ermöglichen, dass man schnell was findet und strukturieren gut. Ich nutze sie gerne, aber nicht im Übermaß. So wie ich gerne Schubladen nutze, aber dennoch nicht jedes Wäschestück einzeln seine Schublade hat.

Html und body werden gerne und oft als Gestaltungselement vergessen. Nutzt man die, kann man sich ziemlich häufig ein weiteres Div ersparen.

Browservorgaben zurückstellen

Die Listenelemente (li) mag ich anders gestalten als von den Browsern vorgegeben, daher stelle ich sie zurück. Genauso mit margin, padding, das erspart einem dies jedes Mal zu wiederholen. Wer sich mehr mit den Browservorgaben beschäftigen mag den verweise ich gerne zu Erich Meyerweb. Er hat fast alle XHTML Elemente zurückgestellt Reset Reloaded. Dies ermöglicht bei der Gestaltung mehr, doch sollte man dann CSS ziemlich gut können.

All over the world oder HTML Tags der Reihe nach aufzählen

Welcher WebDesigner hat nicht schon mal auf den HTML Tag i oder em vergessen. Und – ach ja -select und caption gibt es ja auch.

Damit mir dies nicht zuoft passiert zähle ich die häufigst gebrauchten HTML Tags einfach auf. Dies sieht in meiner Style.css dann so aus:

/*--all over the world--*/
html, body {	font: 0.9em/1.4em "Gill Sans MT", "Gill sans", "Trebuchet ms", sans-serif;}
h1 {}
h2 {}
h3 {}
usw... alle anderen im Musterdownload

Ich vergebe eine generelle Schriftgröße, generellen Linienabstand und gib dann die Schriften an. Dies gilt solange, solange ich bei einem Element nichts anderes definiere. Erspart Arbeit und ständig dran denken.

Links – die Verweise – gleich gestalten

Ein Besucher findet relativ rasch das System einer Webseite heraus, wenn sie eines hat. Daher sollten die Links als solche erkennbar sein. Ausnahmen sollten auch einem System folgen. So definiere ich zuerst für alle Links (a) und wenn nötig Ausnahmen extra.

/*--for all links--*/
a {}
a:link {}
a:visited {}
a:link:focus {}
a:link:hover {}
a:visited:hover {}
a:link:active {}
a:visited:active {}

Bilder als Links

Genauso gehe ich vor, wenn es daran geht Bilder als Links zu gestalten.

/*--images as a link--*/
a img {}
a:link img {}
a:visited img {}
a:link:active img, a:visited:active img {}

Farbe, Überschriften, Schriftgröße, Listen und mehr geben.

Dem Inhalt (content) der Sidebar und dem Footer einzeln aufzählen und dabei einiges an Gestaltungsmöglichkeiten vorgeben.

/*--lists headlines colors images  content--*/
.content ol {}
.content ol li {}
.content  ul {}
.content ul li {}
.content img {}
.content h3 {}
/*--lists fonts colors images headlines sidebar--*/
.sidebar {}
.sidebar p {}
.sidebar ul {}
.sidebar ul ul {}
.sidebar ul li {}
.sidebar ul li ul li {}
.sidebar ul li img {}
.sidebar ul li ul li img {}
.sidebar ul li a img {}
.sidebar ul li ul li a img {}
.sidebar ul li h3 {}
/*--lists fonts colors images headlines footer--*/
.footerinnen {}
.footerinnen p {}
.footerinnen img {}
.footerinnen a img {}
.footerinnen ul {}
.footerinnen ul li {}
.footerinnen ul li h3 {}

Necessary – das meist auch noch nötige einzeln aufzählen

Irgendwann vergibt man eine class left, center, right, oder braucht eine Navigation.

/*--necessary--*/
.navigate {}
.left {}
.right {}
.center {}
img .left {}
img .right {}
img .center {}

Mit dieser Struktur in meiner Style.css vergesse ich eben so schnell nichts und ich habe genug Möglichkeiten die Gestaltung auszubauen indem ich die Cascade der Cascading Style Sheets ausnutze.

weiterführende Links zu CSS

• Reset Reloaded
• Links und die Möglichkeit ihrer Darstellung
• Probleme mit der Listengestaltung im IE
• Cascading Style Sheets Level 2 in deutsch
• CSS Box Model in deutsch

Muster style.css und Muster index.html

Donwload bei Klick auf die Schachtel

CSS Naked Day 2008

CSS Naked Day – vom 9. April 2008 an zeigt sich WebDesign-in.de 48 Stunden ohne Design – ohne Formatvorlage. Alle Cascading Style Sheets (CSS) und andere Scripte sind ausgeschaltet. Dennoch kann man diese Webseite nutzen.

CSS Naked Day findet heuer zum 3.ten Mal statt und ist eine Online Demonstration für Webstandards. Webseiten, die korrekt ausgezeichnet sind, sind auch ohne Hilfsmittel nutzbar. HTML reicht.

1990 erfand Tim Berners-Lee die URL, http und html

Die Internetadressen, das Internetprotokoll und die Hyper Text Mark Up Sprache, außerdem den ersten Browser. Somit war der Grundstein für das Wolrd Wide Web im Internet gelegt.

By Christmas 1990, Berners-Lee had defined the Web’s basic concepts, the URL, http and html, and he had written the first browser and server softwareCern.ch

Geschichtliches zu CSS – Cascading Style Sheets

Seit 1970 wurde CSS in unterschiedlichen Arten zur Gestaltung verwendet. Erst 1998 wurde in einem simplen Memo Grundlegendes zu CSS festgelegt:

Cascading Style Sheets (CSS) is a style sheet language for the World Wide Web.Memo Grundlegendes zu CSS

Damit wurde CSS als eine Formatvorlagen-Sprache für das WWW definiert oder beschrieben.

Nun 48 Stunden lang – am CSS Naked Day 9.04.08 – fehlen weltweit Webseiten die Formatvorlagen. Die Webseiten präsentieren sich nackt. Voriges Jahr machten mehr als 2tausend Webseiten mit.

Meilensteine im Internet – das WWW

1990 zu Weihnachten erfand Tim Berners-Lee den 1.Browser – Mosaic hieß er.

Die allererste Internetadresse lautete:

http://nxoc01.cern.ch/hypertext/WWW/TheProject.html

Seit 1994 legt das W3Consortium Standards für HTML fest und seitdem Zeitpunkt bin ich *drin*.

Seit 1995 gibt es den Internet Explorer und seit dem Tag kämpfen abertausende WebDesigner mit dessen absolut individueller Auslegung der Formatvorlagen Sprache CSS. – dass sich dies nicht ändern wird zeigte dieser Artikel bei AListApart: Beyond DOCTYPE: Web Standards, Forward Compatibility, and IE8 by Aaron Gustafson vom Jänner 2008.

Geschichte des Internets und WWW zum Nachlesen

Hunderte von Menschen wurden befragt und gaben bereitwilligst Auskunft. Hier ist die *Timeline* des WWW nachlesbar. Ich warne vor dem “Klick” auf den Link, weil das Lesen braucht Zeit, da man nicht aufhören kann.

vom Mosaic zu Web 2.0

Der allererste Browser Mosaic ermöglichte das WWW. Das Internet funktioniert ja auch ohne Browser. Emails senden, etwas auf einen internetfähigen Computer legen per FTP und sich in Newsgroups austauschen. Waren es die Newsgroups, die Menschen mit gleichen Interessen zusammenbrachten, so sind dies heute zum Teil die Social Dienste. War es früher das Geld, das Menschen vom Internet ausgeschlossen hat, so ist es heute zum Teil die Zeit.

Wer in einigen Social Diensten sein mag oder meint sein zu müssen (sozialer Mitmachzwang , Robert Basic), wer daneben noch ein oder mehrere Blogs betreut und sich nebenbei via Twitter austauscht, hat schnell mal vier Stunden am Tag im WWW verbracht.

Wussten früher nur Eingeweihte von den diversen Postfächern der Newsgroups so muss man heute bei diesem und jenem Social Network eine elendslange Freundesliste haben, sonst ist man so wie früher weg vom Fenster.

Vor gut 10 Jahren war ein Handy ein absoluter Luxusgegenstand. Leute organisierten Fake Anrufe, um im Cafe ans Handy gehen zu können.
Wer es sich leisten konnte war überall erreichbar.

Heute sehe ich in sehr guten Clubs immer öfter das Handyverbot beim Eingang.
Wer es sich leisten kann ist heute unerreichbar.

Vor gut 10 Jahren war diese -übrigens fantastisch realisierte Webseite- das Non Plus Ultra. Heute schaltet man die Formatvorlage CSS mal schnell ab, um zu zeigen: Ich kann es mir leisten, ich kann Webstandards.

Das Internet und das WWW sind beides sehr spannende Medien. Der WebDesigner von Heute mutiert immer mehr zum Screendesigner, um Inhalte mediengerecht präsentieren zu können. CSS macht die Welt des WWW (Zengarden ) bunt. Web 2.0 spannend und was morgen kommt, werden wir übermorgen wissen.

CSS Trennlinien

Oft mag man Trennstriche in einer Navigation haben. Doch genau nach dem letzten Link sollte keiner mehr erscheinen. Oder man mag Rahmen vergeben. Aber auf einmal sind die viel zu dick weil doppelt.

Hier meine CSS Tipps aus den Tiefen meiner Festplatte. Quick und dirty – wie es gut deutsch heißt.

CSS Tipp Border

Die Naviagtion soll also so aussehen:

Home| Impressum | News

Die erste Reaktion ist immer dies mit border zu verwirklichen. Ich geh davon aus, dass diese Navi wie meist in einer Liste steckt.

li{border-right:1px solid red;}

Das Ergebnis ist dann dieses:

Home | Impressum | News |

Und der letzte border / Rahmen strahlt einem glücklich an und selber ist man verzweifelt.

Wie sooft im Leben ist auch hier die CSS Lösung nicht Rechts, sondern Links zu finden.

CSS und +

li+li{border-left:1px solid red;}

li+li ignoriert das allererste li, also kann da kein border/Rahmen sein.

CSS ++

Home Impressum | News

Dies kann man so verwirklichen.

li+li+li{border-left:1px solid red;}

Dieses Plus oder Plus Plus usw. wirkt auch bei allen anderen HTML Tags. Einfach mal ausprobieren und neue Möglichkeiten entdecken.

Div Suppe im Quelltext 

Viele verwenden sehr oft Divs, um einzelne Teile einer html Seite zu gestalten.

Dies ist sehr oft unnötig, denn die Hierarchie der einzelnen Angaben (Elemente, tags) hilft zu gestalten ohne Div-Suppe.

Beispiel eines aufgeblähten Quellcodes

<div id="content">
    <div class="ueberschrift">
        <h1>Ich bin die &#220;berschrift.
          </h1>
    </div><!--class ueberschrift end-->
 
      <div class="post">
          <p>Ich bin der Artikeltext
          </p>
 
          <div class="meta">
              <p>Ich zeige die Anzahl der Kommentare, 
                 das Datum etc. an
              </p>
            </div><!--class meta end-->
        </div><!--class post end-->
 
</div><!--id content end-->

Hier kann man sich 2 div einsparen

div class ueberschrift und div meta

Man braucht sich nur laut vorzusagen was man machen möchte und dies dann in der Style.css, der Cascading StyleSheet Datei hineinschreiben:

Ich möchte die Überschrift unter der id content blau.
Keine andere Überschrift, nur die unter der id content. Das geht so:

#content h1{ color:blue;}

So bringt man das div class meta weg.

Ich möchte die p mit den Meta Angaben rot und am rechten Rand stehen haben.

.meta{color:red; text-align:right;}

Jetzt wirst Du sagen, das habe ich vorher auch in der style.css drin stehen gehabt.
Möglich, aber das div ist unnötig.

Schlank und rank sieht das HTML jetzt so aus.

 
<div id="content">
 
        <h1>Ich bin die &#220;berschrift.
          </h1>
 
 
      <div class="post">
          <p>Ich bin der Artikeltext
          </p>
 
 
              <p class="meta">Ich zeige die Anzahl der Kommentare, 
                 das Datum etc. an
              </p>
 
        </div><!--class post end-->
 
</div><!--id content end-->

Bei Fragen einfach einen Kommentar schreiben. Gern helfe ich.