position:relative

[Achim]

Hi,

ich habe eine Tabelle mit "<div style="position:relative; left:0px; top:0px; widht:800px;">" sowohl auf dem Monitor zentriert, als auch Ihrer "static-position" beraubt.
Frage 1: Stimmt das? (Jedenfalls stellt der Browser das so dar)

Nun möchte ich innerhalb einer Tabellenzelle (die ich mit valign=middle versehen habe) Text und ein Bild unterbringen.
Der Text soll aber eigentlich "valign=top" sein während für das Bild "valign=middle" ok ist.

Ich kann die Zelle nicht horizontal teilen, weil die Inhalte dynamisch geladen werden und ich nur die Gesamthöhe der Zelle vorgeben möchte, nicht aber die der "Teilinhalte".

Ich dachte mir, das müßte doch über "position:relative top:0px;" zu schaffen sein, aber das klappte nicht.

Warum nicht?

Grüße, Achim

[wahsaga]

hi,

ich habe eine Tabelle mit "<div style="position:relative; left:0px; top:0px; widht:800px;">" sowohl auf dem Monitor zentriert, als auch Ihrer "static-position" beraubt.
Frage 1: Stimmt das? (Jedenfalls stellt der Browser das so dar)

In wie fern sollte die Positionierung eines 800px breiten Elementes genau an der Position, an der es auch "normal" dargestellt würde, eine Zentrierung darstellen?
Wenn das zentriert dargestellt wird, hast du die Zentrierung wohl irgendwie anders erreicht.

Nun möchte ich innerhalb einer Tabellenzelle (die ich mit valign=middle versehen habe) Text und ein Bild unterbringen.
Der Text soll aber eigentlich "valign=top" sein während für das Bild "valign=middle" ok ist. [...]
Ich dachte mir, das müßte doch über "position:relative top:0px;" zu schaffen sein, aber das klappte nicht.

Warum nicht?

Weil relative Positionierung den Versatz zur Normalposition des Elementes im normalen Elementfluss angibt - und top:0 heißt dann was? Genau, stelle das Element in y-Richtung um 0 (px, em, wasauchimmer) versetzt zu seiner Normalposition dar.

gruß,
wahsaga

[Achim]

In wie fern sollte die Positionierung eines 800px breiten Elementes genau an der Position, an der es auch "normal" dargestellt würde, eine Zentrierung darstellen?
Wenn das zentriert dargestellt wird, hast du die Zentrierung wohl irgendwie anders erreicht.

Hi Wahsaga,

natürlich, Du hast Recht. Ich habe per <center> zentriert, logo.
Zusätzlich möchte ich aber die Tabelle selber als das für mein eigentliches Problem entscheidende Element festlegen, daher das position:relative mit 0px Versatz in beide Richtungen.

Nun möchte ich innerhalb einer Tabellenzelle (die ich mit valign=middle versehen habe) Text und ein Bild unterbringen.
Der Text soll aber eigentlich "valign=top" sein während für das Bild "valign=middle" ok ist. [...]
Ich dachte mir, das müßte doch über "position:relative top:0px;" zu schaffen sein, aber das klappte nicht.

Warum nicht?

Weil relative Positionierung den Versatz zur Normalposition des Elementes im normalen Elementfluss angibt - und top:0 heißt dann was? Genau, stelle das Element in y-Richtung um 0 (px, em, wasauchimmer) versetzt zu seiner Normalposition dar.

Fein. Das würde mir auch weiterhelfen, aber leider weiß ich ja nicht,  in wieweit die Zelle von Text und/oder Bild ausgefüllt wird. Woher also den y-Wert nehmen? Denn die Zelle insgesamt soll einen bestimmten Wert in der Gesamthöhe ja nicht überschreiten :-(

Und nu?

Grüße, Achim

gruß,
wahsaga

[wahsaga]

hi,

Ich habe per <center> zentriert, logo.

Nicht logo, sondern bäh.
Verwende keinen veralteten HTML-(Pseudo-)Elemente, um darstellung zu beeinflussen, sondern setze auf CSS.
Block-Elemente zentrierst du, in dem du (wie hier schon unzählige male erwähnt) die seitlichen margins auf auto setzt. (Plus ggf. workaround für ältere IE, aber ebenfalls x-fach erwähnt ...)

Zusätzlich möchte ich aber die Tabelle selber als das für mein eigentliches Problem entscheidende Element festlegen, daher das position:relative mit 0px Versatz in beide Richtungen.

Wozu dann top und left explizit angeben? auto ist der Default, und wenn du keine von Vorfahrenelementen vererbten abweichenden Angaben hast, können die beiden ersatzlos entfallen.

Fein. Das würde mir auch weiterhelfen, aber leider weiß ich ja nicht,  in wieweit die Zelle von Text und/oder Bild ausgefüllt wird. Woher also den y-Wert nehmen?

Also könnte man als y-Wert 0 nehmen - aber nicht _relative_ Positionierung, sondern eine andere. (Aber diese auch nur, wenn man sich ihrer Auswirkungen absolut bewusst ist.)

gruß,
wahsaga

[Achim]

hi,

Hi Wahsaga,

Ich habe per <center> zentriert, logo.

Nicht logo, sondern bäh.
Verwende keinen veralteten HTML-(Pseudo-)Elemente, um darstellung zu beeinflussen, sondern setze auf CSS.

Hey, das hab ich mal so gelernt :-D

Block-Elemente zentrierst du, in dem du (wie hier schon unzählige male erwähnt) die seitlichen margins auf auto setzt. (Plus ggf. workaround für ältere IE, aber ebenfalls x-fach erwähnt ...)

Du, ich lese hier doch nur sehr unregelmäßig mit, kann also schon sein, daß ich sowas überlese.

Zusätzlich möchte ich aber die Tabelle selber als das für mein eigentliches Problem entscheidende Element festlegen, daher das position:relative mit 0px Versatz in beide Richtungen.

Wozu dann top und left explizit angeben? auto ist der Default, und wenn du keine von Vorfahrenelementen vererbten abweichenden Angaben hast, können die beiden ersatzlos entfallen.

Wo Du Recht hast... ;-)

Fein. Das würde mir auch weiterhelfen, aber leider weiß ich ja nicht,  in wieweit die Zelle von Text und/oder Bild ausgefüllt wird. Woher also den y-Wert nehmen?

Also könnte man als y-Wert 0 nehmen - aber nicht _relative_ Positionierung, sondern eine andere. (Aber diese auch nur, wenn man sich ihrer Auswirkungen absolut bewusst ist.)

Naja, wenn ich das nicht schon mit "absolute" versucht hätte, hätte ich ja gar nicht hier gefragt.
Aber ein position:absolute bringt mich in die Situation, nicht zu wissen, wo die Tabelle selber steht (weil ja zentriert).
Und die abloute positionierten Elemente beziehen sich leider nicht auf die Tabelle (warum eigentlich nicht, sondern am Browserfenster *grr*).
Ansich hatte ich ja gedacht, durch das verpassen des position:relative für die Tabelle hätte ich diese nun als Basis für sämtlich folgenden position:... gewählt. So hatte ich nämlich verstanden, was ich mir da zuvor angelesen hatte.

Scheint aber nicht so zu sein. Oder? Hätte ich aber gerne, weil dann könnte ich mir den Rest leicht errechnen...

Grüße, Achim

gruß,
wahsaga

[Kirtas]

Servus

Also erstmal würde ich auf Absolut verzichten, da diesn Tag nicht alle Browser vertragen (z.b Firfox)....

Zudem gibt es meines Wissen Left und Top so nicht...verwende  margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
margin-left: 0px;
padding-top: 0px;
padding-right: 0px;
padding-bottom: 0px;
padding-left: 0px;
usw.

Aber ehrlich gesagt verstehe ich dein Problem nicht ganz...
Kannst du echt die URL der Seite angeben und nochmals kurz und knapp das Problem schildern, am besten geleich auch noch den "So hätte ich es gerne"-Zustand....

Gruss Kirtas

[Jens Holzkämper]

Tach,

Also erstmal würde ich auf Absolut verzichten, da diesn Tag nicht alle Browser vertragen (z.b Firfox)....

wie kommst du auf diesen schmalen Pfad?

Zudem gibt es meines Wissen Left und Top so nicht

Dann solltest du erstmal noch einmal in das passende CSS-Kapitel schauen.

mfg
Woodfighter

[kirtas]

Tach

Ist so weil ist so (erfahrung)

Sorry stimmt, war mit den Gedanken neben anders....

Gruss

p.s. Achim: Hat dir meine Idee geholfen?

und hey jungs: Beantwortet Fragen und kotzt nicht den ganzen tag rum.....weil ich a) so oder so der Beste bin b) ihr eh alles falsch macht c) alle Foren die Gleichen Deppen beinhaltet d) ihr mal mehr ironie und spass haben sollten!!!!!!!

[Jens Holzkämper]

Tach,

Ist so weil ist so (erfahrung)

dann widerspricht deine Erfahrung der Realität. Der einzige Browser mit Problemen bei position ist inzwischen der IE.

mfg
Woodfighter

[wahsaga]

hi,

Ist so weil ist so (erfahrung)

Aus deinem Posting war wenig Erfahrung rauszulesen.

und hey jungs: Beantwortet Fragen und kotzt nicht den ganzen tag rum.....weil [...] c) alle Foren die Gleichen Deppen beinhaltet

Echt, wo bist du denn sonst noch aktiv?

gruß,
wahsaga

[Achim]

Servus

Also erstmal würde ich auf Absolut verzichten, da diesn Tag nicht alle Browser vertragen (z.b Firfox)....

Zudem gibt es meines Wissen Left und Top so nicht...verwende  margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
margin-left: 0px;
padding-top: 0px;
padding-right: 0px;
padding-bottom: 0px;
padding-left: 0px;
usw.

Aber ehrlich gesagt verstehe ich dein Problem nicht ganz...
Kannst du echt die URL der Seite angeben und nochmals kurz und knapp das Problem schildern, am besten geleich auch noch den "So hätte ich es gerne"-Zustand....

Gruss Kirtas

Hallo Kirtas,

erstmal danke für Dein Posting.
Die URL würde ich gerne posten wollen, aber die Seite existiert nur in einem Intranet.
Deshalb versuche ich es nochmal kurz zusammenzufassen und lasse mal den ganzen Schnörkel weg:
Ich möchte in einer Tabellenzelle, die im oberen Teil aus "n" Links besteht, darunter eine Linie (per Grafik eingefügt) und darunter ein Bild enthält, den oberen Teil (sprich die Links und die Linie) oben mit dem bündig am Zellenrand platzieren und den unteren Teil (also das Bild) im verbleibenden Platz der Zelle mittig platzieren.

Grüße an Dich, Achim

[Kirtas]

Hallo

Also wenn ich das Recht verstehe hast du drei Elemente in einer Zellenspalte.
<tr>
<td></td>
....
</tr>

Nun ich würde es ganz Einfach mit einer Tabelle lösen. D.h. eine Neue Tabelle in deiner Zellenspalte erstellen

<td>
<table width="100%" height="100%">
<tr>
<td height="x" vaglin="top" aglin="left">Dein Link<td>
</tr>
<tr>
<td height="x2" vaglin="top" aglin="left"> Dein Bild<td>
</tr>
<tr>
<td vaglin="middle" aglin="left"><td>
</tr>
</table>
</td>

Natürlich kannst du alle TD angaben auch per CSS machen.
Diese Variante ermöglicht es dir sehr schnell und schön dein Zelleninhalt zu gestallten.
Mit den Höhen (x + x2) kannst du den Top-Abstand definieren...

Hoffe das ist ein Ansatz...

Gruss Kirtas

p.s. sorry aber ich bin kein Liebhaber von divs....mit Tabellen lassen sich viel schöner Designs/Ideen umsetzen....

[Struppi]

p.s. sorry aber ich bin kein Liebhaber von divs....mit Tabellen lassen sich viel schöner Designs/Ideen umsetzen....

Ja Tabellen Designs, aber im allgemeinen ist es umgekehrt. Ohne Tabellen ist das (Designer)Leben viel einfacher.

Struppi.

[Achim]

Hi,

warum wollen eigentlich IMMER ALLE Leute hier im Forum nicht gerne einfach die gestellten Frage beantworten, sondern 1000 neue Ideen und Tips und Fragen zum Besten geben?

Warum nicht die Zelle teilen? Warum überhaupt Tabelle? usw., usw.

Ich habe ein Tabellenlayout, das einfach in diesem einen und einzigen Punkt an seine Grenzen stößt! Ansonsten aber bringt mir genau dieses Layout die größten Vorteile.

Die Zelle kann ich nicht teilen. Warum, habe ich einige Potings höher schonmal erwähnt!

Und nur, weil ich einiges nachfragen muß, bin ich doch nicht ganz blöd!

Und dann fragen sich manche Leute, warum ich weiter oben nach einem anderen Forum nachfrage.
Na, wenigstens das beantworte ich Euch jetzt mal: Weil in anderen Foren etwas weniger nach rechts, links, oben und unten geschaut wird und oft einfach etwas mehr auf die Frage selber eingegangen wird, getreu dem Motto "es geht um ein Teilproblem, weswegen der Fragesteller nie und nimmer alle zuvor getroffenen Entscheidungen über Bord werfen wird!".
Zudem arbeite ich an wenigstens 3 Rechnern zwischen Büro, Couchtisch und Arbeitszimmer. Und die Forenstruktur hier ermöglichst, anders als in vielen anderen Boards, eben nicht, daß man schnell erkennt, was man schon gelesen hat, bzw. was neu ist.

Also, sachdienliche Hinweise nehme ich gerne weiter entgegen, Links zu CSS-Foren aber auch.

Und trotzdem auch Danke für Eure bisherige Mühe und sorry fürs "auskotzen". :-)

Grüße, Achim

[Struppi]

warum wollen eigentlich IMMER ALLE Leute hier im Forum nicht gerne einfach die gestellten Frage beantworten, sondern 1000 neue Ideen und Tips und Fragen zum Besten geben?

Weil du ein Problem hast das du gerne gelöst haben willst.

Warum nicht die Zelle teilen? Warum überhaupt Tabelle? usw., usw.

Ich habe ein Tabellenlayout, das einfach in diesem einen und einzigen Punkt an seine Grenzen stößt! Ansonsten aber bringt mir genau dieses Layout die größten Vorteile.

Selbst mit einer Tabelle ist mein Vorschlag realisierbar

Die Zelle kann ich nicht teilen. Warum, habe ich einige Potings höher schonmal erwähnt!

Hab ich das verlangt?

Irgendwie scheinst du zu erwarten das dir niemand hilft und liest aufgrund dessen schon nicht mehr die Antworten bzw. nur das was dir nicht gefällt. Was man auch daran erkennt dass du fast gar nicht auf Vorschläge eingehst bzw. auch nicht deine Versuche mit den Vorschlägen zeigst.

Zudem arbeite ich an wenigstens 3 Rechnern zwischen Büro, Couchtisch und Arbeitszimmer. Und die Forenstruktur hier ermöglichst, anders als in vielen anderen Boards, eben nicht, daß man schnell erkennt, was man schon gelesen hat, bzw. was neu ist.

Richte dir einen account ein und genau das kannst du hier, im gegensatz zu vielen anderen Boards, nämlich einrichten. Ich arbeite auch an mehreren Rechnern und hier läßt wesentlich einfacher erkennen was du schon gelesen hast oder nicht und zwar auf allen Rechnern.

Struppi.

[Achim]

Selbst mit einer Tabelle ist mein Vorschlag realisierbar
Hi Struppi,

aber Dein Vorschlag hat doch mit meinem Problem nur wenig zu tun :-(

Ich möchte nicht die Links links und das Bild mittig, sondern dioe Links _oben_ und das Bild mittig.
Es geht also ausschließlich um die vertikale Verteilung des contents, nciht um die horizontale, denn da sollen "beide" Inhalte mittig sein.

Grüße, Achim

[Achim]

Selbst mit einer Tabelle ist mein Vorschlag realisierbar

Na, dann versuch doch mal:

--------------------------------------------------------
<HTML>
<HEAD>
<style type="text/css">
#header { background-color: #fff; color: #000; text-align: center; vertical-align:top; }
#header div { border-bottom:1px solid black; text-align: center; vertical-align:middle; }
</style>
</HEAD>
<BODY>
<TABLE>
<TR>
<TD height="800">
<div id="header">
<a href="#">link</a><BR>
<a href="#">link</a><BR>
<a href="#">link</a><BR>
<a href="#">link</a><BR>
</div><div>
<IMG SRC="...>
</div></TD>
</TR>
</TABLE>
</BODY>
</HTML>
----------------------------------------------------------------

So gehts jedenfalls nicht bei mir.

Grüße, Achim

[Struppi]

So gehts jedenfalls nicht bei mir.

So geht's nicht stimmt, du hast eine fixe Höhe (das ist für ein CSS Layout immer tödlich). Der einzige Weg ist ein Hintergrundbild.

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"  
      "http://www.w3.org/TR/html4/strict.dtd">  
<HTML>  
<HEAD>  
<style type="text/css">  
  
#header {  
color: #000;  
text-align: center;  
vertical-align:top;  
background: #fff url(test.jpg) 0 50% no-repeat ;  
}  
#header div {  
border-bottom:1px solid black;  
}  
</style>  
</HEAD>  
<BODY>  
<TABLE>  
<TR>  
<TD height="800" width=200 id="header">  
<div>  
<a href="#">link</a><BR>  
<a href="#">link</a><BR>  
<a href="#">link</a><BR>  
<a href="#">link</a><BR>  
</div>  
  
</TD>  
</TR>  
</TABLE>  
</BODY>  
</HTML>

Ansonsten sehe ich keine Chance das ohne JS zu lösen, da hier mehrere Anahmen erwartet werden, die mit Hilfe von CSS nicht erreichbar sind.

Struppi.

[Achim]

Hi Struppi,

So geht's nicht stimmt, du hast eine fixe Höhe (das ist für ein CSS Layout immer tödlich). Der einzige Weg ist ein Hintergrundbild.

background: #fff url(test.jpg) 0 50% no-repeat ;

Kannst Du mir diesen Satz genauer erklären? Was bewirkt "0 50%" genau?
Und Du weißt ja, ich weiß weder genau, wie hoch der Inhalt des oberen Teils wird, noch wie hoch das Bild im uneren Teil wird. :-(

Ansonsten sehe ich keine Chance das ohne JS zu lösen, da hier mehrere Anahmen erwartet werden, die mit Hilfe von CSS nicht erreichbar sind.

Hm...im Zweifel würde ich ja auch Javascript nehmen...wenn auch ausgesprochen ungerne.

Grüße, Achim

Struppi.

[Struppi]

Hallo Achim

Hi Struppi,

So geht's nicht stimmt, du hast eine fixe Höhe (das ist für ein CSS Layout immer tödlich). Der einzige Weg ist ein Hintergrundbild.

background: #fff url(test.jpg) 0 50% no-repeat ;

Kannst Du mir diesen Satz genauer erklären? Was bewirkt "0 50%" genau?
Und Du weißt ja, ich weiß weder genau, wie hoch der Inhalt des oberen Teils wird, noch wie hoch das Bild im uneren Teil wird. :-(

entspricht center
http://de.selfhtml.org/css/eigenschaften/hintergrund.htm#background_position

Das bewirkt eine Zentrierung des Bildes.

Wobei das aber nicht ganz das ist was du wolltest, du wolltest ja das bild in Höhe von 50% des testes der Zelle:

  
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"  
      "http://www.w3.org/TR/html4/strict.dtd">  
<HTML>  
<HEAD>  
<style type="text/css">  
#header {  
color: #000;  
text-align: center;  
vertical-align:top;  
background: #fff ;  
}  
#header div {  
border-top:1px solid black;  
background: #fff url(test.jpg) center center no-repeat ;  
height:100%;  
width:100%;  
}  
</style>  
</HEAD>  
<BODY>  
<TABLE>  
<TR>  
<TD height="800" width=200 id="header">  
<a href="#">link</a><BR>  
<a href="#">link</a><BR>  
<a href="#">link</a><BR>  
<a href="#">link</a><BR>  
<div></div>  
</TD>  
</TR>  
</TABLE>  
</BODY>  
</HTML>  

Struppi.

[Achim]

Hi Struppi,

Das bewirkt eine Zentrierung des Bildes.

Wobei das aber nicht ganz das ist was du wolltest, du wolltest ja das bild in Höhe von 50% des testes der Zelle:

»

Genau, entspricht ganz und gar nicht dem, was ich möchte :-( Danke aber für die Erklärung.
Siehste, und jetzt bin ich wieder genau da, wo ich bereits vor 3 Tagen war.

Ich habs jetzt so gelöst, daß ich gem. Tip von Kirtas in die Zelle eine Tabelle mit fixer Höhe und 2 Zeilen eingebaut habe.

Die erste Zeile auf valign=top und die zweite auf valign=middle, die Tabelle mit cellpadding und -spacing =0.

Nur ist es leider so, daß auch jetzt das Bild in der unteren Zeile nicht genau mittig, sondern sicher ca.1-2 Textzeilenabstände nach unten hin verschoben ist :-(((((

Ich vermute einfach mal, daß alleine der Umbruch von der ersten Tabellenzeile auf die 2. Tabellenzeile ihren Platz in Anspruch nimmt (trotz padding und spacing=0 ?????)und es deshalb nicht wirklich mittig aussieht.

Wie bekomm ich denn das nun noch hin, daß das Bild wirklich mittig ist?

Grüße

Achim

[Struppi]

Das bewirkt eine Zentrierung des Bildes.

Wobei das aber nicht ganz das ist was du wolltest, du wolltest ja das bild in Höhe von 50% des testes der Zelle:
»

Genau, entspricht ganz und gar nicht dem, was ich möchte :-( Danke aber für die Erklärung.
Siehste, und jetzt bin ich wieder genau da, wo ich bereits vor 3 Tagen war.

Oh, ich glaube da hatte ich mich falsch ausgedrückt.

Das 2. Beispiel behebt diesen Mangel. Dort ist das zentriert Hintergrundbild im unteren DIV das den restlichen Platz einnimmt. Der einzige Makel ist das du jetzt explizit die Breite angeben musst.

Struppi.

[Achim]

Oh, ich glaube da hatte ich mich falsch ausgedrückt.

Das 2. Beispiel behebt diesen Mangel.

Nicht wirklich, jedenfalls nciht bei mir...oder ich habs irgendwie falsch eingebaut.
Hast Du noch eine Lösung für mein Problem in der letzten antwort?

'Will jetzt nicht mehr zu lange hin und herbasteln, sitze eh schon viel zu lange an diesem eigentlich trivialen Problem rum.

Danke auf jeden Fall für Deine Hilfe bis hierher (und vielleicht ja auch noch beim restlichen Problemchen)

Achim

[Jens Holzkämper]

Tach,

warum wollen eigentlich IMMER ALLE Leute hier im Forum nicht gerne einfach die gestellten Frage beantworten, sondern 1000 neue Ideen und Tips und Fragen zum Besten geben?

wir wollen das Problem lösen und nicht mit einem dicken Pinsel über die Symptome malen.

Ich habe ein Tabellenlayout, das einfach in diesem einen und einzigen Punkt an seine Grenzen stößt!

Schade, vorallem für dich.

Und nur, weil ich einiges nachfragen muß, bin ich doch nicht ganz blöd!

Nachfragen ist super, vielen von uns geht es genau darum Nachfragen zu erzeugen, um Leute zum Lernen zu bringen.

Und dann fragen sich manche Leute, warum ich weiter oben nach einem anderen Forum nachfrage.

Es gibt kein besseres Forum als dieses.

Zudem arbeite ich an wenigstens 3 Rechnern zwischen Büro, Couchtisch und Arbeitszimmer. Und die Forenstruktur hier ermöglichst, anders als in vielen anderen Boards, eben nicht, daß man schnell erkennt, was man schon gelesen hat, bzw. was neu ist.

Doch das Forum erleichtert das Leben verdammt stark, da man erkennt, wer auf wen geantwortet hat, der Rest deiner Probleme löst sich, sobald du dich anmeldest.

Also, sachdienliche Hinweise nehme ich gerne weiter entgegen, Links zu CSS-Foren aber auch.

Es gibt wie gesagt, keinen besseren Ort als diesen; du könntest höchstens noch in die Newsgroups gehen (aber da sind die Leute so unfreundlich ;-)).

mfg
Woodfighter

[Kirtas]

Hallo Achim
Und? Hast dus mit meiner anscheinden nicht populären Tabellen-Variante machen können?
Gruss Kirtas

[Struppi]

Ich möchte in einer Tabellenzelle, die im oberen Teil aus "n" Links besteht, darunter eine Linie (per Grafik eingefügt) und darunter ein Bild enthält, den oberen Teil (sprich die Links und die Linie) oben mit dem bündig am Zellenrand platzieren und den unteren Teil (also das Bild) im verbleibenden Platz der Zelle mittig platzieren.

Warum eine Tabellenzelle?
Mit Tabellen erschwerst du jedes CSS Layout (Es sei denn du hast ein Tabellenlayout)

Es geht ganz einfach z.b. so:

  
<style type="text/css">  
#header  
{  
background-color: #fff;  
color: #000;  
text-align: center;  
}  
#header div  
{  
border-bottom:1px solid black;  
text-align: left;  
}  
</style>  
  

  
<div id="header">  
<div>  
<a href="#">link</a>  
<a href="#">link</a>  
<a href="#">link</a>  
<a href="#">link</a>  
</div>  
<img src="...">  
</div>  

In der Praxis würde ich eine Liste (ul) für die Links verwenden. Damit läßt sich das Design flexibler anpassen.

Struppi.

[Jens Holzkämper]

Tach,

Die URL würde ich gerne posten wollen, aber die Seite existiert nur in einem Intranet.

<verstellteStimme style="Verschwörer">psst, es gibt zahlreiche Gratishoster, die für solche Zwecke super geeignet sind.</verstellteStimme>

Ich möchte in einer Tabellenzelle, die im oberen Teil aus "n" Links besteht, darunter eine Linie (per Grafik eingefügt) und darunter ein Bild enthält, den oberen Teil (sprich die Links und die Linie) oben mit dem bündig am Zellenrand platzieren und den unteren Teil (also das Bild) im verbleibenden Platz der Zelle mittig platzieren.

Das größte Problem hierbei ist die Tabelle, denn "The effect of 'position:relative' on table-row-group, table-header-group, table-footer-group, table-row, table-column-group, table-column, table-cell, and table-caption elements is undefined." Quelle, die Lösung wäre jetzt also, z.B. ein Block-Element (z.B. div) in der Zelle, das die volle Zelle ausfüllt und den Inhalt enthält. Dann hast du aber das Problem, dass vertical-align bei Block-Elementen anders wirkt als du dir das wünschen würdest, deswegen mußt du line-height, so manipulieren, das es so groß ist wie die Zelle. Da line-height vererbt wird, muß es für den positionierten Block wieder aufgehoben werden.

"Simples" Beispiel:

  
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" "http://www.w3.org/TR/REC-html40/loose.dtd">  
<html><head><title>Ein Tabellenlayout tritt sich selbst in den Hintern.</title</head>  
<body>  
<table style="margin-left:auto; margin-right:auto;">  
  <tr>  
    <td style="height:200px; width:400px;">  
      <div style="position:relative;width:100%; height:100%; vertical-align:middle;line-height:200px;">  
        <p style="position:absolute; margin:0; line-height:100%;">  
          Testtext2  
        </p>  
        zentrierter Testtest  
      </div>  
    </td>  
  </tr>  
</table>  
</body>  
</html>  

mfg
Woodfighter

[Jens Holzkämper]

Tach,

Du, ich lese hier doch nur sehr unregelmäßig mit, kann also schon sein, daß ich sowas überlese.

deswegen gibt es ja Archiv und Suche, und sogar in der neuen Hilfe steht die Antwort: http://forum.de.selfhtml.org/hilfe/faq.htm#css-zentrieren.

Und die abloute positionierten Elemente beziehen sich leider nicht auf die Tabelle (warum eigentlich nicht, sondern am Browserfenster *grr*).

Sie beziehen sich auf das erste Elternelement, das nicht position:static hat, das ist halt im zweifelsfall erst body/html.

mfg
Woodfighter

[Achim]

Und die abloute positionierten Elemente beziehen sich leider nicht auf die Tabelle (warum eigentlich nicht, sondern am Browserfenster *grr*).

Sie beziehen sich auf das erste Elternelement, das nicht position:static hat, das ist halt im zweifelsfall erst body/html.

mfg
Woodfighter

Hi Woodfighter,

naja... aber..ok. Drehen wirs mal rum:
Kannst Du mir konkret sagen, wie ich die Tabelle selber zum Elternelement mache?
Bitte gleich in html/css-code, ok? Weil mein Code war ja dann nicht der richtige :-(
Grüße, Achim