[CSS] CSS-Contest 2012 WIPs

cebito · 27.02.2012

AW: [CSS] CSS-Contest 2012 WIPs

hellemon schrieb:
OK dann ist *em keine gute Angabe

Kann man so nicht sagen. Man kann auch die Höhe der Boxen in em angeben, dann wachsen sie auch mit. Ich hab mir deine css grad mal kopiert, kriegst später mal 'n Beispiel...

hellemon · 27.02.2012

AW: [CSS] CSS-Contest 2012 WIPs

cebito schrieb:
Kann man so nicht sagen. Man kann auch die Höhe der Boxen in em angeben, dann wachsen sie auch mit. Ich hab mir deine css grad mal kopiert, kriegst später mal 'n Beispiel...

Danke dir, da ich einen fest definierten Text habe, sind die Boxen auch Fix in der Höhe definiert. Die letzte Box mit den Usernamen und Designnamen würde als einzige dynamisch werden.

Habe jetzt hier auch das Phänomen das die Schrift über die Boxen raus ragt. In der Firma benutze ich ebenfalls FF10.2 und IE9

Lustig ist das ich Zu Hause alles normal sehen, der gute alte Browser Cache, kann einem ganz schön ärgern.

cebito · 27.02.2012

AW: [CSS] CSS-Contest 2012 WIPs

Boah helle, du hast da einiges rumgeschoben

und vieles doppelt und dreifach definiert. Hab das jetzt vor allem im Contestbereich mal so gut wie 's ging zusammengefasst. Man sollte halt immer schauen, was alle gemeinsam haben und das für alle definieren, und nur wenn sich was ändert nochmal extra. Ist übersichtlicher und hat auch noch den Vorteil, wenn du zb. die Farbe ändern willst musst es nur einmal schreiben und nicht alle einzeln raussuchen und ändern.
Hab mich an deinem Bild orientiert, du wolltest das doch so, also Gallery oben...

Code:

@charset "utf-8";

/* Google Fonts Import - http://www.google.com/webfonts
============================================================================= */
@import url(http://fonts.googleapis.com/css?family=Sorts+Mill+Goudy);
@import url(http://fonts.googleapis.com/css?family=Molengo);
/* ========================================================================== */

/* START CSS RESET - http://meyerweb.com/eric/tools/css/reset/ v1.0
============================================================================= */
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
  margin: 0;
  padding: 0;
  border: 0;
  outline: 0;
  font-size: 100%;
  vertical-align: baseline;
  background: transparent;
}

body {
  line-height: 1;
}

ol, ul {
  list-style: none;
}

blockquote, q {
  quotes: none;
}

blockquote:before, blockquote:after,
q:before, q:after {
  content: '';
  content: none;
}

/* Permanently enable a vertical scrollbar (except IE) */
html {
  overflow-y: scroll;
}
/* ========================================================================== */

/* Basic Style
============================================================================= */
html {
  background: #021021 url(images/web_bg2.jpg) repeat-x;
}

body {
  font-family: 'Molengo', Verdana, Arial, sans-serif;
  font-size: 0.975em;
  color: #fff;
}

/* ========================================================================== */

/* Navigation
============================================================================= */
nav {
  width: 940px;
  height: 75px;
  margin: 0 auto;
}

nav ul {
  margin-top: 25px;
}

#mainNav li {
  display: inline;
  list-style-type: none;
  padding-left: 25px;
}

#mainNav li a {
  font-family: 'Sorts Mill Goudy', serif;
  font-size: 20px;
  font-weight: bold;
  color: #fff;
  text-decoration: none;
}

#mainNav li a:hover {
  font-family: 'Sorts Mill Goudy', serif;
  font-size: 20px;
  color: #979797;
  text-decoration: none;
  text-shadow: 2px 2px 5px #000000;
}

.screenReaderText {
  display: none;
}

#search {
  float: right;
  margin-top: -22px;
}

#search #searchfield {
  font-family: 'Sorts Mill Goudy', serif;
}

#search input[type='submit'] {
  background: url(images/searchbutton.png) no-repeat;
  border: none;
  height: 25px;
  width: 25px;
  text-indent: -9999px;
}
/* ========================================================================== */

/* Header
============================================================================= */
header .inner h1, h2 {
  text-indent: -9999px;
}

header {
    position:absolute;
    top:100px;
    left:50%;
    margin-left:-545px;
  background: url(images/webtitle.png) no-repeat;
  width: 69px;
  height: 469px;
  z-index: 100;
}
/* ========================================================================== */

/* Section #contest #general
============================================================================= */
#contest .inner{
    width:940px;
    margin:470px auto 30px;
}
#contest .inner div h4 {
  position:absolute;
  font-family: 'Sorts Mill Goudy', serif;
  color:#fff;
  background:#636f78;
  font-size:1em;
  float:left;
  clear:both;
  padding:10px 10px 10px 20px;
  margin-top: 15px;
  margin-left:-10px;
  margin-bottom:0px;
  text-shadow:0 -1px #000000, 0 1px #000000;
  box-shadow:2px 2px 0 rgba(0,0,0,0.1);
}

#contest .inner div h4:before {
  content:" ";
  background: url(images/ribbon.png);
  display:block;
  width:10px;
  height:10px;
  position:absolute;
  bottom:0;
  left:0;
  margin-bottom:-10px;
  z-index:-1;
}

#contest .inner div {
  position: relative;
  float: left;
  background: #1a2b3c url(images/body_bg.jpg) repeat;
  width: 293px;
  height: 22.5em;
  border-radius: 10px;
  padding-bottom:15px;
  margin-bottom:30px;
}
#contest .inner div p,#contest .inner div ul {
  padding: 65px 14px 0 14px;
}

#contest .inner div p + p {
  padding-top: 15px;
}

#contest .inner div a {
  font-size: 1em;
  font-weight: bold;
  color: #fff;
  text-decoration: none;
  text-shadow:0 -1px #000000, 0 1px #000000;
}

#contest .inner div a:hover {
  font-size: 1em;
  color: #979797;
  text-decoration: none;
  text-shadow: 2px 2px 5px #000000;
}

#contest .inner div .motto {
  color: #979797;
}
#contest .inner #mission,#contest .inner #timeline {
  margin-left: 30px;
}
#contest .inner #rules {
  width: 940px;
  clear:both;
  float:none;
  height:auto;
  margin:0 0 30px;
}

#contest .inner h3 {
text-indent: -9999px;
}
/* ========================================================================== */

/* Section #gallery
============================================================================= */
#gallery {
  position:absolute;
  background: #1a2b3c url(images/body_bg.jpg) repeat;
  width: 940px;
  height:460px;
  top:100px;
  left:50%;
  margin-left:-470px;
  border-radius: 10px;
}
#gallery .inner h3 {
  position:absolute;
  font-family: 'Sorts Mill Goudy', serif;
  color:#fff;
  background:#636f78;
  font-size:1em;
  float:left;
  clear:both;
  padding:10px 10px 10px 20px;
  margin-top: 15px;
  margin-left:-10px;
  margin-bottom:0px;
  text-shadow:0 -1px #000000, 0 1px #000000;
  box-shadow:2px 2px 0 rgba(0,0,0,0.1);
}

#gallery .inner h3:before {
  content:" ";
  background: url(images/ribbon.png);
  display:block;
  width:10px;
  height:10px;
  position:absolute;
  bottom:0;
  left:0;
  margin-bottom:-10px;
  z-index:-1;
}

#cc{
    position:absolute;
    top:410px;
    right:160px;
    font-size:11px;
    color:#fff;
}
#cc a{
    color:#fff;
}
#gallery .inner ul{
    position:absolute;
    width:640px;
    height:400px;
    left:150px;
    top:30px;
    overflow:hidden;
}
#gallery .inner ul li,#gallery figure, #gallery figcaption {
    position:absolute;
    top:0;
    left:0;
    margin:0;
    padding:0;
}
#gallery figcaption{
    margin:0;
    padding:8px 0 8px 10px;
    position:absolute;
    top:368px;left:0;
    height:25px;
    width:630px;
    background:rgba(255,255,255,.4);
}
/* ========================================================================== */

/* Section #autor
============================================================================= */
#autor {
  position: relative;
  background: #1a2b3c url(images/body_bg.jpg) repeat;
  width: 940px;
  margin:0 auto 30px;
  border-radius: 10px;
}

#autor .inner h3 {
  position:absolute;
  font-family: 'Sorts Mill Goudy', serif;
  color:#fff;
  background:#636f78;
  font-size:1em;
  padding: 10px 10px 10px 20px;
  margin-top: 15px;
  margin-left: -10px;
  margin-bottom: 0px;
  text-shadow:0 -1px #000000, 0 1px #000000;
  box-shadow:2px 2px 0 rgba(0,0,0,0.1);
}

#autor .inner h3:before {
  content:" ";
  background: url(images/ribbon.png);
  display:block;
  width:10px;
  height:10px;
  position:absolute;
  bottom:0;
  left:0;
  margin-bottom:-10px;
  z-index:-1;
}

#autor .inner ul {
  padding-top: 65px;
  padding-left: 14px;
  padding-right: 14px;
}

#autor .inner p {
  padding-top: 60px;
  padding-left: 14px;
  padding-right: 14px;
  padding-bottom: 15px;
}

#autor .inner img {
  padding: 5px;
}

#autor .inner a {
  font-size: 1em;
  font-weight: bold;
  color: #fff;
  text-decoration: none;
  text-shadow:0 -1px #000000, 0 1px #000000;
}

#autor .inner a:hover {
  font-size: 1em;
  color: #979797;
  text-decoration: none;
  text-shadow: 2px 2px 5px #000000;
}

#autor h4 {
  display: none;
}
/* ========================================================================== */

/* Section #kontakt
============================================================================= */
#kontakt {
  background: #1a2b3c url(images/body_bg.jpg) repeat;
  width: 940px;
  margin:0 auto 30px;
  border-radius: 10px;
}

#kontakt .inner h3 {
  position:relative;
  font-family: 'Sorts Mill Goudy', serif;
  color:#fff;
  background:#636f78;
  font-size:1em;
  float: left;
  clear: both;
  padding: 10px 10px 10px 20px;
  margin-top: 15px;
  margin-left: -10px;
  margin-bottom: 0px;
  text-shadow:0 -1px #000000, 0 1px #000000;
  box-shadow:2px 2px 0 rgba(0,0,0,0.1);
}

#kontakt .inner h3:before {
  content:" ";
  background: url(images/ribbon.png);
  display:block;
  width:10px;
  height:10px;
  position:absolute;
  bottom:0;
  left:0;
  margin-bottom:-10px;
  z-index:-1;
}

#kontakt .inner ul {
  padding-top: 65px;
  padding-left: 14px;
  padding-right: 14px;
}

#kontakt .inner p {
  padding-top: 60px;
  padding-left: 14px;
  padding-right: 14px;
  padding-bottom: 15px;
}

#kontakt .inner a {
  font-size: 1em;
  font-weight: bold;
  color: #fff;
  text-decoration: none;
  text-shadow:0 -1px #000000, 0 1px #000000;
}

#kontakt .inner a:hover {
  font-size: 1em;
  color: #979797;
  text-decoration: none;
  text-shadow: 2px 2px 5px #000000;
}
/* ========================================================================== */

/* Section aside
============================================================================= */
aside {
  background: #1a2b3c url(images/body_bg.jpg) repeat;
  width: 940px;
  height: 250px;
  margin:0 auto 30px;
  border-radius: 10px;
}
/* ========================================================================== */

/* Footer
============================================================================= */
footer {
  background: #1a2b3c url(images/body_bg.jpg) repeat;
  margin: 0 auto;
  height: 50px;
  width: 940px;
  border-radius: 10px 10px 0 0;
}

footer .inner {
  width: 940px;
  margin: auto;
}
/* ========================================================================== */

Die Webfonts hab ich mal nach oben verschoben, jetzt funktionieren die auch

Edith sagt noch - ergänz mal dein reset oben mit den HTML5-Elementen...
achso, die Schrift in der figcaption, das gibt natürlich nix bei den hellen Bildern, musste entweder anderen Hintergrund oder andere Farbe oder vielleicht noch 'nen Textschatten...

hellemon · 27.02.2012

AW: [CSS] CSS-Contest 2012 WIPs

cebito schrieb:
Boah helle, du hast da einiges rumgeschoben und vieles doppelt und dreifach definiert. Hab das jetzt vor allem im Contestbereich mal so gut wie 's ging zusammengefasst. Man sollte halt immer schauen, was alle gemeinsam haben und das für alle definieren, und nur wenn sich was ändert nochmal extra. Ist übersichtlicher und hat auch noch den Vorteil, wenn du zb. die Farbe ändern willst musst es nur einmal schreiben und nicht alle einzeln raussuchen und ändern.
Hab mich an deinem Bild orientiert, du wolltest das doch so, also Gallery oben...
............

Die Webfonts hab ich mal nach oben verschoben, jetzt funktionieren die auch

Edith sagt noch - ergänz mal dein reset oben mit den HTML5-Elementen...
achso, die Schrift in der figcaption, das gibt natürlich nix bei den hellen Bildern, musste entweder anderen Hintergrund oder andere Farbe oder vielleicht noch 'nen Textschatten...

@cebito du bist der Hammer, danke für das abändern.

OK mit den Google Fonts wusste ich nicht, das die so weit oben stehen müssen, ist das erste mal das ich Fonts in dieser Art einsetze.

Die HTML5 Elemente werden ich noch mit aufnehmen. Dachte aber das Sie über die ie8.css eingebunden werden, aber ja die funktionieren ja nur beim IE8. :lol:

Kannst du mir ein Beispiel nennen wo ich doppelt und dreifach definiert habe, denke mal das du die Boxen meinst, das habe ich für eine Box angepasst und dann für den Rest per Copy und Paste übernommen. Werde hier noch ausmisten.

Das du die Gallerie noch oben verschoben hast finde ich spitze

, habe mir echt einen abgebrochen und es nicht hin bekommen :'(, muss mir gleich mal die CSS ansehen, was du gemacht hast.

nochmals dickes :danke:

Helle

cebito · 27.02.2012

AW: [CSS] CSS-Contest 2012 WIPs

Kein Hit

Was mir noch einfällt, hab die Höhe der 3 Boxen oben in em gemacht, sie wachsen bei Schriftvergrößerung zwar mit, aber leider nicht proportional, so dass die Schrift auch irgendwann rausguckt. Vielleicht änderst das dann doch wieder in px

hellemon · 27.02.2012

AW: [CSS] CSS-Contest 2012 WIPs

cebito schrieb:
Kein Hit Was mir noch einfällt, hab die Höhe der 3 Boxen oben in em gemacht, sie wachsen bei Schriftvergrößerung zwar mit, aber leider nicht proportional, so dass die Schrift auch irgendwann rausguckt. Vielleicht änderst das dann doch wieder in px

Alles klar, sehe ich mir an und werde es wieder in px umstellen. Geh jetzt in Mittag. - Mahlzeit.

Helle

Davi2000 · 27.02.2012

AW: [CSS] CSS-Contest 2012 WIPs

Ich bin gerade dabei, ein bisschen struktur zu schaffen und technisch zu schauen wie ich das alles umsetze. Simonpicos gab mir den Tipp mit Target zu arbeiten. Es funktionert ganz gut. Wenn ich den Link anklicke wird nur der Inhalt angezeigt worum es geht.

Problem nur, wenn ich die Seite öffne, dann ist ja erstmal alles auf display: none;

Wie bekomme ich es hin das bei laden der Seite, ein bestimmtes Element auf block gestellt wird?

Achso , die Seite:

Gegenstrom · 27.02.2012

AW: [CSS] CSS-Contest 2012 WIPs

ma ne frage, auch wenn ich se halbwegs selber beantworten kann, aber viellei kennt ihr ja trotzdem nen weg
- diese galerie mit
dieser kombinieren, ist das möglich?
ich würd ja sagen, nein ist nicht möglich, aber cebsche hat doch sicher ne idee dazu

ne variante wäre es über ne extra gif zu regeln, aber dateigröße...

jackykfm · 27.02.2012

AW: [CSS] CSS-Contest 2012 WIPs

Habe jetzt einigermaßen das Konzept-Struktur (html/CSS) soweit, daß ich was zeigen kann.
http://www.kfmdesign.de/contest/index.html
Folg. Sachen sind noch auf der todo-Liste erstmal:
Oben Teilnehmer sollte auf die N Unterkante auslaufen,
Oben bltzt es um ca. 2px
Navigation ist noch kein Block mit dem Suchfeld
Footer sollte unten am Seitenende unbeweglich fixiert sein.
Bei diesen 4 Sachen benötige ich Hilfe.
css Datei: http://www.kfmdesign.de/contest/style1.css

Hab gedacht ich bekomme das hin, aber ich verrenne mich immer mehr.

jacky

LaFaSiLuc · 27.02.2012

AW: [CSS] CSS-Contest 2012 WIPs

machen columns sinn, oder sieht das im ie zu schedderig aus?

Das blitzen Oben liegt am padding-top im body, jacky, soweit hab ich das schonmal raus

cebito · 27.02.2012

AW: [CSS] CSS-Contest 2012 WIPs

Jain @Stromer... Du könntest

Code:

#gallery ul:hover li{animation:none;}

sagen, dann hört die animation bei Mouseover auf, wenn du runter gehst startet sie aber wieder beim ersten Bild. Und das funktioniert nur in Webkits, nicht im FF.

Was du noch versuchen könntest, bei hover einen extra hohen z-index vergeben...

Ersteres nur mal an meiner Galerie getestet, das zweite musste probieren.

Gegenstrom · 27.02.2012

AW: [CSS] CSS-Contest 2012 WIPs

jackykfm schrieb:
Folg. Sachen sind noch auf der todo-Liste ermal:
Oben Teilnehmer sollte auf die N Unterkante auslaufen,
Oben bltzt es um ca. 2px
Navigation ist noch kein Block mit dem Suchfeld
Footer sollte unten am Seitenende unbeweglich fixiert sein.
Bei diesen 4 Sachen benötige ich Hilfe.
css Datei: http://www.kfmdesign.de/contest/style1.css
jacky

1*

HTML:

header h2 {    
 font-size:10px;     
margin-top:-6px;<--verantwortlich für die positionierung senkrecht
height: 10px;     
margin-left: 610px;
(margin:oben rechts unten links; - margin:-6 0 0 610px;)
 }

2*

HTML:

html, body {padding:0;}

*3 meinste das weiße unter dem suchfeld?
*4Footer sollte unten am Seitenende unbeweglich fixiert sein.
wie deine navigation?

HTML:

position:fixed; bottom:0px;

cebsche, das problem ist aber auch, ich benutze die bilder ul li in der 2012'er galerie um se als thumbs anzuzeigen, in der 2012-1'er(die thumbs sind ne grafik) werden diese bilder aber direkt geslided, ich bräuchte also 2x ma die bilder in der html um diese galerie zu bewerkstelligen wie ichs mir denke, versuch war auch schon über :after-:before zu arbeiten, aber man kann :after und :before ja nicht hovern...
die möglichkeit die ich sehe wäre halt ne gif, was ich nicht so toll finden würde

idee, kann man background-images sliden lassen? oder geht das nur mit richtigen bildern? wenn die bilder als background-images sliden lassen würde, in der figcaption und dann via :hover:after das bild anzeigen lassen... machbar?

cebito · 27.02.2012

AW: [CSS] CSS-Contest 2012 WIPs

LaFaSiLuc schrieb:
machen columns sinn, oder sieht das im ie zu schedderig aus?

Musste halt schaun, das du dir für den IE was anderes einfallen lässt

cebito · 27.02.2012

AW: [CSS] CSS-Contest 2012 WIPs

Gegenstrom schrieb:
cebsche, das problem ist aber auch, ich benutze die bilder ul li in der 2012'er galerie um se als thumbs anzuzeigen, in der 2012-1'er(die thumbs sind ne grafik) werden diese bilder aber direkt geslided, ich bräuchte also 2x ma die bilder in der html um diese galerie zu bewerkstelligen wie ichs mir denke, versuch war auch schon über :after-:before zu arbeiten, aber man kann :after und :before ja nicht hovern...
die möglichkeit die ich sehe wäre halt ne gif, was ich nicht so toll finden würde

Sieht nach ein wenig umständlich aufgebaut aus, ich drösel mir das mal auseinander...

simonpicos · 27.02.2012

AW: [CSS] CSS-Contest 2012 WIPs

Boah, wasn hier los?! :lol:

erstma alles durchlesen, kommentieren, dann kommt vielleicht nachher noch en wip..

Gegenstrom · 27.02.2012

AW: [CSS] CSS-Contest 2012 WIPs

cebito schrieb:
Sieht nach ein wenig umständlich aufgebaut aus, ich drösel mir das mal auseinander...

mach das ma

so umständlich is es gar nicht... denk ich ma... :rolleyes:

und lies meine idee nochma

is der zweite edit

cebito · 27.02.2012

AW: [CSS] CSS-Contest 2012 WIPs

Gegenstrom schrieb:
mach das ma so umständlich is es gar nicht... denk ich ma...

Ich schon :lol:

Gegenstrom schrieb:
und lies meine idee nochma

is der zweite edit

Ja nö, was nu, bestehendes verbinden oder sliden? Sind hier nich bei wünsch dir was :hmpf:

Gegenstrom · 27.02.2012

AW: [CSS] CSS-Contest 2012 WIPs

du bist ja auch unser css-guru, du darfst es umständlich finden, ich als halblaie... naja egal

cebito schrieb:
Ja nö, was nu, bestehendes verbinden oder sliden? Sind hier nich bei wünsch dir was :hmpf:

na halt so das beide galerien zusammen sind, wenn das geht :lol:
das sowohl galerie 2012 und 2012-1 zusammen sind, gut bei 2012-1 kann ruhig das thumbs-bild raus

simonpicos · 27.02.2012

AW: [CSS] CSS-Contest 2012 WIPs

Davi2000 schrieb:
Ich bin gerade dabei, ein bisschen struktur zu schaffen und technisch zu schauen wie ich das alles umsetze. Simonpicos gab mir den Tipp mit Target zu arbeiten. Es funktionert ganz gut. Wenn ich den Link anklicke wird nur der Inhalt angezeigt worum es geht.

Problem nur, wenn ich die Seite öffne, dann ist ja erstmal alles auf display: none;

Wie bekomme ich es hin das bei laden der Seite, ein bestimmtes Element auf block gestellt wird?

Achso , die Seite:

Schön, dass du auch was reinwirfst

Zuerst einmal solltest du bedenken, dass der ie8 den :target-selektor nicht kennt. (somit ist die seite dort nicht funktionsfähig) Dementsprechend musst du dir ein ziemlich gutes Fallback ausdenken..

Ansonsten: Ich würde das nicht mit display lösen.. ist zwar möglich, lässt sich aber später nicht animieren (vorausgesetzt, du möchtest das)

Du kannst einfach das unterste in dem Fall warscheinlich die #contest einblenden. Die anderen sections legen sich dann ja per :target automatisch drüber.

LaFaSiLuc · 27.02.2012

AW: [CSS] CSS-Contest 2012 WIPs

cebito schrieb:
Musste halt schaun, das du dir für den IE was anderes einfallen lässt

ja wie jezze? dann lass ich den rotz weg