Antworten auf deine Fragen:
Neues Thema erstellen

[CSS] CSS-Contest 2012 WIPs

simonpicos

Mod | Forum

AW: [CSS] CSS-Contest 2012 WIPs

Vielleicht heute Nachmittag oder gegen Abend mein nächster wip.
So früh? Ich bin deine wips eigentlich erst so frühestens gegen 3-5 Uhr in der früh gewöhnt :lol: ;)

Bei mirkommt heute dann auch im Verlauf des Nachmittags was. Dann schon mit Content und seiten-(section)wechsel..

Brauchst du zwar nicht, ist aber ganz praktisch. Nach der Installation Xampp starten, deine Seite (hier vom Contest) in den htdocs Ordner von Xampp verfrachten und das war es schon. So hast du deine eigene kleine Serverumgebung und kannst auch auch PHP-Seiten lokal nutzen.

hm, ok, danke.. werd ich mich bei gelegenheit mal einarbeiten..
 

simonpicos

Mod | Forum

AW: [CSS] CSS-Contest 2012 WIPs

ma ne dumme frage, aber warum hat der such-button keine eigene id? anders gefragt wie sprech ich ihn alleine an ohne input zu benutzen?

Code:
#mainNav form input{
    bla:blub;
}

spricht alle inputs in einem form in der #mainNav an.. Und davon gibts ja nur eins :)

sorry, falsch :D schaut euch cebitos post 2 weiter unten an :)

weitere fragen, wenns nen one-pager ist, warum gibts dann keine back to top verlinkungen?

Keine schlechte Idee.. aber da es sowieso empfehlenswert ist, der navi ne fixed position zu geben ist der eigentlich unnötig, da der 1. Link in der #mainNav auf die erste section verweist, die ja eigentlich ganz oben sein sollte ;)
 
Zuletzt bearbeitet:

patrick_l

Hat es drauf

AW: [CSS] CSS-Contest 2012 WIPs

@Gegenstrom: Du kannst es doch direkt anpsrechen

Code:
#mainNav form{?? ;}

/* ----- oder mit ----- */

#searchfield {?? ;}

Edit: Ach du meist den Button :lol: Dann hat Simon des Rätsels Lösung schon genannt ;)
 
Zuletzt bearbeitet:

LaFaSiLuc

pauschalschuldig

AW: [CSS] CSS-Contest 2012

Ich muss nochmal ganz saudoof fragen: Das CSS ist ja komplett nackig, jungfräulich, sozusagen, pult ihr euch da aus dem html alle Selektoren, etc. einzeln raus? Oder gibts da nen Trick für dummies?
 

cebito

undefined

AW: [CSS] CSS-Contest 2012 WIPs

ma ne dumme frage, aber warum hat der such-button keine eigene id? anders gefragt wie sprech ich ihn alleine an ohne input zu benutzen?
Code:
#search input[type='submit']{/* style mich */}
weitere fragen, wenns nen one-pager ist, warum gibts dann keine back to top verlinkungen? frage dazu, die fragen gehören warhscheinlich gar nicht in diesen thread wa
biggrin.png
Wozu? Lass h1 bzw. das Logo immer sichtbar und du hast deinen Link nach oben... ;)
 

Gegenstrom

Aktives Mitglied

AW: [CSS] CSS-Contest 2012 WIPs

Code:
#mainNav form input{
    bla:blub;
}
spricht alle inputs in einem form in der #mainNav an.. Und davon gibts ja nur eins :)
eben es spricht alle an, und es gibt davon ja zwei, mir gings ja nur um den button
Code:
#search input[type='submit']{/* style mich */}
Wozu? Lass h1 bzw. das Logo immer sichtbar und du hast deinen Link nach oben... ;)
das is es, danke ceb
naja, logo immer sichtbar oder h1 immer sichtbar... gut wenn man meint, muss ich mir was neues ausdenken
 

patrick_l

Hat es drauf

AW: [CSS] CSS-Contest 2012 WIPs

So früh? Ich bin deine wips eigentlich erst so frühestens gegen 3-5 Uhr in der früh gewöhnt
biggrin.gif
icon_nick.gif

Ja so "früh" :lol: Habe in der letzten Nacht etwas früher die Arbeit beiseite gelegt. ;) Sonst wäre ich jetzt erst wieder fit. Bin aber noch am überlegen wie ich den Rest gestalte. Vielleicht übernehme ich die Ecke aus der Navi für den unteren Bereich und bisschen mit shadow und transition arbeiten. :D

@LaFa: Das "confused" ist das Wort des Monat. :lol:;)
 
Zuletzt bearbeitet:

Gegenstrom

Aktives Mitglied

AW: [CSS] CSS-Contest 2012 WIPs

nächste frage, es funzt nicht wie ichs will, leider...
http://css-contest.kilu.de/2012/
und zwar gehts mir darum, dass der button unter der eingabe angezeigt wird, sieht ja auch toll aus, nee eben nicht, verkleinere ich mein browserfenster schiebt er mir den button bei ner bestimmten größe automatisch nach unten, siehe pic

ich weiß auch woran es liegt, nur finde ich gerade keinen lösungsweg um dieses problem zu beheben
liegt an dem negativen margin des eingabefelds

und dann ma noch gleich ne nächste frage, ist es möglich wenn ich die navi+sucheingabe ausblende und sie via hover wieder sichtbar mache, dass ich es über einen anderen tag mache, z bsp wennsch über psd zen garden gehe, dass sich dann die navi öffnet? is sowas möglich? habsch selber grad noch nicht probiert
 
Zuletzt bearbeitet:

simonpicos

Mod | Forum

AW: [CSS] CSS-Contest 2012 WIPs

und dann ma noch gleich ne nächste frage, ist es möglich wenn ich die navi+sucheingabe ausblende und sie via hover wieder sichtbar mache, dass ich es über einen anderen tag mache, z bsp wennsch über psd zen garden gehe, dass sich dann die navi öffnet? is sowas möglich? habsch selber grad noch nicht probiert

jep.. du kannst zumindest bei hover der section#garden die navi einblenden.

Code:
#garden:hover~#mainNav{
    display: block;
}

________________________________________________

Und dann grad meine Frage:

Ich hab die verschiedenen sectionen "zur seite geschoben" beim aktivieren via :target werden sie ins fenster geschoben. wie kann cih es anstellenb, dass dann die section#contest rausgeschoben wird?? (Am Anfang soll sie aber sichtbar sein!)
 
Zuletzt bearbeitet:

cebito

undefined

AW: [CSS] CSS-Contest 2012 WIPs

Gib der Form doch ne feste Breite statt in %

Edith sagt noch - den .screenReaderText würd ich ausblenden, ist ja mit dem Platzhaltertext irgendwo doppelt gemoppelt. Hat aber was mit Usability zu tun, weil ein Screenreader den Platzhaltertext nicht vorliest und wenn ich schon mal 'ne Vorgabeseite mache, dann versuch ich auch nach bestem Wissen und Gewissen zu zeigen wie mans richtig macht... ;)

Edith2 sagt - hast du die html mal offen gehabt und neu gespeichert? Die Umlaute werden bei dir nicht mehr angezeigt. Speicher die mal wieder als utf-8...
 
Zuletzt bearbeitet:

Gegenstrom

Aktives Mitglied

AW: [CSS] CSS-Contest 2012 WIPs

Gib der Form doch ne feste Breite statt in %
dann rutscht se mir unter die navi, das wollt ich ja vermeiden, die beiden sollen ja trotzdem weiterhin nebeneinander stehen, und nicht bei ner bestimmten größe des fenster verrutschen

danke simon, grad ausprobiert, funzt nur nicht, ich schau mir das ma an

nöp die index.php habsch immer nur offen, aber wozu abspeichern? bringt mir ja nichts, darf da eh nichts dran ändern, bedeutet ich habs auch nicht abgespeichert ;)
ah kay, otto hat mich drauf gebracht - oder auch nicht ganz
ich wollt eben nicht mit ner fixen breite arbeiten, aber wenns nicht anders geht, dann muss es wohl so sein
 
Zuletzt bearbeitet:

patrick_l

Hat es drauf

AW: [CSS] CSS-Contest 2012 WIPs

Ich würde erst einmal mit
Code:
.screenReaderText {display: none;}
Den Text ausblenden. Danach dem mainNav-Div eine fixe Breite geben. Dann kann das Feld auch nicht mehr abhauen. Oder sehe ich das falsch. Bei mir geht es zumindest ohne Probleme.

Edit: Die Suche floaten, also der UL en float left verpassen.

hast du die html mal offen gehabt und neu gespeichert? Die Umlaute werden bei dir nicht mehr angezeigt. Speicher die mal wieder als utf-8...

Wollte ich gerade gefragt habe was da nun los ist ;)
 
Zuletzt bearbeitet:

patrick_l

Hat es drauf

AW: [CSS] CSS-Contest 2012 WIPs

Ich habe auch mal eine Frage, ist zwar jetzt für mein Wip nicht sooo wichtig - wollte es aber gerne wissen. Wie kann ich die UL im Div mainNav mittig ausrichten? Ich möchte halt den Div auf die volle Anzeigebreite setzen, die Nav und Suche sollen aber immer mittig bleiben.

Ich dachte ich könnte es mit margin:auto machen - aber Pustekuchen- es geht nicht. Auch will ich nicht mit Position das ganze raus reißen.

Edit:
Noch eine Frage ;) Kann ich mit dem Stern-Selektor auch allgemein Font-Size reseten.

Code:
* {margin:0; padding:0, font-size: 100%;}
 
Zuletzt bearbeitet:

Gegenstrom

Aktives Mitglied

AW: [CSS] CSS-Contest 2012 WIPs

so, jetzt bin ich ziemlich confused von diesem selector.. Ich dachte ich kannte den, aber jetzt hab ich mir das grad nochmal bei w3schools angeschaut: http://w3schools.com/cssref/sel_gen_sibling.asp hatb ich wohl was missverstanden...
dat funzt nur mit vorangestellten elementen, also das element was man fürs hover benutzt muss vor dem element was man sichtbar machen will im quelltext stehen, so wie ichs grad ausprobiert habe, es funzt immer nur dann wenn es auch im quelltext hinter dem element steht was man hovert
funzt net
HTML:
<style type="text/css"> 
p~ul
{
background:#333;
}
#liste{
display:none;}
#test:hover~#liste{
display:block;
background-color:#666;}
</style>
</head>
<body>
<p >The first paragraph.</p>
<ul id="liste">
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ul>

<h2 id="test">Another list</h2>
<ul >
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ul>

</body>
setz ich aber das id="test" in den p-tag, funzt es ;) kann ich sogar die id="liste" in die untere liste setzen und es funzt immernoch, es muss im quelltext nur davor stehen, bedeutet ich kanns nicht verwenden :(
naja egal, so schauts zur zeit aus: http://css-contest.kilu.de/2012/ - und nein habe nichts an der index verändert ;)
 
Zuletzt bearbeitet:

simonpicos

Mod | Forum

AW: [CSS] CSS-Contest 2012 WIPs

gnaaarff :hmpf::hmpf::hmpf:

Das mit dem "~"-selektor ist echt ne üble Sache.. vor allem bei ner Single-page-site. Es wäre echt deutlich besser, wenn die Navi im markup hinter den einzelnen sections stehen würde. Gerade bei einer single-page-site ist doch wichtig dass der "aktive" menüpunkt kenntlich gemacht wird. Das ist bei diesem seitenaufbau nicht möglich.
Besteht eine theoretische chance, dass du, cebito, das ncoh änderst? Ich sag auch ganz lieb bitte :)

Oder bin ich gerade komplett verblödet und übersehe eine Möglichkeit?

Hier nochmal ein Beispiel zur verdeutlichung: http://tympanus.net/Tutorials/CSS3PageTransitions/index.html#portfolio

die navi liegt im code hinter dem rest. So lassen sich ganz einfach "active"-zustände verändern..
 

cebito

undefined

AW: [CSS] CSS-Contest 2012 WIPs

ok, ok, ihr hab mich überredet, aber die Reihenfolge bleibt :p

Ergänzt das mal bei euch...
PHP:
    <script src="http://code.jquery.com/jquery-latest.js"></script>
    <script>
    $(document).ready(function(){
        var myurl = document.URL;
        var shorturl = myurl.split('/');
        $('#mainNav li a').each(function(){
            if($(this).attr('href') == shorturl[shorturl.length - 1]){
                $(this).addClass('active');
            }
        });

        $('#mainNav li a').click(function(){
            $('#mainNav li a').removeClass('active');
            $(this).addClass('active');
        });

        $('h1 a').click(function(){
            $('#mainNav li a').removeClass('active');
        });
    });
    </script>
Damit haben die aktiven links jetzt immer die Klasse "active", die könnt ihr also extra stylen...

Könnt euch auch hier http://css-contest.bplaced.net/2012/#contest den kompletten Quelltext kopieren, die .zip ist jetzt auch aktualisiert.
 
Zuletzt bearbeitet:
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

Flatrate für Tutorials, Assets, Vorlagen

Zurzeit aktive Besucher

Keine Mitglieder online.

Statistik des Forums

Themen
118.615
Beiträge
1.538.352
Mitglieder
67.526
Neuestes Mitglied
Winfriedtesmer
Oben