CSS Wettbewerb #1

[DanMan]

Hallo zusammen!

Hier im Forum ist ja nicht allzu viel los. Da hat mich ein anderer Thread (http://www.forum-3dcenter.org/vbulletin/showthread.php?goto=newpost&t=460078) auf eine Idee gebracht. Wie wärs mit einem Wettbewerb (oder auch nur zum Spaß aus Langeweile...), bei dem es darum geht eine wirklich miese Webseite nur per CSS aufzupeppen?

Pimp my Website, sozusagen!

Bedingungen (für diese Runde - können andere in Zukunft ja auch anders regeln) sind:
dass ausschließlich CSS geändert wird, und keine neuen Bilder hinzugefügt werden.
es sollte alles in einem CSS stehen. Also nicht ein CSS pro HTML-Seite, das wär ja zu einfach. ;)
Die evtl. schon vorhandenen Styles müssen zwar beibehalten werden, aber man kann sie natürlich durch höhere Gewichtung (mehr Selektoren) der CSS Regeln überschreiben.
Außerdem sollte es eine wirklich miese Webseite sein, in dem Sinne, dass sie kacke aussieht, und vllt. noch garkein CSS hat, sondern im HTML formatiert ist. Sonst lohnt sichs ja nicht. :D

Achja, ihr solltet auch nicht persönlich irgendwie mit der Seite involviert sein. Soll ja kein kostenloses Redesign werden.

Die Stylesheets könnten dann z.B. mit der Ff Developer Toolbar geladen werden, damit andere sich auch direkt im Browser beobachten können. Die CSS Dateien müssen also hier bereitgestellt werden.

Also, wer hat Bock? Dies wär mein erster Kandidat: http://twvdivas.com/ (damits beim Tüfteln nicht langweilig wird :D )

[darph]

Das HTML darph aber nicht angepackt werden. (y)

Oder doch?

Nur die Startseite oder das ganze Programm?

[DanMan]

Das HTML darph aber nicht angepackt werden. (y)

Oder doch?

Nur die Startseite oder das ganze Programm?
Mal ganz davon abgesehen, dass ich nicht wüsste wie du das HTML ändern willst ohne die Seite runterzuladen (oder JS zu nehmen), sollte das HTML das gleiche sein, ja.

Startseite is bissl wenig Material, oder? Kannst dich aber auch daran versuchen.
Würd jedoch sagen die Übersicht (http://twvdivas.com/index2.html) und die Unterseiten mit den Tussis drauf sind interessanter.

Edit: Achja, und es sollte alles in einem CSS stehen. Also nicht ein CSS pro Seite, das wär ja zu einfach. ;)

[Gast]

hört sich lustig an, bin dabei :) (sofern es nicht zu zeitaufwändig ist ;))

darf ich schon anfangen und dann das css posten?

[DanMan]

hört sich lustig an, bin dabei :) (sofern es nicht zu zeitaufwändig ist ;))

darf ich schon anfangen und dann das css posten?
Anfangen kannst du, klar. Hab ich auch schon. Nur wärs mir lieber, wenn alle Teilnehmer gleichzeitig ihr CSS posten, damit keiner den anderen beeinflusst. Würd sagen Sonntag der 19.7. ist Stichtag, an dem jeder sein CSS hier reinstellen muss.

Dann mach ich oder ein Admin hier nochn Poll dazu, und dann schaumer mal. :)

[DanMan]

Und? Wie siehts aus? Außer dem Gast und mir keiner? So aufwändig isses ja nun nicht. Vielleicht halbe Stunde Arbeit - was nix ist im Vergleich zu dem 3D Render-Contest z.B.

Oder ist die Seite doof? Hat jemand 'nen besseren Vorschlag?

[alkorithmus]

Dabei - sofern es die Zeit in diesem Zeitraum zulässt.

[DanMan]

Dabei - sofern es die Zeit in diesem Zeitraum zulässt.
Ja, nur kein Stress. Zur Not kann man ja noch ein paar Tage dranhängen oder so...

P.S.: Ich habs schon fertig. :) Hab mich aber sehr nah am Original gehalten. Vielleicht mach ich aber auch noch ne Alternative.

[DanMan]

So, hier ist mal meins.

[Gast]

ich hoffe ich hab nicht zu sehr beschissen ;) ... und hoffentlich funktionierts dann auch wie es soll.

naja nicht alle unterseiten sind nicht so wie sie sein sollten, so 1-2 aber doch besser als vorher ;) und meine css kenntnisse sind nicht halb so perfekt wie deine. deswegen warne ich vor meinem verwurschteltem code...

aber hier isses (firefox 3.5, webdeveloper toolbar):



body {
scrollbar-face-color: #000000;
scrollbar-shadow-color: #90EE90;
scrollbar-highlight-color: #90EE90;
scrollbar-3dlight-color: #333333;
scrollbar-darkshadow-color: #000000;
scrollbar-track-color: #333333;
scrollbar-arrow-color: #90EE90
}

html{
background: green;
}

body{
background: #000000;
margin: 0 auto;
width: 873px;
font-family: verdana;
border-left: 2px dotted green;
border-right: 2px dotted green;
}

html > body > div{
background: #000000;
}

html > body > div > table{
width: 873px;
}

html > body > center > table > tbody > tr > td {
font-size: 10pt;
text-align: right;
vertical-align: top;
font-weight: normal;
}

b {
font-weight: normal;
color: #ffffff;
}

br {
display: none;
}

p {
padding: 2px;
}

html > body > center > center p:before{
content:">> "; color: #ffffff;
}

/*
html > body > center > table{
}*/

html > body > center > center > b{
background: #000000;
display: block;
float: left;
text-align: left;
width: 570px;
padding: 4px;
margin-bottom: 24px;
font-weight: bold;

}

html > body > center > center > a > b{
background: #000000;
float: left;
display: block;
text-align: left;
width: 284px;
padding: 4px;
margin-bottom: 24px;
font-weight: bold;
}

html > body > center > center > p {
text-align: left;
padding-left: 5px;
line-height: 20px;
}

html > body > center > center > table{
text-align: center;
border-collapse: collapse;
margin-bottom: 10px;
}

html > body > center > center > table > tbody > tr > td {
vertical-align: middle;
}

a {
text-decoration: none;
}

font > b {
color: #75d859;
}

font > b:hover {
text-decoration: underline;
color: #75d859;
}

a > b {
text-decoration: none;
color: #75d859;
}

a > b:hover{
text-decoration: underline;
color: #75d859;
}

a img {
color: #000000;
border: 2px solid #f4e247;
}

html > body > center > center > table > tbody > tr > td > a > b{
display: block;
height: 40px;
}

html > body > div > table{
background: #ffffff;
}

html > body > center > img {
float: right;
padding: 5px;
}

html > body > table > tbody > tr > td > font > a > b {
display: block; float: left; width: 250px; padding-left: 5px;
font-size: 8pt;
}

html > body > table > tbody > tr > td {
background: #ffffff;
}


html > body > table > tbody > tr > td {
float: left;
}

html > body > table > tbody > tr > td > img {
display: block;
width: 200px;
margin-top: 10px;
margin-bottom: 10px;
padding: 10px;
}

html > body > table > tbody > tr > td > font > img {
padding: 10px;
clear: both;
width: 200px;
display: block;
margin-top: 30px;
margin-bottom: 10px;
}

html > body > table > tbody > tr > td > font > b > a > b {
clear: both;
display: block;
font-size: 8pt;
padding-left: 5px;
}

[Gast]

im IE ist es leider nicht zu betrachten :( sieht ja furchtbar aus...

[Gast]

vielleicht irgendwie blöd, aber man könnte sich ja mal an dieser seite http://www.google.de/ versuchen... die hat ja bekanntermassen ein recht minimalistisches css :)

wenn ich eine wirlich gut geeignete seite find, geb ich bescheid :)

[sei laut]

Vielleicht hätte man im Offtopic Forum darauf hinweisen müssen. Ich bin auch nur zufällig hinreingestolpert - auch wenn meine CSS-Kenntnisse recht spärlich sind.

[DanMan]

ich hoffe ich hab nicht zu sehr beschissen ;) ... und hoffentlich funktionierts dann auch wie es soll.

naja nicht alle unterseiten sind nicht so wie sie sein sollten, so 1-2 aber doch besser als vorher ;) und meine css kenntnisse sind nicht halb so perfekt wie deine. deswegen warne ich vor meinem verwurschteltem code...
Nana, jetzt mal nicht so bescheiden. Immerhin hast du mitgemacht, im Gegensatz zu den Mitgliedern hier. Dafür mal ein Dankeschön. :)

Die Startseite ist dir insgesamt besser gelungen als mir.
Deine Übersichtsseite ist ein bisschen arg zerpflückt, find ich. Und den Hintergrund hätt ich da nicht weiß gemacht. Die Überschriftenbilder alle gleich groß war aber eine gute Idee.
Aber die Detailseite sieht auch wieder gut aus. Das Bild neben den Text zu setzen, darauf bin ich garnicht gekommen. =)

Auf Google ist zu wenig drauf, find ich. Das lässt nicht viel Spielraum für Veränderungen, wenn man nach meinen Regeln aus dem Eingangsposting geht. Bin aber für Vorschläge immer offen.

@sei laut: Ja, vielleicht hätt ich das tun sollen. Aber es können sich von mir aus sich noch weitere an dieser Seite probieren. Von mir aus auch auf Basis meiner CSS Datei (ob die vom Gast genommen werden kann muss er entscheiden), damits leichter fällt.

[Gast]

Die Startseite ist dir insgesamt besser gelungen als mir, keine Frage.
Deine Übersichtsseite ist ein bisschen arg zerpflückt, find ich. Und den Hintergrund hätt ich da nicht weiß gemacht.

Ja, das war so eine Entscheidung mit dem weiß ;) hab auch irgendwo bei der index2 den leicht den nerv verloren (weil das html ja so arg grottig ist), hat aber trotzdem sehr viel Spaß gemacht... vielleicht mach ich noch mal ein neues da ich ja jetzt die Seite kenne. Was anderes wär aber auch nicht schlecht.


Aber die Detailseite sieht auch wieder gut aus. Das Bild neben den Text zu setzen, darauf bin ich garnicht gekommen. =)

Auf Google ist zu wenig drauf, find ich. Das lässt nicht viel Spielraum für Veränderungen, wenn man nach meinen Regeln aus dem Eingangsposting geht. Bin aber für Vorschläge immer offen.

Ja, nur bisher hab ich noch keine wirklich optimale Seite gefunden. Die war von dir perfekt gewählt imo.

Dein CSS ist irgendwie viel kompakter... konnte da noch ne Menge dazulernen und wenn ich ehrlich bin ich hab auch ein klein wenig abgeschaut ;) Wenigstens hab ich mich nicht völlig blamiert...

Ansonsten... ja klar, mehr Seiten, mehr Leute, mehr CSS, schnell =)

[DanMan]

Ja, das war so eine Entscheidung mit dem weiß ;) hab auch irgendwo bei der index2 den leicht den nerv verloren (weil das html ja so arg grottig ist), hat aber trotzdem sehr viel Spaß gemacht... vielleicht mach ich noch mal ein neues da ich ja jetzt die Seite kenne. Was anderes wär aber auch nicht schlecht.

Ja, nur bisher hab ich noch keine wirklich optimale Seite gefunden. Die war von dir perfekt gewählt imo.

Dein CSS ist irgendwie viel kompakter... konnte da noch ne Menge dazulernen und wenn ich ehrlich bin ich hab auch ein klein wenig abgeschaut ;) Wenigstens hab ich mich nicht völlig blamiert...

Ansonsten... ja klar, mehr Seiten, mehr Leute, mehr CSS, schnell =)
Ja, das HTML ist echt aus der Steinzeit, aber das machts ja erst interessant. Sowas gibts - eigentlich Gott sei dank - heute kaum noch. :)

Was das kompakte CSS angeht:
Wenn man - gerade als Anfänger - Kontrolle über das HTML hat, dann ist man immer schnell dabei mit CSS-Klassen und IDs um sich zu werfen, die man gar nicht braucht. Am Ende ist dann alles zugekleistert, und man verliert selbst den Überblick.
Wenn man aber statt dessen lieber ordentlich mit der Kaskade und den entsprechenden Selektoren arbeiten würde, dann käm man mit viel weniger CSS aus. Oder anders gesagt: gutes CSS erkennt man daran, dass mit wenig Text viel erreicht wird. ;)
Allerdings macht es auch viel aus, ob man alleine für das CSS verantwortlich ist, oder mit anderen zusammenarbeitet. Wenn die dann nicht wissen was sie tun, wirds chaotisch.

Jedenfalls musste man hier mal mit dem Vorgegebenen auskommen. Wenn das für dich sogar pädagogisch wertvoll war, umso besser. :)

Achja, hab nochmal eine angehangen, inspiriert durch deine Nebeneinander-Darstellung der Bilder.

[DanMan]

Was das kompakte CSS angeht:
Wenn man - gerade als Anfänger - Kontrolle über das HTML hat, dann ist man immer schnell dabei mit CSS-Klassen und IDs um sich zu werfen, die man gar nicht braucht. Am Ende ist dann alles zugekleistert, und man verliert selbst den Überblick.
Wenn man aber statt dessen lieber ordentlich mit der Kaskade und den entsprechenden Selektoren arbeiten würde, dann käm man mit viel weniger CSS aus.
Das sieht Google und Mozilla übrigens anders: http://code.google.com/intl/de-DE/speed/page-speed/docs/rendering.html#UseEfficientCSSSelectors

Mir ist die Lesbarkeit meiner CSS aber wichtiger. Oder hat noch einer einen 486er in Gebrauch?

Edit: Mir ist gerade bewusst geworden, dass MySpace ja eine wahre Fundgrube an schlechten Webseiten darstellt. :)