CSS-Templates - Was bringts wirklich?

santscho · Post by **santscho** » Fri 28. Sep 2007, 09:44

Ich springe nun ins kalte Wasser und versuche, ein CSS-Template zu erstellen. Ich sehe zwar die Vorteile nicht und die Analyse diverses Templates hat nur Verwirrung gestiftet.

Ich arbeite mit GoLive, da man das Layout "einfach" mit Drag'n'Drop erstellen kann. Der zugehörige CSS-Code wird auch gleich automatisch erstellt. Doch so einfach ist das gar nicht! Denn das Layout im Editor-Modus sieht meistens ganz anders aus als im Vorschau-Modus. Und das Verschachteln von Containern funktioniert schon gar nicht wie ich das möchte. statt nebeneinander sind sie untereinander, dann klappts doch irgendwie und schwups... werden die Container umflossen.

Ich frag mich nun, ob es die Nerven wert ist, sich mit CSS-Layouts zu beschäftigen. Ist es wirklich so schlimm, wenn man weiterhin mit Tabellen-Layouts arbeitet? Oder sollte man wirklich diesem "CSS-Trend" folgen? Ich meine, flexible Spalten kann ich auch mit Tabellen lösen, da brauch ich kein CSS dafür. Und ob ich jetzt die Layoutanpassungen im CSS-Editor oder im html-Editor vornehme... so gross ist der Unterschied nun auch wieder nicht. Und CSS-Elemente wie die Navlistul lassen sich problemlos integrieren.

Was sind die ULTIMATIVEN Vorteile von CSS-Layouts?

Post by **update** » Fri 28. Sep 2007, 10:17

Was sind die ULTIMATIVEN Vorteile von CSS-Layouts?

Du kannst zB bestimmen, an welcher Position im Code die einzelnen Inhaltsteile stehen <> 1. Inhalt, 2. Sidebar, 3. topnavi, ...usw...
Wenn Du die Styles alle ausschaltest, solltest Du reinen Text erhalten - unformatiert und sortiert...

Ich habe mir gestern für meinen geliebten FF einen Screenreader installiert und mal ausprobiert, was der auf welchen Webseiten wie vorliest - Erstaunliches kommt dabei zutage:

Webseiten mit Frames

Webseiten mit Tabellen

Webseiten mit CSS und DIV

Hier kommt es dann darauf an: source ordered oder nicht - lesbar sind die allemal

Stichwort: Barrierefrei oder so (da gehören natürlich -wie immer- noch ein paar mehr Dinge dazu, aber ist ein Anfang )

santscho · Post by **santscho** » Fri 28. Sep 2007, 10:31

Du kannst zB bestimmen, an welcher Position im Code die einzelnen Inhaltsteile stehen

Hab mal mit den Werten "absolut" "statisch" "relativ" "fest" rumgespielt. Da tut sich meistens gar nichts. Und im Editor ist die Position richtig, im Preview nicht. Einige brauchbare Ergebnisse erhalte ich, wenn ich in GoLive mit "Layer" arbeite und die Container so platziere. Für mich sieht das Layouten mit CSS nach "Gebastel" und "Gefummel" aus.

Barrierefrei: Total damit einverstanden! Ich habe eine schwerstbehinderte Schwägerin. Wir ärgern uns oft darüber, wie behindertenfeindlich unsere "modernen" Städte eingerichtet sind. Im Internet siehts glaube ich nicht viel besser aus.

Post by **flip-flop** » Fri 28. Sep 2007, 10:49

Du darfst dich auch nicht auf solche Tools verlassen.
Tabellenlayout kann man damit gut hinstricken, css ist aber um einiges komplexer.
Dazu gehört auch ein deutlich höherer Wissensstand bez. css.

Ich gehe immer von ein und demselben Basis-CSS-Layout aus und verändere dieses entsprechend den Anforderungen entweder mit HomeSite oder pspad.

Wenn wir über Barrierefreiheit sprechen geht nur CSS wie claus schon ausführte, allerdings ohne JS oder Flash und so´n Kram.

Knut

marcus@localhorst · Post by **marcus@localhorst** » Fri 28. Sep 2007, 10:52

wenn du dich professionell mit Webanwendungen beschäftigst, isses schon sehr sehr ratsam CSS und der rattenschwanz der daran hängt, anzuwenden.
Nicht nur wegen der erwähnten vorteile im bereich barrierefreiheit und suchmaschinen sondern auch um dir selbst die arbeit über kurz oder lang zu erleichtern. (am anfang isses wirklich sehr viel aufwändiger mit divs und css ein simples 3 spaltenlayout nachzubilden... aber wenn man weiss wie...

)

Insgesamt verlangt das aber schon eine einarbeitung in das thema und die nutzung eines Texteditors anstelle von GoLive vorallem

wenn du das privat für dich machst, musst du selbst wissen, ob dein anspruch so hoch ist, das du kein einfaches tabellen layout mehr verwenden willst

Uwe367 · Post by **Uwe367** » Fri 28. Sep 2007, 11:08

Hi santscho..

Ich weiß nicht ob du schonmal hier hereingeschaut hast...

http://www.css4you.de/

Ist ne ganz interessante Doku, auch zum herunterladen und offline arbeiten

Dort wird auch u.a. erkärt, wie man ein Tabellenloses Design nur mit CSS kreiert. Hoffe ich konnte ien wenig helfen

Gruß Uwe

pico · Post by **pico** » Fri 28. Sep 2007, 11:20

Hi

der Vorteil von CSS ist für mich ganz klar die strikte Trennung von Inhalt und Design. Wenn irgendwann mal ein neues Design gewünscht wird, ist das mit dem austausch der CSS-Datei(en) sehr komfortabel.

Mir hat YAML bzw. das Buch von Dirk da unheimlich viel gebracht und das Framework von YAML ist sicherlich recht komplex am Anfang, aber wenn man das mal verstanden hat, ist es nur ein kleiner Schritt so gut wie jedes Lauyout damit hinzubekommen. Und die Einbindung in's phpwcms ist auch recht einfach -> z.B. http://www.phpwcms.de/forum/viewtopic.php?p=89475#89475

und wenn man das richtig macht, ist auch das Thema Browser-Kompatibilität erschlagen.

PS achja der Link zu YAML http://www.yaml.de

Post by **juergen** » Fri 28. Sep 2007, 11:23

http://builder.yaml.de/

Damit kannst du layouts erstellen, kopierst den XHTMl Code ins Template, fügst die {....} Parts ein und gut ist.

Ich hab den Taschenrechner weggeschmissen, den ich immer bei Tabellen genutzt habe, deswegen nehm ich nur CSS

Jürgen

santscho · Post by **santscho** » Fri 28. Sep 2007, 11:48

Ja, mit dem Yaml-Editor hab ich auch schon rumgespielt. Nettes Teil. Es ist mir schon klar, dass es eine gewisse Einarbeitungszeit benötigt. Ich werde mich jetzt intensiver damit befassen.... dann werden wir sehen.

Aller Anfang ist schwierig. Nur der Anfang mit CSS noch schwieriger

Notfalls gibt es ja noch diverse "free-css-layouts" im web. Die kann man ja auch nach Belieben abändern und ans eigene Design anpassen.

pico · Post by **pico** » Fri 28. Sep 2007, 11:54

ach ja - noch so ne kleine 'Lernhilfe' und zum experimentieren

FireFox mit den PlugIn's 'EditCSS', 'Webdeveloper' und 'FireBug'

santscho · Post by **santscho** » Mon 1. Oct 2007, 11:38

Ich habe ein super Tutorial gefunden, welches ich zweimal durchgespielt habe. http://freecss.info/free-css-tutorials/ ... he-basics/

Der Aufbau mittels CSS ist zwar komplizierter als mit Tabellen, doch es hat mich überzeugt!

Ich habe jetzt das bestehende Template eines grossen Projektes nach CSS umgeschrieben und es funktioniert beinahe Perfekt! Nur brauche ich jetzt nur noch zwei Container, dann bin ich fertig. Doch diese bereiten mir Schwierigkeiten und darum brauche ich eure Hilfe.

Die CSS sieht so aus:

Code: Select all

body { font-size: 11px; font-family: Verdana, Arial, Helvetica, sans-serif; background-image: url(/Bilder/back_gradient_01.jpg); background-repeat: repeat-x; background-attachment: scroll; background-position: 20pt 0; text-align:center; } 
.clear{clear:both;}
/*HAUPTCONTAINER*/
.hauptcontainer {background-color: #fff;margin:10px auto 0;width:900px;text-align:left;}
/*Header*/
.header{ width:900px; height:150px; }
.leftheadercolumn{ text-align: center; float:left; width:210px; margin-left: 20px; padding-top: 20px; }
.rightheadercolumn{ width:650px; float:right; padding-top: 47px; }
/*Horizontale Navigation*/
.hornavi{ background-color: #c00; text-align: left; float:none; width:860px; height: 20px; margin-right: 20px; margin-left: 20px; }
/*Hauptspalten*/
.content{ width:auto; }
.leftcolumn{ background-color: #ddd; float:left; width:210px; height: 400px; margin-left: 20px; padding-top: 20px; }
.rightcolumn{ width:630px; float:left; padding-top: 20px; padding-right: 20px; }
.right1{ width:630px; float: left; margin-left: 20px; }
.right2{ width:630px; float: left; margin-left: 20px; }
/*Footer
*/
.footer{ background-color: #c00; text-align: left; float:none; width:860px; height: 20px; margin-right: 20px; margin-left: 20px; }

Der html-code so:

Code: Select all

<link href="Template 03.css" rel="stylesheet" type="text/css" media="all">

<body>
	<div class="hauptcontainer">
		<div class="header">
			<div class="leftheadercolumn">
				<img src="Bilder/head_cross.gif" alt="Singapore Red Cross Society" height="115" width="95" border="0" /></div>
			<div class="rightheadercolumn">
				<img src="Bilder/head_title.gif" alt="" height="37" width="587" border="0" /></div>
			<div class="clear"></div>
		</div>
		<div class="hornavi">
			NAVIGATION</div>
		<div class="content">
			<div class="leftcolumn">COLUMN LEFT</div>
			<div class="rightcolumn">
				HIER BITTE ZWEI CONTAINER (right1 und right2) UNTEREINANDER!</div>
			<div class="clear"></div>
		</div>
			<div class="footer">
			FOOTER</div>
	</div>
</body>

In der "rightcolumn" steht nun der Text "HIER BITTE ZWEI CONTAINER (right1 und right2) UNTEREINANDER!"

Genau da brauche ich die zwei Container untereinander. right 1 bekommt den Breadcrumb-RT, right2 den Content-RT.

Die zwei CSS sind schon erstellt (siehe oben)

Bitte Hilfe

!

Ralph

Post by **flip-flop** » Mon 1. Oct 2007, 11:52

Mhh, sollte so gehen, darfst nicht floaten und auf die Weiten (padding/margin) achten:

Code: Select all

.right1{ width:590px; margin-left: 20px; }
.right2{ width:590px; margin-left: 20px; }

Knut

santscho · Post by **santscho** » Mon 1. Oct 2007, 12:02

YUPPI!

Funktioniert natürlich! Vielen Dank!

Kann man eigentlich einen Container-Inhalt vertikal zentrieren? Das wäre für die horizontale Navigation ganz praktisch. Oder darf man, AUSNAHMSWEISE auch mal eine 1x1-Zellen-Tabelle einfügen und dieser Zelle "vertikal zentrieren" zuteilen?

Hab es erfolglos so verucht:

Code: Select all

.hornavi{ background-color: #c00; text-align: left; vertical-align: middle; float:none; width:860px; height: 20px; margin-right: 20px; margin-left: 20px; }

Post by **flip-flop** » Mon 1. Oct 2007, 12:10

Funktioniert so in diese Richtung: Shrink-wrap and Center
Hier gibt es viele gute Anregungen: tests and experiments
Ein sehr robustes zweispaltiges Layout: Fixed 2 cols layout

Post by **juergen** » Mon 1. Oct 2007, 12:10

http://www.css4you.de/Texteigenschaften ... align.html

Gibt nichts was nicht geht

@Knut .. ich hab mich extra beeilt..