Background & Infobox

[INTCASE]

Hi,

also, ich hab da mal ne Frage und ein Problem.

Zur Frage, ist es möglich, einem div gleich 4 background-img zugeben, sowie z.b. bei bordern, wo ich dann beispielsweise sagen kann, border-top; border-right; border-bottom; border-left; ?

Und mein derzeitiges Problem hab ich mit der Infobox von Selfhtml, ich hab dem a tag, das vor dem hovern zu sehen ist, ein background img zugewiesen, das ist aber erst nach einmaligem klicken zu sehen, so sieht der CSS code aus:

#box a {
text-align: center;
color:#000;
 background-image: url('../bild/backbox.gif');
 background-repeat: no-repeat;
text-decoration:none;
display:block;
width:150px;
height:25px;
padding:4px;}

#box a:hover {
color:black;
display:block;
 background-image: url('../bild/backbox.gif');
 background-repeat: no-repeat;
padding-top:4px;
text-decoration:none;}

#box a span {display:none;}

#box a:hover span {
position:absolute; top: 341px; left: 31.3%;
text-decoration:none;
display:block;
width:460px;
height: 160px;
padding-top:22px;
text-align: center;
color:black;
font-size: 17px;
background-image: url('../bild/spanback.gif');
 background-repeat: no-repeat;
}

im HTML formular ruf ich das ganze mit dem befehl:

<div id="box"><a href="#">Infobox<span>Text</span></a></div>

nur wie gesagt, das background img geht erst nach einmaligem klicken. Selbst das hovern Funktioniert, und das Bild, das für das hovern bestimmt ist wird beim hovern angezeigt, darum versteh ich auch nicht, was ich falsch mache.

Danke im voraus.

Grüße,
Engin
 GYRO

[Philip Ehret]

Hallo,

Zur Frage, ist es möglich, einem div gleich 4 background-img zugeben, sowie z.b. bei bordern, wo ich dann beispielsweise sagen kann, border-top; border-right; border-bottom; border-left; ?

Soweit ich weiß, nein. Du könntest jedoch ein Image machen, das in der mitte transparent ist.

Und mein derzeitiges Problem hab ich mit der Infobox von Selfhtml, ich hab dem a tag, das vor dem hovern zu sehen ist, ein background img zugewiesen, das ist aber erst nach einmaligem klicken zu sehen, so sieht der CSS code aus:

Hm, bei mir klappt das so. Probier mal.

#box a:visited
{
    url(dasbild);
}

Viele Grüße,
Philip

[INTCASE]

Hi,

Soweit ich weiß, nein. Du könntest jedoch ein Image machen, das in der mitte transparent ist.

es geht mir ja nicht um den Effek der border, ich hab mir überlegt, auf diese art runde Ecken hinzukriegen, ohne das Workarround mit den 5 div´s. Naja, mal schauen.

Hm, bei mir klappt das so. Probier mal.

#box a:visited
{
    url(dasbild);
}

nach dem visited geht es ja bei mir auch, nur wenn die Seite das erste mal aufgerufen wird, erscheint das img nicht, erst wenn man draufklickt, sozusagen activiert. Ich bräuchte da nen dauer active, das direkt beim betreten der Seite das img angezeigt wird, ich vesteh das nicht, ich hab das schon so oft gemacht.

Grüße,
Engin
 GYRO

[MudGuard]

Hi,

#box a:visited
{
    url(dasbild);
}

Das kann nicht funktionieren - background-image: muß vor das url.

cu,
Andreas

[INTCASE]

Hi,

Das kann nicht funktionieren - background-image: muß vor das url.

Auch mit background-image: geht es nicht. Hier hab ich mal ne Testseite hochgeladen, da kann man das Problem vielleicht genauer verstehen. Sowohl der IE, FF, Opera und Netscape 7.1 verhalten sich bei dem Phänomen gleich. Alle ausser IE zentrieren die Box auch nicht.

Grüße,
Engin
 GYRO

[Auge]

Hallo

Zur Frage, ist es möglich, einem div gleich 4 background-img zugeben, sowie z.b. bei bordern, wo ich dann beispielsweise sagen kann, border-top; border-right; border-bottom; border-left; ?

Nein. Einem HTML-Element kann nur ein Hintergrundbild zugewiesen werden.

Und mein derzeitiges Problem hab ich mit der Infobox von Selfhtml, ich hab dem a tag, das vor dem hovern zu sehen ist, ein background img zugewiesen, das ist aber erst nach einmaligem klicken zu sehen, so sieht der CSS code aus:

Woran das liegt, weiß ich nicht (ich kann keinen Fehler erkennen), aber ein Tip (am Rande):

Alle Eigenschaften für die verschiedenen Zustände des Links werden mehrfach deklariert. Diese kannst du auch zusammenfassen. Wobei du speziell in diesem Fall eigentlich keine Formatierung änderst (ist aber wohl für den IE nötig).

Außerdem solltest du mit a:focus auch die Tastaturnavigierer bedienen. Die können ja zu a:hover identische Formatierungen bekommen.

/* allgemeingueltige Formatierungen */  
#box a {  
text-align: center;  
color:#000;  
background-image: url('../bild/backbox.gif');  
background-repeat: no-repeat;  
text-decoration:none;  
display:block;  
width:150px;  
height:25px;  
padding:4px;  
}  
  
#box a:link {  
/* spezielle Formatierungen */  
}  
#box a:visited {  
/* spezielle Formatierungen */  
}  
#box a:focus {  
/* spezielle Formatierungen, z.B. andere Schriftfarbe */  
}  
#box a:hover {  
/* spezielle Formatierungen, z.B. andere Schriftfarbe */  
}

<div id="box"><a href="#">Infobox<span>Text</span></a></div>

nur wie gesagt, das background img geht erst nach einmaligem klicken. Selbst das hovern Funktioniert, und das Bild, das für das hovern bestimmt ist wird beim hovern angezeigt, darum versteh ich auch nicht, was ich falsch mache.

Meinst du das Hovern des Links (#box a:hover) oder die damit ausgelöste Anzeige des Infokastens(#box a:hover span)? Und überhaupt: Mit welchem Browser testest du eigentlich?

Tschö, Auge

[INTCASE]

Hi,

Nein. Einem HTML-Element kann nur ein Hintergrundbild zugewiesen werden.

OK, gut zu wissen, Danke.

Außerdem solltest du mit a:focus auch die Tastaturnavigierer bedienen. Die können ja zu a:hover identische Formatierungen bekommen.

ich habs jetzt so getestet

  
                                           #box a {  
text-align: center;  
color:#000;  
 background-image: url('../bild/backbox.gif');  
 background-repeat: no-repeat;  
text-decoration:none;  
display:block;  
width:150px;  
height:25px;  
padding-top:4px;}  
  
#box a:link  
{  
    url('../bild/backbox.gif');  
background-repeat: no-repeat;  
width:150px;  
height:25px;  
}  
#box a:visited  
{  
    url('../bild/backbox.gif');  
background-repeat: no-repeat;  
width:150px;  
height:25px;  
}  
#box a:focus  
{  
    url('../bild/backbox.gif');  
background-repeat: no-repeat;  
width:150px;  
height:25px;  
}  
#box a:visited  
{  
    url('../bild/backbox.gif');  
background-repeat: no-repeat;  
width:150px;  
height:25px;  
}  

<div id="box"><a href="#">Infobox<span>Text</span></a></div>

erfolglos:(

Meinst du das Hovern des Links (#box a:hover) oder die damit ausgelöste Anzeige des Infokastens(#box a:hover span)? Und überhaupt: Mit welchem Browser testest du eigentlich?

um (#box a:hover) geht es, im IE und FF teste ich, und irgendwie kriegens beide nicht gebacken, der IE nur mit cache, also beim ersten aufruf der Seite sieht man die Schrift "Infobox", wo drunter sich halt das img (background) befinden sollte, aber wie gesagt, es sollte sich darunter befinden.

Grüße,
Engin
 GYRO

[MudGuard]

Hi,

[code lang=css]
                                           #box a {
text-align: center;
color:#000;
background-image: url('../bild/backbox.gif');
background-repeat: no-repeat;
text-decoration:none;
display:block;
width:150px;
height:25px;
padding-top:4px;}

#box a:link
{
    url('../bild/backbox.gif');

Siehe https://forum.selfhtml.org/?t=149792&m=973158

background-repeat: no-repeat;
width:150px;
height:25px;

Die 3 sind überflüssig, ist ja schon für alle a definiert.

Analog für die anderen Pseudoklassen.

erfolglos:(

Kein Wunder.

cu,
Andreas

[INTCASE]

Hi,

hatte wohl ein cache problem, scheint jetzt zu laufen.
Danke nochmal.

Grüße,
Engin
 GYRO