Einzeilige einspaltige Tabelle: Element in rechte UNTERE Ecke plazieren

[mathefritz]

Positionieren in die rechte OBERE Ecke eines umgebenden einzeiligeinspaltigen Tabelle
klappt mit style="vertical-align: top; float: right; aber wie für die rechte UNTERE Ecke ? Die Höhe der Tabelle soll durch die Höhe eines Bildes links bestimmt werden, sofern natürlich
der vertikale Platzbedarf der in den rechten Ecken einzubettenden Elemente nicht größer ist. .
N.S. hätte eigentlich lieber, statt Bild hochzuladen, das als Text gemacht - scheint aber unmöglich.

[Matthias Apsel]

Hallo mathefritz,

Eine Tabelle mit nur einem Tabellenfeld ist keine Tabelle. Jedes andere Element scheint besser geeignet zu sein.

Du kannst ASCII-Art darstellen, wenn du den Text als Code auszeichnest. Siehe wiki-Link in meiner Signatur.

Bis demnächst
Matthias

[beatovich]

hallo

Eine Tabelle mit nur einem Tabellenfeld ist keine Tabelle.

das ist aber so was von css-scheisslegal 😉

[Gunnar Bittersmann]

@@beatovich

Eine Tabelle mit nur einem Tabellenfeld ist keine Tabelle.

das ist aber so was von css-scheisslegal 😉

Was immer du damit sagen willst – nein.

LLAP 🖖

[Gunnar Bittersmann]

@@beatovich

Eine Tabelle mit nur einem Tabellenfeld ist keine Tabelle.

das ist aber so was von css-scheisslegal 😉

Nicht, wenn man sinnvollerweise sowas wie

tbody:only-child tr:only-child
{
	ERROR: 'table should have more than one row';
	outline: 0.5rem solid red !important;
}

td:not([colspan]):only-child
{
	ERROR: 'table should have more than one column';
	outline: 0.5rem solid red !important;
}

im Stylesheet zu stehen hat – zumindest während der Entwicklung.

LLAP 🖖

[Mitleser]

Eine Tabelle mit nur einem Tabellenfeld ist keine Tabelle. das ist aber so was von css-scheisslegal 😉

Nicht, wenn man sinnvollerweise sowas wie

tbody:only-child tr:only-child
{
	ERROR: 'table should have more than one row';
	outline: 0.5rem solid red !important;
}

im Stylesheet zu stehen hat – zumindest während der Entwicklung.

Klingt vor allem dann extrem sinnvoll, wenn die Ausgabe z.B. das Resultat einer SQL-Query ist. Dann sollte man den Fehler entsprechend erweitern: "table should have more than one row, unless dynamic resultsets where involved". Wobei... näh! Man könnte das komplette Markup ja auch um eine Fallunterscheidung erweitern, um bei Trefferzahl "1" auf die böse eine Zeile zu verzichten! Bingo! Win! Yeah!

[Gunnar Bittersmann]

@@Mitleser

tbody:only-child tr:only-child
{
	ERROR: 'table should have more than one row';
	outline: 0.5rem solid red !important;
}

Klingt vor allem dann extrem sinnvoll, wenn die Ausgabe z.B. das Resultat einer SQL-Query ist. Dann sollte man den Fehler entsprechend erweitern: "table should have more than one row, unless dynamic resultsets where involved".

Du hast übersehen, dass ich diesen Fall abgefangen habe‽

Eine Tabelle mit einer Datenzeile hat ja dennoch ihren Tabellenkopf. Fehlermeldung und roter Rahmen kommen ja nicht, wenn ein thead vorhanden ist; sie kommen nur, wenn tbody einziges Kind (von table) ist, so wie es bei einer Layouttabelle der Fall ist.

LLAP 🖖

[MrMurphy1]

Hallo

Da du uns die Einschränkungen nicht mitteilst und die Tabelle zum Layouten mißbrauchst ist hier wohl ein position: absolute; angebracht.

Gruss

MrMurphy

[mathefritz]

Danke MrMurphy;
Es geht um die gräßliche Seite http://www.wirbler.ch/CHINA3/07Text/foliageWirblerMirbler.php
auf die man über
wirbler.com
Link FirmaWirblerMirbler
Link Impressum
gelangt.

Mein Bekannter dem ich dabei helfe wollte diesen Aufbau, ich hoffe, das etwas vereinfachen zu können.

[Gunnar Bittersmann]

@@mathefritz

Es geht um die gräßliche Seite http://www.wirbler.ch/CHINA3/07Text/foliageWirblerMirbler.php

Das nächste Mal bitte verlinken: <url> bzw. [text](url) oder per Button über dem Eingabefeld. Ich hab das mal für dich nachgeholt.

Mein Bekannter dem ich dabei helfe wollte diesen Aufbau

Welcher ein ganz anderer ist als das von dir eingangs Geschilderte.

Du willst eine image map?

LLAP 🖖

[mathefritz]

Danke Gunnar für das Interesse.

Welcher ein ganz anderer ist als das von dir eingangs Geschilderte.

ja, ist anders, meine ursprünliche Idee war eben für die Rechte Seite eine geschachtelte Tabelle, einspaltig zweizeilig, und darauf sprang der Bekannte auf, Hemdsärlig wie immer.

Du willst eine image map?

ich nicht, ist "Sein" Steckenpferd; ich hätte das Bild mit den 5 Rechtecken, die eigentlich Quadrate sein sollten, als Tabelle realisiert, die Inhalte der 5 beschrifteten Zellen, als Links . Diese Tabelle dann wieder in eine umschließende gepackt - aber das Problem "rechte UNTERE Ecke" wäre natürlich geblieben.
Das Bild ist hoch genug für jeden der durch LinkClicks in die Ecke anzuzeigenden Texte ( die also nicht unter die Unterkante des Bildes reichen würden ) .

[Gunnar Bittersmann]

@@mathefritz

Positionieren in die rechte OBERE Ecke eines umgebenden einzeiligeinspaltigen Tabelle

Es gibt keine einzeiligeinspaltige Tabellen.

Du meinst: Box.

Und da du eine flexible Box meinst, meinst du: Flexbox.

Könnte so aussehen: CodePen.

N.S. hätte eigentlich lieber, statt Bild hochzuladen, das als Text gemacht - scheint aber unmöglich.

┌─────────────────────┐
│ B       rechts oben │
│ I                   │
│ L                   │
│ D      rechts unten │
└─────────────────────┘

Unicode-Block Box Drawing; formatieren als Code. Was ist das Problem?

LLAP 🖖

[mathefritz]

mit Codepen komme ich nicht zurecht, die Frage ist nun:
IST
Container, direction: row, space-between

+---------------------------------------------------------------+
| item: Bild; item: container, direction: column, space-between;|
|                                item: "oben rechts";           |
|                                item: "unten rechts";          |
+---------------------------------------------------------------+

möglich? -
also im äußerem Container 2 Item nebeneinender am linken- und rechtem Rand,
der 2te Item
wieder eine Box mit 2 Item untereinander, am oberen und unterem Rand.
So richtig der Durchblick, wie das zu codieren ist fehlt mir noch.

[JürgenB]

Hallo,

mit Codepen komme ich nicht zurecht,

warum nicht, woran bist du gescheitert?

Gruß
Jürgen

[mathefritz]

warum nicht, woran bist du gescheitert?

ist so unzusammenhängend; werd schon noch zurechtkommen .
Danke.

[Rolf b]

Angesichts der Inhalte, die ich bei WirblerMirbler so finde und angesichts der merkwürdigen Sprache (oder ist das nur deutsch-schweizerische Inkompatibilität?), frage ich mich: Ist diese Seite ernstgemeint? Ist es eine Baustelle mit vielen Platzhaltern? Ist eim Home-Button, der mich auf eine Seite führt wo ich die Heronformen herleten kann, ein Bug oder ein Feature? Oder ist das ganze ein persönliches Übungsprojekt für eine Webseite, wo die Inhalte nur Platzhalter sind?

Was mir auch nicht klar ist - wie soll deine Impressumssseite aussehen, wenn sie fertig ist. Was soll das Bild dann zeigen? Das jetztige Menübild mit Imagemap, oder etwas anderes? Was soll rechts oben und unten stehen? Wie soll sich die Darstellung ändern wenn man per Smartphone mobil dorthin kommt - derzeit ist die Anzeige der Texte viel zu klein, und ich finde es auch merkwürdig, dass je nach Text das Bild größer und kleiner wird (Test mit Asus Zenphone).

Grübel...
Rolf

[mathefritz]

Hallo Rolf, Danke für Dein Interesse.

Angesichts der Inhalte, .. WirblerMirbler ...

"Er" meint es sicher ernst, ich stehe zu Seiner mystisch angehauchten Geschäftsidee recht skeptisch gegenüber.

...deutsch-schweizerische Inkompatibilität?

Er ist KEIN Schweizer, benutz aber 3 Hostingprovider, darunter auch eine .ch Domain

...Baustelle ...

natürlich, und wohl noch einige Zeit lang

.. Heronformeln herleiten kann ...

kein Bug; diese noch unfertige Version MEINER Arbeit, bat ich Ihn, vor längererZeit, auf Seinem Windowsrechner, seinen Browsern zu testen ( weil ich mit Linux arbeite ), und dann wollte er das auch auf seiner Seite haben, wohl um auch einen "wissenschaftlichen" Eindruck zu machen .

wie soll deine Impressumsseite aussehen, wenn sie fertig ist.

ich meinte eigentlich, die wäre schon fertig gewesen, der Zustand mit den auf mehrere Zeilen gebrochenen Telefonnummern ist mir neu.
rechts oben: leer beim öffnen der Seite, nach Menü-Klicks dann immer das "EiBild";
rechts unten: immer nur einer der zum jeweiligen geklickten Menüpunkt gehörigen Text; die Links sind Javascript das display zwischen inline und none umschaltet .

Wie soll sich die Darstellung ändern wenn man ... mobil dorthin kommt

daran wurde noch nicht gedacht, wohl auch nicht vorgesehen .
Gruß F.
N.S.
Vielleicht antwortet er Dir ja wenn Du Ihn unter [e-mail] kontaktierst; er formuliert allerdings sehr wortreich .

[Rolf b]

Vielleicht antwortet er Dir ja wenn Du Ihn unter [e-mail] kontaktierst; er formuliert allerdings sehr wortreich .

Das lass ich dann man lieber 😉

Wie soll sich die Darstellung ändern wenn man ... mobil dorthin kommt daran wurde noch nicht gedacht, wohl auch nicht vorgesehen .

Uiii - ich renne jetzt in meinen g16n-sicheren Bunker. Viel Glück!

Rolf

[mathefritz]

AHA, scheint wie folgt zu fuktionieren - oder sind da noch böse überraschungen zu erwarten?

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

<style>
.flex-containerO {
  display: -webkit-flex; /* Safari */
  display: flex;
  -webkit-flex-direction: row; /* Safari */
  flex-direction:         row;
 -webkit-justify-content: space-between; /* Safari */
         justify-content: space-between;
}
.flex-containerI {
  display: -webkit-flex; /* Safari */
  display: flex;
  -webkit-flex-direction: column; /* Safari */
  flex-direction:         column;
 -webkit-justify-content: space-between; /* Safari */
         justify-content: space-between;
}
</style>
</head>
<body>
  <div class="flex-containerO" style="display: flex;">
       <img src="https://forum.selfhtml.org/images/3f4bd433-ee5b-4f71-9ab4-3fdcc76fd6f8.gif">
       <div class="flex-containerI" style="display: flex;">
            <p style="display: flex;">rechts oben</p>
            <p style="display: flex;">rechts unten</p>
      </div>
 </div>
</body>
</html>