[CSS/HTML] Bilder untereinander

x-cyrion · 8. März 2006

Ich möchte mehrere Bilder untereinander und nebeneinander dargestellt haben.

Schema:

mit xhtml1.0 und css erreiche ich dieses auch mit dem folgendem:

HTML:

<?xml version="1.0"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html><head><title>Logo</title>
<style type="text/css">
.container {
  margin: 0;
  padding: 0;
  width: 770px;
  height: 160px;
}
.leftBorder {
  margin: 0;
  padding: 0;
  float: left;
  width: 17px;
  height: 160px;
  background-image: url("logo_5_01.jpg");
}
.middleContainer {
  margin: 0;
  padding: 0;
  float: left;
  width: 736px;
  height: 160px;
}
.rightBorder {
  margin: 0;
  padding: 0;
  float: left;
  width: 17px;
  height: 160px;
  background-image: url("logo_5_03.jpg");
}
.topBorder {
  margin: 0;
  padding: 0;
  width: 736px;
  height: 17px;
  background-image: url("logo_5_02.jpg");
}
.bottomBorder {
  margin: 0;
  padding: 0;
  float: left;
  width: 736px;
  height: 7px;
  background-image: url("logo_5_12.jpg");
}
.Inlay1 {
  float: left;
  margin: 0;
  padding: 0;
  width: 38px;
  height: 136px;
  background-image: url("logo_5_04.jpg");
}
.Inlay2 {
  float: left;
  margin: 0;
  padding: 0;
  width: 145px;
  height: 136px;
}
.Inlay3 {
  float: left;
  margin: 0;
  padding: 0;
  width: 396px;
  height: 136px;
  background-image: url("logo_5_06.jpg");
}
.Inlay4 {
  float: left;
  margin: 0;
  padding: 0;
  width: 105px;
  height: 136px;
}
.Inlay5 {
  float: left;
  margin: 0;
  padding: 0;
  width: 52px;
  height: 136px;
  background-image: url("logo_5_08.jpg");
}
.img {
  margin: 0;
  padding: 0;
}
</style>

</head><body>

<div class="container">
  <div class="leftBorder">
  </div>
  <div class="middleContainer">
    <div class="topBorder">
    </div>
    <div class="inlayContainer">
      <div class="Inlay1">
      </div>
      <div class="Inlay2">
        <img class="img" src="logo_5_05.jpg" border="0" height="66" width="145" />
        <img class="img" src="logo_5_10.jpg" border="0" height="70" width="145" />
      </div>
      <div class="Inlay3">
      </div>
      <div class="Inlay4">
        <img class="img" src="logo_5_07.jpg" border="0" height="46" width="105" />
        <img class="img" src="logo_5_09.jpg" border="0" height="41" width="105" />
        <img class="img" src="logo_5_11.jpg" border="0" height="49" width="105" />
      </div>
      <div class="Inlay5">
      </div>
    </div>
    <div class="bottomBorder">
    </div>
  </div>
  <div class="rightBorder">
  </div>
</div>

</body></html>

Sobald ich aber xhtml1.1 nutze erhalte ich ein "margin-bottom" über 1px, so dass bei untereinander liegenden Bildern (Schema: mit "X" gekennzeichnet) Lücken entstehen.

Selbst die Erstellung eines Tabellen Designs verursacht diese Fehler.

Jetzt würde mich interessieren, ob es eine Möglichkeit gibt, xhtml1.1 mit css, Bilder untereinander und nebeneinander ohne Lücken dazustellen.

Suche

[CSS/HTML] Bilder untereinander

x-cyrion

Newbie

Anhänge

Ähnliche Themen