[CSS/HTML] Designfehler

CPU · 14. August 2007

Da ist Sie wieder. Die Kontroverse zwischen Internet Explorer und Firefox, Safari, Netscape etc.
Ich will doch einfach nur eine Leiste erzeugen, die sich mittig am oberen Bildrand befindet. An allen vier Ecken soll ein Bild sein, das die Ecken abrundet (Tabelle: 3 Spalten, 3 Zeilen). Im IE klappts super, aber in Firefox & Co. wird alles sehr in die Höhe gezogen.

Quellcode:

HTML:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
 <head>
  <meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
  <title>Testseite</title>
   <style type="text/css">
    body {
     margin: 0px;
     padding: 0px;
    }
    .tbl {
      height: 35px;
      width: 98%;
      padding: 0px;
      border: none;
    }
    .tbleck {
      width: 8px;
      height: 8px;
      background-color:#FFFFFF;
    }
    .tblnoctn {
      background-color:#000000;
      height: 8px;
    }
    .tblCont {
      background-color:#000000;
    }
   </style>
 </head>
  <body>
   <center>
   <table align="center" class="tbl" cellspacing="0" border=1 cellpadding="0" width="98%">
    <tbody>
     <tr>
      <td class="tbleck"><img src="lo.png" /></td>
      <td height="8px" class="tblnoctn"></td>
      <td class="tbleck"><img src="ro.png" /></td>
     </tr>
     <tr>
      <td class="tblnoctnNextCont"></td>
      <td class="tblCont">
       Textinhalt hier!
      </td>
      <td class="tblnoctnNextCont"></td>
     </tr>
     <tr>
      <td class="tbleck"><img src="lu.png" /></td>
      <td height="8px" class="tblnoctn"></td>
      <td class="tbleck"><img src="ru.png" /></td>
     </tr>
    </tbody>
   </table>
   </center>
  </body>
</html>

Die Bilder sind überigens 8 x 8 px groß

Ich hoffe auf Hilfeee!
CPU

krizzelfix · 15. August 2007

Hallo CPU,

es könnte an den Bildern selber liegen. probier mal obs mit jpg oder gif geht.
Und da die Grafiken als hintergrund verwendet werden, würde ich die auch als hintergrund im CSS definieren.

Grüße

tewes

CPU · 15. August 2007

Aber wenn ich in CSS die Grafiken als Hintergründe definiere, kann dann nicht alles verrutschen und die Grafiken verdecken?

krizzelfix · 15. August 2007

Du kannst ja 4 container definieren, die du da so formatierst:

#lo, #ro, #ru, #lu {
width: 8px;
height: 8px;
background-repeat: no-repeat;
background-postion: 0px 0px;
}
#lo {
background-image: url('images/bal.jpg');
}
.
.
.

Da du es mit tabellen umgesetzt hast sollte der nichts verdecken...

CPU · 15. August 2007

Hab es gerade ausprobiert! Sieht super aus. Aber meinst du wirklich dass sich da nichts verschiebt? Ich bin da eher skeptisch.

Vielen Dank,
CPU

CPU · 15. August 2007

Ja, aber wie Zentriere ich denn die Tabelle? Der Validator von W3C gibt einen DIV-aus mit dem Attribut

HTML:

text-align: center

, aber das funktioniert nicht.

krizzelfix · 15. August 2007

Wenn du die ganze Tabelle zentrieren willst musst du margin auf links und rechts auf auto setzen.
text-align sagt ja schon das der text fomatiert wird

msycho · 15. August 2007

Über das CSS:

HTML:

table {
  width: 200px;
  margin-left: auto;
  margin-right: auto;
  text-align: left;
}

Für "ältere" Browser:

HTML:

body {
	text-align: center; 
}

Suche

[CSS/HTML] Designfehler

CPU

Lieutenant

krizzelfix

Commander

CPU

Lieutenant

krizzelfix

Commander

CPU

Lieutenant

CPU

Lieutenant

krizzelfix

Commander

msycho

Lt. Junior Grade

Ähnliche Themen