[CSS] CSS-Contest 2012 WIPs

simonpicos · 21.02.2012

AW: [CSS] CSS-Contest 2012 WIPs

DerOtto schrieb:
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..

DerOtto schrieb:
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 · 21.02.2012

AW: [CSS] CSS-Contest 2012 WIPs

Gegenstrom schrieb:
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

schaut euch cebitos post 2 weiter unten an

Gegenstrom schrieb:
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

patrick_l · 21.02.2012

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

LaFaSiLuc · 21.02.2012

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 · 21.02.2012

AW: [CSS] CSS-Contest 2012 WIPs

Gegenstrom schrieb:
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 */}

Gegenstrom schrieb:
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

Wozu? Lass h1 bzw. das Logo immer sichtbar und du hast deinen Link nach oben...

LaFaSiLuc · 21.02.2012

AW: [CSS] CSS-Contest 2012 WIPs

Danke, Otto

Im Augenblick bin ich sowas von confused ^^

Gegenstrom · 21.02.2012

AW: [CSS] CSS-Contest 2012 WIPs

simonpicos schrieb:
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

cebito schrieb:
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 · 21.02.2012

AW: [CSS] CSS-Contest 2012 WIPs

simonpicos schrieb:
So früh? Ich bin deine wips eigentlich erst so frühestens gegen 3-5 Uhr in der früh gewöhnt

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.

@LaFa: Das "confused" ist das Wort des Monat. :lol:

cebito · 21.02.2012

AW: [CSS] CSS-Contest 2012 WIPs

Gegenstrom schrieb:
das is es, danke ceb

Falls du noch mal nicht weißt, wie du was ansprechen sollst...

simonpicos · 21.02.2012

AW: [CSS] CSS-Contest 2012 WIPs

Stimmt, es gibt ja 2 inputs.. sorry für die falschinfo

Gegenstrom · 21.02.2012

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

simonpicos · 21.02.2012

AW: [CSS] CSS-Contest 2012 WIPs

Gegenstrom schrieb:
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!)

cebito · 21.02.2012

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

Gegenstrom · 21.02.2012

AW: [CSS] CSS-Contest 2012 WIPs

cebito schrieb:
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

patrick_l · 21.02.2012

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.

cebito schrieb:
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

simonpicos · 21.02.2012

AW: [CSS] CSS-Contest 2012 WIPs

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

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

patrick_l · 21.02.2012

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%;}

Gegenstrom · 21.02.2012

AW: [CSS] CSS-Contest 2012 WIPs

simonpicos schrieb:
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

simonpicos · 21.02.2012

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 · 21.02.2012

AW: [CSS] CSS-Contest 2012 WIPs

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

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.