# Tabellen



## Aloa (25. April 2005)

Ich mal wieder mit fragen.
Also ich hab jetzt mal ein Design mit Photoshop gemalt. vielleicht, kann mir beim coden jemand helfen, denn ich bekommen das nicht hin.

So soll die Seite ungefähr aussehen. (farben stimmen nicht)

Bild


----------



## shutdown (25. April 2005)

1. Rein Html oder CSS?
2. Was verstehst du nicht?


----------



## mojitoweb (25. April 2005)

ich würde vorschlagen es per css zu machen. Auf Tutorials gibt es dazu ein tut 
http://www.tutorials.de/tutorials187137.html 
bzw ich empfehle auch folgende Seite
http://glish.com/css/
wenn du googelst findest du sicher auch gute deutschsprachige Seiten.
Ansonsten einfach weiter fragen.

Übrigends könntest du bei deinem Hintergrund bei variablen Fensterbreiten Probleme bekommen.

Ansonsten würde ich mich anschließen: Wir brauchen mehr Infos darüber was du überhaupt willst.


----------



## Aloa (25. April 2005)

shutdown hat gesagt.:
			
		

> 1. Rein Html oder CSS?
> 2. Was verstehst du nicht?



Den Aufbau. Ich weiss nie wie das geht. Es geht darum, dass ich das nicht selber gestalten kann (tabellen und frames) und um eure hilfe bitte


----------



## mojitoweb (25. April 2005)

Nimm die ein karriertes Blatt.
Zeichne die verschiedenen Blöcke (zB dein Hintergrund, graue zentrierte Box, Banner, Navigation, Hauptfenster)
Dann schreibst du überall Pixelmaße ran.
Dann erarbeitest du dir die Grundlagen in css oder leites deinen Code Parallel zu anderen Projekten ab.

Ohne Grundlagen wird das eh nix.


----------



## Aloa (25. April 2005)

hab ich gemacht bevor ich diesem Thread geschrieben habe.

Ich habs auch mehrere Stunden versucht. klappt nie.

Vielleicht kann ist ja einer so nett und kann mir den code eben kreiren.
danke


----------



## mojitoweb (25. April 2005)

Wenn wir dir hier einfach nur den Code schreiben bringd das garnichts. Wir machen das einfach zusammen. Ich hoffe du hast Ahnung von css.

1. Schritt Hintergrund

Füge in den body dieses blaue Hintergrundbild ein.

2. Schritt grauer container

Den grauen zentrierten hintergrund fügst du jetzt ein mit folgenden eigenschaften.
position: absolute;
left:50%;
height: 100%;
width: 700px;
margin-left: -350px; //die Hälfte von der Breite
padding: 10px

3. Schritt Banner

Diesen legst du in den container aus dem 2. Schritt
daher orientiert sich dieser an dem.

4. Schritt Navi + Hauptfenster

Diese kannst du, wenn du willst unter den banner legen, oder in einer neuen ebene darüber. Bei der 2. Variante musst du bedenken, das du das Element mit Top unter den Banner ziehst.

So würde ich vorgehen. Stückchen für Stückhen. Aber nicht ohne Grundlagen.


----------



## Aloa (4. Mai 2005)

Ok ich hab daran mal weitergewerkelt.
Ich hab trotzdem Probleme.
Der Inlineframe besetz sozusagen die ganze Mitte. Ich möchte, dass das Inlineframe in der Mitte geteilt wird und nach rechts verlagert. Auf der Linken hälfte soll noch eine Tabelle hinkommen wie ich sie ganz oben gezeichnet habe.
Außerdem muss um den Inlineframe in jeder richtung eine 5 Pixel breite Tabelle.
Hier mein Code. würde mich freuen wenn mir jemand helfen könnte.

```
<html>
  <head>
    <title>Titel</title>
    <style type="text/css">

  body
    {
      background-color: #FFFFFF;
      font-family: verdana;
      font-size: 10px;
      color: #000000;
      font-style: normal;
      font-weight: normal;
      margin: 0;
    }

    #centerDiv
    {
    position: absolute;
    left: 50%;
    width: 745px;
    margin-left: -372.5px; /* neg. Hälfte von width:745px = horizontal zentriertes DIV */
    top: 50%;
    height: 592px; /* Tatsächliche Tabellen-Höhe */
    margin-top: -296px; /* neg. Hälfte von height:592px = vertikal zentriertes DIV */
    }

    a:link, a:visited
    {
      font-weight: normal;
      color: #FF9900;
      text-decoration: none;
    }
    a:hover
    {
      font-weight: normal;
      color: white;
      text-decoration: none;
      background-color: #FF9900
  </style>


  </head>
  <body>
    <div id="centerDiv" style="width: 768; height: 596">
      <table border="1" width="745" id="table1" height="500" cellspacing="0" bordercolorlight="#000000" style="border-collapse: collapse" cellpadding="0" bordercolordark="#000000">
        <tr>
          <td height="30" colspan="8" bgcolor="FFFFFF" width="745">
            <font color="#FFFFFF">&nbsp; </font>
          </td>
        </tr>
        <tr>
          <td rowspan="4" width="10" height="500" bgcolor="FFFFFF">
            <font color="#FFFFFF">&nbsp; </font>
          </td>
          <td height="109" colspan="6" width="674">
            &nbsp;</td>
          <td rowspan="4" border="1" width="10" height="500" bgcolor="FFFFFF">
            <font color="#FFFFFF">&nbsp; </font>
          </td>
        </tr>
        <tr>
          <td height="36" width="229" bgcolor="FFFFFF">
            &nbsp;</td>
          <td height="36" colspan="5" bgcolor="FFFFFF" width="445">
            &nbsp;
          </td>
        </tr>
        <tr>
          <td colspan="6" height="400" bgcolor="FFFFFF" width="674">
            <span style="font-size: 8pt">
            <iframe name="I1" height="100%"
            width="100%" border="0" frameborder="0" target="inhalt" src="home/home.html">
            Ihr Browser unterstützt Inlineframes nicht oder zeigt sie in der
            derzeitigen Konfiguration nicht an.</iframe></span>
          </td>
        </tr>
        <tr>
          <td height="24" colspan="6" bgcolor="FFFFFF" width="674">
            <p align="center" style="font-size: 8pt">
            &nbsp;</p>
          </td>
        </tr>
      </table>
    </div>
  </body>
</html>
```


----------



## Maik (4. Mai 2005)

Beim Lesen deines Source-Codes hatte ich gerade ein Déjà-vu :suspekt: 

Und siehe da >>> Tabelle fehlerhaft 


Besonders viel hast du an dem Source aber nicht _weitergewerkelt_ bzw. ausprobiert, ausser die graue Tabellenzellen-Hintergrundfarbe dem weissen Seitenhintergrund anzupassen, sowie die Navigation und das Copyright zu entfernen ... 


Modifizierter Source-Code:

```
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
<title>Titel</title>
<style type="text/css">
<!--
body
    {
      background-color: #FFFFFF;
      font-family: verdana;
      font-size: 10px;
      color: #000000;
      font-style: normal;
      font-weight: normal;
      margin: 0;
    }

div#centerDiv
    {
    position: absolute;
    left: 50%;
    width: 745px;
    margin-left: -372.5px; /* neg. Hälfte von width:745px = horizontal zentriertes DIV */
    top: 50%;
    height: 600px; /* Tatsächliche Tabellen-Höhe */
    margin-top: -300px; /* neg. Hälfte von height:600px = vertikal zentriertes DIV */
    }

table#table1
    {
    width: 745px;
    height: 600px; /* Tatsächliche Tabellen-Höhe */
    border-collapse: collapse;
    }

a:link, a:visited
    {
      font-weight: normal;
      color: #FF9900;
      text-decoration: none;
    }

a:hover
    {
      font-weight: normal;
      color: white;
      text-decoration: none;
      background-color: #FF9900;
    }
-->
</style>

</head>
  <body>
    <div id="centerDiv">
      <table border="1" id="table1" cellspacing="0" cellpadding="0">
        <tr>
          <td height="30" colspan="8" bgcolor="FFFFFF" width="745">
            <font color="#FFFFFF">&nbsp; </font>
          </td>
        </tr>
        <tr>
          <td rowspan="4" width="10" height="500" bgcolor="FFFFFF">
            <font color="#FFFFFF">&nbsp; </font>
          </td>
          <td height="109" colspan="6" width="725">
            &nbsp;</td>
          <td rowspan="4" border="1" width="10" height="500" bgcolor="FFFFFF">
            <font color="#FFFFFF">&nbsp; </font>
          </td>
        </tr>
        <tr>
          <td height="36" width="362" bgcolor="FFFFFF">
            &nbsp;</td>
          <td height="36" colspan="5" bgcolor="FFFFFF" width="362">
            &nbsp;
          </td>
        </tr>
        <tr>
        <td height="36" width="362" bgcolor="FFFFFF">
            &nbsp;</td>
           <td colspan="5" height="400" bgcolor="FFFFFF" width="362">
            <iframe name="I1" height="400"
            width="362" border="0" frameborder="0" src="home/home.html">
            Ihr Browser unterstützt Inlineframes nicht oder zeigt sie in der
            derzeitigen Konfiguration nicht an.</iframe>
          </td>
        </tr>
        <tr>
          <td height="24" colspan="6" bgcolor="FFFFFF" width="725">
            <p align="center" style="font-size: 8pt">
            &nbsp;</p>
          </td>
        </tr>
      </table>
    </div>
  </body>
</html>
```


----------



## Aloa (4. Mai 2005)

Ich hab auf meinem Rechner sehr viel versucht es zu verändern, was auch geklappt hat.
Um den Code ins Internet zu stellen, musste ich so viel wie möglich entfernen,
wegen begrenzter Anzahl von Buchstaben.
Deswegen sieht das da ungeändert aus.

Ich danke für den Code und werde mir den erstmal anschauen.
Wenn es Probleme gibt werde ich mich melden.


----------



## Aloa (5. Mai 2005)

kann mir jemand das so hinrichten, dass um den inlineframe jeweil auf jeder seite (über,unter,links und rechts) eine Tabelle mit breite 10 Pixel ist...?


----------



## Maik (5. Mai 2005)

Wozu eine Tabelle mit 10px Breite?

Gib dem iFrame einen Aussenabstand *margin: 10px* und verringere seine Breite / Höhe gegenüber der umschliessenden Tabellenzelle um 20px.

Ergänzung zu meinem gestrigen Source-Code:

CSS-Code:

```
iframe#I1
{
width: 342px; /* = 362px - 2*10px (margin-left, -right) */
height: 380px; /* = 400px - 2*10px (margin-top, -bottom) */
margin: 10px; /* Aussenabstand zu allen vier Seiten */
}
```


```
<iframe name="I1" id="I1" frameborder="0" marginheight="0" marginwidth="0" src="home/home.html">
Ihr Browser unterstützt Inlineframes nicht oder zeigt sie in der derzeitigen Konfiguration nicht an.
</iframe>
```

[ editpost ]

Anmerkung: wenn dieser  10px-Abstand eine Hintergrundfarbe bekommen soll, tauscht du *margin* gegen *border* aus:

```
iframe#I1
{
width: 342px; /* = 362px - 2*10px (border-left, -right) */
height: 380px; /* = 400px - 2*10px (border-top, -bottom) */
border: 10px solid #dfdfdf; /* Rahmen um alle vier Seiten */
}
```


----------



## Gumbo (5. Mai 2005)

Mein Vorschlag:
	
	
	



```
<div id="container">
	<div id="header">Header</div>
	<div id="content">Content</div>
	<div id="sidebar">Sidebar</div>
	<div id="footer">Footer</div>
</div>
```


```
* {
	margin:			0;
	padding:		0;
}
body {
	padding:		0 20px;
	text-align:		center;
	background:		url(http://www.printmini.com/printables/wpf/palefloral.gif) repeat;
}
#container {
	position:		relative;
	margin:			0 auto;
	min-width:		736px;
	max-width:		64em;
	text-align:		left;
	background-color:	#fe0;
}
#header {
	height:			5em;
	background-color:	#f03;
}
#content {
	width:			80%;
	height:			20em;
	margin-left:		20%;
	background-color:	#36f;
}
#sidebar {
	position:		absolute;
	top:			5em;
	width:			20%;
	height:			10em;
	background-color:	#f0e;
}
#footer {
	clear:			both;
	height:			5em;
	background-color:	#3c3;
}
```


----------



## Aloa (5. Mai 2005)

Vielen Dank michaelsinterface für deine Hilfe. Das war das was ich gesucht hatte.
Ich möchte in jede Tabelle ein Bild einfügen (farbübergang).

Nur Gumbos Vorschlag verstehe ich nicht. Bei mir funktioniert der erste Quelltext nur so,dass der Text dann angezeigt wird und bei dem zweiten ändert sich nur das Hintergrundsbild, wovon ich leider schon eins besitze...


----------



## Gumbo (5. Mai 2005)

Hast du das von mir vorgeschlagene CSS auf den von mir beschriebenen HTML-Code angewandt?


----------



## Aloa (6. Mai 2005)

ja.
Bei dem ersten steht da nur der Text und beim zweiten ändert sich nur der Hintergrund.
Dann habe ich noch ein Problem. Ich möchte auf jede Seite der neuen Tabelle ein Bild einfügen aber wenn ich das Bild einfüge, dann ist da ein durchgestrichener Kreis, was bedeutet, dass ich kein Bild einfügen kann.
Und warum?


----------



## Aloa (7. Mai 2005)

Meine Frage ist, wieso kann ich in den 10 Pixel breiten Rahmen keine Bilder einfügen,die von der größe her passen würden?


----------



## Gumbo (7. Mai 2005)

Welche 10 Pixel breite Grenze?


----------



## Maik (7. Mai 2005)

Du kannst doch in der umschliessenden Tabellenzelle ein Hintergrundbild einfügen?

CSS-Code für Hintergrundbild, das so gross wie die Tabellenzelle ist:


```
td.bgImage
{
width: 362px;
height: 400px;
background: url(dein_bgImage.jpg);
}
```


```
<td class="bgImage" colspan="5">
 <iframe name="I1" id="I1" frameborder="0" marginheight="0" marginwidth="0" src="home.html" scrolling="yes">
      Ihr Browser unterstützt Inlineframes nicht oder zeigt sie in der derzeitigen Konfiguration nicht an.
 </iframe>
</td>
```
 Anmerkung: für das iFrame-Element wird der Aussenabstand *margin: 10px* zum Tabellenzellenrand bestimmt, so bleibt ein 10px-Rand mit der Hintergrundgrafik sichtbar.


Hier der weiterentwickelte Source-Code, basierend auf meinen Source-Postings vom 04. / 05. Mai:


```
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
<title>Titel</title>
<style type="text/css">
<!--
body
    {
      background-color: #FFFFFF;
      font-family: verdana;
      font-size: 10px;
      color: #000000;
      font-style: normal;
      font-weight: normal;
      margin: 0;
    }

div#centerDiv
    {
    position: absolute;
    left: 50%;
    width: 745px;
    margin-left: -372.5px; /* neg. Hälfte von width:745px = horizontal zentriertes DIV */
    top: 50%;
    height: 600px; /* Tatsächliche Tabellen-Höhe */
    margin-top: -300px; /* neg. Hälfte von height:600px = vertikal zentriertes DIV */
    }

table#table1
    {
    width: 745px;
    height: 600px; /* Tatsächliche Tabellen-Höhe */
    border-collapse: collapse;
    }

td.bgImage
    {
    width: 362px;
    height: 400px;
    background: url(dein_bgImage.jpg);
    }

iframe#I1
    {
    width: 342px; /* = 362px - 2*10px (margin-left, -right) */
    height: 380px; /* = 400px - 2*10px (margin-top, -bottom) */
    margin: 10px; /* Aussenabstand zu allen vier Seiten */
    background: #ffffff;
    }

a:link, a:visited
    {
    font-weight: normal;
    color: #FF9900;
    text-decoration: none;
    }
a:hover
    {
    font-weight: normal;
    color: white;
    text-decoration: none;
    background-color: #FF9900;
    }
-->
</style>

</head>
  <body>
    <div id="centerDiv">
      <table border="1" id="table1" cellspacing="0" cellpadding="0">
        <tr>
          <td height="30" colspan="8" bgcolor="FFFFFF" width="745">
            <font color="#FFFFFF">&nbsp; </font>
          </td>
        </tr>
        <tr>
          <td rowspan="4" width="10" height="500" bgcolor="FFFFFF">
            <font color="#FFFFFF">&nbsp; </font>
          </td>
          <td height="109" colspan="6" width="725">
            &nbsp;</td>
          <td rowspan="4" border="1" width="10" height="500" bgcolor="FFFFFF">
            <font color="#FFFFFF">&nbsp; </font>
          </td>
        </tr>
        <tr>
          <td height="36" width="362" bgcolor="FFFFFF">
            &nbsp;</td>
          <td height="36" colspan="5" bgcolor="FFFFFF" width="362">
            &nbsp;
          </td>
        </tr>
        <tr>
        <td height="36" width="362" bgcolor="FFFFFF">
            &nbsp;</td>
           <td class="bgImage" colspan="5">
            <iframe name="I1" id="I1" frameborder="0" marginheight="0" marginwidth="0" src="home.html" scrolling="yes">
            Ihr Browser unterstützt Inlineframes nicht oder zeigt sie in der
            derzeitigen Konfiguration nicht an.</iframe>
          </td>
        </tr>
        <tr>
          <td height="24" colspan="6" bgcolor="FFFFFF" width="725">
            <p align="center" style="font-size: 8pt">
            &nbsp;</p>
          </td>
        </tr>
      </table>
    </div>
  </body>
</html>
```


----------

