[CSS] CSS-Contest 2011 - WIPs

Master-B · 26.03.2011

AW: [CSS] CSS-Contest 2011 - WIPs

cebito schrieb:
Lass trotzdem ma gucken

Nope. Aber es sollte in folgende Richtung gehen
->

Bitte kostenlos registrieren, damit du die Links siehst.

->

Bitte kostenlos registrieren, damit du die Links siehst.

Den Link bitte mit Safari o.ä. öffnen!

lauffreak · 26.03.2011

AW: [CSS] CSS-Contest 2011 - WIPs

moin !
so toll wie bei Euch sieht es bei mir nicht aus.
Alles verstehe ich aus den Diskussionen auch (noch) nicht...- diese ganzen Abhängigkeiten...
Deshalb ist mein Code auch manchmal etwas "strange"- man könnte auch sagen durhc probeiren udn gucken sehr wuselig.
ok.
Abe rich übe rweiter.
Nun zu meinem Problem:
hier ein Entwurf

Bitte kostenlos registrieren, damit du die Links siehst.

der Menüpunkt 1 hat ein background-image beim hover.
geht man mit der Maus drüber, "wächst" das ganze nach unten.
Frage: Wie kann ich ich es dazu bringen nach oben zu wachsen?

Grüße von der sonnigen aber kühlen Ostsee
lauffreak

Gegenstrom · 26.03.2011

AW: [CSS] CSS-Contest 2011 - WIPs

lauffreak schrieb:
Nun zu meinem Problem:
hier ein Entwurf
Bitte kostenlos registrieren, damit du die Links siehst.

der Menüpunkt 1 hat ein background-image beim hover.
geht man mit der Maus drüber, "wächst" das ganze nach unten.
Frage: Wie kann ich ich es dazu bringen nach oben zu wachsen?

Grüße von der sonnigen aber kühlen Ostsee
lauffreak

mh, lösungsansatz, mit ner festen positionierung arbeiten
du hast zwei unterschiedliche höhen deiner menüpunkte, also müssen diese auch von der position unterschiedlich hoch angeordnet werden
bsp ma ausm freien geschrieben, obs funzt ka

Code:

a{
position:absolute;
width:40px;
height:30px;
top:30px;
left:30px;
background-color:green;}

a:hover {
position:absolute;
width:40px;
height:30px;
top:10px;
left:30px;
padding-top:20px;
background-color:blue;}

kannst ja ma ausprobieren, habs grad nochma getestet, die schrift bleibt am platz, das ding geht nach oben auf

dat padding-top wird auf deine höhe dazu gerechnet, im endeffekt ist a:hover 50px hoch, noch als erklärung dazu

am besten du versuchst es nicht direkt in deinem projekt, sondern nimmst dirn seperates projekt, damit zerschießte dir nicht alles, und kannst rumprobieren

cebito · 26.03.2011

AW: [CSS] CSS-Contest 2011 - WIPs

Sollte auch mit nem negativen margin-top gehen, kann das jetzt leider nicht mehr ausprobieren. Hab gestern FF4 installiert und jetzt funzt Firebug net mehr

Hoffentlich daten die da bald ab...

Aaah, aktuellen Firebug gefunden

wie gesagt negativer margin-Wert bei a:hover >> margin-top:-15px;

Gegenstrom · 26.03.2011

AW: [CSS] CSS-Contest 2011 - WIPs

joa, das geht natürlich auch, nur das da sicherlich die schrift an nem andern platz is
brauchst du firebug um ne html und css anzulegen? und nen fixen code zu schreiben?

cebito · 26.03.2011

AW: [CSS] CSS-Contest 2011 - WIPs

Nein, aber es ist um einiges einfacher mit Firebug, ich kann direkt in der Seite Änderungen durchführen und live anschauen. Nachbauen geht zwar auch, aber was ist bspw. mit Bildern o.ä., da ist es mit Firebug doch sehr einfach.

Gegenstrom · 26.03.2011

AW: [CSS] CSS-Contest 2011 - WIPs

das is was feines, wies geht weiß ich nicht

ich hätte gestern nicht bis heute früh an der css rumbasteln sollen, bin total elanlos

MegaAdi · 26.03.2011

AW: [CSS] CSS-Contest 2011 - WIPs

Hab gestern FF4 installiert und jetzt funzt Firebug net mehr

Hoffentlich daten die da bald ab...[/QUOTE]

Wie is der neue FF? Weil derzeit surfe ich mit Chrome weil ich mit FF3 ned zufrieden war... Aber wenn der neue FF besser is steig ich wieder um.

Und firebug hat ja chrome schon von Haus aus =)

Gruß Adi

Herr_D · 26.03.2011

AW: [CSS] CSS-Contest 2011 - WIPs

Update vom Firebug machen... bei mir funzt der... FF4 ist oke... AdblockPlus geht auch super

Bitte kostenlos registrieren, damit du die Links siehst.

Gegenstrom · 26.03.2011

AW: [CSS] CSS-Contest 2011 - WIPs

so hab ma en bissl weiter gemacht, denke ma das ich morgen weiter mache und auch endlich das layout dazu kommt

Bitte kostenlos registrieren, damit du die Links siehst.

patrick_l · 26.03.2011

AW: [CSS] CSS-Contest 2011 - WIPs

Ich habe auch mehre Addons im FF die für mich wichtig sind. Auf manche kann ich verzichten aber nicht auf Firebug. Der lässt sich ja auch noch etwas erweitern. Ich habe beim FF 4 vor allem meinen Validator unten in der Addone-Leiste vermisst. So kann ich halt direkt Fehler korrigieren.

@D : Mir ist grad aufgefallen, was man eventuell nächstes mal machen sollte was das HTML angeht. Halt den UTF-8 Zeichensatz im Head-Teil festlegen Ist ja aber nur ne Kleinigkeit für validen Code.

@MegaAdi: Der wechsel lohnt sich. Der FF 4 ist derzeit der schnellste Browser. Es gibt dazu auch schon mehre Fachberichte zu. Außerdem punktet der FF bei mir vor allem durch die große Zahl an Erweiterungen / Addones. Für Chorme und Co ist es ja noch nicht so viel wie beim FF.

Herr_D · 26.03.2011

AW: [CSS] CSS-Contest 2011 - WIPs

DerOtto schrieb:
@D : Mir ist grad aufgefallen, was man eventuell nächstes mal machen sollte was das HTML angeht. Halt den UTF-8 Zeichensatz im Head-Teil festlegen Ist ja aber nur ne Kleinigkeit für validen Code.

Was macht

<meta http-equiv="content-type" content="text/html;charset=iso-8859-1">

unvalide?

Das läßt sich ja recht fix ändern...

Nächstes mal schreibt wer anders die Seite...

cebito · 26.03.2011

AW: [CSS] CSS-Contest 2011 - WIPs

Herr_D schrieb:
Nächstes mal schreibt wer anders die Seite...

kein Hit

patrick_l · 27.03.2011

AW: [CSS] CSS-Contest 2011 - WIPs

Herr_D schrieb:
Was macht

<meta http-equiv="content-type" content="text/html;charset=iso-8859-1">

unvalide?

Ne, das nicht - ich handhabe es halt so das ich die utf-8 Codierung verwende. Besonders wegen den ganzen Sonderzeichen. Da gehört ja das kaufmännische Und (&) auch dazu.

Code:

<meta http-equiv="content-type" content="text/html; charset=utf-8" />

Warum ich darauf kommen bin ist halt die Anzeige von meinem Validator. Durch die & in Links wird dann direkt wieder ein nicht valider Code daraus. Wegen dem hatte ich vor kurzem noch meinen Spaß mit ner Migration von Joomla. Sollte auch kein meckern sein - nur ein Tipp.

Ich schreibe aber trotz utf-8 die Sonderzeichen nicht aus. Halt für & dann & u.s.w

Nun zu meinem WIP. Habe das ganze hochgeladen. Brauche da auch mal eure Hilfe was das erste Menü angeht. Habe da irgendwie einen Denkfehler. Wie schreibt man nochmal die Navi so das der Text zentriert wird und die Buttons richtig dargestellt werden.

Ich habe jetzt erst mit text-align: center das ganze zentriert. Nur komme ich mit dem Rest nicht weiter. Blicke da gerade nicht weiter durch. Sitze auch seit heute Mittag dran. Halt immer wieder von vorne angefangen.

Grüße Otto

Gegenstrom · 27.03.2011

AW: [CSS] CSS-Contest 2011 - WIPs

ah gut, hab grad nen link bei dir gesucht, haste erst beim zweiten edit reingestellt

ähm, frage, was genau kriegst du denn nicht hin?

wenns so aussehen soll wie bei seven?
du hast unterschiedliche breiten der navipunkte, also vom code her sind se gleich, aber three und seven sind vom bildschirm her größer als die anderen
das problem hatte ich übrigens auch

du brauchst neue left-rightpaddings für jeden navipunkt unterschiedliche

patrick_l · 27.03.2011

AW: [CSS] CSS-Contest 2011 - WIPs

So, wieder online. War gerade mit den anderen Teilen beschäftigt. Ich habe halt das Problem die einzelnen Flächen gehabt. Die unterschiedlichen Längen spielen keine Rolle solang diese nicht größer als der Button sind.

Ich habe mit text-align: center, width und hight das ganze angepasst. Später noch mit margin die Zwischenräume erstellt.

Code:

.mo-two, .mo-three, .mo-four, .mo-five, .mo-six, .mo-seven {
    width: 90px;
    height: 40px;
    background: url(images/button_01.png) no-repeat;
    margin:  5px 0 0 -5px;
    padding: 18px 0 0 0;
}

.mo-two:hover, .mo-three:hover, .mo-four:hover, .mo-five:hover, .mo-six:hover, .mo-seven:hover {
    width: 90px;
    height: 40px;
    background: url(images/button_02.png) no-repeat;
    margin:  5px 0 0 -5px;
    padding: 15px 0 0 0;
}

.mo-two:active, .mo-three:active, .mo-four:active, .mo-five:active, .mo-six:active, .mo-seven:active {
    width: 90px;
    height: 40px;
    background: url(images/button_03.png) no-repeat;
    margin:  5px 0 0 -5px;
    padding: 15px 0 0 0;
}

Hatte halt nen kleinen Denkfehler in meiner Navigation. Läuft jetzt alles

Aktueller Stand:

Edit: Ich bekomme nur eins nicht hin, und zwar das der A-Tag von Buttons eins permanent schwarz ist. Halt damit man den Zustand sehen kann. Kann da jemand mal nach schauen.

Herr_D · 27.03.2011

AW: [CSS] CSS-Contest 2011 - WIPs

Farbe beim "aktiven" muss noch angepasst werden Otto

ich hatte auch mal etwas gebastelt (ohne aktive)

Code:

/* --------- MenÃ¼ One --------- */

#menue-one {
        width: 900px;
        height: 40px;
        background: url(images/bg_menue_one.png) repeat-x;
        margin: 0 10px;
        padding: 0 15px 0 15px;
}

#menue-one h4 {
        color: #fff;
        margin: ;
        padding-top: 15px;
        width:100px;
        float: left;

}
#menue-one-list {
        width: 700px;
        height: 45px;
        float:right;
}

#menue-one-list ul {}

#menue-one-list li {
                list-style: none;}

#menue-one a {
        width: 90px;
        height: 45px;
        background: url(images/button_01.png) top no-repeat;
        float:left;
        padding-top:15px;
        text-decoration: none;
        text-align: center;
        font: 12px Verdana, Geneva, sans-serif;
        font-weight: bold;
        color: #fff;
}

#menue-one a:hover {
        color: #9cda00;
        background: url(images/button_02.png) top no-repeat;
}



/* --------- Menue One --------- */

Etwas weniger Code

...und zur Codierung: nächstes mal wird alles besser... Kinderkrankheiten werden wir dann zusammen ausmerzen...

patrick_l · 27.03.2011

AW: [CSS] CSS-Contest 2011 - WIPs

So, bin langsam fertig. Korrigiere jetzt hier und da noch was, spiele mit anderen Farben herum. Aber das meiste ist fertig. Hier mal wieder nen WIP.

Werde auch so noch weiter dran schrauben. Halt Header und Kleinkram erledigen.

Herr_D · 27.03.2011

AW: [CSS] CSS-Contest 2011 - WIPs

Ich mag ja so grün/schwarz-Kombinationen

Gegenstrom · 27.03.2011

AW: [CSS] CSS-Contest 2011 - WIPs

du hast den kompletten ablauf rausgehauen

ansonsten, das schaut doch schön aus