Antworten auf deine Fragen:
Neues Thema erstellen

Antworten zum Thema „[CSS] CSS-Contest 2011“

Herr_D

offline

Liebe Fangemeinde, wie schon startet heute der CSS-Contest 2011.

Ich hab lange überlegt, wegen eines schicken Textes und am Ende ist der Contest der Contest:


Gestalte die Contestseite per CSS (und ein paar Grafiken). Nicht erlaubt ist das Einbinden externer Grafiken!


Der Contest erklärt sich durch den Contest selbst:

Dein Name beim PSD-Tutorials.de - CSS Contest 2011

Download der Dateien.


Die Textdateien sind nötig, um sie ins Grundgerüst zu includen.


Ach ja, ich hab grad als Anregung bekommen, dass WIPs und Fragen erwünscht sind...



Na dann: Her damit! ;)

Fauler S*ck :D hier nochmal ausführlicher...

Da ja der Spaß- und Lernfaktor im Vordergrund stehen soll sind WIP's und gegenseitiges Feedback ausdrücklich erwünscht. Vor allem, damit ihr nicht an einer Stelle stehenbleibt und irgendwo verzweifelt, weil es nicht weitergeht. Ladet euren Entwurf auf euren Webspace, postet den Link hier und holt euch Anregung, Hilfe und Feedback...

WIPs: Klick > >> >
Voting:

Ab dem 26.03.2011 - 03.04.2011 können die Screenshots hochgeladen werden.
Beachte: Wenn du keinen Screen ins Votingmodul lädst, nimmst du nicht an der Abstimmung teil!

Vom 03.4.2011 - 10.04.2011 kann abgestimmt werden.
 
Zuletzt bearbeitet:

Herr_D

offline

AW: [CSS] CSS-Contest 2011




HTML:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
        "http://www.w3.org/TR/html4/strict.dtd">

<head>
        <title>Dein Name beim PSD-Tutorials.de - CSS Contest 2011</title>
        <meta name="author" content="Dein Name">
        <meta http-equiv="content-type" content="text/html;charset=iso-8859-1">
        <meta name="keywords" content="psd-tutorials.de, css-contest, grafik und webdesign,">
        <meta name="audience" content="alle">
        <meta name="robots" content="index,follow">
        <meta name="language" content="deutsch">

        <meta name="Content-Language" content="de">
        <meta name="robots" content="all">
        <link href="style.css" type="text/css" rel="stylesheet">
</head>

<body>

<div id="head">
        <h1><span>Dein Name</span> beim PSD-Tutorials.de - CSS Contest</h1>
</div>

<div id="menue-one">
        <!-- Dieses Menue fuehrt ins Nichts, kann aber toll aussehen oder? -->
        <h4>Wegweiser</h4>
        <ul id="menue-one-list">
                <li class="mo-one"><a href="#">one</a></li>
                <li class="mo-two"><a href="#">two</a></li>
                <li class="mo-three"><a href="#">three</a></li>

                <li class="mo-four"><a href="#">four</a></li>
                <li class="mo-five"><a href="#">five</a></li>
                <li class="mo-six"><a href="#">six</a></li>
                <li class="mo-seven"><a href="#">seven</a></li>
        </ul>
</div>

<div id="content-one">

        <h2>Der Grundgedanke</h2>
        <p>Nach langem Hin und Her und einigen zaghaften Versuchen kommt es dieses Jahr endlich zu einem Contest im Bereich Webdesign.</p>
        <p>Die Idee ist nicht neu und einige kreative Leute im Netz haben so &auml;hnliche Geschichten schon veranstaltet. Ganz weit vorn ist nat&uuml;rlich <a href="http://www.csszengarden.com/tr/deutsch/">Zen Garden</a>.</p>
        <p>Nichtsdestotrotz: Wir ziehen das hier durch und haben Spa&szlig; dabei. Eingeladen ist jeder, der sich zutraut, ein Layout &uuml;berwiegend mit CSS zu gestalten.</p>

        <p>Diese Veranstaltung soll Spa&szlig; machen und l&auml;uft nach dem olympischen Motto: <span class="olymp">"Dabei sein ist alles."</span></p>
        <p>Wir hoffen nat&uuml;rlich, dass am Ende des Tages ein paar fesche CSS-Layouts entstehen. Vielleicht kann der Eine oder die Andere sie ja auch f&uuml;r eigene Projekte als Idee nutzen.</p>
        <p class="leer">&nbsp;</p>
        <p class="nachtrag">P.S. Ach ja, f&uuml;r alle, die es nicht p&uuml;nktlich schaffen. Diese Sache ist OpenEnd. Nach dem 02.04.2011 eingereichte Entw&uuml;rfe nehmen nur nicht mehr am Voting teil. Ich stelle sie aber noch online. D</p>

</div>
<div id="content-two">
        <h2>CSS Contest 2011</h2>
        <p><strong>Aufgabe:</strong> Gestalte diese vorgegebene html-Seite mit Hilfe von CSS.</p>
        <p><strong>Start:</strong> 20.02.2011; 10:00 Uhr</p>
        <p><strong>Abgabe:</strong> 02.04.2011; 17:00 Uhr (sp&auml;tester Zeitpunkt)</p>

        <p>Ab 03.04.2011 geht die Seite mit den Werken online.</p>
        <p>Feedback, Austausch und... ist noch viel wichtiger als "Sieger" zu ermitteln und kann bei pst-tutorials gegeben werden.</p>
        <div id="ablauf">
                <h3>Ablauf:</h3>
                <ol>
                        <li>Lade dir die notwendigen Dateien <a href="nickname.zip">hier</a> runter.
                        <li>Nimm dir Zeit zum Nachdenken! (Schnellsch&uuml;sse unerw&uuml;nscht)
                        <li>Erstelle eine style.css und die f&uuml;r dein Design notwendigen Grafiken.<br>

                                <strong>Maximale Gesamtdateigr&ouml;&szlig;e der CSS-Datei und der Grafiken: 200kb</strong>
                        <li>Probiere, teste<sup>1</sup>,kn&uuml;ll zusammen, fang neu an, probiere, teste... sei zufrieden!
                        <li>Erstelle einen Screenshot f&uuml;r das Votingmodul.
                        <li>Schicke mir eine <a href="http://www.psd-tutorials.de/forum/private.php?do=newpm&u=7203">PM</a> und ich sage dir wohin mit den Daten<sup>2</sup>.
                </ol>

                <p class="fussnote-one"><sup>1</sup>Browser: Firefox 3.6, Safari 5.03, IE8 (wenn also mit CSS3 gearbeitet wird, sollte es im IE wenigstens bedien- und erkennbar sein). Es geht aber NICHT um die Erstellung mehrerer CSS um alle Browser abzudecken. (Das machen wir n&auml;chstes Mal.) Schwerpunkt sind moderne Browser. Zeige die M&ouml;glichkeiten von CSS eben…</p>
                <p class="fussnote-two"><sup>2</sup>- die CSS-Datei: style.css ;<br>
                        - eine Textdatei in der nur dein (Nick)name steht: name.txt ;<br>
                        - eine Textdatei in der die Adresse deiner Webseite (http://deineseite.de) oder die Adresse zu deinem Profil auf psd-tutorials.de steht: webseite.txt (<strong>Kein html!</strong>);<br>

                        - eine Textdatei in der ein Satz &uuml;ber dich steht: person.txt (<strong>Kein html!</strong>); <br>
                        - eine Grafik 50*50px / 20kb, dein Bild oder Avatar: avatar.jpg (nur jpg als Format zugelassen)</p>
        </div>
        <p><strong>Voting:</strong> Ab dem 03.04.2011 kann bis zum 10.04.2011 gevotet werden. Etwa eine Woche vorher &ouml;ffne ich den Votingbereich, um die Screenshots hochzuladen. Damit erscheint dann deine Teilnahme in deinem Profil bei PSD-Turorials.de.</p>

        <p><strong>Bewertung:</strong> Da das Voting ein Uservoting ist und somit seinen eigenen Gesetzen folgt, z&auml;hlt wohl mal der erste Eindruck, Farbgebung, Layout, Idee und dann sollte das CSS auch noch valide sein. (Die CSS-Dateien k&ouml;nnen auf der Pr&auml;sentationsseite eingesehen werden.)</p>
        <p><strong>Feedback:</strong> Kann im Thread abgegeben werden. So lange die g&auml;ngigen Feedbackregeln eingehalten werden, ist es nat&uuml;rlich erw&uuml;nscht.</p>
</div>

<div id="psd-tutorials">
        <h2>PSD-tutorials.de</h2>
        <blockquote>
                <p>PSD-Tutorials.de bietet dir eine umfassende und qualitativ hochwertige Sammlung an Tutorials und Video-Trainings zu 2D-, 3D-, Web-, Vektor-, Video- und Layoutprogrammen und h&auml;lt f&uuml;r dich in allen Bereichen eine Vielzahl an erg&auml;nzenden Downloadpaketen wie etwa Photoshop-Presets, Texturen, Homepagevorlagen, 3D-Modelle und Arbeitsdateien vor. Im Forum kannst du dich austauschen und in den Contests dein K&ouml;nnen beweisen. Bei so vielen Inhalten und Interaktionsm&ouml;glichkeiten ist es schon einmal m&ouml;glich, die Orientierung zu verlieren. Nutze unsere Sitemap, um einen &Uuml;berblick &uuml;ber alle Kategorien und Bereiche zu erhalten, die f&uuml;r dich auf PSD-Tutorials.de bereitstehen.</p>

        </blockquote>
        <p class="quellenangabe"><a href="http://www.psd-tutorials.de/sitemap">Sitemap - PSD-Tutorials.de</a></p>
</div>

<div id="menue-two">
        <h4>Teilnehmer</h4>
        <ul id="menue-two-list">
            

                 <li><a name="afr0kalypse" href="http://css-contest.bplaced.net/afr0kalypse">Afr0kalypse</a></li>
                 <li><a name="agielen" href="http://css-contest.bplaced.net/agielen">agielen</a></li>

                 <li><a name="Asmidiske" href="http://css-contest.bplaced.net/Asmidiske">Asmidiske</a></li>
                 <li><a name="cebito" href="http://css-contest.bplaced.net/cebito">cebito</a></li>
                 <li><a name="cebito2" href="http://css-contest.bplaced.net/cebito2">cebito2</a></li>
                 <li><a name="cythux" href="http://css-contest.bplaced.net/cythux">cythux</a></li>
                 <li><a name="DerOtto" href="http://css-contest.bplaced.net/DerOtto">DerOtto</a></li>
                 <li><a name="hellemon" href="http://css-contest.bplaced.net/hellemon">hellemon</a></li>

                 <li><a name="hellemon2" href="http://css-contest.bplaced.net/hellemon2">hellemon2</a></li>
                 <li><a name="Herr_D" href="http://css-contest.bplaced.net/Herr_D">Herr D</a></li>
                 <li><a name="Herr_D2" href="http://css-contest.bplaced.net/Herr_D2">Herr D2</a></li>
                 <li><a name="jackxkfm" href="http://css-contest.bplaced.net/jackykfm">jackykfm</a></li>
                 <li><a name="jackxkfm2" href="http://css-contest.bplaced.net/jackykfm2">jackykfm2</a></li>
                 <li><a name="jackxkfm3" href="http://css-contest.bplaced.net/jackykfm3">jackykfm3</a></li>

                 <li><a name="lauffreak" href="http://css-contest.bplaced.net/lauffreak">lauffreak</a></li>
                 <li><a name="martink77" href="http://css-contest.bplaced.net/martink77">martink77</a></li>
                 <li><a name="Master-B" href="http://css-contest.bplaced.net/Master-B">Master-B</a></li>
                 <li><a name="Master-B2" href="http://css-contest.bplaced.net/Master-B2">Master-B2</a></li>
                 <li><a name="MegaAdi" href="http://css-contest.bplaced.net/MegaAdi">MegaAdi</a></li>
                 <li><a name="MegaAdi2" href="http://css-contest.bplaced.net/MegaAdi2">MegaAdi2</a></li>

                 <li><a name="MSpitz80" href="http://css-contest.bplaced.net/MSpitz80">MSpitz80</a></li>
                 <li><a name="oli_mogli" href="http://css-contest.bplaced.net/oli_mogli">Oli Mogli</a></li>
                 <li><a name="pimky_k" href="http://css-contest.bplaced.net/pinky_k">pinky_k</a></li>
                 <li><a name="peterrita" href="http://css-contest.bplaced.net/peterrita">peterrita</a></li>
                 <li><a name="renschli" href="http://css-contest.bplaced.net/renschli">renschli</a></li>
                 <li><a name="sash79" href="http://css-contest.bplaced.net/sash79">sash79</a></li>

                 <li><a name="splatter" href="http://css-contest.bplaced.net/splatter">splatter</a></li>
                 <li><a name="svhresi" href="http://css-contest.bplaced.net/svhresi">svhresi</a></li>
                 <li><a name="une_art" href="http://css-contest.bplaced.net/une_art">une_art</a></li>
                 <li><a name="Yarince" href="http://css-contest.bplaced.net/Yarince">Yarince</a></li>


                <!-- Liste wird mit den abgegebenen Layouts aufgefüllt, kann also irgendwann ins Unendliche gehen... -->        </ul>

</div>

<div id="autor">
        <h4>Dein Name<!-- Inhalt der name.txt --></h4>
        <img class="ava" title="dein Name" src="avatar.jpg" alt="ava">
        <p>Hier könnte eine kurze Beschreibung über dich stehen...</p>
</div>

<div id="footer">
        <p>Der CSS-Contest ist ein Contest auf <a href="http://psd-tutorials.de">psd-tutorials.de</a> | Teilnehmer: <a href="#">Dein Name</a> | <a href="style.css">CSS</a></p>

</div>

</body>

</html>
 
Zuletzt bearbeitet:

Herr_D

offline

AW: [CSS] CSS-Contest 2011

Teilnehmer
  • afr0kalypse
  • Asmidiske
  • Bleccer
  • Br0
  • DerOtto
  • Desert_Eagle25
  • fabi29
  • HansF95
  • hellemon
  • Ilse Schnick
  • krid2873
  • lauffreak
  • leohh
  • Lueh
  • Misco
  • MST123
  • pretorianer
  • snoopdog1971
  • Solla
  • spacle
  • yarince


Ich würd ja vielleicht gern, aber ich weiß noch nicht ob ich die Zeit finden werde...

  • ackermaennchen
  • Aitanara
  • ArtiHl
  • cebito
  • cef
  • fexx
  • Frank_B_punkt
  • gargamelix
  • Gegenstrom
  • HansHansa
  • hellemon
  • Herrschel
  • KaisyTom
  • kcc
  • Lottergeis
  • Louisiana
  • midgard18
  • netbandit
  • pinkflo
  • Rhazel
  • Shuilar
  • SprinterMadl
  • une_art
  • venky4ever




Weitere Anmeldungen möglich einfach eine PM an mich schicken.
 
Zuletzt bearbeitet:

Shuilar

prof. herr. Betatester

AW: [CSS] CSS-Contest 2011

Habe die Dateien abgeholt.

Schon lustig, mal nen anderen Quelltext zu sehen, als den eigenen ;)

Bin ja mal gespannt, was dabei rauskommt :p
 

pretorianer

Noch nicht viel geschrieben

AW: [CSS] CSS-Contest 2011

Habe mir die Dateien auch runtergeladen.

Das wird sicherlich spaßig, habe noch gar keine Ahnung wie ich anfange :uhm:. Da hilft wohl nur das folgende Motto:

„Wer etwas will, findet Wege.“ ;)

Bin gespannt wo mich und Euch die Reise hinführt. :mrorange:
 

Herr_D

offline

AW: [CSS] CSS-Contest 2011

Ach ja, ich hab grad als Anregung bekommen, dass WIPs und Fragen erwünscht sind...



Na dann: Her damit! ;)
 

cebito

undefined

AW: [CSS] CSS-Contest 2011

Fauler S*ck :D hier nochmal ausführlicher...

Da ja der Spaß- und Lernfaktor im Vordergrund stehen soll sind WIP's und gegenseitiges Feedback ausdrücklich erwünscht. Vor allem, damit ihr nicht an einer Stelle stehenbleibt und irgendwo verzweifelt, weil es nicht weitergeht. Ladet euren Entwurf auf euren Webspace, postet den Link hier und holt euch Anregung, Hilfe und Feedback...
 

une_art

Wissenssauger WS2100

AW: [CSS] CSS-Contest 2011

Ich habe mir die Daten auch schonmal runtergeladen.
Eine Frage hab ich noch, die aus der Contestbeschreibung irgendwie nicht ganz hervorgeht:

Was genau darf an der index.html noch geändert werden? Wirklich nur solche Kleinigkeiten, wie "Dein Name" im Titel, oder darf man z.B. in der ersten Navigation auch die Linkbeschriftungen ändern?!

Ich wäre jetzt davon ausgegangen, dass man an den Links etc nichts ändern darf, wollte aber trotzdem nochmal nachfragen und das klären, bevor ich anfange ;-)
 

patrick_l

Hat es drauf

AW: [CSS] CSS-Contest 2011

Hierfür habe ich extra andere Projekte verschoben :D
Paket ist auch bei mir angekommen, danke auch für die PN. :)
 

Herr_D

offline

AW: [CSS] CSS-Contest 2011

Ich habe mir die Daten auch schonmal runtergeladen.
Eine Frage hab ich noch, die aus der Contestbeschreibung irgendwie nicht ganz hervorgeht:

Was genau darf an der index.html noch geändert werden? Wirklich nur solche Kleinigkeiten, wie "Dein Name" im Titel, oder darf man z.B. in der ersten Navigation auch die Linkbeschriftungen ändern?!

Ich wäre jetzt davon ausgegangen, dass man an den Links etc nichts ändern darf, wollte aber trotzdem nochmal nachfragen und das klären, bevor ich anfange ;-)

Die html hab ich nur als Hilfe hochgeladen, die wird im Grunde gar nicht verändert...


Die Textdateien, die ausgefüllt werden sollen, werden nachher automatisch in das bestehende html-Konstrukt eingefügt...
 

une_art

Wissenssauger WS2100

AW: [CSS] CSS-Contest 2011

Ah okay, dann hatte ich die vielen "Dein Name" falsch verstanden. Sorry, für die etwas dämliche Frage :p

Allen ein gutes Gelingen! Bin echt mal gespannt, was da so bei rauskommt.
 
O

Ollisterhase

Guest

AW: [CSS] CSS-Contest 2011

Mhh, ich hab verpasst mich im Anmelde-Thread anzumelden, kann ich trotzdem noch mitmachen?
Ich komm noch net so gut klar mit CSS, aber zum üben scheint mir das hier ganz gut zu sein.
 

hellemon

Hat es drauf

AW: [CSS] CSS-Contest 2011

Die html hab ich nur als Hilfe hochgeladen, die wird im Grunde gar nicht verändert...

Die Textdateien, die ausgefüllt werden sollen, werden nachher automatisch in das bestehende html-Konstrukt eingefügt...

Du machst mich feddich, wie die Textdateien werden automatisch in das bestehende html-Konstrukt eingefügt?
Ich kann dir absolut nicht folgen, habe ich immer schon alles falsch gemacht :D
Das einzige mir bekannte um Textdateien in eine HTML Seite zu laden ist

Total veraltet:
Code:
<layer src="datei.txt">
Code:
<iframe width="100%" src="datei.txt"></iframe>
Und das zweite was ich fragen wollte, darf man anstellen von Text die in der HTML Datei definiert sind auch Grafiken einsetzen?

Darf man anstellen von id auch class nehmen?

Code:
<div id="head">
        <h1><span>Dein Name</span> beim PSD-Tutorials.de - CSS Contest</h1>
</div>
Code:
<div id="head">
        <img src="images/hellemon.jpg" width="xx" height="xx" name="Text" />
</div>

CSS Valide wäre schön hast du geschrieben, auch XHTML Valide? oder ist das erst mal egal?

Kurze Info wäre nett.

Danke Helle
 

une_art

Wissenssauger WS2100

AW: [CSS] CSS-Contest 2011

Also wenn ich es richtig verstanden habe, darf an der html-Datei gar nichts geändert werden.
Somit brauchst du dir um xHTML keine Gedanken machen, sollte die Ausgangs-html nicht valide sein, ist sie das ja dann bei allen.
Es geht also nur ums CSS.
Text in der Html durch Bilder ersetzen dürfte dann auch wegfallen. Es sei denn du machst es komplett über die CSS-Datei.

Wenn das falsch ist, korrigiere mich bitte, Herr_D ;-)
 

Shuilar

prof. herr. Betatester

AW: [CSS] CSS-Contest 2011

Also wenn ich das richtig verstanden habe, dann darfst Du die index.html einfach gar nicht anfassen ;)

Die einzeigen Dateien, die Du bearbeiten sollst, kannst, darfst sind die CSS-Datei und die Textdateien. Ferner soll noch ein avatar.jpg dabei sein, das auch exakt so heißen soll.
Also nix an den Dateinamen ändern :)

Ach ja, Schatz ... sollte ich das jetzt falsch interpretiert haben, dann sag es Helle doch bitte. Ich les dann gleich mit, damit ich es auch richtig mache ;)

Edit: zu lahm *g*
 

Herr_D

offline

AW: [CSS] CSS-Contest 2011

Du machst mich feddich, wie die Textdateien werden automatisch in das bestehende html-Konstrukt eingefügt?
Ich kann dir absolut nicht folgen, habe ich immer schon alles falsch gemacht :D
Das einzige mir bekannte um Textdateien in eine HTML Seite zu laden ist

Total veraltet:
Code:
<layer src="datei.txt">
Code:
<iframe width="100%" src="datei.txt"></iframe>
Und das zweite was ich fragen wollte, darf man anstellen von Text die in der HTML Datei definiert sind auch Grafiken einsetzen?

Darf man anstellen von id auch class nehmen?

Code:
<div id="head">
        <h1><span>Dein Name</span> beim PSD-Tutorials.de - CSS Contest</h1>
</div>
Code:
<div id="head">
        <img src="images/hellemon.jpg" width="xx" height="xx" name="Text" />
</div>

CSS Valide wäre schön hast du geschrieben, auch XHTML Valide? oder ist das erst mal egal?

Kurze Info wäre nett.

Danke Helle



Oke... Nachtrag:


So kompliziert kann ich gar nicht denken ;)




Die Textdateien:


Werden natürlich per include in eine php-Datei eingebaut


Jeder, der mir ein Layout schickt, kriegt auf dem Space einen Ordner... in diesem Ordner sind drin:


index.php (Ausgabe entspricht der html-Datei, die in der zip ist)
style.css (vom User angelegt)
name.txt (Textdatei, wo nur der Name drinsteht, wird in die index.php da eingefügt, wo in der html "Dein Name" steht)
webseite.txt nur die url deiner Webseite (wird per include unten im footer eingefügt)
person.txt Da kommt ein Satz über dich unten wo "Hier könnte eine kurze Beschreibung über dich stehen..." steht (eingefügt über include)
avatar.jpg Benutzerbild wird vom User neu erstellt, ist ab schon im html-Code verbaut ;) (Noch als Smilie)



Der Rest wird nicht ausgetauscht, weil ich die html-Dateien nicht mit hochlade.

Du kannst also keinen Text durch ein Bild ersetzen... jedenfalls nicht im html / per CSS geht das ja (auch)


Das ganze muss ich so machen, weil ich nicht weiß, wer nachher wirklich abgibt und deshalb die Teilnehmerliste includen will...




War das jetzt verständlicher?
 

Herr_D

offline

AW: [CSS] CSS-Contest 2011

Ich hab den Quellcode nochmal angepasst:

HTML:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
        "http://www.w3.org/TR/html4/strict.dtd">

<head>
        <title>Dein Name beim PSD-Tutorials.de - CSS Contest 2011</title>
        <meta name="author" content="Dein Name">
        <meta http-equiv="content-type" content="text/html;charset=iso-8859-1">
        <meta name="keywords" content="psd-tutorials.de, css-contest, grafik und webdesign,">
        <meta name="audience" content="alle">
        <meta name="robots" content="index,follow">
        <meta name="language" content="deutsch">

        <meta name="Content-Language" content="de">
        <meta name="robots" content="all">
        <link href="style.css" type="text/css" rel="stylesheet">
</head>

<body>

<div id="head">
        <h1><span>Dein Name<!-- Inhalt der name.txt --></span> beim PSD-Tutorials.de - CSS Contest</h1>
</div>

<div id="menue-one">
        <!-- Dieses Menue fuehrt ins Nichts, kann aber toll aussehen oder? -->
        <h4>Wegweiser</h4>
        <ul id="menue-one-list">
                <li class="mo-one"><a href="#">one</a></li>
                <li class="mo-two"><a href="#">two</a></li>
                <li class="mo-three"><a href="#">three</a></li>

                <li class="mo-four"><a href="#">four</a></li>
                <li class="mo-five"><a href="#">five</a></li>
                <li class="mo-six"><a href="#">six</a></li>
                <li class="mo-seven"><a href="#">seven</a></li>
        </ul>
</div>

<div id="content-one">

        <h2>Der Grundgedanke</h2>
        <p>Nach langem Hin und Her und einigen zaghaften Versuchen kommt es dieses Jahr endlich zu einem Contest im Bereich Webdesign.</p>
        <p>Die Idee ist nicht neu und einige kreative Leute im Netz haben so &auml;hnliche Geschichten schon veranstaltet. Ganz weit vorn ist nat&uuml;rlich <a href="http://www.csszengarden.com/tr/deutsch/">Zen Garden</a>.</p>
        <p>Nichtsdestotrotz: Wir ziehen das hier durch und haben Spa&szlig; dabei. Eingeladen ist jeder, der sich zutraut, ein Layout &uuml;berwiegend mit CSS zu gestalten.</p>

        <p>Diese Veranstaltung soll Spa&szlig; machen und l&auml;uft nach dem olympischen Motto: <span class="olymp">&quot;Dabei sein ist alles.&quot;</span></p>
        <p>Wir hoffen nat&uuml;rlich, dass am Ende des Tages ein paar fesche CSS-Layouts entstehen. Vielleicht kann der Eine oder die Andere sie ja auch f&uuml;r eigene Projekte als Idee nutzen.</p>
        <p class="leer">&nbsp;</p>
        <p class="nachtrag">P.S. Ach ja, f&uuml;r alle, die es nicht p&uuml;nktlich schaffen. Diese Sache ist OpenEnd. Nach dem 02.04.2011 eingereichte Entw&uuml;rfe nehmen nur nicht mehr am Voting teil. Ich stelle sie aber noch online. D</p>

</div>
<div id="content-two">
        <h2>CSS Contest 2011</h2>
        <p><strong>Aufgabe:</strong> Gestalte diese vorgegebene html-Seite mit Hilfe von CSS.</p>
        <p><strong>Start:</strong> 20.02.2011; 10:00 Uhr</p>
        <p><strong>Abgabe:</strong> 02.04.2011; 17:00 Uhr (sp&auml;tester Zeitpunkt)</p>

        <p>Ab 03.04.2011 geht die Seite mit den Werken online.</p>
        <p>Feedback, Austausch und… ist noch viel wichtiger als „Sieger“ zu ermitteln und kann bei pst-tutorials gegeben werden.</p>
        <div id="ablauf">
                <h3>Ablauf:</h3>
                <ol>

                        <li>Lade dir die notwendigen Dateien <a href="nickname.zip">hier</a> runter.
                        <li>Nimm dir Zeit zum Nachdenken! (Schnellsch&uuml;sse unerw&uuml;nscht)
                        <li>Erstelle eine style.css und die f&uuml;r dein Design notwendigen Grafiken.<br>
                                <strong>Maximale Gesamtdateigr&ouml;&szlig;e der CSS-Datei und der Grafiken: 200kb</strong>
                        <li>Probiere, teste<sup>1</sup>,kn&uuml;ll zusammen, fang neu an, probiere, teste... sei zufrieden!
                        <li>Erstelle einen Screenshot f&uuml;r das Votingmodul.
                        <li>Schicke mir eine <a href="http://www.psd-tutorials.de/forum/private.php?do=newpm&u=7203">PM</a> und ich sage dir wohin mit den Daten<sup>2</sup>.
                </ol>

                <p class="fussnote-one"><sup>1</sup>Browser: Firefox 3.6, Safari 5.03, IE8 (wenn also mit CSS3 gearbeitet wird, sollte es im IE wenigstens bedien- und erkennbar sein). Es geht aber NICHT um die Erstellung mehrerer CSS um alle Browser abzudecken. (Das machen wir n&auml;chstes Mal.) Schwerpunkt sind moderne Browser. Zeige die M&ouml;glichkeiten von CSS eben…</p>
                <p class="fussnote-two"><sup>2</sup>- die CSS-Datei: style.css ;<br>
                        - eine Textdatei in der nur dein (Nick)name steht: name.txt ;<br>
                        - eine Textdatei in der die Adresse deiner Webseite (http://deineseite.de) oder die Adresse zu deinem Profil auf psd-tutorials.de steht: webseite.txt (<strong>Kein html!</strong>);<br>

                        - eine Textdatei in der ein Satz &uuml;ber dich steht: person.txt (<strong>Kein html!</strong>); <br>
                        - eine Grafik 50*50px / 20kb, dein Bild oder Avatar: avatar.jpg (nur jpg als Format zugelassen)</p>
        </div>
        <p><strong>Voting:</strong> Ab dem 03.04.2011 kann bis zum 10.04.2011 gevotet werden. Etwa eine Woche vorher &ouml;ffne ich den Votingbereich, um die Screenshots hochzuladen. Damit erscheint dann deine Teilnahme in deinem Profil bei PSD-Turorials.de.</p>

        <p><strong>Bewertung:</strong> Da das Voting ein Uservoting ist und somit seinen eigenen Gesetzen folgt, z&auml;hlt wohl mal der erste Eindruck, Farbgebung, Layout, Idee und dann sollte das CSS auch noch valide sein. (Die CSS-Dateien k&ouml;nnen auf der Pr&auml;sentationsseite eingesehen werden.)</p>
        <p><strong>Feedback:</strong> Kann im Thread abgegeben werden. So lange die g&auml;ngigen Feedbackregeln eingehalten werden, ist es nat&uuml;rlich erw&uuml;nscht.</p>
</div>

<div id="psd-tutorials">
        <h2>PSD-tutorials.de</h2>
        <blockquote>
                <p>PSD-Tutorials.de bietet dir eine umfassende und qualitativ hochwertige Sammlung an Tutorials und Video-Trainings zu 2D-, 3D-, Web-, Vektor-, Video- und Layoutprogrammen und h&auml;lt f&uuml;r dich in allen Bereichen eine Vielzahl an erg&auml;nzenden Downloadpaketen wie etwa Photoshop-Presets, Texturen, Homepagevorlagen, 3D-Modelle und Arbeitsdateien vor. Im Forum kannst du dich austauschen und in den Contests dein K&ouml;nnen beweisen. Bei so vielen Inhalten und Interaktionsm&ouml;glichkeiten ist es schon einmal m&ouml;glich, die Orientierung zu verlieren. Nutze unsere Sitemap, um einen &Uuml;berblick &uuml;ber alle Kategorien und Bereiche zu erhalten, die f&uuml;r dich auf PSD-Tutorials.de bereitstehen.</p>

        </blockquote>
        <p class="quellenangabe"><a href="http://www.psd-tutorials.de/sitemap">Sitemap - PSD-Tutorials.de</a></p>
</div>

<div id="menue-two">
        <h4>Teilnehmer</h4>
        <ul id="menue-two-list">
                             <li><a href="http://css-contest.bplaced.net/testzweck">Testzweck</a></li>
<!--
                <li><a href="http://css-contest.bplaced.net/afr0kalypse">afr0kalypse</a></li>
                <li><a href="http://css-contest.bplaced.net/Asmidiske">Asmidiske</a></li>
                <li><a href="http://css-contest.bplaced.net/Bleccer">Bleccer</a></li>
                <li><a href="http://css-contest.bplaced.net/Br0">Br0</a></li>
                <li><a href="http://css-contest.bplaced.net/DerOtto">DerOtto</a></li>
                <li><a href="http://css-contest.bplaced.net/Desert_Eagle25">Desert_Eagle25</a></li>
                <li><a href="http://css-contest.bplaced.net/fabi29">fabi29</a></li>
                <li><a href="http://css-contest.bplaced.net/HansF95">HansF95</a></li>
                <li><a href="http://css-contest.bplaced.net/Hellemon">hellemon</a></li>
                <li><a href="http://css-contest.bplaced.net/Ilse_Schnick">Ilse Schnick</a></li>
                <li><a href="http://css-contest.bplaced.net/krid2873">krid2873</a></li>
                <li><a href="http://css-contest.bplaced.net/lauffreak">lauffreak</a></li>
                <li><a href="http://css-contest.bplaced.net/leohh">leohh</a></li>
                <li><a href="http://css-contest.bplaced.net/Lueh">Lueh</a></li>
                <li><a href="http://css-contest.bplaced.net/Misco">Misco</a></li>
                <li><a href="http://css-contest.bplaced.net/MST123">MST123</a></li>
                <li><a href="http://css-contest.bplaced.net/pretorianer">pretorianer</a></li>
                <li><a href="http://css-contest.bplaced.net/snoopdog1971">snoopdog1971</a></li>
                <li><a href="http://css-contest.bplaced.net/Solla">Solla</a></li>
                <li><a href="http://css-contest.bplaced.net/spacle">spacle</a></li>
                -->

                <!-- Liste wird mit den abgegebenen Layouts aufgefüllt, kann also irgendwann ins Unendliche gehen... -->        </ul>
</div>

<div id="autor">
        <h4>Dein Name</h4>
        <img class="ava" title="dein Name" src="avatar.jpg" alt="ava">
        <p>Hier könnte eine kurze Beschreibung über dich stehen...  <!-- Inhalt der person.txt --></p></p>
</div>

<div id="footer">

        <p>Der CSS-Contest ist ein Contest auf <a href="http://psd-tutorials.de">psd-tutorials.de</a> | Teilnehmer: <a href="<!-- Inhalt der webseite.txt -->">Dein Name<!-- Inhalt der name.txt --></a> | <a href="style.css">CSS</a></p>
</div>

</body>

</html>
 

Herr_D

offline

AW: [CSS] CSS-Contest 2011

Ach ja noch n Nachtrag...


Ich schreib kein xhtml, weil das überbewertet ist ;) und eh demnächst hinfällig
 
Bilder bitte hier hochladen und danach über das Bild-Icon (Direktlink vorher kopieren) platzieren.
Antworten auf deine Fragen:
Neues Thema erstellen

Willkommen auf PSD-Tutorials.de

In unseren Foren vernetzt du dich mit anderen Personen, um dich rund um die Themen Fotografie, Grafik, Gestaltung, Bildbearbeitung und 3D auszutauschen. Außerdem schalten wir für dich regelmäßig kostenlose Inhalte frei. Liebe Grüße senden dir die PSD-Gründer Stefan und Matthias Petri aus Waren an der Müritz. Hier erfährst du mehr über uns.

Stefan und Matthias Petri von PSD-Tutorials.de

Nächster neuer Gratisinhalt

03
Stunden
:
:
25
Minuten
:
:
19
Sekunden

Flatrate für Tutorials, Assets, Vorlagen

Zurzeit aktive Besucher

Statistik des Forums

Themen
175.158
Beiträge
2.581.881
Mitglieder
67.226
Neuestes Mitglied
Alec168
Oben