Suchfeld in Navi Leiste
Jessica
- css
Schönen guten Morgen,
ich habe eine kleine WebSeite mit HTML und CSS umgesetzt. Das Ergebnis kann hier angesehen werden:
jetzt möchte ich gerne ans Ende sprich in das graue Feld neben dem letzten Punkt ein kleines Suchfeld einbauen. Ich bekomme es leider nicht hin. Hab Ihr eine Idee, wie ich das umsetzten kann?
Gruß
Jessica
Moin,
jetzt möchte ich gerne ans Ende sprich in das graue Feld neben dem letzten Punkt ein kleines Suchfeld einbauen. Ich bekomme es leider nicht hin. Hab Ihr eine Idee, wie ich das umsetzten kann?
Wo liegt denn dein Problem? Ich würde einfach noch einen Listenpunkt hinzufügen, in den ich ein Input-Feld hänge. Oder verstehe ich das falsch?
Grüße Marco
Hallo,
Wo liegt denn dein Problem? Ich würde einfach noch einen Listenpunkt hinzufügen, in den ich ein Input-Feld hänge. Oder verstehe ich das falsch?
achso, man kann in ein li auch ein Input-Feld packen? Sorry wusste ich gar nicht.
Gruß
Jessica
Hi,
Wo liegt denn dein Problem? Ich würde einfach noch einen Listenpunkt hinzufügen, in den ich ein Input-Feld hänge. Oder verstehe ich das falsch?
achso, man kann in ein li auch ein Input-Feld packen? Sorry wusste ich gar nicht.
mal abgesehen von seinen besonderen Merkmalen (Numerierung und/oder Bullets, Einrückungen), die man ja auch mit CSS in weiten Grenzen beeinflussen kann, ist li ein ganz gewöhnliches Blockelement. Du kannst so ziemlich alles da "reinpacken", was dir Spaß macht. Auch ein input, und auch ein komplettes kleines Formular.
Was ließ dich daran zweifeln?
Ciao,
Martin
@@Der Martin:
nuqneH
Du kannst so ziemlich alles da "reinpacken", was dir Spaß macht.
In li vielleicht, in nav aber nicht.
Qapla'
@@Jessica:
nuqneH
achso, man kann in ein li auch ein Input-Feld packen? Sorry wusste ich gar nicht.
Kann man. Passt aber nicht. Das Suchfeld sollte außerhalb des nav-Elements sein:
<header>
<nav>
<ul> … </ul>
</nav>
<input type="search" name="search"/>
</header>
Noch ein paar Anmerkungen:
Wozu soll <div id = "wrapper">
gut sein?
Anstatt <div id = "content">
solltest du <[link:http://www.w3.org/TR/html5/grouping-content.html#the-main-element@title=main] role="main">
verwenden.
Im Stylesheet steht:
transition: background 0.3s ease-out; /* explorer 10 */
-webkit-transition: background 0.3s ease-out; /* chrome & safari */
-moz-transition: background 0.3 ease-out; /* firefox */
-o-transition: background 0.3 ease-out; /* opera */
Die Kommentare sind
1. überflüssig, da sich die Browser anhand der Präfixe erkennen lassen
2. falsch. Firefox und Chrome unterstützen seit langem schon die präfixfreie Variante.
Weshalb die präfixfreie Variante immer NACH denen mit Präfixen stehn muss, damit diese angewnadt wird:
-webkit-transition: background 0.3s ease-out;
transition: background 0.3s ease-out;
-moz- für Firefox ist nicht mehr erforderlich, -o- für Opera wohl auch nicht. (Presto-Opera ist so gut wie tot.)
Qapla'
Hallo,
hab ein Update gemacht und es zum Teil so verbessert wie du es geschrieben hast:
http://jsfiddle.net/h2Mh4/3/
<header>
<nav>
<ul> … </ul>
</nav>
<input type="search" name="search"/>
</header>
wenn ich das so anwende du wie oben geschrieben hast, dann bekomme ich das <input> aber nicht schön in meine Leiste gepackt, ich würde es auch viel lieber so machen wie du es oben genannt hast.
> Noch ein paar Anmerkungen:
>
> [Wozu](http://community.de.selfhtml.org/zitatesammlung/zitat1287) soll `<div id = "wrapper">`{:.language-html} gut sein?
damit möchte ich meiner Seite einen Breite geben und dass diese immer schön in der Mitte ist.
> Anstatt `<div id = "content">`{:.language-html} solltest du `<[link:http://www.w3.org/TR/html5/grouping-content.html#the-main-element@title=main] role="main">`{:.language-html} verwenden.
Hmm wenn ich das mache, dann sagt mir aber Aptana dass das ein Fehler ist und wird als Rot markiert. Und warum main rolle="main"? ist das was neues?
> -moz- für Firefox ist nicht mehr erforderlich, -o- für Opera wohl auch nicht. (Presto-Opera ist so gut wie tot.)
habe ich entfernt und verbessert, danke für den Hinweis.
Gruß
Jessica
@@Jessica:
nuqneH
<header>
<nav>
<ul> … </ul>
</nav>
<input type="search" name="search"/>
</header>
>
> wenn ich das so anwende du wie oben geschrieben hast, dann bekomme ich das <input> aber nicht schön in meine Leiste gepackt
Doch, bekommst du. Die Leiste ist dann aber das header-Element, nicht das nav-Element.
> > [Wozu](http://community.de.selfhtml.org/zitatesammlung/zitat1287) soll `<div id = "wrapper">`{:.language-html} gut sein?
>
> damit möchte ich meiner Seite einen Breite geben und dass diese immer schön in der Mitte ist.
Du hast das Zitat in der Sammlung gelesen und verstanden? Mit html und body stehen bereits zwei Containerelemente zur Verfügung. Ja, auch die kann man stylen. [Beispiel](http://bittersmann.de/samples/jeans/).
> > Anstatt `<div id = "content">`{:.language-html} solltest du `<[link:http://www.w3.org/TR/html5/grouping-content.html#the-main-element@title=main] role="main">`{:.language-html} verwenden.
>
> Hmm wenn ich das mache, dann sagt mir aber Aptana dass das ein Fehler ist und wird als Rot markiert. Und warum main rolle="main"? ist das was neues?
Ja, das main-Element ist recht neu in HTML5. Und da es noch so neu ist, ist es gegenwärtig noch empfehlenswert, seine ARIA-Rolle (für Nutzer assistierender Technologien wie Screenreader) explizit anzugeben.
Hilf deiner IDE auf die Sprünge, gültiges HTML nicht als fehlerhaftes zu markieren.
Qapla'
--
„Talente finden Lösungen, Genies entdecken Probleme.“ (Hans Krailsheimer)
Hallo Gunnar,
dann ist mein weiteres HTML wohl auch falsch?
<div id="titel">Datenschutz</div>
<div id="inhalt">Hier kommt der Inhalt rein</div>
Gruß
Jessica
@@Jessica:
nuqneH
dann ist mein weiteres HTML wohl auch falsch?
Ja.
<div id="titel">Datenschutz</div>
Für Überschriften gibt es entsprechende Elemente. Und das ist nicht neu.
<div id="inhalt">Hier kommt der Inhalt rein</div>
Wozu der Container?
Zur Strukturierung eines Dokuments gibt es entsprechende Elemente.
Qapla'
Moin,
(Presto-Opera ist so gut wie tot.)
nö, ich bin überzeugt, er ist nicht "töter" als noch vor zwei oder drei Jahren.
Opera war schon immer ein Browser mit nur geringer Verbreitung, aber er hat seine Fans. Und von denen werden sich vermutlich nur wenige zum Umstieg auf den Blink-Opera drängen lassen, weil das vom Look & Feel her ein völlig anderer Browser ist - eher ein Chrome mit O-Logo als ein Opera.
Daher wird -so meine Prognose- der Großteil der Opera-Nutzer beim Presto-basierten Opera (derzeit 12.16) bleiben, für den es ja auch weiterhin Sicherheitsupdates geben soll[*], und hoffen, dass Opera ASA in absehbarer Zeit doch wieder zur Vernunft kommt.
Ciao,
Martin
[*] Nicht nur das, er steht auch immer noch zum Download bereit, und ist in den Repos einiger Linux-Distros enthalten. Man kann also auch einen Rechner noch frisch aufsetzen und trotzdem Opera "Classic" haben.
Und von denen werden sich vermutlich nur wenige zum Umstieg auf den Blink-Opera drängen lassen
Vermutlich, vermutlich… Faktisch sind bereits 50% umgestiegen.
http://www.heise.de/newsticker/meldung/Webbrowser-Opera-widerspricht-seinem-Ex-Chef-2111608.html
Mathias
Hallo
Und von denen werden sich vermutlich nur wenige zum Umstieg auf den Blink-Opera drängen lassen
Vermutlich, vermutlich… Faktisch sind bereits 50% umgestiegen.
http://www.heise.de/newsticker/meldung/Webbrowser-Opera-widerspricht-seinem-Ex-Chef-2111608.html
Nach der Meldung habe ich gestern wie blöd gesucht.
Dass 50% der Nutzer auf Opera 15 umgestiegen sind, würde ich nicht unter „bereits“ sondern „erst“ verbuchen. Opera-Nutzer gelten ja im allgemeinen als updatefreudig, da sind 50% nach etwa sieben Monaten doch recht wenig. Ob das daran liegt, dass mit der Version 15 diverse Features (vorübergehend?) wegfielen, vermag ich nicht zu sagen; an der Engine als solcher wird es wohl nicht liegen. Wenn die Features wiederkommen (so sie es denn tun), wird die prozentuale Verteilung anders aussehen und sei es, weil Version 12.x irgendwann einfach nur alt ist.
Tschö, Auge
Hi,
http://www.heise.de/newsticker/meldung/Webbrowser-Opera-widerspricht-seinem-Ex-Chef-2111608.html
Nach der Meldung habe ich gestern wie blöd gesucht.
Dass 50% der Nutzer auf Opera 15 umgestiegen sind, würde ich nicht unter „bereits“ sondern „erst“ verbuchen. Opera-Nutzer gelten ja im allgemeinen als updatefreudig, da sind 50% nach etwa sieben Monaten doch recht wenig. Ob das daran liegt, dass mit der Version 15 diverse Features (vorübergehend?) wegfielen, vermag ich nicht zu sagen
das ist vermutlich der Hauptgrund, denn das Erscheinen der Version 15 war ja kein Update, geschweige denn ein Upgrade (eher schon ein Downgrade, gemessen am Wegfall vieler Features), sondern ein völlig anderer Browser. Und unter dem Aspekt halte ich 50% schon für überraschend viel.
Wenn die Features wiederkommen (so sie es denn tun), wird die prozentuale Verteilung anders aussehen und sei es, weil Version 12.x irgendwann einfach nur alt ist.
Wenn sie wirklich irgendwann wiederkommen, ist der "neue" Opera vielleicht auch für mich wieder eine Alternative. Bis dahin ist aber wohl der 12er-Ast das Beste, was man noch haben kann.
Ciao,
Martin
Opera-Nutzer gelten ja im allgemeinen als updatefreudig
Opera <= 12 hat auf Updates automatisch hingewiesen. Opera 12 weist m.W. nicht auf das Update Opera 15+ hin. Vielleicht gab es einen einmaligen Dialog, ich erinnere mich nicht. Aber die Standard-Update-Funktion behauptet, Opera 12.16 sei die neueste Version.
Ergo haben über 50% der Opera-Desktop-Nutzer manuell Opera 15+ heruntergeladen und installiert.
Mathias
@@Der Martin:
nuqneH
(Presto-Opera ist so gut wie tot.)
nö, ich bin überzeugt, er ist nicht "töter" als noch vor zwei oder drei Jahren. […]
Daher wird -so meine Prognose- der Großteil der Opera-Nutzer beim Presto-basierten Opera (derzeit 12.16) bleiben
Ich formuliere neu: Der Präfix -o- sollte kaum noch erforderlich sein, da auch die letzte Presto-Opera-Version transition präfixfrei unterstützt.
Qapla'
Guten Morgen,
ich habe ein Probleme mit den oben genannten Browser, hier die jeweiligen Bilder, wie es in den Browsern aussieht:
Firefox
Chrome
Internet Explorere
Es sollte überall so aussehen wie es derzeit im Firefox aussieht.
Hier mein Code: http://jsfiddle.net/KsvB3/1/
Vielleicht habt ihr eine Idee, wie ich es erreiche dass alle Browser es gleich anzeigen. Ich hoffe nicht, dass ich für alle drei verschieden CSS Dateien anlegen muss.
Gruß
Jessica
@@Jessica:
nuqneH
Internet Explorere
Das ist die Pluralform? ;-) Ja, es gibt mehrere. Auf welchen beziehst du dich?
Noch wichtiger als die Pixelschubserei sind aber andere Dinge:
Das Sucheingabefeld hat keine Beschriftung Es sollte aber eine Beschriftung haben, damit auch Nutzer von unterstützenden Technologien wie Screenreadern erkennen können, wozu das Eingabefeld da ist.
Das Sucheingabefeld sollte vom Typ search
sein, d.h. <input type="search" …>
.
Der Absendebutton sollte eine sinnvolle Beschriftung haben. „Los“ ist keine solche; „suchen“ wäre eine. Damit auch Nutzer von unterstützenden Technologien wie Screenreadern erkennen können, wozu der Buton da ist.
Der Absendebutton sollte vom Typ submit
sein, d.h. <input type="submit" …>
.
Oder gleich als Button: <button type="submit" …>
.
(In dem Falle ginge auch ohne type-Attribut, da submit
innerhalb von Formularen Default ist.)
Die Suche sollte nicht innerhalb eines nav-Elements stehen, wie ich schon sagte.
Qapla'
Hallo,
Das ist die Pluralform? ;-) Ja, es gibt mehrere. Auf welchen beziehst du dich?
ich meine den Internet Explorer in den Versionen 9 - 10 -11
Die anderen Sachen habe ich wie folgt umgesetzt
<li style="padding-top:5px; padding-left:10px; border-right:0px !important;">
<form action="" method="get">
<label for="suche" id="suche" style="display:none;">Usersuche</label>
<input name="suche" type="search" placeholder="Suche ...." style="background-color: #efefef; border:0px; width:150px;">
<button style="border:0px; background-color:#efefef;">suchen</button>
</form>
</li>
Hoffe ich habe das richtig verstanden. Allerdings haben sich meine Style Probleme dadurch überhaupt nicht gelöst.
Die Suche sollte nicht innerhalb eines nav-Elements stehen, wie ich schon sagte.
ich weiß das hast du mir das letzte mal schon gesagt, aber ich bekomme es nicht hin. Wenn ich das trenne, dann ist meine Navigation defekt und selber hast du geschrieben man kann es auch so lassen.
Gruß
Jessica
Hallo
Die anderen Sachen habe ich wie folgt umgesetzt
…
<label for="suche" id="suche" style="display:none;">Usersuche</label>
<input name="suche" type="search" placeholder="Suche ...." style="background-color: #efefef; border:0px; width:150px;">
…
>
> Hoffe ich habe das richtig verstanden.
Nee, das läuft schief. Das Attribut „for“ des `<label>`{:.language-html} bezieht sich auf die ID des dazugehörigen `<input>`{:.language-html}. Tut sie bei dir aber nicht, da du `<input>`{:.language-html} keine und dem `<label>`{:.language-html} jene, die das `<input>`{:.language-html} haben sollte, verpasst.
~~~html
<label for="suche">Usersuche</label>
<input name="suche" id="suche" type="search" placeholder="Suche ....">
So herum tut's.
Tschö, Auge
@@Jessica:
nuqneH
ich meine den Internet Explorer in den Versionen 9 - 10 -11
Auf einer VM kann ich das nicht nachvollziehen. Ich hab rechts weniger Grau als auf deinem Screenshot zu sehen ist.
<li style="padding-top:5px; padding-left:10px; border-right:0px !important;">
Wozu brauchst du bei Inline-Styles !important
? Und warum verswendest du überhaupt Inline-Styles? Sämtliche Darstellungsangaben sollten im Stylesheet stehen.
<label for="suche" id="suche" style="display:none;">Usersuche</label>
Nein, so geht’s nicht. display:none
lässt das Element nicht nur visuell verschwinden, sondern auch für Screenreader.
Barrierefreie Methoden sollten sich aber mit dem Suchbegriff "visually hidden" finden lassen. Dürfte auch kaum anders sein als bei image replacement – nur ohne Hintergrundbild.
Aber warum willst du das überhaupt? Statt des Placeholders könntest du auch das Label visuell im Eingabefeld plazieren.
Qapla'
Hallo,
Auf einer VM kann ich das nicht nachvollziehen. Ich hab rechts weniger Grau als auf deinem Screenshot zu sehen ist.
rechts und links ist es auch OK, das nervt mich nicht, schau mal über dem Feld und unter dem Feld, da ist im FF genau gleichviel Platz und im IE bzw. Chrome ist oben mehr Platz wie unten, das nervt mich.
Nein, so geht’s nicht.
display:none
lässt das Element nicht nur visuell verschwinden, sondern auch für Screenreader.
Ich hab es jetzt so gemacht, ich glaube das ist OK oder?
<form action="" method="get">
<label for="suche" style="text-indent:-99999px;">Usersuche</label>
<input name="suche" id="suche" type="search" placeholder="Suche ...." style="background-color: #efefef; border:0px; width:150px;">
<button style="border:0px; background-color:#efefef;">suchen</button>
</form>
Aber warum willst du das überhaupt? Statt des Placeholders könntest du auch das Label visuell im Eingabefeld plazieren.
das habe ich derzeit nur um zu testen, dass ich nicht immer zwischen den Dateien springen muss, wenn es richtig ist, kommt es natürlich in die style.css wie auch alles andere.
Gruß
Jessica
Ich hab es jetzt so gemacht, ich glaube das ist OK oder?
<form action="" method="get">
<label for="suche" style="text-indent:-99999px;">Usersuche</label>
<input name="suche" id="suche" type="search" placeholder="Suche ...." style="background-color: #efefef; border:0px; width:150px;">
<button style="border:0px; background-color:#efefef;">suchen</button>
</form>
ich sehe gerade, dass text-indent: -9999px; überhaupt nicht zieht, ich dachte so kann man es ausblenden, steht auch hier: [http://www.perun.net/2012/03/04/css-neue-methode-um-text-zu-verbergen/](http://www.perun.net/2012/03/04/css-neue-methode-um-text-zu-verbergen/)
ich sehe gerade, dass text-indent: -9999px; überhaupt nicht zieht, ich dachte so kann man es ausblenden, steht auch hier: http://www.perun.net/2012/03/04/css-neue-methode-um-text-zu-verbergen/
OK so geht es ich hatte das position:absolute vergessen
.verbergen {
text-indent: -9999px;
position:absolute;
}
@@Jessica:
nuqneH
OK so geht es
„Es geht, aber es haut nicht hin!“ (Siri)
Qapla'
Hallo
rechts und links ist es auch OK, das nervt mich nicht, schau mal über dem Feld und unter dem Feld, da ist im FF genau gleichviel Platz und im IE bzw. Chrome ist oben mehr Platz wie unten, das nervt mich.
Auch wenn es legitim ist, dass auf den Millimeter genau bestimmen zu wollen, sei folgendes gesagt. Besucher deiner Website kommen typischerweise mit _einem_bestimmten_Browser_ vorbei [1]. In dem sieht die Seite aus, wie sie aussieht. Sie werden nie sehen, was dir beim testen mit den verschiedenen Browsern ins Auge springt.
Verliere dich nicht bis ins Unendliche in derlei Fitzeldetails. Gehe sowas an, wenn die wichtigen Aufgaben abgearbeitet sind, sonst kommst du genau mit diesen nicht weiter. Im Zweifelsfall darf man ein Pixel auch ein Pixel sein und es einem selbst den Buckel runterrutschen lassen.
[1] Ja, eventuell kommen sie zusätzlich noch mit einem Mobilgerät vorbei. Das bekommt ja hoffentlich eh ein angepasstes Styleset.
Tschö, Auge
@@Jessica:
nuqneH
Ich hab es jetzt so gemacht, ich glaube das ist OK oder?
[…]
<label for="suche" style="text-indent:-99999px;">Usersuche</label>
Nein, das ist es nicht.
Es gibt noch weitere Möglichkeiten.
Qapla'
Hallo,
eine Frage habe ich noch, ist das HTML so richtig für einen Artikel?
<main role="main">
<h1>Schreiben Sie uns</h1>
<article>
Sie haben Anregungen, Fragen, Wünsche? Zögern Sie nicht uns zu kontaktieren. Wir melden uns umgehend bei Ihnen.
</article >
</main>
das Formular kommt ebenfalls mit in article? Vielen Dank für die Hilfe heute.
Euch einen schönen Abend.
Gruß
Jessica
@@Jessica:
nuqneH
eine Frage habe ich noch, ist das HTML so richtig für einen Artikel?
<main role="main">
<h1>Schreiben Sie uns</h1>
<article>
Sie haben Anregungen, Fragen, Wünsche? Zögern Sie nicht uns zu kontaktieren. Wir melden uns umgehend bei Ihnen.
</article >
</main>
Nein. article sollte – ebenso wie section – immer mit einer Überschrift beginnen. Das h1-Element würde ins article-Element gehören.
Das article-Element ist aber nicht richtig. Zum einen ist es völlig überflüssig, wenn es das einzige Element im main-Element ist. Zum anderen repräsentiert das [article-Element](http://www.w3.org/TR/html5/sections.html#the-article-element) Inhalt, der losgelöst vom Seiteninhalt stehen könnte – was keinen Sinn macht, wenn der Inhalt des article-Elements gleich dem Hauptinhalt der Seite ist.
> das Formular kommt ebenfalls mit in article?
Du meinst die Navigation und die Suche? Nö, gehört nicht einmal mit ins main-Element, würd ich sagen.
Qapla'
--
„Talente finden Lösungen, Genies entdecken Probleme.“ (Hans Krailsheimer)
Hallo,
Das article-Element ist aber nicht richtig. Zum einen ist es völlig überflüssig, wenn es das einzige Element im main-Element ist. Zum anderen repräsentiert das article-Element Inhalt, der losgelöst vom Seiteninhalt stehen könnte – was keinen Sinn macht, wenn der Inhalt des article-Elements gleich dem Hauptinhalt der Seite ist.
Also kann ich in meinem Fall auf <article> verzichten und einfach mit <p> bzw. <div> arbeiten?
Du meinst die Navigation und die Suche? Nö, gehört nicht einmal mit ins main-Element, würd ich sagen.
Nein, ich meinte das Kontaktformular, das unter den Text kommt.
Gruß
Jessica
Guten Abend,
kann der IE 11
<main role="main">
</main>
main {
background-color: #fff;
clear: both;
min-height:400px;
padding:20px 20px 0 35px;
line-height:16px;
}
nicht? Es wird im IE falsch dargestellt. FF und Chrome geht alles.
Gruß
Jessica
@@Jessica:
nuqneH
Es wird im IE falsch dargestellt. FF und Chrome geht alles.
Was heißt „falsch“? Was heißt „geht alles“? Was geht ab?
Meine Glaskugel zeigt display: block
.
Qapla'
Hallo,
Was heißt „falsch“? Was heißt „geht alles“? Was geht ab?
schau mal wie es im IE aussieht:
und im FF sieht es gut aus
Gruß
Jessica
@@Jessica:
nuqneH
schau mal wie es im IE aussieht:
Du glaubst nicht ernsthaft, dass man anhand eines Screenshots die Ursache ermitteln kann, oder?
Hast du schon auf meine Glaskugel gehört?
Qapla'