Hallo,
ich habe sehr wenig Ahnung was Css betrifft und wollte Fragen ob mir da jemand helfen könnte.
Folgendes Problem:
Ich habe eine Navi-leiste mit Css erstellt. Funktioniert auch gut in Firefox, wollte es dann im Internet Explorer ausprobieren und geht nicht.
Die Hovers funktionieren nicht und alles ist verruscht.
Nach einiger Zeit rumprobieren, konnte ich ein paar Fehler beheben. Ich komme aber einfach nicht weiter:-(.
Auf dem Bild ist es (öffentlich) zu sehen. Die 4 buttons sind komisch aufsteigend angeordnet und beim drüber gehen mit der Maus erscheint nicht das Submenu.
Und so sollte es eigentlich aussehen. -Ist aber auch noch nicht so gut gelungen und ein bisschen verrutscht.
Code:
Code
Css:
/* Allgemeine Eigenschaften-Text */
a:link { text-decoration:none; font-weight:bold; color:#f7f7f7 }
a:visited { text-decoration:none; font-weight:bold; color:#f7f7f7; }
/* Allgemeine Eigenschaften-Frames */
#Frame0 {
background-image:url('images/BgBody.png');
position:fixed;
left:0;
top:0px;
z-index:0;
min-heiht:800;
height:100%;
width:100%;
}
#Frame1 {
position:relative;
left:0;
top:150px;
z-index:1;
}
#Frame2 {
position:fixed;
background-image:url('images/schwarz.png');
width:100%;
z-index:2;
right:0;
}
#Frame2-1 {
left:0;
width:500;
top:10px;
z-index:3;
}
#Frame2-2 {
position:absolute;
top:0;
right:100;
z-index:5;
}
#Frame2-3 {
position:absolute;
top:0;
right:200;
z-index:4;
}
/* Allgemeine Eigenschaften-Navi */
ul.menua {
color:#f7f7f7;
padding:0;
margin:0;
list-style-type:none;
z-index:2;
width:100%;
min-width:950px;
height:90;
right:0;
}
/*Header*/
.menu1{
padding:0;
top:0;
margin-right:10;
z-index:2;
width:90;
height:90;
float:left;
right:0;
font-family:"Sans","Helvetica Neue",Helvetica,Arial,sans-serif
font-weight:700;
font-size:90px;
color:#f7f7f7;
}
.news{
padding:0;
top:-10;
margin-left:40;
margin-top:-30;
margin-right:10;
z-index:2;
width:100;
height:20;
float:left;
right:0;
font-family:"Sans","Helvetica Neue",Helvetica,Arial,sans-serif
font-weight:700;
font-size:90px;
color:#f7f7f7;
}
/* Buttons */
.menua1{
background-image:url('images/info3.png');
padding:0;
margin-right:10;
z-index:2;
width:90;
height:90;
float:right;
right:0;
}
.menub1{
background-image:url('images/projekt3.png');
padding:0;
margin-right:10;
z-index:2;
width:90;
height:90;
float:right;
right:0;
}
.menuc1{
background-image:url('images/per3.png');
padding:0;
margin-right:10;
z-index:2;
width:90;
height:90;
float:right;
right:0;
}
.menud1{
background-image:url('images/home3.png');
padding:0;
margin-right:10;
z-index:2;
width:90;
height:90;
float:right;
right:0;
font-family:"Sans","Helvetica Neue",Helvetica,Arial,sans-serif
font-weight:600;
font-size:20px;
color:#f7f7f7;
}
.schrift
{
width:33.33%;
padding:0;
margin-right:10;
right:0;
top:0;
font-family:"Sans","Helvetica Neue",Helvetica,Arial,sans-serif
font-weight:120;
font-size:20px;
color:#f7f7f7;
vertical-align:top;
}
.schrift a:hover
{
background-image:url('images/home3.png');
}
/* Hovers bei Buttons */
.menua1:hover{
position:relative;
width:90;
height:90;
background-image:url('images/info3h.png');
z-index:3;
}
.menub1:hover{
position:relative;
width:90;
height:90;
background-image:url('images/projekt3h.png');
z-index:3;
}
.menuc1:hover{
position:relative;
width:90;
height:90;
background-image:url('images/per3h.png');
z-index:3;
}
.menud1:hover{
position:relative;
width:90;
height:90;
background-image:url('images/home3h.png');
z-index:3;
}
ul.menua li a {
z-index:2;
padding:0px 0px;
display:block;
color:#fff;
text-decoration:none;
font:12px arial, verdana, sans-serif;
}
/* Schriftfarbe-Link */
/* Submenu */
ul.menua ul {
position:fixed;
left:-9999px;
top:-9999px;
list-style-type:none;
z-index:2;
}
/* Sub-menu */
ul.menua li:hover ul {
left:0px;
top:90;
background-image:url('images/schwarz.png');
padding:0px;
z-index:2;
width:100%;
}
/* Sub menu einstellungen (Abstand(top) nach oben), hintergrundbild, padding) */
ul.menua li:hover ul li a {
padding:5px;
display:block;
width:168px;
text-indent:15px;
background-image:url('images/schwarz1.png');
z-index:2;
}
ul.menua li:hover ul li a:hover { background:#005555; }Html:
HTML
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
<meta http-equiv="expires" content="0">
<meta name="author" content="Al. S.">
<meta name="description" content="Ein Projekt von Al. S.">
<meta name="keywords" lang="" content="Al, hobbyschmied">
<meta name="generator" content="Al. S.">
<link rel="stylesheet" type="text/css" href="images/s.css">
<link rel="stylesheet" type="text/css" href="images/ssb.css">
<title>Al, die Webseite</title>
<link rel="stylesheet" type="text/css" href="styles.css" />
</head>
<body marginwidth="0" marginheight="0" topmargin="0" leftmargin="0" background="images/background2.jpg" bgcolor="#cccccc" text="#000000" link="#000000" vlink="#000000" alink="#000000" bottommargin="0" rightmargin="0">
<div id="Frame0">
hallo
</div>
<div id="Frame2">
<ul class="menua">
<li class="menu1">AL:</li>
<li class="news"><marquee width="420" height="90" direction=down> und Blogs! Projekt, Updates, Programms </marquee></li>
<li class="menua1"><a href='#'></a>
<ul>
<li><table height="200"width="100%">
<tr>
<td class="schrift"><b>Mail</b><br><a href="#"><img src="images/mail3.png"></a><br>
Du hast Fragen, Probleme oder Anmerkungen? Dann schreib mir einfach. :)</td>
<td class="schrift"><b>Anzeige</b><br><a href="#"><img src="images/anzeige3.png"></a><br>
Probleme bei der Darstellung dieser Webseite? Hier gibts abhilfe.</td>
<td class="schrift"><b>Informationen</b><br><a href="#"><img src="images/info3.png"></a><br>
Hier gibt es Rund-um-Infos zur Seite. (Impressum und Co.)</td>
</tr>
</table>
</ul>
</li>
<li class="menub1"><a href='#'></a>
<ul>
<li><table height="200"width="100%">
<tr>
<td class="schrift"><h1>AL</h1><br><a href="#"><img src="images/al2.png"></a><br>
Hier gibts aktuelle EInblicke in eins meiner Projekte, Al -Die Homepage.</td>
<td class="schrift"><h1>Hobbyschmied</h1><br><a href="#"><img src="images/schmied3.gif"></a><br>
Alle Infos zum Hobbyschmied.</td>
<td class="schrift"><h1>Informationen</h1><br><a href="#"><img src="images/info3.png"></a><br>
Hier gibt es Rund-um-Infos zur Seite. (Impressum und Co.)</td>
</tr>
</table>
</ul>
</li>
<li class="menuc1"><a href='#'></a>
<ul>
<li><table height="200"width="100%">
<tr>
<td class="schrift"><h1>Blog</h1><br><a href="#"><img src="images/blog3.png"></a><br>
Hier gibt's spannende Blogeinträge, sowie auch Einblicke in meine Arbeiten (Programmierung). ;)</td>
<td class="schrift"><h1>Favorites</h1><br><a href="#"><img src="images/herz3.png"></a><br>
Technischeres Zeugs das ich empfehlen kann. Der Downloadbereich.</td>
<td class="schrift"><h1>Informationen</h1><br><a href="#"><img src="images/info3.png"></a><br>
Hier gibt es Rund-um-Infos zur Seite. (Impressum und Co.)</td>
</tr>
</table>
</ul>
</li>
<li class="menud1"><a href='#'></a>
<ul>
<li><table height="200"width="100%">
<tr>
<td class="schrift"><h1>Informationen</h1><br><a href="#"><img src="images/info3.png"></a><br>
Hier gibt es Rund-um-Infos zur Seite. (Impressum und Co.)</td>
<td class="schrift"><h1>Forum</h1><br><a href="#"><img src="images/forum3.png"></a><br>
Hier kommst du direkt zum Forum, wo du fragen stellen und beantworten kannst. ;)</td>
<td class="schrift"><h1>Gästebuch</h1><br><a href="#"><img src="images/chat3.png"></a><br>
Trag dich ins Gästebuch ein, un gib mir Feedback.</td>
</tr>
</table>
</ul>
</li>
</ul>
Der Code geht im Html noch ein bisschen weiter, aber das wird eher unwichtig...glaub' ich.
Das ist meine erste CSS-Seite, daher bin ich für jegliche Erklärungen bei Lösungen sehr Dankbar
MfG
Als