Antworten auf deine Fragen:
Neues Thema erstellen

[CSS] CSS-Contest 2011 - WIPs

lauffreak

lauffreak

FotoAnfänger

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 3Dein Name beim PSD-Tutorials.de - CSS Contest 2011
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

Gegenstrom

Aktives Mitglied

AW: [CSS] CSS-Contest 2011 - WIPs

lauffreak schrieb:
Nun zu meinem Problem:
hier ein Entwurf 3Dein Name beim PSD-Tutorials.de - CSS Contest 2011
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
Zum Vergrößern anklicken....
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
 
Zuletzt bearbeitet:
cebito

cebito

undefined

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 :D wie gesagt negativer margin-Wert bei a:hover >> margin-top:-15px;
 
Zuletzt bearbeitet:
Gegenstrom

Gegenstrom

Aktives Mitglied

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? :p
 
cebito

cebito

undefined

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

Gegenstrom

Aktives Mitglied

AW: [CSS] CSS-Contest 2011 - WIPs

das is was feines, wies geht weiß ich nicht :D
ich hätte gestern nicht bis heute früh an der css rumbasteln sollen, bin total elanlos
 
MegaAdi

MegaAdi

Freak

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
 
patrick_l

patrick_l

Hat es drauf

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.
 
Zuletzt bearbeitet:
H

Herr_D

offline

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. ;)
Zum Vergrößern anklicken....

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... ;)
 
patrick_l

patrick_l

Hat es drauf

AW: [CSS] CSS-Contest 2011 - WIPs

Herr_D schrieb:
Was macht

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

unvalide?
Zum Vergrößern anklicken....

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 &amp; 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
 
Zuletzt bearbeitet:
Gegenstrom

Gegenstrom

Aktives Mitglied

AW: [CSS] CSS-Contest 2011 - WIPs

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

ä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 :D
du brauchst neue left-rightpaddings für jeden navipunkt unterschiedliche
 
Zuletzt bearbeitet:
patrick_l

patrick_l

Hat es drauf

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 :D

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.
 
Zuletzt bearbeitet:
H

Herr_D

offline

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...
 
Zuletzt bearbeitet:
patrick_l

patrick_l

Hat es drauf

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. :D



Werde auch so noch weiter dran schrauben. Halt Header und Kleinkram erledigen.
 
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
Zu den Gratis-Inhalten

Neueste Themen & Antworten

Flatrate für Tutorials, Assets, Vorlagen

Zurzeit aktive Besucher

Gesamt: 102 (Mitglieder: 3, Gäste: 99)
Robots: 966

Statistik des Forums

Themen
118.611
Beiträge
1.538.341
Mitglieder
67.524
Neuestes Mitglied
BSKGA
Oben