CSS | Kurs - oder selbst erlernen?

[flipmode]

Hallo,

seit ca. 2 Monaten versuche ich mich näher mit CSS / PHP zu beschäftigen und habe mir einige Bücher gekauft und viel im Internet gelesen.
Bisher war es nicht schwierig mit Hilfe eines Nachschlagewerks ein Layout zu erstellen und dies zu befüllen. Joomla, Wordpress oder erst kürzlich ein Onlineshop brachten mich allerdings zum verzweifeln. Basics sind kein Problem, aber ein Layout grundlegend verändern sorgte für Bluthochdruck .

Dynamischer Seiteninhalt wurde in meinem "Lehrbuch" nicht berücksichtigt, bzw. ich kann nicht wirklich Beispiele finden - das erschwert mir die Einarbeitung... Im Onlineshop wurde die Template Enginge "Smarty" verwendet, was mich total aus dem Konzept geworfen hat, obwohl es eigentlich als sehr einfache und saubere Lösung gilt.

Kurse sind hier in Niederbayern leider so gut wie keine zu finden - gerne würde ich mich mehr damit beschäftigen, auch wenn ich es nicht beruflich benötige und nur für den Eigenbedarf verwende.

Folgende Bücher sind vorhanden.

CSS - PUR!

PHP 5.3 & MySQL 5.4

und heute noch bestellt:

Fortgeschrittene CSS-Techniken ( Galileo Computing )

Nun bin ich nicht sicher, ob man das ganze selbst erlernen kann - oder man besser einen Kurs besucht?

[chorn]

Man kann das selber lernen, habe bisher auch von niemandem eine andere Vorgehensweise gehört, man muss sich da halt einfach ransetzen. Bücher gibt es genug, Onlintutorials sicher noch um Faktoren mehr. Die haben dann den Vorteil, dass man das recht einfach per Copy&Paste testen kann, um danach selber zu modifizieren. Therorie büffeln schön und gut - am besten lernt man es m.M.n. auf die harte Tour, einfach am Lebendbeispiel. Bau was was dir grad einfällt, oder bau was nach was es schon gibt. Und dann kommen die unterschiedlichen Interpretationen der Browser...

[schrödingerkatz]

Ich bin auch der Ansicht, dass man es besser auf die harte Tour lernt.
Am besten, Du bastelst Dir erst einmal eine statische, recht einfache HTML-Seite und spielst dann mit den DIVs herum, in denen die Inhalte (Navi, Header etc.) herumliegen.

Dann: von anderen abschreiben. Äußerst gut geeignet dafür ist der CSS Zen Garden.

Wenn Du dann ein Gefühl bekommen hast, was sich alles erstaunliches mit CSS anstellen lässt, stürz' Dich auf die Shop- und CMS-Software. Wenn die nicht total vermurkst programmiert ist, ist das auch nichts anderes als die Arbeit mit statischen Seiten.
Erst spuckt diese Software nämlich den Quelltext aus, der erst dann mittels CSS gestaltet wird.

Sehr hilfreich (eigentlich ein Muss, wenn man an so komplizierten Dingen wie einem Webshop herum-CSS-t), ist die Firefox-Erweiterung "Firebug". Da kannst Du Dir direkt im Browser ansehen, was Deine Änderungen bewirken, ohne sie in die CSS-Datei auf dem Server eingebaut zu haben. (Der IE bietet seit der Version 8 meines Wissens eine solche Funktion von Haus aus.)

[flipmode]

Hallo,

danke für die netten Beiträge.

Firebug und XAMPP sind mir bereits treue Helfer. Vermurkst ist der Shop meiner Ansicht nach "heute" nicht mehr - die Vorversionen waren nahezu unmöglich anzupassen. Im Shop geht es darum einige neue Klassen anzulegen und das Design nur Ansatzweise zu verändern.

Dann muss ich zusehen die Basics besser zu verstehen....

[Rinaldo]

Eigentlich lernt man - wie bereits angesprochen - am besten durch Übung Übung und nochmals Übung... So hab ich mir das bei gebracht und so haben es auch andere gelernt, mit denen ich Kontakt habe/hatte.

Wenn bei der Umsetzung einer Website ein Problem auftaucht, dann sucht man im Internet nach einer Lösung für dieses. Bei dieser Suche findet man dann immer wieder etwas Neues, über das man sich auch weiter informieren möchte - etc..

Alles können wird man nie und aufhören zu lernen ebenfalls nicht.

[flipmode]

Hallo,

@Rinaldo - ja scheint wohl so zu sein.
Du kommst aus Grattersdorf? Ich komme aus Auerbach/Engolling - ist ja direkt um die Ecke!
Ein Design auflegen ist kein Problem, die Umsetzung allerdings schon da es hier einige kniffe und Tricks gibt, etwa bei Buttons, bzw. Menüleisten. Kommt dann noch jQuery hinzu um das ganze etwas zu "tunen" entsteht daraus schnell ein nicht so leicht überwindbares Problem. Man findet zwar viele Code-Snippets, diese aber korrekt und sauber einbinden fällt mir noch nicht so leicht.
Ich bin schon froh hier in diesem Forum nicht gleich halb erschlagen zu werden - andere Foren haben etwas grobe Umgangstöne für Neulinge oder Einsteiger.

Grüße

Jürgen

[Rinaldo]

Grias Di! Vielleicht kenn ich Dich ja sogar

Aber ich muss das mal aktualisieren - bin ja weggezogen...

[hero-master]

Hi
Ich würde dir empfehlen nicht versuchen gleich alles auf einmal können zu wollen. Fang mit HTML und CSS an, denn das brauchst du für jede Website. PHP und MySQL ist eine komplett andere Baustelle, weil es Programmiersprachen sind und ganz anders ticken.
Auch von jQuery, also Javascript, würde ich zu Beginn ersteinmal Abstand halten, bevor du nicht genau weißt, was eigentlich da passiert

Hol dir Templates, schau – wie bereits gesagt – bei CSS-Zen-Garden vorbei. Schau in den Quellcode von Profiseiten und CSS-Profis (vor allem im englischsprachigen Raum), bau Seiten nach, bau Seiten um und lese jeden Tag in Blogs (das mach ich auch jeden Tag). Ich habe dir mal nen Ausschnitt aus meiner täglichen Portion Blog-Leserei angehängt

Und das wichtigste: Erwarte nicht alles sofort zu verstehen und zu behalten, außer du bist ein Genie oder so ein Gedächtnissport-Freak

in der liste unten fehlt noch smashingmagazine.com

[flipmode]

Hallo Nico,

danke für deine Linksammlung, ich sehe schon das meine Vorgehensweise nicht völlig abweicht. Auch ich stöbere gerne durch Blog´s und unzählige Seiten auf welchen man sich Anregungen und Ideen holen kann.

Ich bin gerne hier unterwegs:
http://www.sohtanaka.com/
http://www.designbombs.com/
http://www.gavick.com/
uvm... deine Linksammlung ist natürlich weitaus größer und die Designs auch sehr ansprechend.

Alles sofort zu verstehen und zu können wird wohl nicht möglich sein, auch wenn man vorerst viel von sich selbst erwartet, die ersten Rückschläge hatte ich schon.. :-)
Als Test und Spielwiese habe ich gestern den "nackten" Onlineshop installiert
-> http://www.bamboo-impressions.de
hier möchte ich später die geglückten Versuche umsetzen...
Als erstes auf der Liste steht der Footer, den ich gerne anpassen möchte - ich denke für die erste Übung sollte dies nicht zu schwer werden, dieser sollte später einmal so aussehen.



Nur bin ich mir noch nicht sicher wie ich es angehen soll, da ich bisher noch kein Beispiel dafür gefunden habe - evtl. ist aus deiner Linksammlung ja etwas dabei, ich versuche mich da heut Abend überall mal umzusehen

Grüße

Jürgen

[chorn]

Sind halt vier Container mit jeweils einer Überschrift, einer Liste, einer Hintergrundgrafik rechts, alle jeweils links gefloatet. Damit kannst du sicher schon was anfangen.

[flipmode]

Hallo Chorn,

danke für den Tipp - ich denke das hat mich schon in die richtige Richtung geschuppst.
Das ganze habe ich nun mal in einer Datei versucht zu realisieren.

Hier das erste Ergebnis...
Footer

Der Code, ich bin mir nicht sicher - denke aber das man einiges "kürzer" und einfacher hätte machen können.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de" lang="de">
<head>
    <span class="container">Lorem ipsum</span> 
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
  <title>&nbsp;</title>
  <style type="text/css">
  .container {
	font-weight: bold;
	display: block;
} 
    * {
      margin: 0;
      padding: 0;
	  list-style: none;
    }
    body {
      padding-top: 50px;
      font: 100%/1.4 "Trebuchet MS", sans-serif;
	  color: #FFFFFF;
    }
    #seite {
      width: 1000px;
      margin: 0 auto;
    }
	 #footerbg {
      clear: left;
      background-image: url(../footer/footer_background.png);
	  background-repeat: no-repeat;
	  width: 1000px;
	  height: 230px;
	  margin: 0 auto;
	}
    #inhalt {
      clear: left;
      padding: 20px;
    }
	#footernav {
	background: url(../footer/footer_divider.png) no-repeat scroll right top transparent;
	width: 120px;
	float: left;
	list-style: none;
	padding: 0 15px;
	display: block;
	margin: 15px 0px 0px;
    }
    #footernav li {
	font-weight: normal;
	}
	#footernav ul {
	font-weight: normal;
	}
    #footernav a {
      color: #000;
      text-decoration: none;
	  color: #FFFFFF;
	  padding: 0 0 10px;
    }

  </style>
</head>
<body>

    <div id="footerbg">
	<div id="footernav">
	<a href="#" class="container">OBST</a>
	<ul>
    <li><a href="#">Äpfel</a></li>
    <li><a href="#">Bananen</a></li>
    <li><a href="#">Birnen</a></li>
    <li><a href="#">Clementinen</a></li>
  </ul>
      </div>
  <div id="footernav">
	<a href="#" class="container">GEMÜSE</a>
	<ul>
    <li><a href="#">Zwiebel</a></li>
    <li><a href="#">Blumenkohl</a></li>
    <li><a href="#">Wirsing</a></li>
    <li><a href="#">Salat</a></li>
    </div>
	  <div id="footernav">
	<a href="#" class="container">FLEISCH</a>
	<ul>
    <li><a href="#">Schwein</a></li>
    <li><a href="#">Rind</a></li>
    <li><a href="#">Pute</a></li>
    <li><a href="#">Huhn</a></li>
    </div>
  </div>
  </body>
</html>

[chorn]

So grob drübergeflogen gibt es da nichts zu kürzen, ist ziemlich kompakt, du musst ja schon alles definieren. Was du aber syntaktisch nicht machen darfst ist eine ID mehrmals zu verwenden - da nimmst du dann eine Klasse.

[flipmode]

ja, macht Sinn - dem war ich mir nicht bewusst obwohl es im Buch gleich auf den ersten Seiten steht

Dann versuche ich mal das ganze direkt im Shop umzusetzen...

[hero-master]

2 1/2 Dinge noch
1. Im head-Bereich hat ein span-Tag nichts zu suchen
2. Zeichne die Überschriften der jeweiligen Navigation auch so aus: h-Tags
1/2. font-weight: normal brauchst du nicht für die Liste definieren, auch list-style haste ja schon im Reset (*) eliminiert und durch float wird das Objekt automatisch ein Blockelement (display: block unnötig)

Zwecks Kürzung: Nimm den HTML5-Doctype

[flipmode]

Hallo Nico,

danke...
Nun habe ich im Shop gleich ein Problem. Und zwar ist durch den Background bedingt eine dunkle Schrift nicht von Vorteil.
Also muss ich diese idealerweise #ffffff gestalten.
Im Shoptemplate wird für Links usw. die Farbe von

a,
a:visited,
a:link {
   color: #0000c6;
}
a:hover {
   color: #00007b;
}
a:active,
a:focus {
   color: #d00000;
}

entnommen. Änderungen hierfür beziehen sich auf alle Links im Template, somit ist der Text auf weißem Hintergrund nicht mehr lesbar. Kann ich hier eine eigene Klasse erzeugen, oder wie löst man dies sauber?