nicht angemeldet
Problem bei div-tag
Hallo zusammen!
Hab ein kleines Problem mit css und div tags:
mein aktuelles projekt möchte ich (fast) komplett ohne tabellen für das design durchführen, deshalb benutze ich div tags die ich über css formatiere und positioniere. klappt alles wunderbar und sieht genau so aus wie es sein soll.
wird der inhalt des content tags aber länger als das fenster des browsers, hören die tags für den hintergrund aufun der text steht auf einmal auf dem weissen hintergrund ausserhalb des designs.
und jetzt endlich meine frage:
kennt jemand nen css trick, mit dem ich die höhe eines div tags dynamisch an das fenster anpassen kann?
für alle anregungen bin ich dankbar...
grüße zwomble
-
hi zwombie!
wird der inhalt des content tags aber länger als das fenster des browsers, hören die tags für den hintergrund aufun der text steht auf einmal auf dem weissen hintergrund ausserhalb des designs.
¿hmm, die tags fuer den hintergrund hoeren auf? was heisst das? kann man sich das irgendwo mal online anschauen?
kennt jemand nen css trick, mit dem ich die höhe eines div tags dynamisch an das fenster anpassen kann?
dynamisch anpassen an das browserfenster, an den inhalt des div-elements oder an ein anderes (uebergeordnetes) div-element?
prost
seth-
hi seth
kann man sich das irgendwo mal online anschauen?
leider noch nicht :-(
dynamisch anpassen an das browserfenster, an den inhalt des div-elements oder an ein anderes (uebergeordnetes) div-element?
habe quasi 3 div tags über css nebeneinader positioniert, der 1.+3. fangen top: 0px; an der 2 bei 88px.
gebe ich allen die höhe 100% und fülle den 2 mit text bis zm abwinken hören tag 1+3 bei pseudo 00% auf und der 2. läuft bis zum ende der seite weiter.... es sollen aber alle 3 bis zum ende der seite gehen....Hab noch immer keine Ahnung wie ich das machen soll........
Grüße aus MG
Zwomble-
Hallo, Zwomble,
habe quasi 3 div tags über css nebeneinader positioniert (...) gebe ich allen die höhe 100% und fülle den 2 mit text bis zm abwinken hören tag 1+3 bei pseudo 00% [anscheinend 100% --molily] auf und der 2. läuft bis zum ende der seite weiter.... es sollen aber alle 3 bis zum ende der seite gehen....
Vielleicht helfen dir die Beispiele auf http://home.t-online.de/home/dj5nu/fanhost/css-spaltenlayout.html und den folgenden Seiten, dort geht es um gleich lange Spalten.
Siehe auch im Forumsarchiv http://selfsuche.teamone.de/, »gleich lange Spalten« sollte beispielsweise eine passende Suchbegriffkombination sein.
Grüße,
Mathias-
Hallo Mathias!
Danke,
Du hast mich auf die richtige Spur gebracht! Overflow und nix anderes hab ich gesucht!!!Grüße aus MG
Zwomble
-
-
-
-
wird der inhalt des content tags aber länger als das fenster des browsers, hören die tags für den hintergrund aufun der text steht auf einmal auf dem weissen hintergrund ausserhalb des designs.
und jetzt endlich meine frage:
kennt jemand nen css trick, mit dem ich die höhe eines div tags dynamisch an das fenster anpassen kann?Du kannst bei HTML-Elementen nicht nur Positionen "links" und "oben" angeben, sondern auch "rechts" und "unten". Wohlgemerkt: Diese vier Angaben sind frei kombinierbar, zum Beispiel lässt sich height durch top und bottom ersetzen.
Deiner Beschreibung nach habe ich aber irgendwie den Eindruck, daß Du CSS und HTML auch irgendwie verkehrt einsetzt. Jedenfalls kommt mir der Ausdruck "Tags für Hintergrund" etwas merkwürdig vor, denn ein Hintergrund ist eigentlich nur ein Attribut, ein Zusatz eines HTML-Elements, d.h. ein Element, daß nur existiert, um einen Hintergrund anzuzeigen, ist zumindest etwas fragwürdig. Und wenn's dann gleich mehrere werden..
Bedenke, daß ein CSS-Layout, das nicht darauf achtet, HTML sinnvoll einzusetzen, genauso gut oder schlecht ist wie ein Tabellenlayout, denn es macht keinen Unterschied, ob man alles und jedes in <td> und <font> packt oder in <div> und <span>. Letzteres kann mit Sicht auf ältere oder Nicht-Grafik-Browser sogar noch deutlich schlechter sein als die Tabellenvariante.
Gruß,
soenk.e-
Danke für Deine konstruktive Kritik Soenk.e in Sachen Hintergrund.
Da gebe ich Dir 100% Recht. Leider lässt sich das aber bei dem vorgegebenen Design nicht anders lösen, zumal die Vorgabe auch ist keine Tabellen (fürs Design) zu benutzen! Ist eine Art Wette eine Seite möglichst klein zu bekommen, in dem man alles und jedes über das CSS steurn kann und der HTML Code quasi nur als Sammelbehälter der Elemente dient, die dann über das CSS positioniert werden. Kein Javascript oder scaleablke graphics, usw...
Klappt wie gesagt auch super und die Seite bleibt schön klein, ist halt nur die Sache mit dem Content-Div.css hierzu:
#middlemiddle {
background: white;
position: absolute;
left:181px;
right:180px;
top: 88px;
height: 100%; <======= das macht probleme
padding: 8px;
}
Vielleicht hilft dass ja mein Problem zu verdeutlichen...
Schau doch mal hier rein: http://www.meyerweb.com/eric/css/edge/complexspiral/demo.htmlGrüße aus MG
Zwomble-
Hallo,
Ist eine Art Wette eine Seite möglichst klein zu bekommen, in dem man alles und jedes über das CSS steurn kann und der HTML Code quasi nur als Sammelbehälter der Elemente dient, die dann über das CSS positioniert werden.
Grauenhaft. Überhaupt, dein Ansatz:
mein aktuelles projekt möchte ich (fast) komplett ohne tabellen für das design durchführen, deshalb benutze ich div tags die ich über css formatiere und positioniere. klappt alles wunderbar und sieht genau so aus wie es sein soll.
Warum macht sich kaum noch jemand die Mühe, vernünftiges HTML zu schreiben?
Gruß,
MI, der vorschlägt, dass du dir über die drei in [pref:t=44257&m=241426] erwähnten Schritte und die darauffolgende Diskussion vielleicht einfach mal ein wenig Gedanken machst, nur ein paar Minuten, könnte ja vielleicht was bringen... *seufz*
--
: Michael Jendryschik : michael@jendryschik.de : http://jendryschik.de/ :
: Einführung in XHTML, CSS und Webdesign : http://jendryschik.de/wsdev/ :
: Die Domain http://best-of-netdigest.de steht bei sedo.de zum Verkauf. :
: http://www.sedo.de/search/showdetails.php3?keyword=best-of-netdigest.de :-
Hallo Michael,
Grauenhaft. Überhaupt, dein Ansatz:
siehe auch: : http://jendryschik.de/
weiss nicht wo da der unterschied ist! ok werde meine div tags in p tags wandeln vielleicht ist das dann ja schöner ;-)
wie im anderen post beschrieben handelt es sich um eine wette, wie man vernünftiges html schreibt brauchst du mir nicht zu sagen!
Finde ich auch gut Deine Anleitung für Newbies, wenn Du aber schon ein paar seiten gehtmlt hast wirst du selber festgestellt haben, dass es keine 100%Anleitung für DIE WEBSEITE gibt. Nach meinen Vorgaben soll ich ein bestimmtes Design umsetzten und zwar ohne die Hilfe von Tabellen. Soll ich die also auf meinen Monitor aufmalen???
Deinen narzistischen Beitrag in allen Ehren, geholfen hat er mir nicht...
Danke trotzdem, und wenn Du mir sagen kannst wie ich mein Problem löse freu ich mich auf einen neuen post von Dir.Grüße aus MG
Zwomble
-
-
Hallo Zwomble,
Ist eine Art Wette eine Seite möglichst klein zu bekommen, in dem man alles
und jedes über das CSS steurn kann und der HTML Code quasi nur als
Sammelbehälter der Elemente dient, die dann über das CSS positioniert
werden.Grauenhaft, dieser Ansatz. ;-) Ehe Du mich jetzt auch noch so anspringst,
guck Dir mal diese Beispiele an.- <h1> Blabla </h1>
- <p> Blabla </p>
- <abbr title="Blabla">BB</abbr>
- <div>Blabla</div>
- <span>Blabla</span>
Was bedeuten obige Auzeichnungen des Textstückes "Blabla" jetzt für den
Browser?- Blabla ist eine Überschrift erster Ordnung.
- Blabla ist ein Absatz.
- BB ist hier eine Abkürzung für Blabla
- Blabla ist Blabla
- Blabla ist Blabla
Jetzt stell Dir mal vor, da kommt ein Besucher an, der einen Textbrowser
benutzt. Dieser Browser kann durchaus durch Einrückungen und ähnlichem
Überschriften und andere Elemente der Textgestaltung darstellen. Graphisches
Zeug wie CSS ist jedoch Fehlanzeige. Er kann nur HTML.Woher weiß der Browser nun, daß Blabla eine Überschrift ist? Na? Genau,
weil Blabla in HTML als Überschrift ausgezeichnet wurde.Wir ziehen das Fazit:
<h1 class="dingens">Blabla</h1> ist einem <div class="ueberschrift">Blabla</div>
immer und überall vorzuziehen. Nebenbei ist die Zeichenfolge <h1> auch
kleiner als die Zeichenfolge <div>, Deine Seite wird also auch kleiner. ;-)- Tim
-
Hallo Tim,
Grauenhaft, dieser Ansatz. ;-)
Meine Güte, bist du narzistisch!
- MI
- Michael Jendryschik : michael@jendryschik.de : http://jendryschik.de/ :
- Einführung in XHTML, CSS und Webdesign : http://jendryschik.de/wsdev/ :
- Die Domain http://best-of-netdigest.de steht bei sedo.de zum Verkauf. :
- http://www.sedo.de/search/showdetails.php3?keyword=best-of-netdigest.de :
-
-
Hi Sönke,
Du kannst bei HTML-Elementen nicht nur Positionen "links" und "oben" angeben, sondern auch "rechts" und "unten". Wohlgemerkt: Diese vier Angaben sind frei kombinierbar, zum Beispiel lässt sich height durch top und bottom ersetzen.
bedenke aber, dass das (sowohl right/bottom, als auch die Höhe bestimmen durch Angabe von top/bottom) bei weitem nicht in allen Browsern funktioniert.
Gruß Gunther
-
-
Hallo zwomble!
wird der inhalt des content tags aber länger als das fenster des browsers, hören die tags für den hintergrund aufun der text steht auf einmal auf dem weissen hintergrund ausserhalb des designs.
Du hast vermutlich weder für 'html' noch für 'body' eine Höhe (z.B. 100% od. auto) definiert, darum wird deine 100% Angabe für ein DIV nicht umgesetzt (da sich Prozentwerte auf das jeweils übergeordnete Elment beziehen, bis hinauf zum Wurzelelement).
Gib' deinem Div doch gar keine Höhe vor (Standardwert ist 'auto').
Gruß Gunther
-
Hallo, Gunther,
wird der inhalt des content tags aber länger als das fenster des browsers, hören die tags für den hintergrund aufun der text steht auf einmal auf dem weissen hintergrund ausserhalb des designs.
Du hast vermutlich weder für 'html' noch für 'body' eine Höhe (z.B. 100% od. auto) definiert, darum wird deine 100% Angabe für ein DIV nicht umgesetzt (da sich Prozentwerte auf das jeweils übergeordnete Elment beziehen, bis hinauf zum Wurzelelement).
Nützt bei mir nichts: http://home.t-online.de/home/dj5nu/fanhost/css-spaltenlayout4.html. Was mache ich falsch?
Gib' deinem Div doch gar keine Höhe vor (Standardwert ist 'auto').
Ich dachte auch, dass es mit bottom:0 dennoch die volle Höhe hätte, dies ist aber nicht der Fall.
Grüße,
Mathias-
Hallo Mathias,
Nützt bei mir nichts: http://home.t-online.de/home/dj5nu/fanhost/css-spaltenlayout4.html. Was mache ich falsch?
du orientierst dich, im gegensatz zu den Browsern, zu sehr am Standard... ;-)
^------ [pure Ironie] ------^siehe http://test.top-topics.com/molily1.html
und für die Operas müsste man noch eine Extrawurst braten...(MSIE, NS7, Moz >=1 sollten OK sein. Und bevor du meckerst: Zugegeben - die Variante für den MSIE ist 'gefuscht')Gib' deinem Div doch gar keine Höhe vor (Standardwert ist 'auto').
Ich dachte auch, dass es mit bottom:0 dennoch die volle Höhe hätte, dies ist aber nicht der Fall.
ja leider, aber das wäre vermutlich zu einfach gewesen...
ich kritisiere u.a. das Box Modell in CSS2 nicht umsonst...Gruß Gunther
-
Hallo,
Und bevor du meckerst: Zugegeben - die Variante für den MSIE ist 'gefuscht'
Scheint ein übler MSIE-Bug zu sein, der da mit dem mit »* html« beginnenden Selektor ausgenutzt wird. Das erscheint mir auch ziemlich sinnfrei, fällt m.E. in die Klasse Hacks, welche mehr Schaden als Nutzen anrichten, weil man sich nicht darauf verlassen kann, dass der Bug auch in zukünftigen Versionen vorhanden ist bzw. wenn er repariert wurde, die andere Methode greift.
Ferner ist anscheinend das Container-Div unnötig, weil position:relative/absolute auch dem body-Element zugewiesen werden kann.
Außerdem wäre die Methode für den MSIE, bei welcher kein zusätzliches div-Element nötig ist (das body-Element tritt an die Stelle des gemeinsamen Elements, welches die Hintergrundfarbe vorgibt), natürlich auch für die anderen Browser die einfachste und zuverlässigste, sofern sie verwendet werden kann.Grüße,
Mathias
-
-
Hallo Mathias,
Nützt bei mir nichts: http://home.t-online.de/home/dj5nu/fanhost/css-spaltenlayout4.html. Was mache ich falsch?
<style type="text/css" media="screen,tv,projection" title="Autorenformatvorlage">
html,body {margin:0; padding:0; width:100%;}
#nav1 {display:table-cell; background-color:#eee; width:12em; vertical-align:top;}
#content {display:table-cell; vertical-align:top; padding:0 1em 0 1em;}
#nav2 {display:table-cell; background-color:#eee; width:12em; vertical-align:top;}
ul {margin:0; list-style-type:none;}
#nav1 ul, #nav2 ul, #nav1 p, #nav2 p {padding:0.5em;}
</style>
... und die Bereiche dann natürlich auch in der tabellarisch*g* richtigen Reihenfolge:
nav1 | content | nav2
;-))Das ist nicht das, was Du erreichen wolltest; ich weiß. Aber meiner Meinung entspricht es durchaus. Dreispaltiges Layout impliziert Spalten. Spalten gibt es in Tabellen. Also ist das, was Du willst, eine Tabelle.
Gib' deinem Div doch gar keine Höhe vor (Standardwert ist 'auto').
Ich dachte auch, dass es mit bottom:0 dennoch die volle Höhe hätte, dies ist aber nicht der Fall.
Doch, die volle Höhe von Browserfenster = 100%.
Die Höhe wird lt. Standard unter Berücksichtigung der Rahmenhöhe des umschließenden boxbildenden Elements berechnet. Weder body noch html definieren ihre Rahmenhöhe genau. Also entsprechen 100% der Höhe des Browserfensters.Eine Tabellenzelle definiert sich selbst als Box. Der Browser hat, bei mehreren Zellen, die darumliegende Tabellenzeile sinnvoll zu ergänzen. Daraus ergibt sich die Höhe der Tabellenzeile als Höhe der höchsten Zelle.
*Wenn ich's richtig verstanden habe.*
viele Grüße
Axel
-
Hallo Axel,
<style type="text/css" media="screen,tv,projection" title="Autorenformatvorlage">
html,body {margin:0; padding:0; width:100%;}
#nav1 {display:table-cell; background-color:#eee; width:12em; vertical-align:top;}
#content {display:table-cell; vertical-align:top; padding:0 1em 0 1em;}
#nav2 {display:table-cell; background-color:#eee; width:12em; vertical-align:top;}
ul {margin:0; list-style-type:none;}
#nav1 ul, #nav2 ul, #nav1 p, #nav2 p {padding:0.5em;}
</style>
... und die Bereiche dann natürlich auch in der tabellarisch*g* richtigen Reihenfolge:
nav1 | content | nav2
;-))Das ist nicht das, was Du erreichen wolltest; ich weiß. Aber meiner Meinung entspricht es durchaus. Dreispaltiges Layout impliziert Spalten. Spalten gibt es in Tabellen. Also ist das, was Du willst, eine Tabelle.
das größte Problem an dieser Variante dürfte aber vermutlich sein, dass der MSIE die Eigenschaft 'display:table-cell' nicht kennt/unterstützt.
Gruß Gunther
-
Hallo Gunter,
das größte Problem an dieser Variante dürfte aber vermutlich sein, dass der MSIE die Eigenschaft 'display:table-cell' nicht kennt/unterstützt.
Was ich zeigen wollte war: Eine Tabelle ist eine Tabelle ist eine Tabelle... ist eine Tabelle;-))
Entweder kommt ein Layout _ohne_ Spalten aus oder es ist bestens in einer Tabelle aufgehoben. Tabellen sind, und werden es wahrscheinlich auch immer bleiben, gültiges HTML. Es gibt, meiner Meinung nach, keinen Grund, sie nicht zu verwenden. Halt! Einen gäbe es. Wenn man erreichen könnte, was Mathias wollte, nämlich den HTML-Inhalt:
Linkliste1
Linkliste2
Inhaltin dieser Reihenfolge mit CSS in Spaltenform zu bringen, dann würde ich die Tabelle weglassen. Da das aber nicht geht...; was Du machst ist Trick 17 mit einem gefärbten Hintergund eines _zusätzlichen_, für den Inhalt nicht notwendigen HTML-Elements; Deine linke und rechte "Spalte" sind genau so hoch, wie ihr Inhalt; ...weil das eben nicht geht, _muss_ man eine Tabelle verwenden. Überzeuge mich vom Gegenteil. Bisher bin ich es nicht;-))
viele Grüße
Axel
-
Hallo Axel,
Überzeuge mich vom Gegenteil. Bisher bin ich es nicht;-))
das wollte/will ich doch gar nicht ;-).
Mein Einwand bezog sich vielmehr darauf, dass man IMHO die einzigen passenden Werte für die CSS-Eigenschaft 'display' in der Praxis nicht gebrauchen kann, da der "Volksbrowser" sie eben nicht kennt/unterstützt.
Wie man das Problem halbwegs umgehen kann, habe ich mit meinem Beispiel (war aber nicht dafür gedacht) ja schon gezeigt.
Vom Prinzip her bin ich, aufgrund der z.Zt. noch unzureichenden Unterstützung und der Interpretationsunterschiede der Browser im Bezug auf CSS, deiner Meinung - für Spaltenlayouts gibt es im Moment nichts 'praktikabeleres' als eine Tabelle.
Gruß Gunther
-
Hallo, Axel,
(...) was Du machst ist Trick 17 mit einem gefärbten Hintergund eines _zusätzlichen_, für den Inhalt nicht notwendigen HTML-Elements; Deine linke und rechte "Spalte" sind genau so hoch, wie ihr Inhalt;
Das ist mir bewusst.
...weil das eben nicht geht, _muss_ man eine Tabelle verwenden.
Es ging nur um den optischen Effekt, der simuliert werden sollte.
Mathias
-
-
-
-
-