• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

Vert. u. hor. zentrierte Tabelle 3x3 in Auflösung 800x600

Status
Für weitere Antworten geschlossen.
R

ricardoman

Neues Mitglied
Hallo Leute,

mein Task ist eine Tabelle mit 3x3 Feldern zu bauen, die nicht größer als 800x600 Pixel sein darf. Außerdem sollte sie horizontal und vertikal zentriert sein.

Kein Problem, hab ich mir gedacht und fologendes auf die binäre Welt losgelassen:

<html>
<head>
<title>Mittig</title>
</head>
<body>
<table width="100%" height="100%" border="0" cellpadding="0" cellspacing="0">
<tr>
<td align="center" valign="middle">
<iframe set rows="200,200,200" border="0">
<iframe set cols="266,268,266" border="0">
<iframe src="http://www.koeckeis.at/bt/testpage/liob.html" scrolling="no">
<iframe src="http://www.koeckeis.at/bt/testpage/miob.html" scrolling="no">
<iframe src="http://www.koeckeis.at/bt/testpage/reob.html" scrolling="no">
</iframe set>
<iframe set cols="266,268,266" border="0">
<iframe src="http://www.koeckeis.at/bt/testpage/limi.html" scrolling="no">
<iframe src="http://www.koeckeis.at/bt/testpage/mimi.html" scrolling="no">
<iframe src="http://www.koeckeis.at/bt/testpage/remi.html" scrolling="no">
</iframe set>
<iframe set cols="266,268,266" border="0">
<iframe src="http://www.koeckeis.at/bt/testpage/liun.html" scrolling="no">
<iframe src="http://www.koeckeis.at/bt/testpage/miun.html" scrolling="no">
<iframe src="http://www.koeckeis.at/bt/testpage/reun.html" scrolling="no">
</iframe set>
</iframe set>
</td>
</tr>
</table>
</body>
</html>

Leider ist das Erbegnis nicht das, was es für mich sein sollte, und ich finde beim besten Willen keinen Fehler!

Das Online-Erbgebnis könnt ihr übrigens hier sehen:

Mittig

Ich wäre für eure Hilfe sehr dankbar!

Grüße, Ric.
 
Na ja, bestimmt könnte das jemand... ich vielleicht auch, aber ich frage dich:
"Warum sollte ich eine alte, unsaubere, schlechte und benutzerunfreundliche Methode unterstützen?" Ich will damit sagen, dass ich die gerne helfen würde, wenn du nicht ein Tabellen-Frame-Layout verwenden würdest. Das ist schon lange nicht mehr aktuell.

Hier mit ermutige ich dich, eine Webseite aufzubauen, die ein CSS-Layout verwendet. Dsa geht einfacher, schneller und ist ausgereifter.

Linktipp: SELFHTML: Stylesheets / CSS-basierte Layouts
 
Warum versuchst du es dann mit Frames zu realisieren, die in einer Tabelle sind? Eine 3x3 Tabelle ist doch einfach zu erstellen.

PHP: 
<table>
  <tr>
    <td></td>    
    <td></td>    
    <td></td>
  </tr>
  <tr>
    <td></td>    
    <td></td>    
    <td></td>
  </tr>  
  <tr>
    <td></td>    
    <td></td>    
    <td></td>
  </tr>
</table>
Natürlich solltest du die Tabelle nur für tabellarische Daten verwenden und nicht fürs Layout, das wird einzig mit CSS gemacht. HTML ist nur für die Semantik verantwortlich.
 
zu <Thor>:

Da hast du völlig recht.

HTML = Struktur (aber nicht Design-Struktur!)
CSS = Design

(Warum hast du den Tabellen Code als PHP-Code eingefügt?)
 
ricardoman schrieb:
mein Task ist eine Tabelle mit 3x3 Feldern zu bauen, die nicht größer als 800x600 Pixel sein darf. Außerdem sollte sie horizontal und vertikal zentriert sein.
Zum Vergrößern anklicken....
Wer hat diesen "Task" aufgestellt?
Welcher Sinn steckt dahinter?
Was hat das mit der Auflösung zu tun, wie Du im Thema schreibst?

Kein Problem, hab ich mir gedacht und fologendes auf die binäre Welt losgelassen:
Zum Vergrößern anklicken....
Zu Testzwecken auf dem eigenen Rechner würde ich das ja noch kopfschüttelnd akzeptieren. Aber praktisch einsetzbar ist das keinesfalls. Daher wundert es wohl auch nicht, dass das nicht Deinen Erwartungen entspricht.

Leider ist das Erbegnis nicht das, was es für mich sein sollte, und ich finde beim besten Willen keinen Fehler!
Zum Vergrößern anklicken....
Abgesehen vom Sinn des Ganzen gibt es auch syntaktische Fehler. Die musst aber nicht Du finden, da kannst Du auch den The W3C Markup Validation Service drauf loslassen, der findet die auch:
Code: 
<iframe set rows="200,200,200" border="0">
<iframe set cols="266,268,266" border="0">
</iframe set>
Das ist Nonsense. Was soll das bewirken?

Das Online-Erbgebnis könnt ihr übrigens hier sehen:
Zum Vergrößern anklicken....
Lieber nicht.
Zu horizontalem und vertikalem Zentrieren findest Du bei Google sicher etliche tausend Ergebnisse, vielleicht auch zehntausende. Da hast Du Dich also nicht schlau gemacht.
Das Zentrieren von Tabellen funktioniert übrigens genauso wie mit allen anderen Block-Elementen. Und das vertikale Zentrieren ist leider nicht mit allen modernen Browsern möglich, die Variante, die man nutzen kann, könnte gefährlich enden, aber das findest Du sicher alles raus, wenn Du mal ein wenig suchst.

Gruß,
-Efchen
 
Hallo alle miteinander !!!

Also, ich hab mir euren Rat zu herzen genommen und in mühseligen Stunden meine erste CSS-Seite gebaut mit dem schon angesprochenen Grid von 3x3 Kästen mit der passenden Auflösung, wobei ich die vertikale Zentrierung (wie von Efchen gewarnt) aufgegeben habe.

Das Ergebnis seht ihr hier:

Testseite

Juhu erstmals!

Soda, nun wollte ich die einzelnen divs miteinander verlinken, so dass wenn ich zB Links Mitte drücke, etwas rechts oben passiert. Im "alten, unsauberen, schlechten und benutzerunfreundlichen" System, hätte ich das jetzt über ein name=/target= gespielt.

Ich habe mir - nur um dem Vorwurf mich nicht schlau gemacht zu haben zu entegehen - etliche Foren und CSS-Lern-Seiten durchgeschaut. Leider nichts gefunden und die gleiche Frage in anderen Foren bleibt unbeantwortet.

Ich bitte um Hilfe!
 
Hmmm...was willst Du mit dieser Seite erreichen? Eine Website kann man damit nicht machen.

Wozu ein Grid? Wozu position:relative? Brauchst Du nicht. Die HTML-Elemente werden vom Browser selbständig positioniert. Mit "float" und "margin" kann man wunderbar nachhelfen, mehr brauchts eigentlich nicht.
Dann diese Links in den divs...wolltest Du da Inhalte reinladen? Dazu mach Dich schlau nach serverseitigem Include.
Dein HTML-Code...naja, es ist kein Inhalt da, deswegen kann man auch keinen sinnvollen HTML-Code schreiben, denn HTML zeichnet ja nur den Inhalt logisch aus.
Der Doctype sollte so gewählt sein, dass er die Browser in den Standards Mode versetzt. Im Quirks Mode gibt es Darstellungsunterschiede.
Und "rechtsunten" ist ein schlecht gewählter Name für eine ID, wenn Du das mal woanders hinschieben willst, hast Du ein Element, das links unten steht, aber rechtsunten heißt. Oder Du musst doch wieder in den HTML-Code reinlangen und das überall abändern. Trennung von Inhalt und Layout.

Ich würde Dir raten, erstmal HTML zu lernen und zu lernen, wie Du Deinen Inhalt richtig auszeichnest, ohne dabei an das Aussehen zu denken, denn dafür ist HTML nicht da. Nur, um Deinem Inhalt eine Bedeutung zu geben: Überschriften, Textabsätze, wichtige Passagen, Adressen, Zitate, etc.
 
Efchen schrieb:
Hmmm...was willst Du mit dieser Seite erreichen? Eine Website kann man damit nicht machen.

Wozu ein Grid? Wozu position:relative? Brauchst Du nicht. Die HTML-Elemente werden vom Browser selbständig positioniert. Mit "float" und "margin" kann man wunderbar nachhelfen, mehr brauchts eigentlich nicht.
Dann diese Links in den divs...wolltest Du da Inhalte reinladen? Dazu mach Dich schlau nach serverseitigem Include.
Dein HTML-Code...naja, es ist kein Inhalt da, deswegen kann man auch keinen sinnvollen HTML-Code schreiben, denn HTML zeichnet ja nur den Inhalt logisch aus.
Der Doctype sollte so gewählt sein, dass er die Browser in den Standards Mode versetzt. Im Quirks Mode gibt es Darstellungsunterschiede.
Und "rechtsunten" ist ein schlecht gewählter Name für eine ID, wenn Du das mal woanders hinschieben willst, hast Du ein Element, das links unten steht, aber rechtsunten heißt. Oder Du musst doch wieder in den HTML-Code reinlangen und das überall abändern. Trennung von Inhalt und Layout.

Ich würde Dir raten, erstmal HTML zu lernen und zu lernen, wie Du Deinen Inhalt richtig auszeichnest, ohne dabei an das Aussehen zu denken, denn dafür ist HTML nicht da. Nur, um Deinem Inhalt eine Bedeutung zu geben: Überschriften, Textabsätze, wichtige Passagen, Adressen, Zitate, etc.
Zum Vergrößern anklicken....

Danke für die rasche Antwort. Also mehr Content als 9 Bilder gibt es nicht. Und diese sind bereits eingefügt (derzeit noch als Platzhalter für die Bilder, die später kommen) Ich würde gern wissen, wie ich die Bilder jetzt verlinken kann. Im alten Frame-System hätte ich das über eine name/target-Kombi gemacht. Wie kann ich das hier im CSS mit den divs?

MfG.
 
Also erstmal sind divs kein CSS. Du verrennst Dich da in ein viel verbreitetes Gerücht, divs wären irgendwie mit CSS untrennbar verbunden.

Wenn Du neun Bilder in der angegebenen Form haben willst, verstehe ich nicht, warum Du
a) jedes Bild in ein <div> packst (mit div gruppiert man mehrere Elemente!)
b) relative Positionierung benutzt.

Packe alle Bilder nacheinander in ein einziges <div> (um die Bilder zu gruppieren und um sie als ein gemeinsames Element zu formatieren, sprich um sie zu zentrieren. Dazu ist ein div da), gib dem die gewünschte Breite und zentriere es.
Durch die feste Breite gibt es dann automatisch einen Zeilenumbruch nach drei Bildern.
Der Code, den Du da jetzt hast, ist völlig aufgebläht. Wegschmeißen, neu machen :-)

Verlinken? Mit dem <a>-Tag, wie schon immer. Links sind HTML. Daran ändert sich nichts, nur weil man CSS benutzt. CSS ist für das Aussehen (Layout&Design). Mit Links hat das nichts zu tun.
 
Status
Für weitere Antworten geschlossen.

Neueste Beiträge

Zurück
Oben