Layout mit DIVs statt Tabellen von Christopher, 15.04.2006 16:29

Layout mit DIVs statt Tabellen

Christopher 15.04.2006 16:29

html

Guten Tag,

ich habe nun schon dest öfteren versucht meine bisherigen Tabellen- Layouts durch zeitkonforme DIV-Layouts zu ersetzen. Doch jedesmal verzweifle ich am Ende an irgendeinem Darstellungsproblem, welches ich mir nicht so ganz erklären kann. Nun habe ich aber mitterweile die "Schnauze voll" und will das endlich mal gelöst bekommen ;-) Daher meine Bitte an euch, mich dabei ein wenig zu unterstützen bzw. mir vielleicht ein paar Tips zu geben worauf ich besonders zu achten habe.

Also, ich versuche diese Layout hinzubekommen, wobei die Zahlen folgenden Inhalten zuzuschreiben sind:

Panel: Kategorien
Panel: Navigation
Panel: Information
Panel: 1. Content
Panel: 2. Content
Panel: 3. Content
Panel: Footer

.----. .-------------. .----. . (1). . (2) . . (3). . . ............... . . . . .-------------. . . . . . (4) . . . . . ............... . . . . .-------------. . . . . . (5) . ...... . . ............... . . .-------------. ...... . (6) . ............... .---------------------------. . [7] . .............................

Panel#1 hat eine feste Breite
Panel#2 soll sich der verfügbaren Breite anpassen
Panel#3 hat eine feste Breite, ist aber optional.
Panel#4 soll sich der verfügbaren Breite anpassen, doch stets einen einheitlichen Abstand nach links haben, auch wenn der Kategorie-Panel bereits aufgehört hat.
Panel#7 soll ganz unten die Seite abschließen

Mein aktueller, bisheriger Code ist hier: (Bitte nicht von der Anzahl der Zeilen abschrecken lassen, das sind zum größten Teil nur Dummy-Daten die in die jeweiligen DIVs gepackt wurden. Das CSS steht ganz oben)


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Beispiel Runde Ecken</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<style type="text/css">

body {
 font:100% Verdana, Arial, Helvetica, sans-serif;
 background-color:#EFEFEF;
 margin:0 5%;
}

.rounded_edges {
 padding:0px;
}
.corner_bottom_left {
 /*background:url(corner_bottom_left.gif) no-repeat left bottom;*/
}
.corner_bottom_right {
 /*background:url(corner_bottom_right.gif) no-repeat right bottom;*/
}
.corner_top_left {
 /*background:url(corner_top_left.gif) no-repeat left top;*/
}
.corner_top_right {
 /*background:url(corner_top_right.gif)  no-repeat right top;*/
}
.border_left {
 background:url(pixel.gif) repeat-y left;
}
.border_right {
 background:url(pixel.gif) repeat-y right;
}
.headline {
 background:url(border_top.gif) repeat-x top;
 color:white;
 font-weight:bold;
 padding:0px 0px 6px 10px;
 margin:0px;
}
.footer {
 background:url(border_bottom.gif) repeat-x bottom;
 color:white;
 padding:6px 0px 0px 10px;
 margin:0px;
}
.content {
 padding:3px;
}



.div_left_panel {
 width:220px;
 min-width:220px;
 max-width:220px;
 display:inline;
 float:left;
}
.div_top_panel {
 float:left;
 min-width:250px;
 width:250px;
 display:inline;
}
.div_right_panel {
 width:220px;
 min-width:220px;
 max-width:220px;
 display:inline;
 float:right;
}
.div_content_panel {
 display:inline;
 float:right;
}


</style>
</head>

<body>

<p>&nbsp;</p>



<!-- #### LEFT-PANEL #### -->
<DIV class="div_left_panel">

 <TABLE class=rounded_edges cellpadding=0 cellspacing=0>
  <TR>
   <TD class=corner_top_left><img src="corner_top_left.gif"></TD>
   <TD class=headline>.: Categories :.</TD>
   <TD class=corner_top_right><img src="corner_top_right.gif"></TD>
  </TR>
  <TR>
   <TD class=border_left>&nbsp;</TD>
   <TD class=content>
      Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam
      nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat
      volutpat. Ut wisi enim ad minim veniam, quis nostrud exercitation
      ulliam corper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
      Duis autem veleum iriure dolor in hendrerit in vulputate velit esse
      molestie consequat, vel willum lunombro dolore eu feugiat nulla facilisis
      at vero eros et accumsan et iusto odio dignissim qui blandit praesent
      luptatum zzril delenit augue duis dolore te feugait nulla facilisi.

   </TD>
   <TD class=border_right>&nbsp;</TD>
  </TR>
  <TR>
   <TD class=corner_bottom_left><img src="corner_bottom_left.gif"></TD>
   <TD class=footer></TD>
   <TD class=corner_bottom_right><img src="corner_bottom_right.gif"></TD>
  </TR>
 </TABLE>

</DIV>


<!-- #### TOP-PANEL #### -->
<DIV class="div_top_panel">

 <TABLE class=rounded_edges cellpadding=0 cellspacing=0>
  <TR>
   <TD class=corner_top_left><img src="corner_top_left.gif"></TD>
   <TD class=headline>.: Navigation :.</TD>
   <TD class=corner_top_right><img src="corner_top_right.gif"></TD>
  </TR>
  <TR>
   <TD class=border_left>&nbsp;</TD>
   <TD class=content>
      Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam
      </TD>
   <TD class=border_right>&nbsp;</TD>
  </TR>
  <TR>
   <TD class=corner_bottom_left><img src="corner_bottom_left.gif"></TD>
   <TD class=footer></TD>
   <TD class=corner_bottom_right><img src="corner_bottom_right.gif"></TD>
  </TR>
 </TABLE>

</DIV>


<!-- #### RIGHT-PANEL #### -->
<DIV class="div_right_panel">

 <TABLE class=rounded_edges cellpadding=0 cellspacing=0>
  <TR>
   <TD class=corner_top_left><img src="corner_top_left.gif"></TD>
   <TD class=headline>.: Information :.</TD>
   <TD class=corner_top_right><img src="corner_top_right.gif"></TD>
  </TR>
  <TR>
   <TD class=border_left>&nbsp;</TD>
   <TD class=content>
      Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam
      nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat
      volutpat. Ut wisi enim ad minim veniam, quis nostrud exercitation
      ulliam corper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
      <p>Duis autem veleum iriure dolor in hendrerit in vulputate velit esse
      molestie consequat, vel willum lunombro dolore eu feugiat nulla facilisis
      at vero eros et accumsan et iusto odio dignissim qui blandit praesent
      luptatum zzril delenit augue duis dolore te feugait nulla facilisi.</p>
    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam
      nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat
      volutpat. Ut wisi enim ad minim veniam, quis nostrud exercitation
      ulliam corper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
      Duis autem veleum iriure dolor in hendrerit in vulputate velit esse
      molestie consequat, vel willum lunombro dolore eu feugiat nulla facilisis
      at vero eros et accumsan et iusto odio dignissim qui blandit praesent
      luptatum zzril delenit augue duis dolore te feugait nulla facilisi.</p>

   </TD>
   <TD class=border_right>&nbsp;</TD>
  </TR>
  <TR>
   <TD class=corner_bottom_left><img src="corner_bottom_left.gif"></TD>
   <TD class=footer></TD>
   <TD class=corner_bottom_right><img src="corner_bottom_right.gif"></TD>
  </TR>
 </TABLE>

</DIV>


<!-- #### CONTENT-PANEL #1 #### -->
<DIV class="div_content_panel">

 <TABLE class=rounded_edges cellpadding=0 cellspacing=0>
  <TR>
   <TD class=corner_top_left><img src="corner_top_left.gif"></TD>
   <TD class=headline>.: Content_Panel #1 :.</TD>
   <TD class=corner_top_right><img src="corner_top_right.gif"></TD>
  </TR>
  <TR>
   <TD class=border_left>&nbsp;</TD>
   <TD class=content>
      Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam
      nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat
      volutpat. Ut wisi enim ad minim veniam, quis nostrud exercitation
      ulliam corper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
      Duis autem veleum iriure dolor in hendrerit in vulputate velit esse
      molestie consequat, vel willum lunombro dolore eu feugiat nulla facilisis
      at vero eros et accumsan et iusto odio dignissim qui blandit praesent
      luptatum zzril delenit augue duis dolore te feugait nulla facilisi.

   </TD>
   <TD class=border_right>&nbsp;</TD>
  </TR>
  <TR>
   <TD class=corner_bottom_left><img src="corner_bottom_left.gif"></TD>
   <TD class=footer></TD>
   <TD class=corner_bottom_right><img src="corner_bottom_right.gif"></TD>
  </TR>
 </TABLE>

</DIV>


<!-- #### CONTENT-PANEL #2 #### -->
<DIV class="div_content_panel">

 <TABLE class=rounded_edges cellpadding=0 cellspacing=0>
  <TR>
   <TD class=corner_top_left><img src="corner_top_left.gif"></TD>
   <TD class=headline>.: Content_Panel #1 :.</TD>
   <TD class=corner_top_right><img src="corner_top_right.gif"></TD>
  </TR>
  <TR>
   <TD class=border_left>&nbsp;</TD>
   <TD class=content>
      Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam
      nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat
      volutpat. Ut wisi enim ad minim veniam, quis nostrud exercitation
      ulliam corper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
      Duis autem veleum iriure dolor in hendrerit in vulputate velit esse
      molestie consequat, vel willum lunombro dolore eu feugiat nulla facilisis
      at vero eros et accumsan et iusto odio dignissim qui blandit praesent
      luptatum zzril delenit augue duis dolore te feugait nulla facilisi.

   </TD>
   <TD class=border_right>&nbsp;</TD>
  </TR>
  <TR>
   <TD class=corner_bottom_left><img src="corner_bottom_left.gif"></TD>
   <TD class=footer></TD>
   <TD class=corner_bottom_right><img src="corner_bottom_right.gif"></TD>
  </TR>
 </TABLE>

</DIV>

</body>
</html>

Ich wäre dankbar wenn sich das evtl. mal einer anschauen könnte.

Besten Dank auf jeden Fall.

MfG Christopher

Beitrag melden

– Informationen zu den Bewertungsregeln

SELFHTML Forum - Ergänzung zur Dokumentation Übersicht

Christopher: Layout mit DIVs statt Tabellen

Beitrag lesen

Layout mit DIVs statt Tabellen

Layout mit DIVs statt Tabellen