Geht es nicht in Opera?

[Jan]

Hallo,
Ich habe gerade mächtig spass an css und bastel aus dem grund an einer seite zu diesem thema um es "cssnichtnutzern" etwas näher zu bringen.
ich habe ein menu erstellt bei dem bei linkberührung ein text an einer anderen stelle der seite eingeblendet wird.
das problem: der opera macht es nicht.

aufgebaut ist das menu so:
der entscheidende teil css

#left a .info {display: none;}

#left a:hover .info
{
color: black;
background: transparent;
display: block;
position: absolute;
top: 0px;
left: 0px;
width: 203px;
height:140px;
padding-left: 2px;
padding-top:21px;
padding-right:5px;
font: 14px courier, sans-serif;
text-align:left;
line-height:17px;
}

im html-teil:

<div id="left">
<a href="index.htm">linkname
<span class="info">Hier der einzublendende text</span>
</a>
</div>

ist es einfach so, dass opera mit solchen selectoren (#left a:hover .info ) nicht umgehen kann oder kann ich es irgenwie so hinbiegen, dass auch opera das gebacken bekommt?

mfg, jan aus dresden

[Orlando]

Hi Jan,

ist es einfach so, dass opera mit solchen selectoren (#left a:hover .info ) nicht umgehen kann

ja, leider.

oder kann ich es irgenwie so hinbiegen, dass auch opera das gebacken bekommt?

Nein, wohl erst mit Version 7.

LG Orlando

[Jan]

Hallo,

ist es einfach so, dass opera mit solchen selectoren (#left a:hover .info ) nicht umgehen kann

ja, leider.

oder kann ich es irgenwie so hinbiegen, dass auch opera das gebacken bekommt?

Nein, wohl erst mit Version 7.

Danke für die antwort, dann kann er es halt nicht, es ist zum gebrauch der seite zum glück nicht zwingend notwendig.

mfg, jan aus dresden

[stefan]

hi Jan,

Ich habe gerade mächtig spass an css

ich auch :)

und bastel aus dem grund an einer seite zu diesem thema um es "cssnichtnutzern" etwas näher zu bringen.

coole sache, sehr vorbildlich :)

im html-teil:

<div id="left">
<a href="index.htm">linkname
<span class="info">Hier der einzublendende text</span>
</a>
</div>

vielleicht geht ja was in der art:

css:
#left {background:#FFFFFF}
#linkname {color: black}

a.left {background: transparent;
display: block;
position: absolute;
top: 0px;
left: 0px;
width: 203px;
height:140px;
padding-left: 2px;
padding-top:21px;
padding-right:5px;
font: 14px courier, sans-serif;
text-align:left;
line-height:17px;
}

a.left:link {color:#FFFFFF}
a.left:visited {color:#FFFFFF}
a.left:hover {color: black}

html:

<div id="left">
<a href="index.htm" class="left">
<span id="linkname">linkname</span>
hier der einzublendende text
</a>
</div>

wichtig ist, dass background von #left und color von a.left:link und a.left:hover gleich sind.
dann sieht es so aus als würde der text erscheinen, in wirklichkeit ändert der aber nur seine farbe und wird so sichtbar.
ich habs nicht getestet, musst mal gucken obs so (oder so ähnlich) geht.

mfg
stefan

[Jan]

Hallo,

vielleicht geht ja was in der art:

css:
#left {background:#FFFFFF}
#linkname {color: black}

a.left {background: transparent;
display: block;
position: absolute;
top: 0px;
left: 0px;
width: 203px;
height:140px;
padding-left: 2px;
padding-top:21px;
padding-right:5px;
font: 14px courier, sans-serif;
text-align:left;
line-height:17px;
}

a.left:link {color:#FFFFFF}
a.left:visited {color:#FFFFFF}
a.left:hover {color: black}

html:

<div id="left">
<a href="index.htm" class="left">
<span id="linkname">linkname</span>
hier der einzublendende text
</a>
</div>

wichtig ist, dass background von #left und color von a.left:link und a.left:hover gleich sind.
dann sieht es so aus als würde der text erscheinen, in wirklichkeit ändert der aber nur seine farbe und wird so sichtbar.
ich habs nicht getestet, musst mal gucken obs so (oder so ähnlich) geht.

Ich glaube, dass das nicht so ganz funktionieren würde, so sieht es praktisch aus (die grafik braucht einen moment, 50kb) http://www.fractatulum.de/fraccss/

ich will ja den text auf einer beliebigen stelle des fensters einblenden. hier noch mal der komplette css-teil, der für das menu zuständig ist:

#left
{
color:maroon;
float:left;
padding-bottom:20px;
padding-top:20px;
padding-left:2px;
padding-right:5px;
background-color : #CDC6AD;
margin-right : 0px;
margin-top:30px;
margin-bottom : 0px;
margin-left:5px;
line-height : 19px;
border-top: 1px solid #E4D9C0;
border-right: 1px solid #99917D;
border-bottom: 1px solid #99917D;
border-left: 1px solid #E4D9C0;
}

#left a
{
color : maroon;
font-family : tahoma, arial, verdana, helvetica, sans-serif;
font-size : 90%;
margin-bottom:8px;
padding-left:4px;
padding-right:3px;
font-weight : bold;
text-decoration : none;
background-color : #CDC6AD;
display:block;
border-top: 1px solid #99917D;
border-right: 1px solid #E4D9C0;
border-bottom: 1px solid #E4D9C0;
border-left: 1px solid #99917D;
width:155px;
}

#left a:active
{
color : maroon;
background-color : #b8ab8f;
}

#left a:visited
{
color : maroon;
background-color : #CDC6AD;
}

#left a:hover
{
color : #F9F3DD;
text-decoration : none;
background-color : #CDC6AD;
border-top: 1px solid #E4D9C0;
border-right: 1px solid #99917D;
border-bottom: 1px solid #99917D;
border-left: 1px solid #E4D9C0;
}

#left a .hov
{
color : #A59A81;
background-color : transparent;
font-size : 17px;
}

#left a:hover .hov
{
color : maroon;
background-color : transparent;
font-size : 17px;
}

#left a .info {display: none;}

#left a:hover .info
{
color: black;
background: transparent;
display: block;
position: absolute;
top: 0px;
left: 0px;
width: 203px;
height:140px;
padding-left: 2px;
padding-top:21px;
padding-right:5px;
font: 14px courier, sans-serif;
text-align:left;
line-height:17px;
}

ja, das ist das menu, .info ist dafür da, den text an der entsprechenden stelle ein bzw. auszublenden. der text wird auch auf einem hintergrudbild eingeblendet, so dass das mit der farbe auch nicht gehen würde.

aber trotzdem danke und grüsse aus dresden, jan

[stefan]

hi,

schade. warscheinlich brauchst du dann doch javaScript oder so. falls du doch noch ne css-lösung finden solltest, wärs nett wenn du sie  posten würdest, denn die idee ist interessant.

mfg
stefan

[Orlando]

Hi Jan,

erstmal mein Kompliment für diese ausgesprochen schöne Site. Sie ist grafisch anspruchsvoll und dennoch nicht überladen, auch technisch ist sie bereits sehr gut. Ich habe dennoch einige Verbesserungsvorschläge:

Verwende für das Menü besser HTML-Listen, ohne CSS stehen die Menüpunkte sonst nebeneinander und nicht untereinander. Listen sind viel übersichtlicher und wären auf deinen Seiten auch angebracht: http://selfhtml.teamone.de/html/text/listen.htm

Bei den einzelnen Code-Beispielen könntest du noch direkte Links zu den anderen Beispielen einbauen und beim angeführten Quellcode das Element <code> statt <pre> verwenden: http://selfhtml.teamone.de/html/referenz/elemente.htm#code Speziell beim innerhalb des Fließtextes angegebenen Quellcode ist dies logischer als ein einfaches <i>, es sieht auch besser aus ;)

#left a .hov
#left a:hover .hov
#left a .info
#left a:hover .info

Tja, das kann Opera leider noch nicht, das *muss* aber mit Version 7 möglich sein. Für Opera <7 müsstest du mit Javascript arbeiten und zunächst versteckte DIVs bei Bedarf einblenden, das kann er nämlich. Wenn du das verständlicherweise nicht willst, kannst du die Zusatzinformation jeweils in das title-Attribut der Menü-Links packen, sodass sie mit Opera wenigstens auf diesem Weg zugänglich sind. Der Nachteil dieser Methode ist allerdings, dass dann auch andere Browser diese Information im Tooltip anzeigen - und somit doppelt.

Deine Browserweiche funktioniert gut, aber du könntest noch etwas HTTP-Overhead sparen, wenn du alles in einem einzigen Stylesheet definierst (zunächst ganz normal das, was Netscape 4 zusammenbringt) und dann in einem Media-Bereich die zusätzlichen Definitionen unterbringst. So muss nur eine CSS-Datei geladen werden.

Ein Druck-Layout wäre noch toll, das lässt sich beispielsweise mit

@media print {

#left, #head, #foot {
    display:none;
  }

h1, a {
    color:#000;
    background-color:transparent;
  }

#cont {
    border:0;
  }

}

hervorragend innerhalb des gleichen Stylesheets realisieren.

Weiters wäre es toll, wenn du das Menü noch mit

body>#left {
  position:fixed;
}

für bessere Browser fixieren würdest. Den Selektor versteht der M$IE ebensowenig wie position:fixed, mit dieser Methode verwirrst du ihn wenigstens nicht zusätzlich ;) Achja, irgendwo hast du Selector geschrieben, ich würde hier Selektor vorziehen.

Deine Seiten behandeln Themen, die auch im SELF-Raum vorhanden sind, vielleicht magst du ja http://aktuell.de.selfhtml.org/artikel/css/mouseover/ und http://aktuell.de.selfhtml.org/tippstricks/css/browserweiche/ verlinken.

Wunderbar finde ich auch das Beispiel http://www.fractatulum.de/fraccss/sample/menu2format.htm. Hm, wenn ich so darüber nachdenke, würde sich dieses Thema hervorragend für den CSS-Bereich der neuen Rubrik Tipps+Tricks (http://aktuell.de.selfhtml.org/tippstricks/) eignen. Wenn du Lust hast, einen Beitrag an prominenter Stelle zu platzieren, melde dich bitte bei mir.

Es ist schade, dass die hier im Forum zur Bewertung vorgeschlagenen Seiten nichtmal annähernd diese Qualität erreichen. Weiter so :)

LG Orlando

[Jan]

Hallo,

erstmal mein Kompliment für diese ausgesprochen schöne Site. Sie ist grafisch anspruchsvoll und dennoch nicht überladen, auch technisch ist sie bereits sehr gut.

Vielen dank für die blumen.

»»Ich habe dennoch einige Verbesserungsvorschläge:
das ist schön.

Verwende für das Menü besser HTML-Listen, ohne CSS stehen die Menüpunkte sonst nebeneinander und nicht untereinander. Listen sind viel übersichtlicher und wären auf deinen Seiten auch angebracht: http://selfhtml.teamone.de/html/text/listen.htm

Auf listen bin ich noch gar nicht gekommen, gute idee, mich hat es auch gestört, dass die links so unübersichtlich und auch noch mit den beschreibungen nebeneinander stehen. werd ich testen.

Bei den einzelnen Code-Beispielen könntest du noch direkte Links zu den anderen Beispielen einbauen und beim angeführten Quellcode das Element <code> statt <pre> verwenden: http://selfhtml.teamone.de/html/referenz/elemente.htm#code Speziell beim innerhalb des Fließtextes angegebenen Quellcode ist dies logischer als ein einfaches <i>, es sieht auch besser aus ;)

Auf <code> bin ich auch nicht gekommen, das ist auch besser, da da ein zeilenumbruch möglich ist und nicht wie bei <pre> alles unverändert bleibt, das werde ich auf jeden fall ändern.

#left a .hov
#left a:hover .hov
#left a .info
#left a:hover .info

Tja, das kann Opera leider noch nicht, das *muss* aber mit Version 7 möglich sein. Für Opera <7 müsstest du mit Javascript arbeiten und zunächst versteckte DIVs bei Bedarf einblenden, das kann er nämlich. Wenn du das verständlicherweise nicht willst, kannst du die Zusatzinformation jeweils in das title-Attribut der Menü-Links packen, sodass sie mit Opera wenigstens auf diesem Weg zugänglich sind. Der Nachteil dieser Methode ist allerdings, dass dann auch andere Browser diese Information im Tooltip anzeigen - und somit doppelt.

Javascript möchte ich auf der seite mal ganz rauslassen (außer das kleine im formular).
Der tooltip würde gehen aber ich glaube, dass es in den anderen browsern nicht so gut passen würde (mozilla hat da eine zeichenzahl begrenzung) und so essentiell/wichtig ist das ja auch nicht.

Deine Browserweiche funktioniert gut, aber du könntest noch etwas HTTP-Overhead sparen, wenn du alles in einem einzigen Stylesheet definierst (zunächst ganz normal das, was Netscape 4 zusammenbringt) und dann in einem Media-Bereich die zusätzlichen Definitionen unterbringst. So muss nur eine CSS-Datei geladen werden.

Die idee hatte ich am anfang auch aber ich hatte mich dann doch für die zwei .css entschieden weil ich es für mich persönlich etwas besser zu handhaben fand.

Ein Druck-Layout wäre noch toll, das lässt sich beispielsweise mit

@media print {

#left, #head, #foot {
    display:none;
  }

h1, a {
    color:#000;
    background-color:transparent;
  }

#cont {
    border:0;
  }

}

Das drucklayout kommt auf jeden fall noch.

Weiters wäre es toll, wenn du das Menü noch mit

body>#left {
  position:fixed;
}

für bessere Browser fixieren würdest. Den Selektor versteht der M$IE ebensowenig wie position:fixed

das mit dem fixed hatte ich am anfang drin aber klassisch eingebunden, "fixed" ist ja wirklich eine tolle sache, ich hatte aber das problem, dass die linkinfos (absolut positioniert) im mozilla wo anders landeten als vorgesehen, er hat die angaben left und top nicht vom browserrand gemessen daher hatte ich das fixed nach stunden des probierens wieder rausgenommen. aber mich wurmt das immer noch und bin am probieren, ich werde mit deinem vorschlag auch noch etwas testen.

Deine Seiten behandeln Themen, die auch im SELF-Raum vorhanden sind, vielleicht magst du ja http://aktuell.de.selfhtml.org/artikel/css/mouseover/ und http://aktuell.de.selfhtml.org/tippstricks/css/browserweiche/ verlinken.

Bestimmt, ich werde die inhalte fertig machen (soweit man von fertig eigentlich sprechen kann) und dann sehen wo sinnvollerweise links gesetzt werden.

Wunderbar finde ich auch das Beispiel http://www.fractatulum.de/fraccss/sample/menu2format.htm. Hm, wenn ich so darüber nachdenke, würde sich dieses Thema hervorragend für den CSS-Bereich der neuen Rubrik Tipps+Tricks (http://aktuell.de.selfhtml.org/tippstricks/) eignen. Wenn du Lust hast, einen Beitrag an prominenter Stelle zu platzieren, melde dich bitte bei mir.

OH, ich werde es mir merken und mal sehen.

Es ist schade, dass die hier im Forum zur Bewertung vorgeschlagenen Seiten nichtmal annähernd diese Qualität erreichen. Weiter so :)

Ich werde so weiter machen ;).

Danke für die vielen tips, ich denke, dass eine seite die sich mit diesm thema beschäftigt selbst ein vorbild sein sollte und da sind solche tips natürlich gold wert.

mfg, jan aus dresden