 Willkommen auf dem Portal für Mediengestalter
|
|
|
| Autor |
Nachricht |
franca
Threadersteller
Dabei seit: 19.06.2006
Ort: München
Alter: -
Geschlecht: 
|
Verfasst Fr 21.03.2008 18:18
Titel CSS-Navigation: background-image funktioniert nicht in IE |
  |
|
Die Navigation funktioniert im Firefox prima, aber im Internet Explorer ist sie gar nicht zusehen.
Der IE scheint die "width" nicht zu akzeptieren! D.h. wenn ich TEXT angebe als <a> dann erscheint das hintergrundbild... aber wenn kein Text drinnen steht, dann zeigt der IE nix...
gibt es einen Tag, der dem IE sagt, dass der Listenpunkt eine bestimmte Breite hat??
HIER DAS HTML:
| Code: | <body marginheight="0" marginwidth="0" topmargin="0" leftmargin="0"><table border="0" cellspacing="0" cellpadding="0" align="left" width="100%" >
<tr><td valign="top" ><img src="Bilder/Bilder/hg01_03.gif" width="193" height="31" /></td>
<td valign="top"> <div id="navcontainer">
<ul id="navlist">
<li class="one" <?php if ($thisPage=="home") echo " id=\"currentpageone\""; ?>><a href="index.php"></a></li>
<li class="two" <?php if ($thisPage=="uebermich") echo " id=\"currentpagetwo\""; ?>><a href="uebermich.php"></a></li>
<li class="three" <?php if ($thisPage=="portfolio") echo " id=\"currentpagethree\""; ?>><a href="portfolio.php"></a></li>
<li class="four" <?php if ($thisPage=="downloads") echo " id=\"currentpagefour\""; ?>><a href="downloads.php"></a></li>
<li class="five" <?php if ($thisPage=="impressum") echo " id=\"currentpagefive\""; ?>><a href="impressum.php"></a></li>
</ul>
</div>
</td>
<td valign="top" ><img src="Bilder/Bilder/hg01_09.gif" width="224" height="31" /></td>
</tr></table>
|
HIER DAS CSS:
| Code: |
body{
background-image:url(Bilder/Bilder/hg01_02.gif); background-repeat:repeat-x;
font-family: Arial, Helvetica, sans-serif;
font-size:0.8em;
color: #616161;
}
nav{
font-family:Georgia, "Times New Roman", Times, serif;
font-size:1em;
color: #616161;
}
.Stil1 {
color: #403A0B;
font-weight: bold;}
/*NAVIGATION*/
#navcontainer { margin-left: 0px; margin-top:-13px; width:100%;}
ul#navlist
{
margin-left: 0;
padding-left: 0;
white-space: nowrap;
}
#navlist li
{
display: inline;
list-style-type: none;
float: left;
}
/*NAVIGATION NUMMER 1*/
#navlist .one a { padding: 0px 83px 31px 0px; }
#navlist .one a:link, #navlist .one a:visited
{
background-image:url(Bilder/Bilder/hg01_04.gif);
background-position: top left;
background-repeat:no-repeat;
}
#navlist .one a:hover
{
background-image:url(Bilder/Bilder/hg02_04.gif);
background-position: top left;
background-repeat:no-repeat;
}
#navlist #currentpageone a
{
background-image:url(Bilder/Bilder/hg02_04.gif);
background-repeat:no-repeat;
}
/*NAVIGATION NUMMER 2*/
#navlist .two a { padding: 0px 116px 31px 0px;}
#navlist .two a:link, #navlist .two a:visited
{
background-image: url(Bilder/Bilder/hg01_05.gif);
background-repeat:no-repeat;
}
#navlist .two a:hover
{
background-image:url(Bilder/Bilder/hg02_05.gif);
background-repeat:no-repeat;
}
#navlist #currentpagetwo a
{
background-image:url(Bilder/Bilder/hg02_05.gif);
background-repeat:no-repeat;
}
/*NAVIGATION NUMMER 3*/
#navlist .three a { padding: 0px 120px 31px 0px; }
#navlist .three a:link, #navlist .three a:visited
{
background-image:url(Bilder/Bilder/hg01_06.gif);
background-repeat:no-repeat;
}
#navlist .three a:hover
{
background-image:url(Bilder/Bilder/hg02_06.gif);
background-repeat:no-repeat;
}
#navlist #currentpagethree a
{
background-image:url(Bilder/Bilder/hg02_06.gif);
background-repeat:no-repeat;
}
/*NAVIGATION NUMMER 4*/
#navlist .four a { padding: 0px 147px 31px 0px; }
#navlist .four a:link, #navlist .four a:visited
{
background-image:url(Bilder/Bilder/hg01_07.gif);
background-repeat:no-repeat;
}
#navlist .four a:hover
{
background-image:url(Bilder/Bilder/hg02_07.gif);
background-repeat:no-repeat;
}
#navlist #currentpagefour a
{
background-image:url(Bilder/Bilder/hg02_07.gif);
background-repeat:no-repeat;
}
/*NAVIGATION NUMMER 5*/
#navlist .five a { padding: 0px 127px 31px 0px; }
#navlist .five a:link, #navlist .five a:visited
{
background-image:url(Bilder/Bilder/hg01_08.gif);
background-repeat:no-repeat;
}
#navlist .five a:hover
{
background-image:url(Bilder/Bilder/hg02_08.gif);
background-repeat:no-repeat;
}
#navlist #currentpagefive a
{
background-image:url(Bilder/Bilder/hg02_08.gif);
background-repeat:no-repeat;
}
|
|
|
| |
  |
 |
StanLee
Dabei seit: 04.09.2005
Ort: Berlin
Alter: -
Geschlecht: 
|
Verfasst Fr 21.03.2008 18:59
Titel
|
|
|
Schon mal ' a { display: block; } ' versucht?
Die a-Tags haben keine Weite / Höhe,
bzw. die Weite / Höhe wird im Moment durch den Textinhalt und
Padding bestimmt.
|
|
| |
|
|
|
Anzeige
|
|
|
franca
Threadersteller
Dabei seit: 19.06.2006
Ort: München
Alter: -
Geschlecht:
|
Verfasst Fr 21.03.2008 19:17
Titel
|
|
|
Ja!! Das hilft schonmal!
Also nachdem ich nun den <a> jeweils eine width und eine height UND ein display:block; gegeben habe SEHE ich sie immerhin... die Positionierung lässt zu wünschen übrig... aber da muss ich jetzt malbissle Padding und margins "rumschubsen" 
auf alle fälle eine verbesserung - danke 
|
|
| |
|
|
franca
Threadersteller
Dabei seit: 19.06.2006
Ort: München
Alter: -
Geschlecht:
|
Verfasst Fr 21.03.2008 19:28
Titel SOLVED! |
|
|
HELDENHAFT!!!
Erstens ist mein Code jetzt viel "sauberer" weil: ich hatte echt die Padding/margin-übersicht verloren und zweitens: ALLES KLAPPT!! Danke StanLee!!!
Hast den richtigen Impuls gegeben!!!!!!!
Hier der funktionierende Code für die, die es interessiert:
HTML:
| Code: | <body marginheight="0" marginwidth="0" topmargin="0" leftmargin="0"><table border="0" cellspacing="0" cellpadding="0" align="left" width="100%" >
<tr><td valign="top" ><img src="Bilder/Bilder/hg01_03.gif" width="193" height="31" /></td>
<td valign="top"> <div id="navcontainer">
<ul id="navlist">
<li class="one" <?php if ($thisPage=="home") echo " id=\"currentpageone\""; ?>><a href="index.php"></a></li>
<li class="two" <?php if ($thisPage=="uebermich") echo " id=\"currentpagetwo\""; ?>><a href="uebermich.php"></a></li>
<li class="three" <?php if ($thisPage=="portfolio") echo " id=\"currentpagethree\""; ?>><a href="portfolio.php"></a></li>
<li class="four" <?php if ($thisPage=="downloads") echo " id=\"currentpagefour\""; ?>><a href="downloads.php"></a></li>
<li class="five" <?php if ($thisPage=="impressum") echo " id=\"currentpagefive\""; ?>><a href="impressum.php"></a></li>
</ul>
</div>
</td>
<td valign="top" ><img src="Bilder/Bilder/hg01_09.gif" width="224" height="31" /></td>
</tr></table> </body> |
CSS:
| Code: |
body{
background-image:url(Bilder/Bilder/hg01_02.gif); background-repeat:repeat-x;
font-family: Arial, Helvetica, sans-serif;
font-size:0.8em;
color: #616161;
}
nav{
font-family:Georgia, "Times New Roman", Times, serif;
font-size:1em;
color: #616161;
}
.Stil1 {
color: #403A0B;
font-weight: bold;}
/*NAVIGATION*/
body{
background-image:url(Bilder/Bilder/hg01_02.gif); background-repeat:repeat-x;
font-family: Arial, Helvetica, sans-serif;
font-size:0.8em;
color: #616161;
}
nav{
font-family:Georgia, "Times New Roman", Times, serif;
font-size:1em;
color: #616161;
}
.Stil1 {
color: #403A0B;
font-weight: bold;}
/*NAVIGATION*/
#navcontainer { margin:0; padding:0; width:100%;}
ul#navlist
{
margin: 0;
padding: 0;
white-space: nowrap;
}
#navlist li
{
display: block;
list-style-type: none;
float: left;
}
/*NAVIGATION NUMMER 1*/
#navlist .one a { padding: 0px; display: block;}
#navlist .one a:link, #navlist .one a:visited
{
background-image:url(Bilder/Bilder/hg01_04.gif);
background-position: top left;
background-repeat:no-repeat;
width:83px;
height:31px;
}
#navlist .one a:hover
{
background-image:url(Bilder/Bilder/hg02_04.gif);
background-position: top left;
background-repeat:no-repeat;
width:83px;
height:31px;
}
#navlist #currentpageone a
{
background-image:url(Bilder/Bilder/hg02_04.gif);
background-position: top left;
background-repeat:no-repeat;
width:83px;
height:31px;
}
/*NAVIGATION NUMMER 2*/
#navlist .two a { padding: 0px; display: block;}
#navlist .two a:link, #navlist .two a:visited
{
background-image: url(Bilder/Bilder/hg01_05.gif);
background-position: top left;
background-repeat:no-repeat;
width:116px;
height:31px;
}
#navlist .two a:hover
{
background-image:url(Bilder/Bilder/hg02_05.gif);
background-position: top left;
background-repeat:no-repeat;
width:116px;
height:31px;
}
#navlist #currentpagetwo a
{
background-image:url(Bilder/Bilder/hg02_05.gif);
background-position: top left;
background-repeat:no-repeat;
width:116px;
height:31px;
}
/*NAVIGATION NUMMER 3*/
#navlist .three a { padding: 0px; display: block; }
#navlist .three a:link, #navlist .three a:visited
{
background-image:url(Bilder/Bilder/hg01_06.gif);
background-repeat:no-repeat;
width:120px;
height:31px;
}
#navlist .three a:hover
{
background-image:url(Bilder/Bilder/hg02_06.gif);
background-repeat:no-repeat;
width:120px;
height:31px;
}
#navlist #currentpagethree a
{
background-image:url(Bilder/Bilder/hg02_06.gif);
background-repeat:no-repeat;
width:120px;
height:31px;
}
/*NAVIGATION NUMMER 4*/
#navlist .four a { padding: 0px; display: block;}
#navlist .four a:link, #navlist .four a:visited
{
background-image:url(Bilder/Bilder/hg01_07.gif);
background-repeat:no-repeat;
width:147px;
height:31px;
}
#navlist .four a:hover
{
background-image:url(Bilder/Bilder/hg02_07.gif);
background-repeat:no-repeat;
width:147px;
height:31px;
}
#navlist #currentpagefour a
{
background-image:url(Bilder/Bilder/hg02_07.gif);
background-repeat:no-repeat;
width:147px;
height:31px;
}
/*NAVIGATION NUMMER 5*/
#navlist .five a { padding: 0px; display: block;}
#navlist .five a:link, #navlist .five a:visited
{
background-image:url(Bilder/Bilder/hg01_08.gif);
background-repeat:no-repeat;
width:127px;
height:31px;
}
#navlist .five a:hover
{
background-image:url(Bilder/Bilder/hg02_08.gif);
background-repeat:no-repeat;
width:127px;
height:31px;
}
#navlist #currentpagefive a
{
background-image:url(Bilder/Bilder/hg02_08.gif);
background-repeat:no-repeat;
width:127px;
height:31px;
} |
Zuletzt bearbeitet von franca am Fr 21.03.2008 19:28, insgesamt 1-mal bearbeitet
|
|
| |
|
|
| |
|
|
| Ähnliche Themen |
[CSS] Background-image INE
[CSS] alt-tag für background-image?
CSS background-image mit em ?
CSS background-image
background-image & FF
IE und der z-index mit background-image
|
|
|
Du kannst keine Beiträge in dieses Forum schreiben.
Du kannst auf Beiträge in diesem Forum nicht antworten.
Du kannst an Umfragen in diesem Forum nicht mitmachen.
|
|
