Der CSS-Thread

[TriloByte]

Tjaja, jeder verwendets, aber ich habe von CSS so gut wie keine Ahnung und da ich bei einigen von euch sehr nett designte Seiten begutachten konnte, könnt ihr mir sicher mit ein paar Tips behilflich sein. Ich hab mir schon etliches gegoogelt und verstehe auch das Prinzip und die Aufgabe von CSS - es hapert aber an der Umsetzung. Zudem sind mir die Vor- und Nachteile interner/externer Sheets und CSS-Klassen nur unzureichend bekannt. Neben der Vertiefung meiner PHP-Kenntnisse ist das das letzte offene Kapitel, was ich mir zum Thema Webdesign aneignen wollte.

Sorry, dass der Thread etwas allgemein ist, aber speziellere Fragen kann ich erst stellen, wenn ich das Prinzip besser verstanden habe. Thx.~~

[denial_land]

hmmm, yummy CSS!

.... kannst du deine frage ein bißchen genauer formulieren? willst du bestimmte sachen wissen? Wo CSS genau himkommt? wie es kombiniert wird? bestimmte effekte? Möglichkeiten und grenzen?

heh.

(fahr jetzt übers WE weg. ned wundern.)

[denial_land]

in der zwischenzeit.. http://www.lissaexplains.com/css.shtml
and http://www.greatestjournal.com/communit ... /8029.html =)

[Spike'sKrüml]

ah danke trilo.mein held.ich missbrauch mal kurz den thread für meine eignen zwecke.hast ja nix dagegen.gell?

Code: Alles auswählen

LASTN_TALK_READLINK=><a href="%%urlread%%"><b>%%messagecount%% pathetic thought%%mc-plural-s%%</b></a>|

LASTN_TALK_LINKS<=
<tr>
<td colspan="2" width="100%" bgcolor="%%color&#58;weak_back%%" class="comments" style="text-align&#58; right">
%%readlink%%<a href="%%urlpost%%">Upset me.You want it.</a>
</td>
</tr>
<=LASTN_TALK_LINKS

GLOBAL_HEAD<=
<title>Miss Moneypenny tries to be special</title>
<style type="text/css">
<!--
body &#123;
background-color&#58; white !important;
background-image&#58; url&#40;http&#58;//img.villagephotos.com/p/2003-10/428757/bg2.jpg&#41; !important;
background-repeat&#58; no-repeat !important;
background-attachment&#58; fixed !important;
background-position&#58; left top !important;
&#125;
-->
</style>
<style type="text/css">
<!--
table &#123; 
width&#58; 45%; 
margin-left&#58; 42%; 
margin-right&#58; 7%; 
&#125; 
table table &#123; 
width&#58; 100%; 
margin&#58;0; 
&#125; 
table table table &#123; 
width&#58; auto; 
&#125; 
-->
</style>
<style type="text/css"> 
<!-- 
table &#123; 
border&#58; 2px dashed #000000;
&#125; 
table table &#123; 
border&#58; 0;
&#125; 
--> 
</style>
<style type="text/css">
<!--
body &#123;
scrollbar-track-color&#58; black;
scrollbar-face-color&#58; white;
scrollbar-highlight-color&#58; black;
scrollbar-arrow-color&#58; black;
&#125;
-->
</style>
<style>
<stile type="text/css">
<!--

<style type="text/css">
<!--
a&#58;hover &#123;
filter&#58; blur&#40;Strength=3,Direction=45&#41;;
height&#58; 0;
&#125;
-->
</style>
<style type="text/css">
<!--
a&#58;hover &#123;
color&#58; #88B2DC;
&#125;
-->
</style>
 
<=GLOBAL_HEAD

so.hübsch ne.jap.deadjournal.also wer hat ne ahnung?

alles selbergebastelt.ich held.un nü.hab ich n problem.und zwar schnall ich net wo wie was ich da reinbaun muss um den link zum editiern meiner entries hinzubekomm.ihr wisst schon.da unten am entrie dran.
einer ne ahnung?ich verzweifel sonst nämlich.bald.

[denial_land]

Krümli, du hast dein CSS überhapt ned gemerged!!!!
http://www.deadjournal.com/talkread.bml ... temid=3331

ausserdem, den edit button findest du immer auf der "comments" page (es sei deen, du benutzt S2...)
Um den immer auf die LASTN seite zu bekommen (da wo alle deine entries sind) musst du einen extra style erstellen.

[denial_land]

ok, also ich konnte es nicht lassen. Geh zu http://www.deadjournal.com/modify.bml

und ersetze alles in der override box mit

Code: Alles auswählen

LASTN_TALK_READLINK=><a href="%%urlread%%"><b>%%messagecount%% pathetic thought%%mc-plural-s%%</b></a>| 

LASTN_TALK_LINKS<= 
<tr> 
<td colspan="2" width="100%" bgcolor="%%color&#58;weak_back%%" class="comments" style="text-align&#58; right"> 
%%readlink%%<a href="%%urlpost%%">Upset me.You want it.</a> 
</td> 
</tr> 
<=LASTN_TALK_LINKS

GLOBAL_HEAD<= 
<title>Miss Moneypenny tries to be special</title> 
<style type="text/css"> 
<!-- 
body &#123; 
background-color&#58; white !important; 
background-image&#58; url&#40;http&#58;//img.villagephotos.com/p/2003-10/428757/bg2.jpg&#41; !important; 
background-repeat&#58; no-repeat !important; 
background-attachment&#58; fixed !important; 
background-position&#58; left top !important; 
&#125; 
table &#123; 
width&#58; 45%; 
border&#58; 2px dashed #000000; 
margin-left&#58; 42%; 
margin-right&#58; 7%; 
&#125; 
table table &#123; 
width&#58; 100%; 
border&#58; 0; 
margin&#58;0; 
&#125; 
table table table &#123; 
width&#58; auto; 
&#125; 
body &#123; 
scrollbar-track-color&#58; black; 
scrollbar-face-color&#58; white; 
scrollbar-highlight-color&#58; black; 
scrollbar-arrow-color&#58; black; 
&#125; 
a&#58;hover &#123; 
filter&#58; blur&#40;Strength=3,Direction=45&#41;; 
height&#58; 0; 
color&#58; #88B2DC;
&#125; 
--> 
</style> 

<=GLOBAL_HEAD

So wird es dann aussehen (nur halt mit DEINEM journal )
http://www.deadjournal.com/community/codetest

das ist dann alles gemerged und läd viel schneller und geht sauberer.
Wegen dem edit button: wo willst du denn das genau haben? Gib mir auch mal deinen DJ usernamen dass ich mir des besser vorstellen kann.
Aber mit overrides geht das nicht.

[TriloByte]

Möglichkeiten und grenzen?

Yap, raus damit. Ich könnte zwar auf Selfhtml unter CSS nachschauen, doch gibts da leider keine ausführlichen Ausführungen zu gerade dem Punkt. Aber ich will mich bemühen mal ein paar konkretere Fragen zu stellen:

- CSS ist KEINE Programmiersprache bzw. hat auch nur entfernte Ähnlichkeiten damit und dient ausschliesslich dazu, die beschränkten Darstellungsmöglichkeiten von HTML aufzumotzen, oder?
- Wie ist die Syntax von CSS? Ich habe gehört, es handelt sich um Klassen, die in geschweifte Klammern gefasst werden. Dort werden die Eigenschaften eines Stils beschrieben. Stimmig?
- Externe/Interne Sheets. Wann sollte man was nehmen?
- Handelt es sich bei CSS wie bei HTML nur um die Aneinanderreihung von vordefinierten Befehlen oder Tags, die man mit ein paar selbstgewählten Parametern anpasst, oder kann man selbst mit Hilfe von CSS seine Grenzen erweitern?

Das wars erstmal im Groben, thx.

[denial_land]

- CSS ist KEINE Programmiersprache bzw. hat auch nur entfernte Ähnlichkeiten damit und dient ausschliesslich dazu, die beschränkten Darstellungsmöglichkeiten von HTML aufzumotzen, oder?

Ja. Im prinzip ist CSS nur HTML verschönerung. auch wenn man es offiziell wohl nicht so sagen darf
Eigentlich kannst du nix mit CSS machen, was du nicht auch sonst irgendwie machen könntest. Und selbst DAS kannst mit inline html machen.

- Wie ist die Syntax von CSS? Ich habe gehört, es handelt sich um Klassen, die in geschweifte Klammern gefasst werden. Dort werden die Eigenschaften eines Stils beschrieben. Stimmig?

wenn du zB einen haufen <td>s im html, kannst du zB folgendes machen

td {
eigentschaft: wert;
eigenschaft: wert;
eigenschaft: wert;
}

vor CSS muss immer folgendes kommen:

Code: Alles auswählen

<style type="text/css"><!--

und danach

Code: Alles auswählen

--></style>

- Externe/Interne Sheets. Wann sollte man was nehmen?

internal stylesheets kommen direkt in das html file (indem du die <style> tags benutzt), whohingegen external stylesheets separate .css files sind.
wenn es für eine seite ist dann nimm internal aber wenn du die css eigenschaften auf mehrere seiten anwenden willst , dann nimm external

- Handelt es sich bei CSS wie bei HTML nur um die Aneinanderreihung von vordefinierten Befehlen oder Tags, die man mit ein paar selbstgewählten Parametern anpasst, oder kann man selbst mit Hilfe von CSS seine Grenzen erweitern?

naja ich weiß jetzt nicht was genau du mit grenzen erweitern meist.
Ein paar beipiele sind zB diese ganzen hover-sachen, dass das link dann verschwimmt oder die farbe wechselt. oder seitenübergänge, oder sogar hintergrundbilder. du kannst div layer mit CSS machen. Beispiel: http://www.deadjournal.com/users/denial_land/
oder transparenz... alles mögliche
aber am ende ist es nur spielerei

[Spike'sKrüml]

@denial

des mit dem editiern is mir inzwischen auch aufgefalln,also ich editiers eigentlich auch immer da , s "link" unten am entrie hat mir nur irgendwie gefehlt.
und nen eigenen style erstelln is mir zu hoch.ich hab schon ne woche gebraucht um zu schnall was die mitm html von mir wolln.

und zu dem gemerged , des wusst ich gar nich, dass man das machen muss.ich kann ja html auch bloß begrenzt (sehr begrenzt eigentlich) unds css war jetzt mehr so learning by looking und sowas.also hab da net so den durchblick.*shrugs*

*journalmodifyngeht* daaanke natürlich noch

[denial_land]

oooch so schwer ist das alles gar nicht ...ehrlich
wenn du mal fragen hast noch zu DJ und so dann stellst du sie einfach, weil ich helf dir gerne..

und zu CSS..das musst du mergen damit es auch alles klappt.. ungemergede (oh man was für ein wort) funktioniert nämlich meistens nicht, und dann heben sich die overrides gegenseitig auf.. lol

[denial_land]

<spam>
absolut OT, aber hier ist was für den liebem trilo!!! http://www.slapped.de/funx/31337.php heh heh</spam>

[Shadow]

<spam>
absolut OT, aber hier ist was für den liebem trilo!!! http://www.slapped.de/funx/31337.php heh heh</spam>

ich werde mal trilo zuvorkommen
das faellt in die kategorie kALT

so nun me bw gg

[denial_land]

ah, danke shadow

Trilo, schau dir auch mal den quelltext vom board an wenn du ein beispiel für ein bißchen forgeschrittenes CSS sehen willst =)

[TriloByte]

Ja. Im prinzip ist CSS nur HTML verschönerung. auch wenn man es offiziell wohl nicht so sagen darf
Eigentlich kannst du nix mit CSS machen, was du nicht auch sonst irgendwie machen könntest. Und selbst DAS kannst mit inline html machen.

Selbst Hover Effekte, Scrollbaraussehen etc?

wenn du zB einen haufen <td>s im html, kannst du zB folgendes machen

td {
eigentschaft: wert;
eigenschaft: wert;
eigenschaft: wert;
}

ok. diese sogenannten Eigenschaften - gibts da eine Liste, wo ich aus verfügbaren Eigenschaften einfach nur welche auswähle, oder kann ich auch selber Eigenschaften definieren?

naja ich weiß jetzt nicht was genau du mit grenzen erweitern meist.
Ein paar beipiele sind zB diese ganzen hover-sachen, dass das link dann verschwimmt oder die farbe wechselt. oder seitenübergänge, oder sogar hintergrundbilder. du kannst div layer mit CSS machen. Beispiel: http://www.deadjournal.com/users/denial_land/
oder transparenz... alles mögliche
aber am ende ist es nur spielerei

z.B. wenn ein Link "verschwimmen" soll. Kann ich da nur die Art und Weise, WIE und WO er verschwimmt beeinflussen, oder kann ich auch eigene Effekte gänzlich neu definieren? Inwieweit muss ich mit dem, was CSS mir bietet vorlieb nehmen und wie eingeschränkt ist man da?

Mir fehlt irgendwie noch eine Befehlsreferenz oder sowas. ~~

[TriloByte]

<spam>
absolut OT, aber hier ist was für den liebem trilo!!! http://www.slapped.de/funx/31337.php heh heh</spam>

ich werde mal trilo zuvorkommen
das faellt in die kategorie kALT

so nun me bw gg

Jep, kannte ich schon~~
Shadow, lass mal bw zocken, ich brauch nen n00b, den ich ba$hen kann ~~.


btw. hab nen paar Befehlslisten gefunden, z.B.

http://www.jubber.com/webmastertools/wo ... /css.shtml
Jetzt fehlt nur noch ne Liste, wo ich sehen kann, welche Befehle welche Werte und wieviele Parameter erlauben. Aber das seh ich eigentlich auch bei Dreamweaver.

[edit]hab nen bisschen mit CSS rumgespielt. ist ja tatsächlich kinderleicht in der Anwendung und schnell & komfortabel. nice. [/edit]