img-link ohne, textlink mit hover -Wie?
Gary
- css
0 Matthias Apsel0 Gary
0 MudGuard0 Kai345
Abend zusammen
Testobjekt:
http://www.euro-superconductors.com/
Wenn man mit der Maus über die Sprachen fährt, werden die schön mit einer Doppellinie hervorgehoben. Das ist gut!
Leider werden auch die Pfeile in den Schiebern rechts und links beim Überfahern unterstrichen. Und das obwohl ich schon das alles ausprobiert habe:
a img {
border: none;
text-decoration: none;
border-color: none;
}
Da dürfte überhaupt nichts unterstrichen werden...
Gruß Gary
Om nah hoo pez nyeetz, Gary!
a img { border: none; text-decoration: none; border-color: none; }
Da dürfte überhaupt nichts unterstrichen werden...
doch, der Link. Du hast eine Angabe gemacht "a:hover". Diese gilt für alle Links. Mit "a img" formatierst du nur in Verweisen liegende Grafiken.
Da CSS nicht "rückwärts selektieren" kann (Schau, ob auf ein a ein img folgt und ändere das a) wirst du wohl um eine Klasse nicht umhin kommen. Ich würde dabei Eigenschaften, die für alle a zutreffen sollen für a setzen und die anderen z.B. für a.grafiklink. Oder a.textlink, so dass der CSS-Code möglichst klein wird.
Matthias
Hi Matthias :-)
Vielen Dank, jetzt gehts (und ist auch schon online verbesser!)
Gruß
Gary
PS. Wer sagt, daß der CSS-Code möglichst klein bleiben muss? ;-)
Hi Matthias :-)
html-code:
------------------------------------------------------------------
<div class="inhalt-box-links">
<a class="grafiklink" href="index.html"><img src="up-symbol.png" width="50" height="18" alt="^"></a>
</div>
------------------------------------------------------------------
In dieser div-box ist ein Bild "up-symbol" drin. Wie schaffe ich es allgemein, ein Bild, das kleiner ist wie die Div-Box in der Div-Box unten mittig auszurichten?
Gruß Gary
@@Gary:
nuqneH
Da CSS nicht "rückwärts selektieren" kann (Schau, ob auf ein a ein img folgt und ändere das a) wirst du wohl um eine Klasse nicht umhin kommen.
Doch, das kommt er. Der Nachfahrenselektor existiert.
Vielen Dank, jetzt gehts (und ist auch schon online verbesser!)
Verschlimmbessert.
Weg mit @class="grafiklink", das ist unnütz.
Wenn du den den Hover-Effekt nur für die Links in div[@class="zentrum-box-links"] und div[@class="zentrum-box-rechts"] haben willst, dann gib ihn eben nur für diese Links an:
div.zentrum-box-links a:hover, div.zentrum-box-rechts a:hover
{
border-top-style: solid;
border-bottom-style: solid;
border-color: #FFCC00;
}
Warum sind "zentrum-box-links" und "zentrum-box-rechts" Klassen und keine IDs? Außerdem sollten Bezeichner von Klassen und IDs nicht nach der gegenwärtig gewünschten Darstellung vergeben werden.
Ich würde dabei Eigenschaften, die für alle a zutreffen sollen für a setzen und die anderen z.B. für a.grafiklink. Oder a.textlink, so dass der CSS-Code möglichst klein wird.
PS. Wer sagt, daß der CSS-Code möglichst klein bleiben muss? ;-)
Es ist unsinnig, den CSS-Code möglichst klein zu halten und dafür das Markup (an mehreren Stellen!!) aufzublähen.
Dann lieber einmalig einpaar Zeilen CSS mehr und dafür einfaches, schlankes Markup.
Übrigens sollte es "Česky" heißen (mit kurzem 'y', nicht mit langem 'ý').
Und warum verdeckt das Bild der Erde die Überschrift und warum beginnt das Sprachauswahlmenü schon über der dicken blauen Linie?
Qapla'
Hi Gunnar
Übrigens sollte es "Česky" heißen (mit kurzem 'y', nicht mit langem 'ý').
Danke - etwas früher wäre besser gewesen. Ich hab mir nen Wolf nach diesem spezial "Ypsilon" abgesucht ;-)
Und warum verdeckt das Bild der Erde die Überschrift und warum beginnt das Sprachauswahlmenü schon über der dicken blauen Linie?
Mensch Gunnar... sind wir im Kindergarten? Ich stell dir jetzt auch eine PKW-Garage hin und sag - komm parkier den Sattelschlepper da hinein - tztz
Ich habe den Mittelteil wirklich klein gemacht. So klein wie du guckt keiner... Und vergrößern läßt sich das auch ganz pasabel.
Deine CSS Trickle muss ich mir morgen in Ruhe angucken. Du fast da recht geschickt mehre Divs mit gleichen Eigenschaften zusammen.
Jaja - ist spät...
Gute Nacht Gunnar
PS.: Hab dein "y" geändert, obwohl so ein online Übersetzdingens gesagt hat es wäre das "y" mit dem strich obendrauf...
Ich vertrau dir mal...
Bye
Hi,
Und warum verdeckt das Bild der Erde die Überschrift und warum beginnt das Sprachauswahlmenü schon über der dicken blauen Linie?
Mensch Gunnar... sind wir im Kindergarten?
Wenn du dir die Hände vor die Augen hältst, und „keiner kann mich sehen“ singst - dann gehörst du zumindest offenbar noch dort hin.
Ich habe den Mittelteil wirklich klein gemacht. So klein wie du guckt keiner...
Mobile devices sind auf dem Vormarsch.
Man kann sowas auch *vernünftig* umsetzen, so dass es ohne Überlagerungen auskommt.
MfG ChrisB
Grundlage für Zitat #1806.
Hi ChrisB
Wenn du dir die Hände vor die Augen hältst, und „keiner kann mich sehen“ singst - dann gehörst du zumindest offenbar noch dort hin.
Was hat denn das mit Gunnars Mikroskopischer Browserfenstereinstellung zu tun?
Ich habe den Mittelteil wirklich klein gemacht. So klein wie du guckt keiner...
Mobile devices sind auf dem Vormarsch.
Ja, nur eine Vernünftige Webseite für Mobile-Devices ist fast gar nicht machbar, weil man auf den kleinen Dingern eh nicht vernünftig surfen kann - mho.
Man kann sowas auch *vernünftig* umsetzen, so dass es ohne Überlagerungen auskommt.
Die erste nutzvolle Aussage! :-)
Meinst du z. B. die Erde statt als img eher als Hintergrund einzusetzen, daß es hinter das Überschriftsbanner rutscht?
GRuß Gary
@@Gary:
nuqneH
Was hat denn das mit Gunnars Mikroskopischer Browserfenstereinstellung zu tun?
Was hat mein Browserfenster mit einem Mikroskop zu tun?
Meinst du z. B. die Erde statt als img eher als Hintergrund einzusetzen, daß es hinter das Überschriftsbanner rutscht?
Eher den Bereich so groß machen, dass gar nichts ins Rutschen kommt, sondern ein Scrollbalken erscheint.
Bei deiner div-Suppe wäre das mühsam abzuändern. Ich empfehle einen Neubau mit sinnvollem Markup und sinnvollem CSS.
Qapla'
Om nah hoo pez nyeetz, Gary!
Bei deiner div-Suppe wäre das mühsam abzuändern. Ich empfehle einen Neubau mit sinnvollem Markup und sinnvollem CSS.
und da noch keine Inhalte vorhanden sind, wäre ein Neubau auch wenig aufwändig.
Verzichte zum Beispiel auf "runde Ecken" für Browser, die das nicht darstellen können.
Matthias
Hi
Verzichte zum Beispiel auf "runde Ecken" für Browser, die das nicht darstellen können.
Die "runden" Ecken, die der "große" Rahmen nutzt gehen aber in jedem Browser - sind nämlich Bildchen...
Om nah hoo pez nyeetz, Gary!
Die "runden" Ecken, die der "große" Rahmen nutzt gehen aber in jedem Browser - sind nämlich Bildchen...
Gestaltung gehört ins CSS und nicht durch eine aberwitzige DIV-Suppe realisiert. Moderne Browser können border-radius oder border-image und so könntest du deine blaue Konstruktion mit maximal 2 Divs umsetzen - eins für den Kopf mit der Europaflagge und eins für den Inhalt. Dann hättest du auch nicht mehr das Problem, dass dein Inhalt bei kleinen Viewscreens in den Kopf geschoben wird.
Die Funktionalität wird in älteren Browsern trotzdem gewährleistet, und sie zeigen das an, was sie können, z.B. border-color.
Matthias
@@Matthias Apsel:
nuqneH
[…] und so könntest du deine blaue Konstruktion mit maximal 2 Divs umsetzen - eins für den Kopf mit der Europaflagge und eins für den Inhalt.
Dann sind zwei zwei zu viel.
body für den Inhalt und h1 für den Kopf.
Qapla'
Om nah hoo pez nyeetz, Gunnar Bittersmann!
[…] und so könntest du deine blaue Konstruktion mit maximal 2 Divs umsetzen - eins für den Kopf mit der Europaflagge und eins für den Inhalt.
Dann sind zwei zwei zu viel.
hab' ich gewusst, dass sowas kommt. Deshalb hab ich vorsichtshalber "maximal" verwendet.
Matthias
@@Gary:
nuqneH
Übrigens sollte es "Česky" heißen (mit kurzem 'y', nicht mit langem 'ý').
Danke - etwas früher wäre besser gewesen. Ich hab mir nen Wolf nach diesem spezial "Ypsilon" abgesucht ;-)
Dann benutzt du die falschen Werkzeuge. Unter Windows gibt es die Zeichentabelle, andere OS bieten Entsprechendes. Dann gibt es noch die Unicode character pickers …
PS.: Hab dein "y" geändert, obwohl so ein online Übersetzdingens gesagt hat es wäre das "y" mit dem strich obendrauf...
český ist die männliche Form des Adjektivs: tschechische(r/s); böhmische(r/s)
česky ist das Adverb: tschechisch; böhmisch
Ich habe den Mittelteil wirklich klein gemacht. So klein wie du guckt keiner...
Ich hatte lediglich den Firebug an und schon war dein Dilemma sichtbar.
Aber deine Seite hat noch einen weitaus schwerwiegenderen Mangel: einen konzeptionellen.
Das Sprachmenü füllt den Hauptteil aus, dabei sollte es für die meisten Benutzer gar nicht erforderlich sein.
Die eigentliche Navigation hingegen ist versteckt und nur mühsam zu finden. Mystery meat navigation?
Qapla'
Morgen Gunnar
Dann benutzt du die falschen Werkzeuge. Unter Windows gibt es die Zeichentabelle, andere OS bieten Entsprechendes. Dann gibt es noch die Unicode character pickers …
Über Open-Office-Word /Einfügen/Sonderzeichen...
Trotzdem keine Tastaturabkürzung gefunden wie z.B. Altg + 135 oder andere...
český ist die männliche Form des Adjektivs: tschechische(r/s); böhmische(r/s)
česky ist das Adverb: tschechisch; böhmisch
Für mich böhmische Dörfer. Aber ich weis jetzt schon, wer Korrekturlesen darf... :)
Ich hatte lediglich den Firebug an und schon war dein Dilemma sichtbar.
Firebug kenn ich nicht - muss aber ein heisser Käfer sein - wenn der brennt... *g*
Das Sprachmenü füllt den Hauptteil aus, [...]
Die eigentliche Navigation hingegen ist versteckt [...]
Ja klar, das war bis jetzt nicht ersichtlich, und du kannst das nicht wissen:
Die Navi ist so lange versteckt, bis der Nutzer _seine_ sprache wählt. Das ist also die Sprachwahl-Eingangsseite. Warum diese Lösung? Weil ich dem Nutzer nicht das Menü in irgendeiner Sprache servieren möchte, sondern in _seiner_ Sprache. Das geht dann aber nur, wenn man ihm - bis zur Sprachauswahl - eben gar kein Menü anzeigt.
Ich finde das logisch und respektvoller, als allen Erstbesuchern einfach mal "englisch" hinzuklatesch.
Gruß Gary
Dobrý den!
Dann benutzt du die falschen Werkzeuge. Unter Windows gibt es die Zeichentabelle, andere OS bieten Entsprechendes. Dann gibt es noch die Unicode character pickers …
Über Open-Office-Word /Einfügen/Sonderzeichen...
Trotzdem keine Tastaturabkürzung gefunden wie z.B. Altg + 135 oder andere...
Akzenttaste (neben dem ß) und dann y, so wie auch für á, é, í, ó und ú.
Viele Grüße vom Længlich
Hi Leanglich
Akzenttaste (neben dem ß) und dann y, so wie auch für á, é, í, ó und ú.
Cool - funktioniert sogar ;-)
Gruß
Gary
Hallo,
Die Navi ist so lange versteckt, bis der Nutzer _seine_ sprache wählt. Das ist also die Sprachwahl-Eingangsseite. Warum diese Lösung? Weil ich dem Nutzer nicht das Menü in irgendeiner Sprache servieren möchte, sondern in _seiner_ Sprache. Das geht dann aber nur, wenn man ihm - bis zur Sprachauswahl - eben gar kein Menü anzeigt.
och nööö, das hatten wir doch hier schon so oft. Viel sinnvoller ist es, den Accept-Language-Header auszuwerten und dem Besucher den Inhalt in einer der damit übermittelten Sprachen anzubieten, sofern er nicht aktiv eine andere Sprache gewählt hat.
Ich finde das logisch und respektvoller, als allen Erstbesuchern einfach mal "englisch" hinzuklatesch.
Ich finde es weder logisch noch respektvoll, eine Information einfach zu ignorieren, die in den meisten Fällen schon richtig wäre. Wenn ein Auto mit französischen Kennzeichen neben mir hält, gehe ich doch auch zunächst mal davon aus, dass ich mit diesen Leuten Französisch sprechen sollte (soweit ich kann).
Klar, man kann sich einige Fälle vorstellen, in denen man mit Language Negotiation im ersten Anlauf falsch liegt (Internet-Café, gemeinsam genutzter PC, aus Unwissenheit falsche Browsereinstellungen). Das dürfte sich aber im niedrigen einstelligen Prozentbereich bewegen, und gerade dann haben die Nutzer ja die Möglichkeit, zuerst mal ihre bevorzugte Sprache auszuwählen.
Ciao,
Martin
... Das dürfte sich aber im niedrigen einstelligen Prozentbereich bewegen, ...
und selbst wenn diese Schätzung wohl zu optimistisch ist, gilt
Ich finde es weder logisch noch respektvoll, eine Information einfach zu ignorieren, die in den meisten Fällen schon richtig wäre. Wenn ein Auto mit französischen Kennzeichen neben mir hält, gehe ich doch auch zunächst mal davon aus, dass ich mit diesen Leuten Französisch sprechen sollte (soweit ich kann).
Matthias
[latex]Mae govannen![/latex]
Ja klar, das war bis jetzt nicht ersichtlich, und du kannst das nicht wissen:
Die Navi ist so lange versteckt, bis der Nutzer _seine_ sprache wählt. Das ist also die Sprachwahl-Eingangsseite. Warum diese Lösung? Weil ich dem Nutzer nicht das Menü in irgendeiner Sprache servieren möchte, sondern in _seiner_ Sprache. Das geht dann aber nur, wenn man ihm - bis zur Sprachauswahl - eben gar kein Menü anzeigt.
Wenn ich auf eine Seite treffe, auf der _nur_ ein Sprachwahl-Menü zu sehen ist, dann verlasse ich diese höchstwahrscheinlich wieder, denn mein Gedankengang ist "da scheint (noch)kein Inhalt zu sein, wieso sollte ich 'nichts' in einer anderen Sprache anzeigen lassen."
Cü,
Kai
@@Gary:
nuqneH
Die Navi ist so lange versteckt, bis der Nutzer _seine_ sprache wählt.
Nein!! Das sollte der Nutzer im Normalfall nicht tun müssen, weil das die Automatik für ihn erledigt. Warum also den Benutzer damit belasten?
Du liest dir jetzt mein Posting und vor allem den darin bereits verlinkten Artikel aufmerksam von vorn bis hinten durch.
BTW: Den Artikel bekommst du unter diesem URI in der deinen Browsereinstellungen entsprechenden Sprache ausgeliefert.
Weil ich dem Nutzer nicht das Menü in irgendeiner Sprache servieren möchte, sondern in _seiner_ Sprache.
Bis hierher richtig.
Das geht dann aber nur, wenn man ihm - bis zur Sprachauswahl - eben gar kein Menü anzeigt.
Die Sprachauswahl geht automatisch, also kannst du dem Nutzer sofort das Navigations-Menü anzeigen.
Und das Sprachauswahl-Menü, falls die Automatik in Ausnahmefällen nicht das für den Nutzer gewünschte Ergebnis brachte.
Qapla'
@@Gary:
nuqneH
Trotzdem keine Tastaturabkürzung gefunden wie z.B. Altg + 135 oder andere...
'ý' ist U+00FD, dezimal 253. Also geht unter Windows: [Alt]-Taste gedrückt halten und auf dem Nummernblock [0][2][5][3] eingeben.
Firebug kenn ich nicht
Nicht dein Ernst, oder? Falls doch: https://addons.mozilla.org/de/firefox/addon/1843/
Qapla'
Om nah hoo pez nyeetz, Gunnar Bittersmann!
Weg mit @class="grafiklink", das ist unnütz.
Wenn du den den Hover-Effekt nur für die Links in div[@class="zentrum-box-links"] und div[@class="zentrum-box-rechts"] haben willst, dann gib ihn eben nur für diese Links an:
Aber nur, falls in diesem Div keine unterschiedlich formatierten Links vorkommen sollen.
PS. Wer sagt, daß der CSS-Code möglichst klein bleiben muss? ;-)
Es ist unsinnig, den CSS-Code möglichst klein zu halten und dafür das Markup (an mehreren Stellen!!) aufzublähen.
Dann lieber einmalig einpaar Zeilen CSS mehr und dafür einfaches, schlankes Markup.
dennoch ist es sinnvoller, gleiche Eigenschaften für Elemente nur einmal anzugeben.
a {foo:bar; ....}
und dann für z.B. a:hover
oder a[quz]
oder a.baz
oder foo a
oder ... nur die zusätzlichen Angaben zu machen.
Matthias
Hi,
Frage am Rande:
Die Domain lautet euro-...
Es gibt eine Flagge der europäischen Union.
Die angegebenen Sprachen stammen alle aus dem europäischen Raum.
Also alles sehr europäisch.
Warum wird dann die amerikanische Seite des Erdballs gezeigt statt der europäischen?
cu,
Andreas
[latex]Mae govannen![/latex]
Frage am Rande:
Die Domain lautet euro-...
Es gibt eine Flagge der europäischen Union.
Die angegebenen Sprachen stammen alle aus dem europäischen Raum.Also alles sehr europäisch.
Warum wird dann die amerikanische Seite des Erdballs gezeigt statt der europäischen?
https://forum.selfhtml.org/?t=200996&m=1355695 :)
(Ja, es hat gedauert, bis ich das tatsächlich in einem seiner mindestens 6 oder 7 offenen Threads wiedergefunden habe)
Cü,
Kai