Beiträge von Als

Als

Update:
Ich habe nun herrausgefunden wie man es schafft das alle Buttons beim Internet explorer in einer Zeile sind.
Man musste die Die Buttons in ein li tag packen, anstelle viele verschiedene.
Nur ein Problem ist immer nur.
Ich krige es beim Internet Explorere nicht hin, das sich das Sub menu öffnet.

Als

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; }

Alles anzeigen

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>

Alles anzeigen

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

Beiträge von Als

Css Problem -Internet explorer

Css Problem -Internet explorer