Rollover , aber es gibt zwischen zwei elementen einen Abstand

Status
Nicht offen für weitere Antworten.
C

chell

Mitglied
Hallo,

ich habe mittels CSS ein Layout (IE optimiert, bitte nicht meckern ;-)) erstellt. Nun macht er mir aber zwischen zwei rollover dinger einen abstand. Es ist auch nur zwischen dem ersten und dem 2ten, die anderen funktionieren prima. Hier mal der CSS Code:

Code: 
body {
  margin: 0;
  }
  #header {
  border-bottom-width: 1px;
  border-top-width: 1px;
  border-right-width: 1px;
  border-left-width: 1px;
  border-style: solid;
  border-color: #000000;
  margin-top: 15px;
  margin-left: auto;
  margin-right: auto;
  height: 100px; 
  width: 600px; 
  background-color: #CCCCCC;
  }
  #navigation {
  
  border-left-width: 0px;
  padding-top: 10px;
  border-right-width: 1px;
  border-bottom-width: 1px;
  border-top-width: 1px;
  border-style: solid;
  border-color: #000000;
  margin-top: 3px;
  margin-left: auto;
  margin-right: auto;
  height: 35px; 
  width: 600px; 
  background-color: #CCCCCC;
  }
  #content {
  margin-top: 3px;
  border-width: 1px;
  border-style: solid;
  border-color: #000000;
  margin-left: auto;
  margin-right: auto;
  height: 400px; 
  width: 600px; 
  background-color: #CCCCCC;
  }
  #footer {
  margin-top: 3px; 
  border-width: 1px;
  border-style: solid;
  border-color: #000000;
  margin-left: auto;
  margin-right: auto;
  height: 30px; 
  width: 600px; 
  background-color: #CCCCCC;
  }
  a.nav {
   /* display:block; */
  padding: 30px;
  font-family: Arial; 
  font-size: 8px;
  border-left:1px solid #000000; 
  background-color:#FFFFFF;
  text-align:center;
  font-weight:bold;
  color:#000000;
  text-decoration:none;
   }
   a.nav:active, a.nav:hover
  { 
   color:#0000000;
   background-color:#CCCCCC;
  }

Und hier der HTML Code:

Code: 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
  	 "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
  <html>
  	<head>
 		<link rel="stylesheet" type="text/css" href="style.css">	 
  		<title>Template No. 1</title>
  	</head>
  <body>
  	<div id="header"></div>
  	<div id="navigation"><a class="nav" href="#">Nav</a>
  	<a class="nav" href="#">Nav3</a><a class="nav" href="#">Nav4</a>
  	</div>
  	<div id="content"></div>
  	<div id="footer"></div>
  </body>
  
  
  
  </html>

Der Link: hier

Kann mir jemand helfen?

Mfg

chell
 
Hi,

schreib Deine Links alle in eine Zeile
HTML: 
<div id="navigation">
    <a class="nav" href="#">Nav</a><a class="nav" href="#">Nav3</a><a class="nav" href="#">Nav4</a>
</div>
Der IE scheint am Zeilenumbruch ein Leerzeichen zu interpretieren - anders kann ich mir das
nicht erklären.

Ciao
Quaese
 
Hallo,

ich habe noch ein "Problem": Wie kann ich den Rolloverdingern eine feste Breite zuweisen? Mit width geht es nicht.

Mfg

chell
 
Hi,

dafür müssen die Links Blockelemente sein. Du hattest sie bereits als solche definiert (display: block).

Allerdings musst Du hierfür kleinere Korrekturen an Deinen CSS's vornehmen:
  1. Lösche aus #navigation die Angabe padding-top: 10px;
  2. Füge der Klasse a.nav folgende drei Zeilen zu:

    display:block;
    float: left;
    width: 80px;
Ich hoffe, das hilft Dir weiter.

Ciao
Quaese
 
Status
Nicht offen für weitere Antworten.

Neue Beiträge

Zurück