HTML Tabellenzeilen mit relativer Höhenangabe

Pelzameise · 21. Februar 2010

Hi,
ich will mit einer Tabelle auf meiner HTML-Seite kleinere Bilder genau auf meinem Hintergrundbild positionieren.

das Hintergrundbild:

Schnell mit Paint zusammengeschustert, wird automatisch über den ganzen Bildschirm gestreckt. (Das soll eigentlich symmetrisch sein.

)

Also hier mein HTML-Code:

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>info1</title>
<meta name="author" content="Leo">
<meta name="editor" content="html-editor phase 5">
</head>
<body bgcolor="#DDDDDD" marginheight=0 marginwidth=0 topmargin=0 leftmargin=0>
<img src="bilder/strasse.jpg" height=100% width=100%>
<div style="position:absolute; left:0; top:0">


<table width="100%" border="1" cellpadding="0" cellspacing="0">
 <tr style="height:20%">
  <td>text1</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
 </tr>
 <tr height="20%">
  <td>text1</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
 </tr>
 <tr height="20%">
  <td>text1</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
 </tr>
 <tr height="20%">
  <td>text1</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
 </tr>
 <tr height="20%">
  <td>text1</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
 </tr>
</table>





</div>

</body>
</html>

Ich will, dass die Tabelle auch über den ganzen Bildschirm gestreckt wird. Und das geht im TR-Tag weder mit height="", noch mit CSS.

Wenn ich dann Bilder in die Tabelle einfüge, kann ich die mit Javascript dann noch verändern?

Könnt ihr helfen? Danke.

Whiz-zarD · 21. Februar 2010

Code:

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
  <head>
    <meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
    <link rel="stylesheet" href="style.css" />
  </head>
  <body>
  <table>
 <tr>
  <td>text1</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
 </tr>
 <tr>
  <td>text1</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
 </tr>
 <tr>
  <td>text1</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
 </tr>
 <tr>
  <td>text1</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
 </tr>
 <tr>
  <td>text1</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
 </tr>
</table>
</body>
</html>

Code:

html {
width:100%;
height:100%;
}

body {
width:100%;
height:100%;
background-image: url('bg.jpg');
}

table{
width:100%;
height:100%;
padding:0px;
margin:0px;

}

td{
width:20%;
height:20%;
border:1px solid #ffffff;
}

tr{
height:20%;
}

Prozentangaben können nur funktionieren, wenn das Eltern-Element (In deinem Fall 'Body') eine Feste größe hat, womit dann der Renderer arbeiten kann.

ChrisKam · 21. Februar 2010

Sorry, aber ich glaube hier ist erstmal ein Grundkurs in HTML erforderlich. Es gibt kein "height" Attribut für tr, da kannste schonmal alle möglichen Interpretationen quer durch die Browserlandschaft erwarten. Davon abgesehen würde ich ohnehin stark davon abraten, das mit Tabellen zu machen sondern lieber erstmal lernen, wie man ein Gerüst auf DIVs bastelt.

und was soll das hier <img src="bilder/strasse.jpg" height=100% width=100%> ? Wenn das ein Hintergrund sein soll, würde ich stark empfehlen das Bild nicht im img tag reinzuklatschen, dadurch wird alles verdrängt. Wenn du meinst, das mit "position: absolute" und am besten noch irgendeinem z-index o.a. zu überdecken, dann Post Mahlzeit. Im Ernst - dir hilft nur ein Crashkurs in DIV-basierten Layouts + CSS.

Pelzameise · 21. Februar 2010

@ Whiz-zarD:
Danke für deine Antwort. Du musst mir aber noch 1 Zeile erklären:

Code:

<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />

Und dann muss ja auch noch das Hintergrundbild rein, und es muss, egal wie groß die Auflösung, über den ganzen Bildschirm gehen. Hab da keine andere Möglichkeit gefunden, als oben.

@ ChrisKam:
1. Ja, jeder fängt mal an, auch wenn es spät ist.
2. Hab ich geändert. Hatte danach noch etwas ausprobiert, und war nicht weit genug zurück gegangen.

Whiz-zarD · 21. Februar 2010

Pelzameise schrieb:
@ Whiz-zarD:
Danke für deine Antwort. Du musst mir aber noch 1 Zeile erklären:

Code:

<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />

Das ist einfach nur ein Meta-Element, dass den Content der HTML Inhalt beschreibt.
Es ist text/html, mit einer UTF-8 Zeichencodierung.

Pelzameise · 21. Februar 2010

Und was ist mit dem Hintergrundbild?

Whiz-zarD · 21. Februar 2010

schau dir das body Element in der CSS Datei an.
Da steht was von background-image ...

Pelzameise · 21. Februar 2010

Sicher, aber mein Problem ist, dass das Bild mit dem Fenster verkleinert und vergrößert werden muss. Wenn ich das Fenster klein mache, seh ich von dem Bild nur noch grün.

Whiz-zarD · 21. Februar 2010

da kann es passieren, dass die Browser nicht richtig mitspielen.
Opera tut dies z.B. nicht. Opera passt erst die Höhe an, wenn die Breite verändert wird.
Daruch wird auch das Bild verzerrt.
Da ich aber nun kein Bock habe, für dich die Drecksarbeit zu machen. Schau dir den Quelltext von dieser Seite an.
http://hoffmann.bplaced.net/labor/csshintergrundfix.php

Pelzameise · 22. Februar 2010

Super, du hast mir sehr geholfen. Jetzt fang ich erst mal an, mich in Javasript einzuarbeiten.

Suche

HTML Tabellenzeilen mit relativer Höhenangabe

Pelzameise

Sachse

Whiz-zarD

Gast

ChrisKam

Cadet 4th Year

Pelzameise

Sachse

Whiz-zarD

Gast

Pelzameise

Sachse

Whiz-zarD

Gast

Pelzameise

Sachse

Whiz-zarD

Gast

Pelzameise

Sachse

Ähnliche Themen