Tabellen-Layout in DIV-Layout umändern...

Peter_Pan

Folgendes Layout wollte ich in eines mit DIVs abändern, doch dies gelingt nicht so richtig

HTML

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Titel</title>
<meta name="author" content="bla">


<link rel="stylesheet" type="text/css" href="layout.css">


</head>
<body>


<table class="rahmen" border="0" align="center" cellpadding="0" cellspacing="0">
   <tr>
      <td class="eck_1"></td>
      <td class="oben"></td>
      <td class="eck_2"></td>
   </tr>
   <tr>
       <td class="links"></td>
       <td class="hintergrund">
           <div style="text-align:center">
              <div class="inhalt">






bla bla bla Inhalt mit Bilder usw.






            </div>
         </div>
      </td>
      <td class="rechts"></td>
   </tr>
   <tr>
      <td class="eck_3"></td>
      <td class="unten"></td>
      <td class="eck_4"></td>
   </tr>


</table>


</body>
</html>

Alles anzeigen

Das dazugehörige CSS-File

Code

/* BODY Hintergrund Links usw. */


body,td,th {
font-family: Verdana, Arial;
font-size: 14px;
color: #000000;
background-color: #FFFFFF;
}


.hintergrund {background-color:#E1E1E1;}


div.inhalt {margin: 70px 50px 70px 50px;text-align:left;}


table.rahmen {min-width:120px;max-width:1200px;width:75%;}




/* Layout Ecken, Kanten */


td.eck_1 {background:url(bilder/eck_1.gif);height:59px;width:48px;}
td.eck_2 {background:url(bilder/eck_2.gif);height:59px;width:62px;}
td.eck_3 {background:url(bilder/eck_3.gif);height:62px;width:48px;}
td.eck_4 {background:url(bilder/eck_4.gif);height:62px;width:62px;}


td.oben {background:url(bilder/oben.gif);}
td.unten {background:url(bilder/unten.gif);}
td.links {background:url(bilder/links.gif);}
td.rechts {background:url(bilder/rechts.gif);}

Alles anzeigen

Hier mein Versuch mit DIVs

HTML

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Titel</title>
<meta name="author" content="bla">


<link rel="stylesheet" type="text/css" href="layout_div.css">


</head>
<body>




<div class="rahmen">
   <div class="eck_1"></div>
   <div class="eck_2"></div>
   <div class="oben"></div>


   <div class="links"></div>
   <div class="rechts"></div>


   <div class="hintergrund">
      <div class="inhalt">






bla bla bla Inhalt mit Bilder usw.




      </div>
   </div>
   <div class="eck_3"></div>
   <div class="eck_4"></div>
   <div class="unten"></div>
</div>




</body>
</html>

Alles anzeigen

Wieder das dazugehörige CSS-File

Code

/* BODY Hintergrund Links usw. */


body,td,th {
font-family: Verdana, Arial;
font-size: 14px;
color: #000000;
background-color: #FFFFFF;
}


div.rahmen {min-width:120px;max-width:1200px;width:75%;margin: 0px auto;}


.hintergrund {background-color:#E1E1E1;margin:59px 62px 62px 48px}


div.inhalt {margin: 70px 50px 70px 50px;text-align:left;}




/* Layout Ecken, Kanten */


div.eck_1 {background:url(bilder/eck_1.gif);height:59px;width:48px;float:left;}
div.eck_2 {background:url(bilder/eck_2.gif);height:59px;width:62px;float:right;}
div.eck_3 {background:url(bilder/eck_3.gif);height:62px;width:48px;float:left;}
div.eck_4 {background:url(bilder/eck_4.gif);height:62px;width:62px;float:right;}


div.oben {background:url(bilder/oben.gif);height:59px;line-height:59px;vertical-align:middle;text-align:center;} /* line-height ist ein Trick, da valign sonst nicht funktioniert! */
div.unten {background:url(bilder/unten.gif);height:62px;}
div.links {background:url(bilder/links.gif);float:left;width:48px;background-repeat:repeat-y;height:100%;}
div.rechts {background:url(bilder/rechts.gif);width:62px;float:right;background-repeat:repeat-y;}

Alles anzeigen

Wäre schön wenn ihr mir dabei weiterhelfen könnten!

PS:Wie kann ich zentrierte Blockschrift bewekstelligen, ohne dafür zwei Tags zu benutzen?[/code]

driver

hast du deine versuche irgendwo online oder kannst sie online stellen ?

Elvis

Das was Du grad machst ist eine Div-Suppe. Du solltest erst mal die korrekte Nutzung Tags erlernen. Die Formatierung mit CSS hinterher ist dann kein so großes Problem mehr.

Peter_Pan

Online stellen ist grad nicht so gut...

Also es soll einfach ein Rahmen aus Grafiken um den Inhalt sein, also die 4 Ecken des Rahmen sind jeweils eine Grafik. Und die 4 Außenkanten sind jeweils eine 1 Pixel-Dicke Grafik, welche sich dann wiederholt.

Ja, dass ich mit DIVs noch nicht richtig umzugehen weiß ist mir klar, allerdings hab ich nirgends ne gute Erklärung / Anleitung dazu gefunden. Wäre gut wenn mir dies jemand anhand des Beispiels mal vorstellen könnte.

driver

1px dicke grafik ? also nen rahmen ?

warum machst net einfach border:1px solid #000000; ?

phore

wenn das div sich nicht stark in der höhe ändern soll, könntest du es so machen wie im anhang dargestellt.

für div#top machst du dann

Code

height: Xpx; /* X = höhe des bildstücks */
background-position: top;

(+ alles weitere notwendige)

bei div#content schaust du was die minimale grösse, bzw. die maximale grösse des containers sein wird, dann machst du das bild so lang wie die maximale grösse.

dann beim css:

Code

height: auto;
background-position: bottom;

(+ alles weitere notwendige)

so wird vom unteren stück genauso viel angezeigt wie nötig, der rest bleibt versteckt.

je nach layout empfielt sich aber evtl. eine andere variante. diese ist eher für kleine content containers oder menüs mit runden ecken gedacht.

so long

driver

driver
Du hast mich falsch verstanden, die Grafik ist z.B. 50x1px also z.B. ein Farbverlauf welchen es dann z.B. auf der linken Seite bis nach unten durchzieht, also immer wiederholt...

Es soll halt alles möglichst dynamisch sein, also egal ob ich z.B. nur "Hallo" in den Inhalt-DIV oder 100 Bilder reinmach. Dass sich das design daran anpasst...

phore

wenn die breite fix ist kannst du bei meinem beispiel einfach wie das obere div ein unteres machen. dann hast du div#oben, div#foot und div#content. die packst du dann noch in einen "obercontainer". also:

Code

<div id="main">
  <div id="top"></div>
  <div id="content"></div>
  <div id="foot"></div>
</div>

wenn "top" und "foot" keinen inhalt haben kannst du auch ein <span> verwenden.

so long

sejuma

Versuch mal folgendes:
Erstelle eine Hintergrundgrafik mit den Grafiken von links und rechts und zwischen beiden einen "Balken" mit der Hintergrundfarbe für den Inhalt.
Diese Grafik fügst du dann als background in den Ihalt. Damit "wächst" sie mit diesem.
Siehe "faux columns"

Peter_Pan

Hab's nun ein ewnig anders versucht, aber ich komm einfach nicht drauf!!

Und versteh auch nicht 100%ig eure Tipps, leider.

Allerdings wollte ich es so machen wie mit der Tabelle auch, da dies am dynamischsten ist und die kleinsten Bilder hat. Die Frage ist nur "Wie mache ich das mit DIVs?"

So wie ichs nun hab ist's ja fast OK es fehlt halt noch der linke und rechte Rahmen. Dieser sollte dann allerdings bis zur unteren Kante angezeigt werden. Das sollte doch nicht so schwer sein, ich könnt echt noch verzweifeln!

Code

<div class="rahmen">


<div class="top">
   <div class="eck_1"></div>
   <div class="eck_2"></div>
   <div class="oben"></div>
</div>
   <div class="links"></div>
   <div class="rechts"></div>




   <div class="hintergrund">
      <div class="inhalt">


         AAAAAAAAAAABBBBBBBBBBBBBBCCCCCCCCCCC
         bla bla bla...


      </div>
   </div>




<div class="foot">
   <div class="eck_3"></div>
   <div class="eck_4"></div>
   <div class="unten"></div>
</div>

Alles anzeigen

Code

div.top {background-position: top;}
div.foot {background-position: bottom;}




div.eck_1 {background:url(bilder/eck_1.gif);height:59px;width:48px;float:left;}
div.eck_2 {background:url(bilder/eck_2.gif);height:59px;width:62px;float:right;}
div.eck_3 {background:url(bilder/eck_3.gif);height:62px;width:48px;float:left;}
div.eck_4 {background:url(bilder/eck_4.gif);height:62px;width:62px;float:right;}


div.oben {background:url(bilder/oben.gif);height:59px;} 
div.unten {background:url(bilder/unten.gif);height:62px;}
div.links {background:url(bilder/links.gif);width:48px;float:left;}
div.rechts {background:url(bilder/rechts.gif);width:62px;float:right;}

Alles anzeigen

sejuma

Du bekommst den linken und rechten Rahmen nur verlängert, wenn du ihn in einen div packst, dessen Länge durch seinen Inhalt bestimmt wird oder der eine vorgegebene Pixelhöhe hat. Das ist bei dir der Inhalt.
Also musst du für den Inhalt eine Background-Grafik erstellen, bei der in einem gif links und rechts der Rand und un der Mitte ein neutraler Balken ist (siehe "faux-columns")

Aber dadurch würde ich eine fixe Breite bekommen, was ich nicht möchte.

Es soll einfach nur eine 9x9 Felder große DIV-Struktur werden.

Wobei das mittlere den Inhalt darstellt und die Breite und Höhe variabel sind. Ist das denn so schwer mittels DIVs umsetzbar, wenn "Ja" wieso sollte man denn von Tabelle auf DIV wechseln??

Sorry nicht 9x9 sondern 3x3 was 9 Felder ergibt!!

Ich versuch es mal zu visualisieren:

Code

----------------------------
|eck_1|  o b e n   |eck_2 |
|links| - INHALT - |rechts|
|links| - INHALT - |rechts|
|links| - INHALT - |rechts|
|eck_3|  u n t e n |eck_4 |
----------------------------

Also wie ein TicTacToe-Speilfeld, wobei das mittlere-Feld den Inhalt darstellt, welcher eine variable größe annehmen kann, wodurch die oben/unten-Felder bzw. die links/rechts-Felder sich verlänger/verkürzen!

Da das obig genannte wohl nicht so einfach umsetzbar ist eine andere Frage:

Ist es OK wenn man eine ID am anfang der Seite hat, innen verschachtelt dann nochmal ein ID-Tag welches dann so im CSS z.B. so aussieht:

#id_name1 #id_name2 a {text-decoration: none;color:#000000;}

Und wie gehe ich vor, wenn ich eine Zelle in welcher ich lediglich eine Hintergrundgrafik habe mit einer festen Breite erstellen will?

also so:

Code

(...)
<td style="background:url(bilder/eck_1.gif);height:60px;width:50px">
(...)

Das funktioniert ja auch. Nur wenn ich die Fensterbreite verkleinere verschwindet diese Grafik irgendwann, was dann für Leute mit geringeren Auflösungen ziemlich schlecht aussieht...

Hab's mit min-width versucht, funktioniert aber nicht!

hallo?!

Elvis

hallo!?

Tags

Benutzer online in diesem Thema