Antworten auf deine Fragen:
Neues Thema erstellen

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

MegaAdi

Freak

AW: [CSS] CSS-Contest 2011 - WIPs

also ich habs jetzt anders gelöst. Allerdings zerschiest mir der IE die komplette Struktur.
Siehe .
Des mit der Weite hatte ich auch schon probiert. Ich glaub transform: rotate ist nich nicht wirklich ausgereift.
Bin eh kurz davor wieder alles in die Tonne zu treten und nen 3. Versuch zu starten *g* dann werd ich aber sachen in einbauen.

Naja ich werd mal weiterbasteln.
Gruß Adi
 

Herr_D

offline

AW: [CSS] CSS-Contest 2011 - WIPs

Wobei das ja noch gut funzt im IE... die Idee ist sehr kuhl... ich mag irgendwie auch die Quietschfarben der Navi I


Meine Idee, hab ich grad wieder verworfen...

[Start]

Code:
* { }

html { }

body { }

#head { }
#head h1 { }
#head h1 span  { }

#menue-one  { }
#menue-one h4  { }
#menue-one ul#menue-one-list  { }
#menue-one ul#menue-one-list li  { }
.mo-one  { }
.mo-two { }
.mo-three { }
.mo-four { }
.mo-five { }
.mo-six { }
.mo-seven { }

#content-one  { }
#content-one h2 { }
#content-one p { }
#content-one p a { }
#content-one p.leer { }
#content-one p.nachtrag  { }

#content-two  { }
#content-two h2  { }
#content-two p  { }
#content-two p strong { }

#content-two #ablauf { }
#content-two #ablauf h3 { }
#content-two #ablauf ol { }
#content-two #ablauf ol li { }

#content-two #ablauf p.fussnote-one { }
#content-two #ablauf p.fussnote-one sup { }

#content-two #ablauf p.fussnote-two  { }
#content-two #ablauf p.fussnote-two sup { }
#content-two #ablauf p.fussnote-two strong { }

#psd-tutorials  { }
#psd-tutorials h2 { }
#psd-tutorials blockquote { }
#psd-tutorials p.quellenangabe  { }

#menue-two { }
#menue-two h4 { }
#menue-two ul#menue-two-list { }
#menue-two ul#menue-two-list li { }
#menue-two ul#menue-two-list li a { }



#autor { }
#autor h4 { }
#autor img.ava  { }
#autor p { }

#footer  { }
#footer p { }
#footer p a { }


*feix
 

MegaAdi

Freak

AW: [CSS] CSS-Contest 2011 - WIPs

Wobei das ja noch gut funzt im IE... die Idee ist sehr kuhl... ich mag irgendwie auch die Quietschfarben der Navi I

Mia ja auch! Nur der rest nich *g* Die Navi hat was vom iPhone finde ich

jetzt muss die Edith ran: Also bei mir siehst im IE 8 so aus. Das is mehr als "nee dat jet nich"! *g* damit bin ich sehr unzufrieden... webkit, moz und o sind da ja top!!

Edith 2: Desweiteren fällt mir grade auf hab ich durch des float:left; irgend wie nen Absatz drinnen (bei psd-tutorials.de) fällts sehr stark auf! Im Content2 würds mich garned so stören da ja der Abschnitt "stimmig" passiert. Naja mla noch n bischen rumbasteln.

EDITH 3: jetzt hab ich mir erstmal dein Code angesehen :D sehr geil! Aber wieso machst du nicht: body { background: white; color: #fff; } a, a:hover, a:visited, a:active { color: #fff; } ?? schaut doch viel schöner aus =P

EDITH 4 (21.16):

Gruß Adi
 
Zuletzt bearbeitet:

une_art

Wissenssauger WS2100

AW: [CSS] CSS-Contest 2011 - WIPs


Dein Design gefällt mir schon sehr gut, Respekt ;) Irgendwie stellt sich dein Hover-Effekt bei den Teilnehmerlinks bei mir als schnelles flimmern heraus. So als ob das Element beim hovern nicht mehr unter dem Mauszeiger ist und dann direkt zurückspringt, wieder drunter is und wegspringt und so weiter...

Ich hoffe, Du verstehst was ich meine?! Ist nur ein Hinweis, vielleicht hab auch nur ich das Problem oder zu zitterige Finger^^
 

Herr_D

offline

AW: [CSS] CSS-Contest 2011 - WIPs

Edith 3: Mit wem sprichst du Adi? ;)

Der IE sieht bei mir auch so aus...


Ich kann grad nicht mehr denken, mach noch ein paar Skizzen auf Papier... morgen geht's weiter... ich glaub, ich werde nicht so viel css3 SchnickSchnack verbauen ;)
 

MegaAdi

Freak

AW: [CSS] CSS-Contest 2011 - WIPs

So jetzt isser wieder wach *g*
Die Edith 3 hat mit dir gesprochen!

@ une_art: Danke für den Hinweis! Ist mir gestern nicht mehr aufgefallen! Ich habs jetzt korrigiert und so langsam freunde ich mich mit dem Teil an *g*

@ D: Ich dachte der Contest soll zeigen was man in modernen Browsern machen kann ist gleich für mich CSS3 =P

ich bin mal auf dein Ergebnis gespannt =) haste schon nen WIP?

Gruß Adi
 

Herr_D

offline

AW: [CSS] CSS-Contest 2011 - WIPs

So jetzt isser wieder wach *g*
Die Edith 3 hat mit dir gesprochen!

@ D: Ich dachte der Contest soll zeigen was man in modernen Browsern machen kann ist gleich für mich CSS3 =P

ich bin mal auf dein Ergebnis gespannt =) haste schon nen WIP?

Gruß Adi

Ja schon klar, aber css2 get ja in 3 auch noch ;) Moderne Browser sind die Vorgabe, damit das Ganze nicht zum Browserhackkrieg wird...


Mein letzter WIP:




Ich muss mal sehen, ob ich heute noch was online bringe, erst mal muss ich Hausaufgaben machen und kochen... ;)
 

jackykfm

ne pas se fouler

AW: [CSS] CSS-Contest 2011 - WIPs

Herr_D würde das als background-image für den head nehmen und dann irre CSS-Angaben machen. So daß das ganze den Sinn eines Contests widerspiegelt.:D:rolleyes::uhm:
 

patrick_l

Hat es drauf

AW: [CSS] CSS-Contest 2011 - WIPs

So, ich will dann jetzt auch mal wipen. Bis jetzt jedoch noch nicht viel zu sehen. Arbeite gerade am Layout und suche einen passenden Stock für meine Idee. Außerdem überlege ich gerade wie ich die einzelnen Bereiche positioniere.


Grüße Otto
 

hellemon

Hat es drauf

AW: [CSS] CSS-Contest 2011 - WIPs

also ich habs jetzt anders gelöst. Allerdings zerschiest mir der IE die komplette Struktur.
Siehe .
Des mit der Weite hatte ich auch schon probiert. Ich glaub transform: rotate ist nich nicht wirklich ausgereift.
Bin eh kurz davor wieder alles in die Tonne zu treten und nen 3. Versuch zu starten *g* dann werd ich aber sachen in einbauen.

Naja ich werd mal weiterbasteln.
Gruß Adi

@Adi, finde dein Design Mega cool, das habe ich erst letztens hier gelesen und dachte mir das könntest du mal versuchen --> CSS Backgrounds and Borders Module Level 3 Jetzt weiß ich dank dir wie es aussehen könnte. :daumenhoch: Spitze...;)

Jetzt trau ich mich schon gar nicht mehr :p Trotzdem habe ich jetzt noch ein paar grobe Anpassungen gemacht und fange morgen mit der Navi an. --> hellemon beim PSD-Tutorials.de - CSS Contest 2011

Gruß Helle
 

MegaAdi

Freak

AW: [CSS] CSS-Contest 2011 - WIPs

wieso traust du dich denn nicht mehr? =P der IE ist bei dem Contest hier ja nicht sooo wichtig! moz, o und webkit sind da wichtiger! Und bei denen klappt ja auch (fast) alles... nur die animationen gehen hald nur im webkit... aber is ja erstmal zweitrangig!

Deine Seite gefällt mir auch sehr gut *g* vorallem die Grafiken haste schön ausgesucht! Sieht sehr stimmig aus.

Gruß Adrian
 

hellemon

Hat es drauf

AW: [CSS] CSS-Contest 2011 - WIPs

wieso traust du dich denn nicht mehr? =P der IE ist bei dem Contest hier ja nicht sooo wichtig! moz, o und webkit sind da wichtiger! Und bei denen klappt ja auch (fast) alles... nur die animationen gehen hald nur im webkit... aber is ja erstmal zweitrangig!

Deine Seite gefällt mir auch sehr gut *g* vorallem die Grafiken haste schön ausgesucht! Sieht sehr stimmig aus.

Gruß Adrian

Na wenn ich mir deine beiden Design ansehen, komme ich mir so klein und unbedeutend vor. :lol: Daher traue ich mich nicht mehr. :D Nein Scherz beiseite, finde es Super was du drauf hast. Alleine wenn ich deine Code sehe, lerne ich ungemein dazu. Mach nur weiter so, es ist sehr wichtig solche Leute wie dich in so einen Contest zu haben. :daumenhoch:

@Jacky, bei dir ist aber noch nichts ausgerichtet oder, denn bei mir verschiebt es das komplette Design wenn ich die Auflösung ändere!

@D, bei dir wir es eine verdrehte Welt, laut Scribble, freue mich auf das Ergebnis :D

Gruß Helle
 

MegaAdi

Freak

AW: [CSS] CSS-Contest 2011 - WIPs

Na wenn ich mir deine beiden Design ansehen, komme ich mir so klein und unbedeutend vor. :lol: Daher traue ich mich nicht mehr. :D [...] Mach nur weiter so, es ist sehr wichtig solche Leute wie dich in so einen Contest zu haben. :daumenhoch:

Ich glaube dass hier tatsächlich Übung den Meister macht und wer sich seit seinem 12. Lebensjahr mit Webdesign beschäftigt hat ne große Literatur zu hause stehen *g* Ich finde es auch wichtig dem "Nachwuchs" neue Sachen zu vermitteln und auf den Geschmack neuer Medien zu bringen. Danke auf jeden Fall für dein Lob und mach was draus =P

Gruß Adrian
 

Master-B

Noch nicht viel geschrieben

AW: [CSS] CSS-Contest 2011 - WIPs

Hallo zusammen. Ich wollte mich zunächst einmal vorstellen. Ich bin 47 Jahre alt, komme aus Hamburg und beschäftige mich nebenberuflich und aus Spaß an der Sache mit Webdesign. Kenntnisse in Photoshop sind vorhanden. :)

Ebenso beherrsche ich, mehr oder minder, HtmL, CSS, PHP und SQL. Ich habe schon diverse Webseiten für Freunde (gewerblich) und Firmen erstellt. Komplett eigene Programmierungen und Anpassungen von z.B. Joomla.

Der Contest hat mich sehr neugierig gemacht. Ich habe mich am So. mal für ein paar Stunden an den Rechenknecht gehockt und etwas gebastelt.

Meint ihr, ich kann mit meinem Design am Contest teilnehmen?


Klick mich


Naja, eigentlich ist schon alles fertig programmiert. Aber nicht CSS3, davon halt ich nicht soooviel. Spielerein mit CSS gab es schon vor 20 Jahren, da liefen sie eben nur im IE und nirgends anders. Deswegen habe ich mich auf klassisches CSS level 2.1 beschränkt.

Gruzz aus HH, Eric
 
Zuletzt bearbeitet:

jackykfm

ne pas se fouler

AW: [CSS] CSS-Contest 2011 - WIPs

Helle, da ist alles mit position:absolute drin. Weiß leider nicht wie ich das für andere Auflösungen formulieren soll.
Vlt. weiß jemand Rat. Mit container ist es gegangen, aber im html steht ja nix von container oder wrapper.

jacky
CSS ist ziemliches Neuland für mich.
 

hellemon

Hat es drauf

AW: [CSS] CSS-Contest 2011 - WIPs

Hallo zusammen. Ich wollte mich zunächst einmal vorstellen. Ich bin 47 Jahre alt, komme aus Hamburg und beschäftige mich nebenberuflich und aus Spaß an der Sache mit Webdesign. Kenntnisse in Photoshop sind vorhanden. :)

Ebenso beherrsche ich, mehr oder minder, HtmL, CSS, PHP und SQL. Ich habe schon diverse Webseiten für Freunde (gewerblich) und Firmen erstellt. Komplett eigene Programmierungen und Anpassungen von z.B. Joomla.

Der Contest hat mich sehr neugierig gemacht. Ich habe mich am So. mal für ein paar Stunden an den Rechenknecht gehockt und etwas gebastelt.

Meint ihr, ich kann mit meinem Design am Contest teilnehmen?


Klick mich


Naja, eigendlich ist schon alles fertig programmiert. Aber nicht CSS3, davon halt ich nicht soooviel. Spielerein mit CSS gab es schon vor 20 Jahren, da liefen sie eben nur im IE und nirgends anders. Deswegen habe ich mich auf klassisches CSS level 2.1 beschränkt.

Gruzz aus HH, Eric

Hallo Eric, erst einmal herzlich Willkommen bei PSD, schön das du hier bist, wenn ich mir dein Design jetzt so ansehen, denke ich das du gute Chance auf einen der vorderen Plätze hast. :) Gefällt mir sehr gut :daumenhoch: Echt Sauber gearbeitet. ;)


Helle, da ist alles mit position:absolute drin. Weiß leider nicht wie ich das für andere Auflösungen formulieren soll.
Vlt. weiß jemand Rat. Mit container ist es gegangen, aber im html steht ja nix von container oder wrapper.

jacky
CSS ist ziemliches Neuland für mich.

Hallo Jacky,

ist doch kein Problem, mir geht es nicht anders, nur das ich Grundlegend CSS kenne, aber noch nie auf diese Art und weise eingesetzt habe.

Code:
* { }  
html { }

body {
    background: #fff url('images/bodybg2green.jpg') repeat-x scroll top left;
    margin:auto;
    padding-top:10px;
    font-family:Verdana, Geneva, sans-serif;
    font-size:14px;
    color:#444;
    width:960px;
    height:100%; }
*{
    margin:0;
    padding:0;
}
  
p{margin-bottom: 1px;}
a{color:red;
text-decoration:none;}
a:hover{color:#033;}
a:focus{}

/*kopf*/

#head {
    position:absolute;
    padding:0;
    margin:auto;
    height:108px;
    width:960px;
    height:540px;
    background:transparent url('images/core2green.jpg') no-repeat; 
}
Was mir jetzt Spontan an deinem Code auffällt sind zum einen die beiden * und html Deklarationen. In diesen beiden steht nichts drin also könntest du sie löschen, werden nicht benötigt und geben so keinen Sinn.

Zweite was mir auffällt ist ein paar Zeilen weiter unten hast du wieder eine * Deklarationen definiert, diesmal steht was drin.

Ich persönlich fange ein CSS Dokument immer wie folgt an:

*
html
body
header
navi
content1
content2
footer
usw.

Ganz am Schluss meistens die Text Formatierung wie h1, h2, a, p span, usw.
Außer die Vererbung funzt nicht wie ich das wünsche, dann gehe ich noch mal einen Schritt nach oben und füge den Tag den ich explizit formatieren möchte noch mal extra ein wie z:B.

Code:
header {
...
}

header, h1 {
...
}

header, p, span {
...
}
Wenn du was festnageln willst wie du jetzt in deinen Beispiel dann solltest du das Design entweder links, mittig oder rechts ausrichten.

Das würde jetzt wie folgt funktionieren:

Code:
* {
magin:0; /* margin 0 und padding 0 richtet alles links/oben am Rand aus */
padding:0;

/* Wenn du unbedingt einen Scrollbalken in FF setzen möchtest kannst du folgendes der fünf Varianten einsetzen
height:100.01%;
height:100%; margin-bottom:1px;[FONT=monospace]
[/FONT]height:100.01%; margin-bottom:1px;
overflow-y:scroll; //CSS3
overflow:-moz-scrollbars-vertical; //CSS3
*/
}

body {
background: #fff url(images/bodybg2green.jpg) no-repeat;
width:960px; /* Breite der Headergrafik */
height:200px; /* Höhe der Headergrafik */
margin:0 auto; /* Zentriert die Headergrafik */
padding-top:10px; /* Hier würdest du wieder die Headergrafik 10 Pixel vom oberen Rand nach unten verschieben */
} 

usw.
Noch ein Tipp, entweder du verwendest px,em,pt,mm als Breite/Höhe Angabe oder das % Zeichen, aber niemals beides zusammen. in einer Deklarationen. Ist nicht schön und spart dir später unnötige Fehlersuche.

Des weiteren solltest du am Anfang deiner CSS Datei alle Globalen Einstellungen vornehmen (Schriftgröße/Font Farbe/Schriftart usw.) und in deinen einzelnen Deklarationen die passenden Abweichungen der einzelnen Tags. Global zählt immer das was unter * definiert ist und rest erst dann wenn du es explizit definierst.

Code:
* {
  color:#000000;
  font:1.2em Verdana,Tahoma,Geneva;
  text-transform:uppercase;
  text-decoration:none;
  text-align:center;
}

p {
  color:#ff0000;
  font:.9em Helvetica,Arial,sans-serif;
  text-transform:lowercase;
  font-style: italic;
  text-decoration:underline;
  text-align:left;
}
Wenn du noch fragen hast dann Frag, bin kein Meister aber ein bisschen was kann ich dir schon erzählen.

Gruß Helle
 
Zuletzt bearbeitet:

jackykfm

ne pas se fouler

AW: [CSS] CSS-Contest 2011 - WIPs

Danke Helle, werd mich mal wieder dran machen, aber erst morgen. Heute ist Geburtstag.

Gruß jacky
 
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

Neueste Themen & Antworten

Flatrate für Tutorials, Assets, Vorlagen

Zurzeit aktive Besucher

Keine Mitglieder online.

Statistik des Forums

Themen
175.158
Beiträge
2.581.869
Mitglieder
67.223
Neuestes Mitglied
Desiree
Oben