Verweise funktionieren mit firefox nicht

komarovski · 07.04.2010

Hallo.

Ich habe eine Seite mit HTML und CSS erstellt. Alles funzt, ausser die Verweise "Kontakt" und "Impressum" an der unteren rechten Ecke der Seite. Wenn man mit der Maus ganz rechts über Impressum fährt geht es aber das ist ja nicht der Sinn der Sache, weil Kontakt kann man ja nicht anklicken. Jedoch nur bei Firefox. Beim IE ist alles ok. Die Seite kann man sich unter xxxx anschauen

Danke im Voraus und Grüsse aus Zürich

Der Quelltext der Seite:

HTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<link href="css/styles.css" rel="stylesheet" type="text/css" media="screen" />
</head>

<body>
    <div id="header">
        <ul id="navi">
            <li><a href="index.html">Startseite</a></li>
            <li><a href="Immobilien/immobilien.html">Immobilien</a></li>
            <li><a href="Bau/bau.html">Bau</a></li>
            <li><a href="Elektro/elektro.html">Elektro</a></li>
            <li><a href="Ueber_uns/ueber_uns.html">Über uns</a></li>
            <li><a href="Kontakt/kontakt.html">Kontakt</a></li>
        </ul>
    </div> 
    <!-- end of header -->
    
    <div id="content">
        <br />
        <h1></h1>
        <br />
        <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>
       </div> 
   
    <!-- end of content -->

    <div id="footer">
        <ul id="navi-top">
            <li class="noBorder"><a href="Impressum/impressum.html">Impressum</a></li>
            <li><a href="Kontakt/kontakt.html">Kontakt</a></li>
         </ul>
    <div id="copyright">      
        <p class="color">© </p>
    </div>
      </div> 
    
    <!-- end of footer -->


</body>
</html>

Die dazu gehörende CSS-Datei:

Code:

@charset "utf-8";
/* CSS Document */


    *{
        margin:0; padding: 0; border:0;    
    }
    
    p {
        font-family:"Trebuchet MS", Arial, Helvetica, sans-serif;
        margin: 0 49px;
    }
    
    h1 {
        margin: 0 49px;
        font-size:18px;
    }
    
    h3 {
        margin: 0 49px;
        
    }
    
    #html {
        
    }
    
    #body {
        font: "Trebuchet MS", Arial, Helvetica, sans-serif;
        color: #666;
    }    
    
    .noBorder {
    border:0!important;
    }
    
    .color {
        color:#999;    
    }
/*--------------------------------------------------------------------*/
    
    div#header {
        font-family:"Trebuchet MS", Arial, Helvetica, sans-serif;
        font-size: 14px;
        width: 813px;
        height: 184px;
        background: url(../images/bg-header.jpg) center 5px no-repeat;
        margin: 0 auto;
    }
    
    div#header ul#navi {
        position: relative;
        top: 154px;
        left: 49px;
        list-style: none;
        
    }
    
    div#header ul#navi li {
        padding: 0 80px 0 0;
        float: left;
        
    }
    
    div#header ul#navi li a {
        color: #999;
        text-decoration: none;
    }
    
    div#header ul#navi li a:hover,
    div#header ul#navi li.active a{
        color: #333;
        text-decoration: none;
    }
/*--------------------------------------------------------------------*/

    div#content {
        font-family:"Trebuchet MS", Arial, Helvetica, sans-serif;
        font-size: 12px;
        text-decoration:none;
        width: 813px;
        height: 326px;
        background: url(../images/bg-content.jpg) 0 no-repeat;
        margin: 0 auto;
        
    }
    
/*--------------------------------------------------------------------*/    
    
    div#footer {
        font-family:"Trebuchet MS", Arial, Helvetica, sans-serif;
        font-size: 10px;
        width: 813px;
        height: 20px;
        background: url(../images/bg-footer.jpg) 0 no-repeat;
        margin: 0 auto;
    }
    
    div#copyright {
        position: relative;
        top: 3px;
        left: -30px;
        text-transform: uppercase;
    }
    
    div#footer ul#navi-top {
        position: relative;
        list-style: none;
        top: 5px;
        right: 0;
    }
    
    div#footer ul#navi-top li {
        float: right    ;
        padding: 0 15px;
        border-right: 1px solid #999;
        line-height: 10px;
        text-transform: uppercase;
    }
    
    div#footer ul#navi-top li a{
        color: #999;
        text-decoration: none;
    }
    
    div#footer ul#navi-top li a:hover,
    div#footer ul#navi-top li.active a {
        text-decoration: none;
        color: #333;
    }

sokie · 07.04.2010

AW: Verweise funktionieren mit firefox nicht

das liegt an den Div #copyright, der die beiden floats überlagert. Eine Lösung wäre dem #copyright eine entsprechende width zu geben, dass das nicht geschieht.

vanilladragon · 07.04.2010

AW: Verweise funktionieren mit firefox nicht

Der Quelltext der Seite:

HTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>AXER AG, Immobilien, Bau, Elektro</title>
<link href="css/styles.css" rel="stylesheet" type="text/css" media="screen" />
</head>

<body>
    <div id="header">
        <ul id="navi">
            <li><a href="index.html">Startseite</a></li>
            <li><a href="Immobilien/immobilien.html">Immobilien</a></li>
            <li><a href="Bau/bau.html">Bau</a></li>
            <li><a href="Elektro/elektro.html">Elektro</a></li>
            <li><a href="Ueber_uns/ueber_uns.html">Über uns</a></li>
            <li><a href="Kontakt/kontakt.html">Kontakt</a></li>
        </ul>
    </div> 
    <!-- end of header -->
    
    <div id="content">
        <br />
        <h1>Willkommen auf der Seite von Axer AG</h1>
        <br />
        <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>
       </div> 
   
    <!-- end of content -->

<div  id="footer">
    <p>&copy; 2010 Axer AG</p>
     <ul>
      <li><a  href="Kontakt/kontakt.html">Kontakt</a></li>
       <li><a  href="Impressum/impressum.html">Impressum</a></li>
      </ul>  
</div>
    
    <!-- end of footer -->


</body>
</html>

Die dazu gehörende CSS-Datei:

Code:

@charset "utf-8";
/* CSS Document */


    *{
        margin:0; padding: 0; border:0;    
    }
    
    p {
        font-family:"Trebuchet MS", Arial, Helvetica, sans-serif;
        margin: 0 49px;
    }
    
    h1 {
        margin: 0 49px;
        font-size:18px;
    }
    
    h3 {
        margin: 0 49px;
        
    }
    
    #html {
        
    }
    
    #body {
        font: "Trebuchet MS", Arial, Helvetica, sans-serif;
        color: #666;
    }    
    
    .noBorder {
    border:0!important;
    }
    
    .color {
        color:#999;    
    }
/*--------------------------------------------------------------------*/
    
    div#header {
        font-family:"Trebuchet MS", Arial, Helvetica, sans-serif;
        font-size: 14px;
        width: 813px;
        height: 184px;
        background: url(../images/bg-header.jpg) center 5px no-repeat;
        margin: 0 auto;
    }
    
    div#header ul#navi {
        position: relative;
        top: 154px;
        left: 49px;
        list-style: none;
        
    }
    
    div#header ul#navi li {
        padding: 0 80px 0 0;
        float: left;
        
    }
    
    div#header ul#navi li a {
        color: #999;
        text-decoration: none;
    }
    
    div#header ul#navi li a:hover,
    div#header ul#navi li.active a{
        color: #333;
        text-decoration: none;
    }
/*--------------------------------------------------------------------*/

    div#content {
        font-family:"Trebuchet MS", Arial, Helvetica, sans-serif;
        font-size: 12px;
        text-decoration:none;
        width: 813px;
        height: 326px;
        background: url(../images/bg-content.jpg) 0 no-repeat;
        margin: 0 auto;
        
    }
    
/*--------------------------------------------------------------------*/    
    
[SIZE=2][COLOR=Red][FONT=Arial]#footer {     background:url("../images/bg-footer.jpg") 
            no-repeat; 
            font-size:10px; 
            height:20px; 
            width:813px; 
            margin:0 auto;  }
            
#footer ul {     float:right; 
                margin-right:30px; }
                
#footer ul li { display:inline; 
                padding:0 10px; }
                
#footer ul li a { color:#999999; }

#footer p { float:left; 
            color:#999999; }[/FONT][/COLOR][/SIZE]

Einige Fehler. Siehe Korrekturen oben. So funktionierts. Firebug (für FireFox) ist da ein nützliches Tool. DA kann man nämlich gut überprüfen, was da falsch ist.

vanilla

hubspe · 07.04.2010

AW: Verweise funktionieren mit firefox nicht

Hi,

erstmal dem zweiten li unten die Klasse .noboarder geben.

HTML:

div#copyright {
        text-transform: uppercase;
    }
    
    div#footer ul#navi-top {      
        list-style: none;
        float:right;       
    }
    
    div#footer ul#navi-top li {
        float: left;
        padding: 0 15px;
        border-right: 1px solid #999;
        line-height: 10px;
        text-transform: uppercase;
    }

So klappts auch im FF.
Warum da position:relative mit Positionsgaben vergeben wurde ist mir schleierhaft.

Navis die nach rechts sollen immer float:right; für ul und float:left für li geben, weil sich sonst die Reihenfolge in der Anzeige umkehrt.
So wirds dann in der Reihenfolge angezeigt wie es im Quelltext notiert wurde.

edit. zu langsam!

komarovski · 07.04.2010

AW: Verweise funktionieren mit firefox nicht

Ihr seit Genial. So schnell so viele Antworten und Lösungen. Ich bin begeistert.
Danke

Was meinst du mit Edit zu langsam? zu viel Code den man nicht braucht???

Ich muss sagen dass dies meine erste HTML selber geschriebene seite ist. Nicht schlecht für n Anfänger oder?

Du hattest Recht. Ich hab das position:relative; bei #copyright weggenommen und es funzt. nur verschiebt sich dann der text nach rechts und ich will es ja ganz links haben.

Ok ich hab Alles nochmal kontrolliert und jetzt geht es und der Code ist einigermassen sauberer.

CSS:

div#footer {
font-family:"Trebuchet MS", Arial, Helvetica, sans-serif;
font-size: 10px;
width: 813px;
height: 20px;
background: url(../images/bg-footer.jpg) 0 no-repeat;
margin: 0 auto;
}

div#footer p {
float: left;
margin-top: 3px;
margin-left: 20px;
text-transform: uppercase;
}

div#footer ul#navi-top {
position: relative;
list-style: none;
top: 3px;
right: 20px;
float: right;
}

div#footer ul#navi-top li {
float: left;
padding: 0 0 0 15px;
text-transform: uppercase;
}

div#footer ul#navi-top li a{
color: #999;
text-decoration: none;
}

div#footer ul#navi-top li a:hover,
div#footer ul#navi-top li.active a {
text-decoration: none;
color: #333;
}

Quelltext:

<div id="footer">

<p class="color">© 2010 Axer AG</p>

<ul id="navi-top">
<li><a href="Kontakt/kontakt.html">Kontakt</a></li>
<li><a href="Impressum/impressum.html">Impressum</a></li>
</ul>

</div>

Solla · 07.04.2010

AW: Verweise funktionieren mit firefox nicht

Hallo Komarovski,

ja also für die Erste Seite, die Du erstellt hast ist das wirklich nicht übel. Du fragst zwar nicht, wie man die Seite findet, aber ich hätte da einen Tipp für Dich! Ich finde es ein wenig schade, dass der Inhalt der Seite nicht vertikal zentriert ist.

Wenn Du dabei Hilfe brauchst in das für ne gute Idee hältst einfach noch mal posten.

B.G. und weiterhin viel Erfolg!
Solla

komarovski · 07.04.2010

AW: Verweise funktionieren mit firefox nicht

Cool, Kritiken sind immer Willkommen.

Meinst du dass ich die Links vertikal zentriere und die Textabsätze? Dass der Text oberhalb oder unterhalb der Bilder ist???

Oder wie darf ich das verstehen?

Gruss

hubspe · 08.04.2010

AW: Verweise funktionieren mit firefox nicht

Solla schrieb:
Ich finde es ein wenig schade, dass der Inhalt der Seite nicht vertikal zentriert ist.

ob man eine komplette Site horizontal und vertikal zentriert hängt i.d.R. von der Menge des Inhaltes ab.

Wenn man das macht dann hoffentlich nicht unter Verwendung dieses völlig überflüssigem position:absolute;