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

Tabellenhintergrund der Höhe anpassen

Status
Für weitere Antworten geschlossen.

angulojuan

Neues Mitglied
Habe ein Problem:
Ich habe eine unsichtbare Tabelle, dort rechts eine einzeilige Spalte und links eine Spalte mit drei Zeilen. Die obere und untere Zeile sollen eine feste Höhe haben, die mittlere Zeile ist variabel, je nach Höhe der rechten Spalte. Im Firefox klappt es auch so, wie es soll, im Internetexplorer sind jedoch die obere und untere Zeile höher, als sie sein sollten, in der mittleren Zeile wird das Hintergrundbild nicht wiederholt, wie es sein sollte.

Hier die Seite: Willkommen auf unseren Internetseiten! (Zu sehen auf der Unterseite "Kontakt")
 
du siehst doch den roten rahmen. die obere und untere Rundung auf der linken Seite sind fest, die Verbindung zwischen den beiden Rundungen soll - je nach Seitenhöhe - die passende Höhe haben. Im Firefox tut das auch, im iExplorer jedoch nicht.
Ich weiß, dass man Tabellen eigendlich nicht für das Design nutzen sollte, aber ich weiß wirklich nicht, wie sich das anders realisieren ließe...
 
du siehst doch den roten rahmen. die obere und untere Rundung auf der linken Seite sind fest, die Verbindung zwischen den beiden Rundungen soll - je nach Seitenhöhe - die passende Höhe haben. Im Firefox tut das auch, im iExplorer jedoch nicht.
Diese Schleife mit den Blümchen?
Wenn Du Dich da mal nict irrst mit dem Firefox, bei mir sind zwei Lücken drin, zwischen #menu und #menuunten und zwischen #menuunten und #unten.

Aber den gestellten Aufgaben, die Fehler zu korrigieren und das Tabellenlayout rauszuschmeißen, bist Du bisher noch nicht nachgekommen. Auf dieser Basis ist es eher kontraproduktiv, über Darstellungsunterschiede zu sprechen.
Für ordnungsgemäße Darstellung (die ja bekanntlich nur mit CSS und nicht mit HTML erreicht wird) ist ein valider und semantisch sinnvoller HTML-Code Voraussetzung.
Du willst ja nicht jetzt an der Darstellung rumdoktorn und dann, wenn Du Fehler korrigierst, feststelen, dass alle Änderungen jetzt für die Katz waren, weil sich mit validem Code eine ganz andere Grundlage darbietet.
 
Ganz ehrlich? Du erlebst einen der vielen Nachteile von Tabellen. Ich glaube, dass sich die linke Spalte durch die #contentbox-Spalte rechts daneben vergrößert. Die linke Spalte hat eine feste Höhe, die #contentbox nicht UND die #contentbox hat noch dazu variable Inhalte. Dadurch ändert die #contentbox-Zelle immer ihre Höhe, und jeder Browser passt dann die Höhen der anderen Spalten so an wie er will.

Wie gesagt: verzichte auf Tabellen. Nimm dir die Zeit es auch mal ohne diese zu lernen.
 
habe die Fehler behoben, sehe es gerade auch, dass es im Firefox auch nicht funktioniert. Hat es gestern Abend noch...
(Die restlichen Fehler verstehe ich nicht. Das sind die Adressen, die Joomla verwendet...)

Ich würde das ja gerne ohne Tabellen versuchen, wenn ich wüsste, wie das geht.
Ich habe ja extra eine Tabelle genommen, damit die linke Spalte ihre Höhe in Abhängigkeit von der #contentbox ändert.
In der linken Spalte haben die obere und untere Zelle eine feste Höhe (bzw. sie sollten das haben) und die mittlere Zelle soll sich so anpassen, dass der rote Rahmen durchgängig ist. Tut sie aber momentan nicht...

Man hat mir schon "faux columns" empfohlen, aber das würde scheinbar nur klappen, wenn die komplette linke Spalte das gleiche Hintergrundbild hätte...

Wie gesagt: Ich würde das ganze gerne ohne Tabellen machen und mache das auch sofort, wenn mir jemand nen Tipp geben würde, wie.
 
Ich würde das ja gerne ohne Tabellen versuchen, wenn ich wüsste, wie das geht.
Naja, erstmal eben ohne Tabellen ;-)
Dann verwendest Du HTML um Deinem Inhalt eine logische Bedeutung zu geben.
Der Rest passiert dann mit CSS. Das Schelifchen auf die Höhe des Contents anzupassen geht dann vermutlich mit den "Faux Columns".

Ich habe ja extra eine Tabelle genommen
Aber Tabellen sind ja nur dazu da, tabellarische Daten auszuzeichnen, und HTML ist nicht dazu da, das Aussehen einer Seite festzulegen.

Man hat mir schon "faux columns" empfohlen, aber das würde scheinbar nur klappen, wenn die komplette linke Spalte das gleiche Hintergrundbild hätte.
Löse Dich von dem Gedanken an "Spalten". Ohne Tabellen hast Du sowas nicht.

Wie gesagt: Ich würde das ganze gerne ohne Tabellen machen und mache das auch sofort, wenn mir jemand nen Tipp geben würde, wie.
Wie gesagt: Nutze HTML im Sinne von HTML - zur logischen Auszeichnung Deines Inhalts (Semantik). Das ist der erste Schritt. Der Rest ergibt sich per CSS. Aber CSS klappt nur problemlos mit validen und semantisch sinnvollen HTML-Code als Basis.
 
Du sagst mir - wie alle anderen vor Dir auch - die ganze Zeit, was ich machen soll. WIE das geht, sagt mir hier keiner. Ich habe bis jetzt immer noch keine Antwort auf die Frage bekommen, wie ich das hinbekomme, dass der rote Streifen links sich an die #contentbox anpasst.

Wie schon einige Male gesagt: Die Tabelle ist nur eine Notlösung, weil ich nicht weiß, wie oben genanntes Problem anders zu beheben ist. Da hilft es mir wenig, wenn alle hier schreiben, dass ich keine Tabellen benutzen soll. Das weiß ich selbst!

Löse Dich von dem Gedanken an "Spalten". Ohne Tabellen hast Du sowas nicht.
Dann eben "Boxen" oder wie auch immer Du willst. Das Problem bleibt trotzdem!
 
Wie? Na, ohne Tabellen erstmal. Wenn Deine Seite Tabellen nicht mehr als Layoutmittel missbraucht, und Du validen und semantisch korrekten HTML-Code hast, dann reden wir weiter. Ohne diese Basis macht es keinen Sinn in CSS-Details zu gehen, schon gar nicht auf der Basis eines Tabellenlayouts. Wer B sagen will, muss zuerst A sagen. Wenn Du das selber weißt, dass die Tabellen Mist sind, dann entferne sie halt.

Wenn die Seite dann umgebaut ist, können wir weiter reden. Bis dahin bist Du am Zug. Wenn Unklarheiten herrschen, stelle bitte Fragen.

Und, nicht so ungeduldig. Rom ist auch nicht an einem Tag erbaut worden!
Wenn wir Dir hier zu langsam antworten, kannst Du in der Zwischenzeit ja schonmal ein wenig googlen.
 
Ihr antwortet mir nicht zu langsam!

Ich habe die Seite mit Tabellen aufgebaut, um das ganze für den Seitenbesucher optisch einigermaßen anschaubar zu gestalten.

Wie schon tausendmal gesagt: ich würde es gerne ohne Tabellen machen, aber ihr seid ja anscheinend zu dämlich dafür, mir vernünftig zu erklären, wie meine Vorstellungen vernünftig realisierbar sind. Ich möchte die Seite einfach nicht Tage lang komplett durcheinander dastehen lassen.

Das ganze hat auch nichts mit ungeduldig sein zu tun, aber bei Euren Antworten kann man wirklich explodieren. Man erklärt tausend Mal sein Problem und auch die Bereitschaft, die Tabellen herauszunehmen, trotzdem bekommt man nur als Antwort, man solle die Tabellen rausnehmen.

Ich entschuldige mich für die Ausdrucksweise, obwohl ich überzeugt bin, dass die nicht ganz unangebracht sind. Warum ist es denn so schwer, mir einfach zu erklären, wie ich diesen dämlichen Balken da je nach Seitenhöhe strecken kann?

Tut mir Leid, ich kann Euch wirklich nicht verstehen.

PS.: Tabellen sind raus (waren zum Zeitpunkt deines Beitrags auch schon). Einigen Spezialisten werden sich trotzdem wahrscheinlich die Fußnägel kräuseln, die Höhe ist nun fest. Da ich hier wohl nicht auf Hilfe hoffen kann, muss ich wohl bei dieser Notlösung bleiben. Schade!
 
Ich habe die Seite mit Tabellen aufgebaut, um das ganze für den Seitenbesucher optisch einigermaßen anschaubar zu gestalten.
Ja, und das ist eben ein Fehler. Nicht nur, dass Tabellen im Speziellen und HTML im Allgemeinen nicht dazu gemacht ist, die Optik zu bestimmen, hat es auch etliche andere Nachteile, nicht nur aus Sicht der Barrierefreiheit. Einen Effekt erlebst Du jetzt selbst am eigenen Leib.
Warum Layout mit Tabellen dumm ist: Probleme definiert, Lösungen angeboten

Wie schon tausendmal gesagt: ich würde es gerne ohne Tabellen machen, aber ihr seid ja anscheinend zu dämlich dafür, mir vernünftig zu erklären, wie meine Vorstellungen vernünftig realisierbar sind. Ich möchte die Seite einfach nicht Tage lang komplett durcheinander dastehen lassen.
Ich ignoriere jetzt mal Deinen Ausrutscher mit dem "dämlich" und weise nicht darauf hin, dass Du in der Zwischenzeit schon über die Suchfunktion hier im Forum und über Google Deine Antworten hättest bekommen können, insbesonder von mir sollte es hier etliche, wenn nicht mittlerweile hundert oder mehr Antworten auf genau diese Frage geben. Aber es ist natürlich einfacher, sich zurück zu lehnen und andere als "dämlich" zu beschimpfen.
Was das tagelang durcheinander stehen lassen angeht, Du musst Deine Änderungen ja nicht an der öffentlich zugänglichen Site machen, kannst das auf einer anderen Subdomain oder am heimischen PC testen. Denn mehr als 1 Stunde wird die Umstellung für Dich sicher dauern, so wie Du Dich hier gibst, würde ich Dir mal 1-2 Wochen veranschlagen. Vom Tabellenlayout umzusteigen heißt nämlich, komplett umzudenken. Und das ist auch nicht in drei Sätzen erklärt.

Das ganze hat auch nichts mit ungeduldig sein zu tun, aber bei Euren Antworten kann man wirklich explodieren. Man erklärt tausend Mal sein Problem und auch die Bereitschaft, die Tabellen herauszunehmen, trotzdem bekommt man nur als Antwort, man solle die Tabellen rausnehmen.
Na, und hast Du die Tabellen schonmal rausgenommen? Hast Du Dich schon darüber informiert, wie man es anders macht? Hast Du Dich schonmal über HTML und CSS informiert? Welche Rolle die beiden spielen? Hast Du schon herausgefunden, dass man mit HTML dem Inhalt eine logische Struktur definiert? Das hättest Du alles schon längst machen können.

1. Inhalt schreiben.
2. Diesen Inhalt logisch auszeichnen. Überschriften bekommen <h1> bis <h6>, Textabsätze werden mit <p> ausgezeichnet, wichtige Textpassagen mit <em>, sehr wichtige mit <strong>, Adressen mit <address>, tabellarische Daten mit <table>, usw.
Dabei ist ganz wichtig, dass es irrelevant ist, wie die Tags im Browser dargestellt werden. Dafür ist HTML nicht zuständig!
3. Stylesheet (CSS) schreiben. Erst jetzt geht es darum, die Elemente so aussehen zu lassen, wie Du es willst.

Trennung von Inhalt und Layout. Informiere Dich über das Box-Model. Wo ist der Unterschied zwischen einem Inline- und einem Block-Element. Welche Elemente sind inline, welche block? Informiere Dich, Seiten dazu gibts im WWW wie Sand am Meer.

Tut mir Leid, ich kann Euch wirklich nicht verstehen.
Naja, vielleicht liegt es daran, dass wir "dämlich" sind.

Tabellen sind raus
Ich schaus mir mal an.

Da ich hier wohl nicht auf Hilfe hoffen kann, muss ich wohl bei dieser Notlösung bleiben. Schade!
Das liegt meistens am eigenen Auftreten.
Und am eigenen Lernwille und an der Eigeninitiative.

P.S.:
1. Die Tabellen sind immer noch drin. Oder liegt die Site woanders? Wie ist der Link?
2. Du musst unbedingt HTML lernen. Und wie man damit eine sinnvolle Semantik (= logische Inhaltsauszeichnung, s.o.) macht. Du hast nur Tabellen und divs. Keine Überschriften, keinerlei sinnvolle Auszeichnung.
3. Bin gespannt, ob Du jetzt aus Deinem Loch rauskommst und zeigst, dass Du auch was ändern willst, oder wir immer noch alle "dämlich" sind.
 
Wie Du beim Blick in den Quelltext festgestellt haben wirst, habe ich die Seite mit Joomla! erstellt. Im Template selbst für die Seite sind keine Tabellen drin. Die Tabellen macht Joomla, das kann ich leider auch nicht ändern. Ist einfach so.

Das gleiche gilt auch für Überschriften etc. Die sind auch so in Joomla drin, kann ich auch nichts dran ändern.

Ich glaube, das ganze war auch etwas ein Missverständnis. Wenn ich mir den Quelltext anschaue, sieht das erstmal wirklich nach viel Tabellen aus [was es im Endeffekt ja auch ist]. Ich bin bei der Diskussion jedoch immer vom Template ausgegangen, das ich im Backend von Joomla sehe.
Von diesem Standpunkt war das "dämlich" nämlich m.M.n. durchaus berechtigt. In meinem Template hatte ich nämlich nur eine Tabelle drin um besagtes Problem zu lösen. Das nur an einer Stelle.

Wenn Ihr mir jetzt nicht helfen wollt, weil ich Joomla [zwangsläufig mit Tabellen] nutze, habe ich eben Pech gehabt.
 
Es gibt leider keine Möglichkeit um Ovale mitwachsen zu lassen.
Background-images lassen sich nicht strecken und img würden gestreckt fürchterlich aussehen.
Das würde auch ohne Tabellen und Joomla! nicht anders sein.
Du brauchst eine gerade Vertikale die du mitwachsen lassen kannst.

Unter dem Menüpunkt "Kontakt" bis zur Kurve würde eine Gerade nicht so auffallen. Ab da könntest du eine neue, wiederholende Grafik werwenden.
Die untere Rundung kannst du dann aber erst darunter einfügen.

Es währe einfacher auf die ovale Form zu verzichten.
Die Seite könnte auch weich wirken wenn du nur die Ecken etwas abrundest und auch aus den Bildern die harten Ecken
entfernst.
 
Zuletzt bearbeitet:
Die Gerade habe ich doch schon! Nämlich varr.png . Ist auch da, wo du sie beschrieben hast. Mein Problem ist nur, dass das drei DIVs übereinander sind, von denen der obere (mit Rundung) und der untere (mit Rundung) eine feste Höhe haben soll, der mittlere (mit varr.png) soll variabel sein. Das ist ja alles nicht so schwer, aber nun soll das ganze sich auch noch an den Contentbereich daneben anpassen. Wären die linken drei DIVs nur ein DIV mit einem Hintergrund, ließe sich das ja mit Faux Columns lösen. So weiß ich aber nicht, wie das gehen soll. Habe erstmal als Notlösung eine feste Höhe genommen und darauf geachtet, dass der Content die Höhe auf keiner Seite übersteigt, aber eine gute dauerhafte Lösung ist das natürlich auch nicht!

Dass es anders einfacher wäre, weiß ich! Das hatte ich auf einer früheren Version der Seite auch schonmal, finde es aber so schöner!
 
Wären die linken drei DIVs nur ein DIV mit einem Hintergrund, ließe sich das ja mit Faux Columns lösen. So weiß ich aber nicht, wie das gehen soll.
varr.png hab ich völlig übersehen.
Mit Faux Columns weist du die Hintergrundgrafik (var.png) dem nächsten mitwachsenden Element zu. Das währe bei in deinem Fall das <div> mit der id=inside.
Die anderen background-images würden dann über var.png liegen.

Probier das soweit erst mal aus
Um den Effekt zu sehen entferne erstmal menuunten.png.

Wenn das geklappt hat, kannst du ein <div> oder <span> absolute von #inside positionieren ( von unten / bottom: 0; )
#inside müsste position: relative; haben.
 
Zuletzt bearbeitet:
auf die Idee bin ich auch schon gekommen, aber wenn Du dir die Seite genauer ansiehst, wirst Du feststellen, dass die einen Hintergrund hat (das Bild ist erstmal nur vorrübergehend, da kommt noch ein anderes hin). Sprich: der ganze Krams, der darüberliegt, ist transparent. Heißt also, wenn ich es so machen würde, wie Du gesagt hast, würden sich der obere bzw. untere Bogen mit dem vertikalen Balken überlagern. Also würde er oben und herausragen.

Trotzdem danke, dass Du dich so bemühst! Vielleicht fällt Dir oder anderen hier ja noch was anderes ein. Ich habe auch schon einige Sachen durchprobiert.
 
Ja, das habe ich kurz nach dem abschicken bemerkt.
Bis zur Unterkannte vom letzten Menüpunkt ist (im relevanten Bereich) alles in px abmessbar.
Auf die Tranzparenz köntest du also verzichten.
Die png-Tranzparenz funktioniert im IE6 ohnehin nicht.
Mit bekannten IE-fixes könntest background-repeat nicht nutzen.
Eine Lösung gibt es da (meine ich) noch nicht.

Das blasse Haus im repeat-Breich stört dann allerdings schon.
Das müsstest du dann etwas nach innen rücken.
Ich würde es eh weglassen und das untere Haus nicht ganz so blass lassen.



Wenn Floristik das Haupthema sein soll, würde ich ganz auf Häuser verzichten.
Da gibt es bessere Motive.
 
Zuletzt bearbeitet:
nein, es geht nicht (nur) um Floristik, sondern um die Vorstellung des Betriebes. Das Haus oben links ist der Hauptbetrieb (deswegen sollte der auf jeden Fall dort erscheinen), das Haus unten rechts ist die Zweigstelle.

Mal schauen, vielleicht mache ich das Hintergrundbild mitscrollend, dann könnte ich es an den Bogen mit dranpacken. Oder ich verschiebe das linke Bild in den Contentbereich.

Danke erstmal für deine Hilfe!
 
Mit background-position:
Code:
background-image:...;
background-repeat: no-repeat;
background-position : [COLOR="DarkRed"]vertikal[/COLOR]px [COLOR="#8b0000"]horrizontal[/COLOR]px;
Als Einheiten sind auch %, em usw erlaubt.

Auch das geht:
Code:
background-position : bottom 15px;
Bedeutet 0 von unten und 15px von links.
 
Status
Für weitere Antworten geschlossen.
Zurück
Oben