Colspan/TD Problem

[=Max=]

Hallo,

Ich bin gerade dabei was zu coden. Der Code sieht mittlerweile so aus:

Code: Alles auswählen

    <table width="920px" align="center" cellpadding="0" cellspacing="0" border="0">
      <tr>
        <td class="head_left"></td>
        <td class="head_right"></td>
      </tr>
      <tr>
        <td colspan="3" class="submenu_bg">
          <div id="submenu_padding">{SUBMENU}</div>
        </td>
      </tr>
      <tr>
        <td colspan="3" class="head_bottom"></td>
      </tr>
      <tr>
        <td colspan="3" height="18px"></td>
      </tr>
      <tr>
        <td class="mid_left"></td>
        <td class="mid_mid"></td>
        <td class="mid_right"></td>
      </tr>
    </table>

Und die CSS-Datei:

Code: Alles auswählen

.head_left {
  width: 565px;
  height: 160px;
  background-image: url(../../images/v4/head_left.png);
}

.head_right {
  width: 355px;
  height: 160px;
  background-image: url(../../images/v4/head_right.png);
}

.submenu_bg {
  width: 920px;
  background-image: url(../../images/v4/head_mid.png);
}

#submenu_padding {
  padding-left: 5px;
  padding-right: 5px;
}

.head_bottom {
  width: 920px;
  height: 9px;
  background-image: url(../../images/v4/head_bottom.png);
}

.mid_left {
  width: 206px;
  height: 34px;
  background-image: url(../../images/v4/mid_top_left.png);
}

.mid_mid {
  width: 508px;
  height: 34px;
  background-image: url(../../images/v4/mid_top_center.png);
}

.mid_right {
  width: 206px;
  height: 34px;
  background-image: url(../../images/v4/mid_top_right.png);
}

Das ganze sieht jetzt so aus:
http://img516.imageshack.us/img516/7286/fehlerjv1.png

Was habe ich falsch gemacht?

Lg,
Max

[Eyecatcher]

html-css-f9/evolution-div-layer-design-t7106.html

[=Max=]

Ich wollte mit DIV-Layern arbeiten, aber hab nur Probleme... Naja ich kann es ja mal alles versuchen und wenn ich Probleme habe, gibts ja noch DW

[Ingo]

Hi.

Ich vermute, die erste und die letzte Zeile sind das Problem, besonders deren width-Angaben:
Die erste Zeile (die übrigens nur 2 <td>s hat - ein weiterer Stolperstein für den Browser)
teilt die 920px in 565 + 355, die letzte Zeile dagegen in 206 + 508 + 206. Das passt nicht
aufeinander, der Browser bekommt wohl kein Grid gebastelt, das 920px breit ist und dazu die
gewünschte Unterteilung hat.

Wenn's daran liegt, könnte man ja versuchen, die erste Zeile ebenfalls als colspan="3" zu
deklarieren und darin zwei Divs (head_left/right) anzuordnen, eines davon als float:left/right.

Code: Alles auswählen

<tr>
  <td colspan="3">
    <div class="head_left"> ... </div>
    <div class="head_right"> ... </div>
  </td>
</tr>


Gruß, Ingo

[=Max=]

So hab jetzt angefangen mit DIVS zu machen, aber jetzt gibts folgendes Problem:

Code: Alles auswählen

  <div align="center">
    <div align="center" id="page">
      <div id="head_left"></div>
      <div id="head_right"></div>
      <br clear="all" />
      <div id="head_mid">
        <div id="head_mid_padding">{SUBMENU}</div>
      </div>
      <div id="head_bottom"></div>
      <div id="zwischen"></div>
      <div id="mid_top_left"></div>
      <div id="mid_top_center"></div>
      <div id="mid_top_right"></div>
      <br clear="all">
      <div id="page_mid">
        <div id="content_left">
          <div id="navi_1">
            <div id="navi_1_top"></div>
            <div id="navi_mid"></div>
            <div id="navi_bottom"></div>
          </div>
        </div>
        <div id="content_center"></div>
        <div id="content_right"></div>
        <br clear="all" />
      </div>
      <div id="page_bottom"></div>
    </div>
  </div>


Code: Alles auswählen

body {
   background-color: #fff;
   background-image: url(http://www.habbobase.de/images/version2/bg.gif);
   background-attachment: fixed;
   font-size: 10px;
   font-family: Verdana, Arial, Helvetica, sans-serif;
}

img {
  border: 0px;
}

#page {
  width: 920px;
}

#head_left {
  width: 565px;
  height: 160px;
  background-image: url(../../images/v4/head_left.png);
  float: left;
}

#head_right {
  width: 355px;
  height: 160px;
  background-image: url(../../images/v4/head_right.png);
  float: right;
}

#head_mid {
  width: 920px;
  background-image: url(../../images/v4/head_mid.png);
}

#head_mid_padding {
  padding-left: 5px;
  padding-right: 5px;
  text-align: left;
}

#head_bottom {
  width: 920px;
  height: 9px;
  background-image: url(../../images/v4/head_bottom.png);
}

#zwischen {
  width: 920px;
  height: 8px;
}

#mid_top_left {
  width: 206px;
  height: 34px;
  background-image: url(../../images/v4/mid_top_left.png);
  float: left;
}

#mid_top_center {
  width: 508px;
  height: 34px;
  background-image: url(../../images/v4/mid_top_center.png);
  float: left;
}

#mid_top_right {
  width: 206px;
  height: 34px;
  background-image: url(../../images/v4/mid_top_right.png);
  float: left;
}

#page_mid {
  width: 920px;
  background-image: url(../../images/v4/mid.png);
}

#page_bottom {
  width: 920px;
  height: 25px;
  background-image: url(../../images/v4/bottom.png);
  text-align: left;
}

#content_left {
  float: left;
}

#content_center {
  float: left;
}

#content_right {
  float: left;
}

#navi_1 {
  width: 195px;
}

#navi_2_top {
  width: 195px;
  height: 28px;
  background-image: url(../../images/v4/navi_two_top.png);
}

#navi_mid {
  width: 195px;
  background-image: url(../../images/v4/navi_mid.png);
  text-align: left;
}

#navi_bottom {
  width: 195px;
  height: 7px;
  background-image: url(../../images/v4/navi_bottom.png);
}

Sieht so aus:
http://img241.imageshack.us/img241/5933/fehler2co4.png

Habe aufs Bild geschrieben wo der Fehler hängt

[Ingo]

Hi.

FALLS sich die Sache nicht schon geklärt hat ...

Ich vermute, es liegt daran, dass für #navi_1_top und #navi_mid keine height angegeben ist.
Das Hintergrundbild alleine spannt kein Div auf, es muss entweder Inhalt im Div stehen, oder
man gibt die height im CSS vor, also etwa

Code: Alles auswählen

#navi_1_top { height:7px;  ... }
#navi_mid   { height:20px; ... }


Gruß, Ingo