Kurze Frage zu CSS

Seite 1 von 2 - Forum: Coding Stuff auf overclockers.at

URL: https://www.overclockers.at/coding-stuff/kurze_frage_zu_css_156917/page_1 - zur Vollversion wechseln!

nr1 schrieb am 20.01.2006 um 21:35

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 schrieb am 20.01.2006 um 21:56

Inline-Elemente werden nicht auf die ganze Zeilenbreite verbreitert. Probier "display:block".

nr1 schrieb am 20.01.2006 um 22:04

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 schrieb am 20.01.2006 um 22:06

Kann ich nicht nachvollziehen, bitte poste ein komplettes HTML-File, reduziert auf dein Problem.

nr1 schrieb am 20.01.2006 um 22:29

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 schrieb am 20.01.2006 um 22:39

Jo mei, wenn dich der Zeilenabstand stört, dann tu halt das weg.

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

nr1 schrieb am 20.01.2006 um 22:41

Zitat von that
Jo mei, wenn dich der Zeilenabstand stört, dann tu halt das weg.

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

Zitat

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

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

that schrieb am 20.01.2006 um 22:57

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 schrieb am 20.01.2006 um 23:05

@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 schrieb am 20.01.2006 um 23:13

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 schrieb am 20.01.2006 um 23:30

@iCA-: thx so funzts

murcielago schrieb am 20.01.2006 um 23:35

und warum funzts? weil das weg ist. :bash:

LESEN!

nr1 schrieb am 20.01.2006 um 23:53

Zitat von murcielago
und warum funzts? weil das weg ist.

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 " " weglassen kann.

LESEN!

murcielago schrieb am 20.01.2006 um 23:56

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 " " 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 " " zu entfernen).

nr1 schrieb am 20.01.2006 um 23:59

wie auch immer, auf jeden fall funzts jetzt