Christian Korneck: Rahmen um Navigationsleiste

SELF-Forum

Rahmen um Navigationsleiste

Christian Korneck
– Informationen zu den Bewertungsregeln

Guten Tag,

ich habe Probleme bei der Erstellung eines Rahmens um eine
horizontale Navigationsleiste:
http://freenet-homepage.de/testing_website/1.htm

Beim Internet-Explorer schneidet die div-Ebene den unteren Bereich
der 2 Links ab, beim Firefox hingegen erscheint die Ebene hinter den
Links. Wie kann man den farbigen Rahmen mit CSS so einstellen, so
dass dieser die 2 Links, als Ganzes berandet.

Viele Grüße und hoffe auf Antworten.

Beitrag melden
–
Informationen zu den Bewertungsregeln

  1. Rahmen um Navigationsleiste

    Simbo
    – Informationen zu den Bewertungsregeln

    Beim Internet-Explorer schneidet die div-Ebene den unteren Bereich
    der 2 Links ab, beim Firefox hingegen erscheint die Ebene hinter den
    Links.

    Der Firefox stellt die Seite korrekt dar, auch wenns fehlerhaft aussieht. Die SPAN Tags sind inline-Elemente und vergrößern sich nicht automatisch wenn der A Tag durch sein padding nach außen "drückt".

    Wie kann man den farbigen Rahmen mit CSS so einstellen, so
    dass dieser die 2 Links, als Ganzes berandet.

    Du könntest die SPAN Tags weglassen und einfach den A Tags einen Rahmen verpassen.
    Am besten fasst du das ganze noch in ne Liste, dann isses semantisch korrekt:

      
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"  
    "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">  
<html>  
<head>  
<title>test</title>  
<style type="text/css">  
  
body {  
  text-align : center;  
  margin : 0px;  
}  
  
.body {  
  margin : 0px auto;  
  width : 63px;  
  font-family : Tahoma, Verdana, Arial, Sans-Serif;  
  font-style : normal;  
  font-variant : normal;  
  text-align : left;  
}  
  
.navi {  
  list-style-type:none;  
}  
  
.navi, .navi li {  
  margin:0;  
  padding:0;  
}  
  
.navi a {  
  float:left;  
  display:block;  
  font-size : 13px;  
  text-decoration: none;  
  color: #ffffff;  
  padding: 5px;  
  background: #878D70;  
  border: 1px solid #C9D8B1;  
}  
  
.navi a:hover {  
  background: #95A35B;  
}  
  
</style>  
</head>  
<body>  
  <div class="body">  
    <ul class="navi">  
      <li><a href="">test</a></li>  
      <li><a href="">test</a></li>  
    </ul>  
 </div>  
</body>  
</html>
    Beitrag melden
    –
    Informationen zu den Bewertungsregeln