"We are back" « oc.at

Kurze Frage zu CSS

kurtm1 20.01.2006 - 21:35 974 15
Posts

nr1

Here to stay
Avatar
Registered: Dec 2003
Location: AT
Posts: 618
Es geht darum Links mit CSS zu formatieren. Kenne mich damit aus, und habe schon das gewünschte Ergebnis, allerdings wird dieses (wie so oft) nur von einem Browser richtig dargestellt, in diesem Fall IEXplorer.

Code: PHP
<style type="text/css">
a:link 
{color: FFFFFF;}
a:active {color: FFFFFF;}
a:visited {color: FFFFFF;}
a:hover 
{
color: gray;
background-color:rgb(37,39,44);
width:100%;
font-weight:bold;
} 
</style>

Das ist der Code. Beim hovern über einen Link, soll die ganze Zeile des links anders eingefärbt werden (background-color:rgb(37,39,44);).
"width:100%;" ist dazu da, dass der eingefärbte Bereich auch wirklich über die ganze Breite geht.

Dies funzt im IExplorer alles ohne Probleme, im Firefox wird jedoch nur der Bereich des "wirkliche" Links eingefärbt, und nicht auch die restliche Zeile.

Tipps?

that

Hoffnungsloser Optimist
Avatar
Registered: Mar 2000
Location: MeidLing
Posts: 11343
Inline-Elemente werden nicht auf die ganze Zeilenbreite verbreitert. Probier "display:block".

nr1

Here to stay
Avatar
Registered: Dec 2003
Location: AT
Posts: 618
Zitat von that
Inline-Elemente werden nicht auf die ganze Zeilenbreite verbreitert. Probier "display:block".

hab ich probiert, damit funzts es jetzt in beiden browsern (FF,IEXplorer), allerdings wird dann unter dem Link ein leerer Bereich generiert, und alles andere daher nach unten geschoben

that

Hoffnungsloser Optimist
Avatar
Registered: Mar 2000
Location: MeidLing
Posts: 11343
Kann ich nicht nachvollziehen, bitte poste ein komplettes HTML-File, reduziert auf dein Problem.

nr1

Here to stay
Avatar
Registered: Dec 2003
Location: AT
Posts: 618
ok hier mal der code:

Code: PHP
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<style type="text/css">
a:link 
{color: FFFFFF;}
a:active {color: FFFFFF;}
a:visited {color: FFFFFF;}
a:hover 
{
color: gray;
background-color:rgb(37,39,44);
font-weight:bold;
<?--Hier muss irgendwas rein, damit das einfärben der Zeile bei beiden Browsern funzt ->
} 
</style>
</head>
<body bgcolor=#333333 text="#FFFFFF" link="#FFFFFF" vlink="#FFFFFF" alink="#FFFFFF">
<font face="verdana" size="2">
<table style="text-align: left; width: 100%;" border="0" cellpadding="0" cellspacing="0">
    <tr>
      <td bgcolor="black" align="center"><font face="verdana" color="#ffffff" size="2">.:NAVI:.</font></td>
    </tr>
</table>
<a href="file:///irgendeins" target="content">> Home</a><br>
<a href="file:///irgendeins" target="content">> Home</a><br>
<a href="file:///irgendeins" target="content">> Home</a><br>
<a href="file:///irgendeins" target="content">> Home</a><br>
<a href="file:///irgendeins" target="content">> Home</a><br>
<a href="file:///irgendeins" target="content">> Home</a><br>
</font>
</body>
</html>

Wie gesagt, es geht eigentlich nur drum, den Hintergrund der Zeile in dem der Link steht einzüfärben (auf die ganze Breite)

that

Hoffnungsloser Optimist
Avatar
Registered: Mar 2000
Location: MeidLing
Posts: 11343
Jo mei, wenn dich der Zeilenabstand stört, dann tu halt das <br> weg. :D

Und du solltest das <font> und die Farb-Attribute ins CSS migrieren.

nr1

Here to stay
Avatar
Registered: Dec 2003
Location: AT
Posts: 618
Zitat von that
Jo mei, wenn dich der Zeilenabstand stört, dann tu halt das <br> weg. :D

Ähm ja, danke für die Hilfe, nur wäre das leider ein wenig unsinnig

Zitat

Und du solltest das <font> und die Farb-Attribute ins CSS migrieren.

Das weiß ich eh, ist nur mal ein Versuchs-Beispiel

that

Hoffnungsloser Optimist
Avatar
Registered: Mar 2000
Location: MeidLing
Posts: 11343
Zitat von kurtm1
Ähm ja, danke für die Hilfe, nur wäre das leider ein wenig unsinnig

Hm? Ich dachte, dich stört

Zitat
allerdings wird dann unter dem Link ein leerer Bereich generiert, und alles andere daher nach unten geschoben

?

nr1

Here to stay
Avatar
Registered: Dec 2003
Location: AT
Posts: 618
@that: probier mal meinen geposteten code, und gib bei dem hover effekt dein 'display:block;' dazu, dann wirst du sehen, was das problem ist

ica

hmm
Avatar
Registered: Jul 2002
Location: Graz
Posts: 9822
Code: PHP
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<style type="text/css">
a:link 
{color: FFFFFF;display:block;}
a:active {color: FFFFFF;display:block;}
a:visited {color: FFFFFF;display:block;}
a:hover 
{
color: gray;
background-color:rgb(37,39,44);
font-weight:bold;
display:block;
} 
</style>
</head>
<body bgcolor=#333333 text="#FFFFFF" link="#FFFFFF" vlink="#FFFFFF" alink="#FFFFFF">
<font face="verdana" size="2">
<table style="text-align: left; width: 100%;" border="0" cellpadding="0" cellspacing="0">
    <tr>
      <td bgcolor="black" align="center"><font face="verdana" color="#ffffff" size="2">.:NAVI:.</font></td>
    </tr>
</table>
<a href="file:///irgendeins" target="content">> Home</a>
<a href="file:///irgendeins" target="content">> Home</a>
<a href="file:///irgendeins" target="content">> Home</a>
<a href="file:///irgendeins" target="content">> Home</a>
<a href="file:///irgendeins" target="content">> Home</a>
<a href="file:///irgendeins" target="content">> Home</a>
</font>
</body>
</html> 

nr1

Here to stay
Avatar
Registered: Dec 2003
Location: AT
Posts: 618
@iCA-: thx so funzts

murcielago

Dr. Doom
Avatar
Registered: Oct 2002
Location: *
Posts: 2692
und warum funzts? weil das <br> weg ist. :bash:

LESEN!

nr1

Here to stay
Avatar
Registered: Dec 2003
Location: AT
Posts: 618
Zitat von murcielago
und warum funzts? weil das <br> weg ist. :bash:

LESEN!

Nein, sondern weil ICA- bei jeder Link Definition "display:block;" dabei hat, ich das aber nur beim hover hatte. Das ist auch der Grund warum man jetzt das "<br>" weglassen kann.

LESEN! ;)

murcielago

Dr. Doom
Avatar
Registered: Oct 2002
Location: *
Posts: 2692
Zitat von kurtm1
Nein, sondern weil ICA- bei jeder Link Definition "display:block;" dabei hat, ich das aber nur beim hover hatte. Das ist auch der Grund warum man jetzt das "<br>" weglassen kann.

LESEN! ;)

alles was "that" gepostet hat, war richtig. du hast es nur falsch umgesetzt, aber behauptet dass es sinnfrei wäre, das einzubauen was er vorgeschlagen hatte (eben das "<br>" zu entfernen).

nr1

Here to stay
Avatar
Registered: Dec 2003
Location: AT
Posts: 618
wie auch immer, auf jeden fall funzts jetzt :D
Kontakt | Unser Forum | Über overclockers.at | Impressum | Datenschutz