nicht angemeldet j4nk3y
Camping_RIDER
j4nk3y
Der Martin
Jo
Camping_RIDER
Jo
Camping_RIDER
Jo
Matthias Apsel
Servus zusammen,
ich hätte da ein kleines Problemchen, wo ich nicht weiter komme und mir hoffentlich jemand helfen kann.
und zwar geht es mehr oder weniger um die "dynamische" Positionierung von mehreren Elternelementen in Abhängigkeit von der Größe der jeweiligen Kindelemente innerhalb.
Es stellt sich das Problem das egal wie ich versuche in der CSS zu drehen einfach nichts gescheites dabei rum kommt.
zur veranschaulichung:
Gunnar Bittersmann
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title></title>
<link rel="stylesheet" type="text/css" href="style.css"/>
<script language="javascript" type="text/javascript" src="java_1.js"></script>
</head>
<body>
<div id="aussen">
<div id="anzeige">
<p class="h1">
Überschrift:
</p>
<div class="eintrag">
<div class="bild">
</div>
<div class="info">
</div>
<p><b>Beschreibung:</b>
<a href="javascript:/" onClick="div_change(5)"><img src="minus.jpg" ID="img5" border="0" style="vertical-align:middle"></a><br></p>
<div id="5" class="beschreibung">
<p>
Ganz viel inhalt...<br>
Ganz viel inhalt...<br>
Ganz viel inhalt...<br>
Ganz viel inhalt...<br>
Ganz viel inhalt...<br>
Ganz viel inhalt...<br>
Ganz viel inhalt...<br>
Ganz viel inhalt...<br>
Ganz viel inhalt...<br>
Ganz viel inhalt...
</p>
</div>
</div>
<p class="h1">
Überschrift:
</p>
<div class="eintrag">
<div class="bild">
</div>
<div class="info">
</div>
<p><b>Beschreibung:</b>
<a href="javascript:/" onClick="div_change(6)"><img src="minus.jpg" ID="img6" border="0" style="vertical-align:middle"></a><br></p>
<div id="6" class="beschreibung">
<p>
Ganz viel inhalt...
</p>
</div>
</div>
</div>
</div>
</body>
</html>
dazu mal das wichtige aus der CSS (dazu muss ich sagen ich hab die letzten 2 tage soviel in den entsprechenden Klassen anweisungen rum geschrieben das ich grad nicht weiß welche Version das ist) :
#aussen
{
height: 99%;
min-height: 900px;
width: 99%;
min-width: 1200px;
position: absolute;
}
#anzeige
{
outline-width: 1px;
outline-style: solid;
height: 94%;
width: 95%;
position: absolute;
left: 2.5%;
top: 5%;
overflow: auto;
}
.eintrag
{
outline-width: 1px;
outline-style: solid;
height: 20%;
width: 95%;
clear: both;
margin-left: 20px;
margin-top: 20px;
padding-bottom: 10px;
}
.bild
{
outline-width: 1px;
outline-style: solid;
height: 160px;
width: 160px;
float: left;
margin-left: 10px;
margin-top: 10px;
}
.info
{
outline-width: 1px;
outline-style: solid;
height: 20%;
width: 70%;
float: right;
margin-right: 10px;
margin-top: 10px;
}
.beschreibung
{
outline-width: 1px;
outline-style: solid;
height: 20%;
width: 70%;
float: right;
margin-right: 10px;
margin-top: 10px;
}
Zu guter Letzt das JS ( wobei ich hier gern anmerken möchte das zwar das ein und ausklappen super funktioniert aber das Bild sich nicht ändert, falls da jemand eine Idee hat,bitte gern):
function div_change(strID)
{
if (document.getElementById(strID).style.display == 'none')
{
document.getElementById(strID).style.display = 'block'
document.getElementById(strID + "_shown").style.display = 'block'
document.getElementById(strID + "_hidden").style.display = 'none'
document.getElementById("img" + strID).src = 'minus.jpg'
}
else
{
document.getElementById(strID).style.display = 'none'
document.getElementById(strID + "_shown").style.display = 'none'
document.getElementById(strID + "_hidden").style.display = 'block'
document.getElementById("img" + strID).src = 'plus.jpg'
}
}
So stellt sich das Problem.
Im voraus vielen dank.
Gruß
Jo
Aloha ;)
ich hätte da ein kleines Problemchen, wo ich nicht weiter komme und mir hoffentlich jemand helfen kann.
Ich helfe gerne. Wäre aber schön, wenn du dir schnell mal diesen alten Forumsbeitrag (und dabei insbesondere die von Matthias Apsel vorgeschlagene und von mir diskutierte Problemlösung) anschauen könntest, vielleicht wird deine Frage (die ich noch nicht gänzlich gelesen/verstanden habe) damit ja schon beantwortet.
Falls nicht bin ich dann auch bereit mich tiefergehend in dein Problem einzulesen ;)
Grüße,
RIDER
Aloha
Ich helfe gerne. Wäre aber schön, wenn du dir schnell mal diesen alten Forumsbeitrag (und dabei insbesondere die von Matthias Apsel vorgeschlagene und von mir diskutierte Problemlösung) anschauen könntest, vielleicht wird deine Frage (die ich noch nicht gänzlich gelesen/verstanden habe) damit ja schon beantwortet.
Falls nicht bin ich dann auch bereit mich tiefergehend in dein Problem einzulesen ;)
Morgen,
Danke für den hinweis aber ich meine dieses problem für mich schon gelöst zu haben, soweit ich das richtig verstanden habe.
Leider hat das aber nur wenig mit meinem problem zutun.
Also ich umreiße es mal kurz in eigenen worten:
Ich hab ein absolut positionierten <div> der eine gewisse größe hat.
In diesem möchte ich untereinander mehrere <div class="eintrag"> container anordnen
! welche eine variable größe nach ihrem Inhalt haben da man in diesem ein oder mehrere <div> container per java ein und ausklappen kann.
Problem ist jetzt das der nächste <div class="eintrag"> sich nicht automatisch nach unten verschiebt.
(Kurz nebenbei werden auch z.b. trennlinien <hr> nicht zwischen den <div class="eintrag"> angezeigt sondern hinter diesen in einer andern z ebene, was ich mir auch nicht erklären kann)
Bis jetzt hab ich jegliche kombinationen von position: und float: ausprobiert die mir eingefallen ist aber nie mit dem gewünschtem Ergebnis. Aber ich hoffe einfach mal weiterhin das sich das auch ohne js lösen lässt.
Hoffe das hilft etwas weiter, vielen dank nochmal.
Gruß
Jo
Hallo,
Ich hab ein absolut positionierten <div> der eine gewisse größe hat.
In diesem möchte ich untereinander mehrere <div class="eintrag"> container anordnen
! welche eine variable größe nach ihrem Inhalt haben da man in diesem ein oder mehrere <div> container per java ein und ausklappen kann.
ich nehme mal an, du meinst Javascript, nicht Java.
Leider fehlte diese Beschreibung des Problems (auch wenn sie noch sehr knapp ist) im Startposting völlig.
Problem ist jetzt das der nächste <div class="eintrag"> sich nicht automatisch nach unten verschiebt.
Du willst also, dass das Elternelement mit der Größe seiner Kindelemente mitwächst? Das ist eigentlich das normale Verhalten, und du setzt es mit absoluter Positionierung oder Floating außer Kraft. Warum?
(Kurz nebenbei werden auch z.b. trennlinien <hr> nicht zwischen den <div class="eintrag"> angezeigt sondern hinter diesen in einer andern z ebene, was ich mir auch nicht erklären kann)
Das ist der Effekt von position:absolute oder float: Die Elemente werden aus dem regulären Fluss herausgenommen und beeinflussen Anordnung und Größe ihrer Geschwister- und Elternelemente nicht mehr. Übrigens sehe ich im HTML-Code, den du gezeigt hast, gar keine hr-Elemente.
Bis jetzt hab ich jegliche kombinationen von position: und float: ausprobiert die mir eingefallen ist aber nie mit dem gewünschtem Ergebnis.
Wie wär's mit Weglassen?
Abgesehen davon ist dein HTML in vielen Punkten fehlerhaft oder verbesserungswürdig.
<link rel="stylesheet" type="text/css" href="style.css"/>
Du verwendest laut DOCTYPE-Deklaration HTML 4.01, da ist das Schließen von leeren Elementen im XML-Stil falsch.
<p class="h1">
Überschrift:
</p>
Autsch. Was soll der Unfug mit <p class="h1">? Wenn das eine Überschrift sein soll, zeichne sie doch einfach als solche aus, also mit <h1> (oder <h2>, wenn das Dokument schon eine übergeordnete Gesamt-Überschrift hat).
Außerdem ist es weder notwendig, noch sinnvoll, Umlaute zu verstümmeln. Ich hoffe doch, dass du eine Zeichencodierung verwendest, die Umlaute direkt darstellen kann (z.B. UTF-8). Also schreib sie doch einfach im Klartext hin.
<p><b>Beschreibung:</b>
Was soll das missbilligte b-Element? Für visuelle Effekte (Fett) ist CSS da.
<a href="javascript:/" onClick="div_change(5)"><img src="minus.jpg" ID="img5" border="0" style="vertical-align:middle"></a><br></p>
Die Anweisung im href-Attribut "/" ist kein gültiger Javascript-Code. Was soll das sein?
Außerdem heißt der Eventhandler eigentlich onclick, und dem img-Element fehlt das alt-Attribut.
Und auch hier: Verwende konsequent CSS für darstellerische Effekte (und bitte nicht als inline-Styles, sondern in einem zentralen Stylesheet).
<div id="5" class="beschreibung">
Fehler: In HTML 4.01 dürfen ID-Werte nicht mit einer Ziffer beginnen.
So long,
Martin
Hey,
Ich hab ein absolut positionierten <div> der eine gewisse größe hat.
In diesem möchte ich untereinander mehrere <div class="eintrag"> container anordnen
! welche eine variable größe nach ihrem Inhalt haben da man in diesem ein oder mehrere <div> container per java ein und ausklappen kann.ich nehme mal an, du meinst Javascript, nicht Java.
Leider fehlte diese Beschreibung des Problems (auch wenn sie noch sehr knapp ist) im Startposting völlig.
Ja natürlich Javascript, hab das bei der antwort auch noch korrigiert aber irgendwie wurde es doch nicht übernommen.
Problem ist jetzt das der nächste <div class="eintrag"> sich nicht automatisch nach unten verschiebt.
Du willst also, dass das Elternelement mit der Größe seiner Kindelemente mitwächst? Das ist eigentlich das normale Verhalten, und du setzt es mit absoluter Positionierung oder Floating außer Kraft. Warum?
Ja das dachte ich bisher auch aber aus irgendeinem unerfindlichen Grund tut es das grade nicht, und ich finde den Fehler nicht.
(Kurz nebenbei werden auch z.b. trennlinien <hr> nicht zwischen den <div class="eintrag"> angezeigt sondern hinter diesen in einer andern z ebene, was ich mir auch nicht erklären kann)
Das ist der Effekt von position:absolute oder float: Die Elemente werden aus dem regulären Fluss herausgenommen und beeinflussen Anordnung und Größe ihrer Geschwister- und Elternelemente nicht mehr. Übrigens sehe ich im HTML-Code, den du gezeigt hast, gar keine hr-Elemente.
1. Das war mir nur teilweise bewusst aber klingt im nachhinein auch völlig logisch.
2. Ja mit den <hr> hatte ich mal drin aber da das nicht funktionierte wie gedacht hab ich die wieder raus genommen.
Bis jetzt hab ich jegliche kombinationen von position: und float: ausprobiert die mir eingefallen ist aber nie mit dem gewünschtem Ergebnis.
Wie wär's mit Weglassen?
Dann ist die standart einstellung position:static; also muss ich wenn ich Elemente in diesem statischen element anordnen möchte doch mit float: arbeiten oder?
Abgesehen davon ist dein HTML in vielen Punkten fehlerhaft oder verbesserungswürdig.
<link rel="stylesheet" type="text/css" href="style.css"/>
Du verwendest laut DOCTYPE-Deklaration HTML 4.01, da ist das Schließen von leeren Elementen im XML-Stil falsch.
Also ich setze mich jez insgesamt etwa 2 wochen mit dem thema Html auseinander und versuche mir das alles Selbst beizubringen. Haupt anlaufpunkt war für mich stehts Selfhtml was mir auch viel geholfen hat.
Daher verzeih mir bitte wenn ich deine Antwort nicht ganz verstehe.
Warum ist das Element leer?
Und die DOCTYPE hab ich so aus Selfhtml übernommen ohne diese im Ganzen exakt zu verstehen.
<p class="h1">
Überschrift:
</p>Autsch. Was soll der Unfug mit <p class="h1">? Wenn das eine Überschrift sein soll, zeichne sie doch einfach als solche aus, also mit <h1> (oder <h2>, wenn das Dokument schon eine übergeordnete Gesamt-Überschrift hat).
Außerdem ist es weder notwendig, noch sinnvoll, Umlaute zu verstümmeln. Ich hoffe doch, dass du eine Zeichencodierung verwendest, die Umlaute direkt darstellen kann (z.B. UTF-8). Also schreib sie doch einfach im Klartext hin.
1. Du hast recht, dass ist unglücklich aber nur ein erster versuch wie ich alles definiere.
2. Das dokument hat eig garkeine richtige Überschrift und die <h1> überschrift ist mir einfach zu groß, wobei ich sagen muss ich deswegen auch noch nicht überlegt habe ob ich nicht einfach im CSS mit font-size: um definiere.
3. Nein mit Zeichencodierung hab ich mich noch nicht beschäftigt da ich mittlerweile auch schon automatisch den "&_uml" schreibe, aber dann werde ich mich diesbezüglich auch nochmal mehr damit beschäftigen. Danke für den Hinweis.
<p><b>Beschreibung:</b>
Was soll das missbilligte b-Element? Für visuelle Effekte (Fett) ist CSS da.
Das ist wahrscheinlich ein Überbleibsel aus einem älteren code, wird entfernt^^.
<a href="javascript:/" onClick="div_change(5)"><img src="minus.jpg" ID="img5" border="0" style="vertical-align:middle"></a><br></p>
Die Anweisung im href-Attribut "/" ist kein gültiger Javascript-Code. Was soll das sein?
Außerdem heißt der Eventhandler eigentlich onclick, und dem img-Element fehlt das alt-Attribut.
Und auch hier: Verwende konsequent CSS für darstellerische Effekte (und bitte nicht als inline-Styles, sondern in einem zentralen Stylesheet).
1. Ok, dass weiß ich nicht, genauso weiß ich nicht was sich ändern könnte wenn man das "/" entfernt. Probiere ich nachher mal aus.
2. onclick und nicht onClick ?
3.alt-attribut ist anscheind irgendwann mal ausversehn entfernt worden und wurde übersehn.
4.Auch hier ein Überbleibsel von einem test steht normalerweise alles in der CSS.
<div id="5" class="beschreibung">
Fehler: In HTML 4.01 dürfen ID-Werte nicht mit einer Ziffer beginnen.
Das wär mir nie aufgefallen wenn du es nicht gesagt hättest. Aber was schreib ich da sonst hin? Denn das bezieht sich ja nur auf die js-funktion aus (strID) und hat keine bedeutung für layout oder sonstiges. Wie müsste man das ändern?
Vielen Dank für deine Anregungen
Gruß
Jo
Hallo,
Du willst also, dass das Elternelement mit der Größe seiner Kindelemente mitwächst? Das ist eigentlich das normale Verhalten, und du setzt es mit absoluter Positionierung oder Floating außer Kraft. Warum?
Ja das dachte ich bisher auch aber aus irgendeinem unerfindlichen Grund tut es das grade nicht, und ich finde den Fehler nicht.
dann ist es vermutlich das Beste, wenn du die Seite mal irgendwo online stellst, so dass man sich das Ganze mal "live" ansehen kann. Sonst versuchst du möglicherweise, hier "nur das Wesentliche" zu posten und lässt dabei vielleicht den entscheidenden Teil weg, weil du es nicht richtig eingeschätzt hast. Oder du würdest hier meterweise Quellcode posten, und man müsste sich dein Zeug erst nachbauen. Das möchte auch niemand.
Bis jetzt hab ich jegliche kombinationen von position: und float: ausprobiert die mir eingefallen ist aber nie mit dem gewünschtem Ergebnis.
Wie wär's mit Weglassen?
Dann ist die standart einstellungposition:static;also muss ich wenn ich Elemente in diesem statischen element anordnen möchte doch mitfloat:arbeiten oder?
Ähm, wie anordnen? Bis jetzt hast du immer noch nicht klar beschrieben, was du eigentlich erreichen willst. Ich bin jetzt davon ausgegangen, dass die Blöcke der Reihe nach untereinander stehen sollen, und das würden sie ganz von allein tun, ohne dass man eingreift.
<link rel="stylesheet" type="text/css" href="style.css"/>
Du verwendest laut DOCTYPE-Deklaration HTML 4.01, da ist das Schließen von leeren Elementen im XML-Stil falsch.
Also ich setze mich jez insgesamt etwa 2 wochen mit dem thema Html auseinander und versuche mir das alles Selbst beizubringen. Haupt anlaufpunkt war für mich stehts Selfhtml was mir auch viel geholfen hat.
Daher verzeih mir bitte wenn ich deine Antwort nicht ganz verstehe.
Kein Problem.
Warum ist das Element leer?
Normalerweise hat ein Element ein öffnendes Tag, einen Inhalt und ein schließendes Tag:
<h1 id="top">Überschrift</h1>
Nun gibt es aber einige Elemente, die per definitionem keinen Inhalt haben, wie etwa <link> oder <img>. In "normalem" HTML lässt man dann das schließende Tag auch einfach weg. In XHTML, das die strengeren Syntax-Regeln von XML anwendet, muss ein Element aber immer geschlossen werden; bei leeren Elementen verwendet man dabei gern die Kurzschreibweise <elementname />, die aber in HTML strenggenommen falsch ist.
Und die DOCTYPE hab ich so aus Selfhtml übernommen ohne diese im Ganzen exakt zu verstehen.
Dann würde ich dir empfehlen, dich zumindest grob über diese Thematik zu informieren. Mit der DOCTYPE-Deklaration gibst du an, welchen HTML-Dialekt du verwendest. Erwähnenswert sind IMO nur HTML 4.01, XHTML 1.0 und HTML 5, wobei es von den beiden erstgenannten noch Varianten gibt.
Wahrscheinlich kommt demnächst jemand und empfiehlt dir, HTML 5 zu verwenden (ich tu es nicht, das ist aber im Wesentlichen meiner insgesamt konservativen Einstellung geschuldet). HTML 5 definiert eine Reihe neuer Elementtypen, die die Dokumentstruktur besser abbilden sollen, und hat außerdem eine vorgegebene Fehlertoleranz; manche Aspekte sind sogar ganz offiziell durch die Spec großzügiger geregelt. Zum Beispiel ist in HTML 5 das Schließen von leeren Elementen mit <tag /> völlig okay, auch ID-Werte, die mit einer Ziffer beginnen oder nur aus einer Ziffer bestehen (was ich weiter unten als Fehler angemeckert habe), sind erlaubt.
<p class="h1">
Überschrift:
</p>Autsch. Was soll der Unfug mit <p class="h1">? Wenn das eine Überschrift sein soll, zeichne sie doch einfach als solche aus, also mit <h1> (oder <h2>, wenn das Dokument schon eine übergeordnete Gesamt-Überschrift hat).
Außerdem ist es weder notwendig, noch sinnvoll, Umlaute zu verstümmeln. Ich hoffe doch, dass du eine Zeichencodierung verwendest, die Umlaute direkt darstellen kann (z.B. UTF-8). Also schreib sie doch einfach im Klartext hin.
- Du hast recht, dass ist unglücklich aber nur ein erster versuch wie ich alles definiere.
- Das dokument hat eig garkeine richtige Überschrift und die <h1> überschrift ist mir einfach zu groß, wobei ich sagen muss ich deswegen auch noch nicht überlegt habe ob ich nicht einfach im CSS mit
font-size:um definiere.
Eben, die Browser-Defaulteinstellungen sind keine Ausrede. CSS rocks. ;-)
<a href="javascript:/" onClick="div_change(5)"><img src="minus.jpg" ID="img5" border="0" style="vertical-align:middle"></a><br></p>
Die Anweisung im href-Attribut "/" ist kein gültiger Javascript-Code. Was soll das sein?
- Ok, dass weiß ich nicht, genauso weiß ich nicht was sich ändern könnte wenn man das "/" entfernt. Probiere ich nachher mal aus.
Das klingt, als wüsstest du gar nicht, was der Code eigentlich tun soll. Vermutlich soll beim Klicken auf das Bild eine bestimmte Aktion ausgelöst werden (eine Javascript-Funktion aufgerufen werden). Wenn man es gut machen will, sollte das umschließende a-Element (der Link) dann auf eine Ressource verlinken, die als Ersatz gelten kann für den Fall, dass Javascript nicht verfügbar ist. Möchte man keine solche Fallback-Lösung anbieten, ist der Link eigentlich sinnlos.
Außerdem heißt der Eventhandler eigentlich onclick, und dem img-Element fehlt das alt-Attribut.
- onclick und nicht onClick ?
Richtig. Zwar ist HTML nicht case-sensitive, XHTML und Javascript aber sehr wohl - und in HTML gilt die durchgehende Kleinschreibung zumindest als empfohlen. Also ist es kein Fehler, wenn man sich die "richtige" Schreibweise konsequent angewöhnt.
3.alt-attribut ist anscheind irgendwann mal ausversehn entfernt worden und wurde übersehn.
Das ist in HTML 5 übrigens auch nicht mehr zwingend vorgeschrieben, aber dennoch sinnvoll.
<div id="5" class="beschreibung">
Fehler: In HTML 4.01 dürfen ID-Werte nicht mit einer Ziffer beginnen.
Das wär mir nie aufgefallen wenn du es nicht gesagt hättest. Aber was schreib ich da sonst hin?
Einen anderen Bezeichner, der mit einem Buchstaben beginnt?
So long,
Martin
Hey,
Du willst also, dass das Elternelement mit der Größe seiner Kindelemente mitwächst? Das ist eigentlich das normale Verhalten, und du setzt es mit absoluter Positionierung oder Floating außer Kraft. Warum?
Ja das dachte ich bisher auch aber aus irgendeinem unerfindlichen Grund tut es das grade nicht, und ich finde den Fehler nicht.
Innerhalb eines Statisch positionierten Elements musst du mit float: arbeiten um eine positionierung nebeneinander zu schaffen, so habe ich das jedenfalls bisher verstanden.
Halbwegs falsch von mir, die größe des Elternelements ändert sich aber ein gleichwertiges Elternelement welches darunter statisch positioniert ist ändert seine position nicht nach unten mit einer größen Zunahme des darüberliegenden Elternelementes.
Habe vllt eine Idee woran es liegen könnte, werde ich gleich ausprobieren.
dann ist es vermutlich das Beste, wenn du die Seite mal irgendwo online stellst, so dass man sich das Ganze mal "live" ansehen kann. Sonst versuchst du möglicherweise, hier "nur das Wesentliche" zu posten und lässt dabei vielleicht den entscheidenden Teil weg, weil du es nicht richtig eingeschätzt hast. Oder du würdest hier meterweise Quellcode posten, und man müsste sich dein Zeug erst nachbauen. Das möchte auch niemand.
Ja das wär schön aber damit hab ich mich noch garnicht auseinander gesetzt und ich wüsste nichteinmal wie und wo, dafür muss man doch erstmal ein Server mieten und eine Domain einrichten etc.
Tut mir Leid da hab ich keine Ahnung, damit wollte ich mich beschäfftigen wenn ich fertig bin^^.
Bis jetzt hab ich jegliche kombinationen von position: und float: ausprobiert die mir eingefallen ist aber nie mit dem gewünschtem Ergebnis.
Wie wär's mit Weglassen?
Dann ist die standart einstellungposition:static;also muss ich wenn ich Elemente in diesem statischen element anordnen möchte doch mitfloat:arbeiten oder?Ähm, wie anordnen? Bis jetzt hast du immer noch nicht klar beschrieben, was du eigentlich erreichen willst. Ich bin jetzt davon ausgegangen, dass die Blöcke der Reihe nach untereinander stehen sollen, und das würden sie ganz von allein tun, ohne dass man eingreift.
Ja sie stehen in einer Reihe untereinander aber wenn ich in diesem "block" ein <div> aufklappe und dieses größer als das Elternelement ist verschiebt sich der 2te "block" nicht nach unten und der erste "block" überlappt den 2ten "block"
<link rel="stylesheet" type="text/css" href="style.css"/>
Du verwendest laut DOCTYPE-Deklaration HTML 4.01, da ist das Schließen von leeren Elementen im XML-Stil falsch.
Also ich setze mich jez insgesamt etwa 2 wochen mit dem thema Html auseinander und versuche mir das alles Selbst beizubringen. Haupt anlaufpunkt war für mich stehts Selfhtml was mir auch viel geholfen hat.
Daher verzeih mir bitte wenn ich deine Antwort nicht ganz verstehe.Kein Problem.
Warum ist das Element leer?
Normalerweise hat ein Element ein öffnendes Tag, einen Inhalt und ein schließendes Tag:
<h1 id="top">Überschrift</h1>Nun gibt es aber einige Elemente, die per definitionem keinen Inhalt haben, wie etwa <link> oder <img>. In "normalem" HTML lässt man dann das schließende Tag auch einfach weg. In XHTML, das die strengeren Syntax-Regeln von XML anwendet, muss ein Element aber immer geschlossen werden; bei leeren Elementen verwendet man dabei gern die Kurzschreibweise <elementname />, die aber in HTML strenggenommen falsch ist.
Macht Sinn danke, also einfach /> durch ></link> ersetzen weil ich mich in Html 4.01 bewege?
Und die DOCTYPE hab ich so aus Selfhtml übernommen ohne diese im Ganzen exakt zu verstehen.
Dann würde ich dir empfehlen, dich zumindest grob über diese Thematik zu informieren. Mit der DOCTYPE-Deklaration gibst du an, welchen HTML-Dialekt du verwendest. Erwähnenswert sind IMO nur HTML 4.01, XHTML 1.0 und HTML 5, wobei es von den beiden erstgenannten noch Varianten gibt.
Wahrscheinlich kommt demnächst jemand und empfiehlt dir, HTML 5 zu verwenden (ich tu es nicht, das ist aber im Wesentlichen meiner insgesamt konservativen Einstellung geschuldet). HTML 5 definiert eine Reihe neuer Elementtypen, die die Dokumentstruktur besser abbilden sollen, und hat außerdem eine vorgegebene Fehlertoleranz; manche Aspekte sind sogar ganz offiziell durch die Spec großzügiger geregelt. Zum Beispiel ist in HTML 5 das Schließen von leeren Elementen mit <tag /> völlig okay, auch ID-Werte, die mit einer Ziffer beginnen oder nur aus einer Ziffer bestehen (was ich weiter unten als Fehler angemeckert habe), sind erlaubt.
Ja verstehe ich soweit, hatte ich auch im bereich Grundgerüst eines Html Dokuments gelesen.
Das problem ist hier wohl eher das ich nicht wirklich zwischen Html 4.01 und XHtml 1.0 unterscheiden kann, also im gesamten, also welche besonderen feinheiten jeder "Dialekt" hat und die Anweisung deshalb für mich eher schwer durschaubar ist.
Das ich grundlegend sage: ich verwende eine bestimmte Sprache, in diesem Fall: HTML 4.01
Und mit loose.dtd gebe ich die dokumententype definition an.
aber da ich den inhalt von loose.dtd ; strict.dtd und frameset.dtd nicht kenne hab ich da auch keinen Überblick was das ändert wenn ich da was anderes angebe.
Und da ich mich von frames wegbewegt habe und strict danach klingt viele fehler zu machen dacht ich das sollte für den anfang reichen.
<a href="javascript:/" onClick="div_change(5)"><img src="minus.jpg" ID="img5" border="0" style="vertical-align:middle"></a><br></p>
Die Anweisung im href-Attribut "/" ist kein gültiger Javascript-Code. Was soll das sein?
- Ok, dass weiß ich nicht, genauso weiß ich nicht was sich ändern könnte wenn man das "/" entfernt. Probiere ich nachher mal aus.
Das klingt, als wüsstest du gar nicht, was der Code eigentlich tun soll. Vermutlich soll beim Klicken auf das Bild eine bestimmte Aktion ausgelöst werden (eine Javascript-Funktion aufgerufen werden). Wenn man es gut machen will, sollte das umschließende a-Element (der Link) dann auf eine Ressource verlinken, die als Ersatz gelten kann für den Fall, dass Javascript nicht verfügbar ist. Möchte man keine solche Fallback-Lösung anbieten, ist der Link eigentlich sinnlos.
Naja mehr oder weniger, was das js machen soll is mir klar, diese soll einen <div> innerhalb des eintrags ein und ausklappen können (macht die funktion auch wie sie soll), dann soll sie schaun ob der <div> eingeklappt bzw. ausgeklappt ist und das Bild des Links ändern und zwar zwischen - und + , was sie allerdings noch nicht tut.
Jedoch verstehe ich den Code nicht 100%ig...
<div id="5" class="beschreibung">
Fehler: In HTML 4.01 dürfen ID-Werte nicht mit einer Ziffer beginnen.
Das wär mir nie aufgefallen wenn du es nicht gesagt hättest. Aber was schreib ich da sonst hin?Einen anderen Bezeichner, der mit einem Buchstaben beginnt?
Tut mir leid zu kurz formuliert, wie änder ich dann das function div_change(strID) damit ich dann auch genau mit ID="strID" diesen <div> anspreche.
Gruß
Jo
@@j4nk3y:
nuqneH
Macht Sinn danke, also einfach
/>durch></link>ersetzen weil ich mich in Html 4.01 bewege?
Nein. </link> ist in HTML falsch. (Außer in XHTML, was als XML verarbeitet wird, was so gut wie nie passiert.) In HTML dürfen leere Elemente keine End-Tags haben.
Es macht aber auch keinen Sinn, dass du dich noch in HTML 4.01 bewegst. Verwende HTML5.
Erwähnenswert sind IMO nur HTML 4.01, XHTML 1.0 und HTML 5
Nein. Erwähnenswert ist einzig HTML5 (ohne Leerzeichen), oder kurz: HTML.
Über das andere kann man noch fachsimpeln (da mach ich gerne mit), praxisrelevant ist das aber nicht mehr.
Das problem ist hier wohl eher das ich nicht wirklich zwischen Html 4.01 und XHtml 1.0 unterscheiden kann, also im gesamten, also welche besonderen feinheiten jeder "Dialekt" hat und die Anweisung deshalb für mich eher schwer durschaubar ist.
Die gute Nachricht: Du musst das gar nicht mehr durchschauen. Unnützes Wissen. Verwende HTML5.
aber da ich den inhalt von loose.dtd ; strict.dtd und frameset.dtd nicht kenne
Könntest du nachlesen: Psalm 21—23. Aber: unnützes Wissen.
Qapla'
Nabend,
nuqneH
Macht Sinn danke, also einfach
/>durch></link>ersetzen weil ich mich in Html 4.01 bewege?Nein.
</link>ist in HTML falsch. (Außer in XHTML, was als XML verarbeitet wird, was so gut wie nie passiert.) In HTML dürfen leere Elemente keine End-Tags haben.
<script language="javascript" type="text/javascript" src="java_1.js"></script> Diesen welchen muss ich aber abschließen? Das verwirrd mich jetzt, das Element ist leer aber wenn ich </script> weglasse wird das gesamte Html dokument nicht ausgegeben.
Gruß
Jo
Hi,
<script language="javascript" type="text/javascript" src="java_1.js"></script>Diesen welchen muss ich aber abschließen? Das verwirrd mich jetzt, das Element ist leer aber wenn ich </script> weglasse wird das gesamte Html dokument nicht ausgegeben.
das liegt daran, dass das script-Element ja nicht grundsätzlich leer ist: Alternativ zur Einbindung einer externen Javascript-Ressource mit dem src-Attribut kann das Javascript ja auch direkt im HTML-Dokument zwischen <script ...> und </script> stehen. Für das link-Element gilt das nicht.
Ciao,
Martin
Aloha ;)
<script language="javascript" type="text/javascript" src="java_1.js"></script>Diesen welchen muss ich aber abschließen? Das verwirrd mich jetzt, das Element ist leer aber wenn ich </script> weglasse wird das gesamte Html dokument nicht ausgegeben.das liegt daran, dass das script-Element ja nicht grundsätzlich leer ist: Alternativ zur Einbindung einer externen Javascript-Ressource mit dem src-Attribut kann das Javascript ja auch direkt im HTML-Dokument zwischen <script ...> und </script> stehen. Für das link-Element gilt das nicht.
Ich muss dem TO hier aber rechtgeben; das ist eigentlich ein unsinniges Verhalten von XHTML... Streng genommen (zumindest nach meinem Verständnis) sollte <tag /> grundsätzliche Kurzschreibweise von <tag></tag> sein. Dass XHTML/HTML hier eine Unterscheidung zwischen "generell inhaltsleeren" Tags und "potenziell inhaltsleeren" (bei ersteren gehts, bei zweiteren nicht) vornimmt, ist mir nicht einleuchtend, aber Fakt.
Grüße,
RIDER
@@Camping_RIDER:
nuqneH
Ich muss dem TO hier aber rechtgeben; das ist eigentlich ein unsinniges Verhalten von XHTML... Streng genommen (zumindest nach meinem Verständnis) sollte
<tag />grundsätzliche Kurzschreibweise von<tag></tag>sein. Dass XHTML/HTML hier eine Unterscheidung zwischen "generell inhaltsleeren" Tags und "potenziell inhaltsleeren" (bei ersteren gehts, bei zweiteren nicht) vornimmt, ist mir nicht einleuchtend, aber Fakt.
Ist es? Ich denke, <script src="java_1.js"/> sollte funktionieren. Natürlich nur, wenn XHTML auch als XML verarbeitet wird und nicht etwa vom HTML-Parser.
Es will mir gerade nicht gelingen, das zu testen. Unterstützen Browser application/xhtml+xml inzwischen gar nicht mehr?
Qapla'
@@Gunnar Bittersmann:
nuqneH
Es will mir gerade nicht gelingen, das zu testen. Unterstützen Browser application/xhtml+xml inzwischen gar nicht mehr?
Doch, tun sie. Mea culpa, ich hatte die Namespace-Angabe vergessen. Dadurch wurde der XHTML-Quelltext zwar als XML, aber nicht als XHTML verarbeitet.
Kurzschreibweise <script src="…"/> funktioniert.
Qapla'
Aloha ;)
Kurzschreibweise
<script src="…"/>funktioniert.
Hm, danke für den Hinweis. Ich erinnere mich an Zeiten da das nicht ging. Kann aber auch sein das betraf nur den IE6 (oder so) und ich brings grad durcheinander.
Grüße,
RIDER
@@Jo:
nuqneH
<script language="javascript" type="text/javascript" src="java_1.js"></script>
Diebstahl antiker Kunstobjekte.
type="text/javascript" ist in HTML5 überflüssig; language="javascript" war es schon immer.
Diesen welchen muss ich aber abschließen? Das verwirrd mich jetzt, das Element ist leer aber wenn ich </script> weglasse wird das gesamte Html dokument nicht ausgegeben.
Ja, der HTML-Parser erwartet das </script>-End-Tag. Kommt keins, ist er verwirrt.
Qapla'
@@Der Martin:
nuqneH
Außerdem ist es weder notwendig, noch sinnvoll, Umlaute zu verstümmeln.
Denn das „macht den Quelltext schlechter lesbar und schwerer zu pflegen und kann auch die Dateigröße beträchtlich erhöhen.“ [qa-escapes] (Wobei letzteres für Deutsch geschenkt ist.)
Ich hoffe doch, dass du eine Zeichencodierung verwendest, die Umlaute direkt darstellen kann (z.B. UTF-8).
Es dürfte einem Laien schwerfallen, eine Zeichencodierung zu finden, die Umlaute nicht direkt darstellen kann. ISO 8859-1 kann es, viele andere Codierungen der ISO-8859-Serie können das auch.
Aber selbstverständlich will man auch Anführungszeichen, Apostrophe, Gedankenstriche usw. codieren können, was mit ISO 8859-1 nicht geht. Dazu müsste es schon Windows-1252 o.ä. sein.
j4nk3y: Vergiss, dass es die eben genannten Zeichencodierungen je gab. Verwende UTF-8, immer und überall. 3 Schritte [qa-changing-encoding]
Was soll das missbilligte b-Element?
In welcher Welt ist b missbilligt? Es gibt durchaus Verwendung dafür; allerdings nicht (zwangsläufig) im Sinne von fett dargestellt. [qa-b-and-i-tags]
Fehler: In HTML 4.01 dürfen ID-Werte nicht mit einer Ziffer beginnen.
Fehler: Verwendung von HTML 4.01. :-b
Allerdings ist die Verwendung einer ID, die mit einer Ziffer beginnt, auch in HTML5 nicht ratsam. In CSS ist der Selektor #5 falsch, die 5 müsste escapet werden: #\35 .
Qapla'
Aloha ;)
Ich hab ein absolut positionierten <div> der eine gewisse größe hat.
In diesem möchte ich untereinander mehrere <div class="eintrag"> container anordnen
! welche eine variable größe nach ihrem Inhalt haben da man in diesem ein oder mehrere <div> container per java ein und ausklappen kann.Problem ist jetzt das der nächste <div class="eintrag"> sich nicht automatisch nach unten verschiebt.
(Kurz nebenbei werden auch z.b. trennlinien <hr> nicht zwischen den <div class="eintrag"> angezeigt sondern hinter diesen in einer andern z ebene, was ich mir auch nicht erklären kann)
Bis jetzt hab ich jegliche kombinationen von position: und float: ausprobiert die mir eingefallen ist aber nie mit dem gewünschtem Ergebnis. Aber ich hoffe einfach mal weiterhin das sich das auch ohne js lösen lässt.
Ich warne: Es kann gut sein, dass sich dein Problem durch CSS nicht lösen lässt. Die Schwächen von CSS sind ohne Zweifel die Verallgemeinerung und die Anwendung auf variablen Inhalt. Dafür braucht es schon Dinge wie SASS, also entsprechende Präprozessor-Funktionalitäten. Oder eben JavaScript. Wenn du darauf nicht ausweichen kannst oder willst, kann ich dir noch einen letzten Versuch mit auf den Weg geben.
Versuche, die Höhe der <div class="eintrag"> auf "auto" zu stellen, damit der Browser die Wahl der Darstellung hat. Dann stellst du sicher, dass alle position:static; besitzen - denn sobald auch nur eins der Elemente aus dem Elementfluss entfernt wird hast du so oder so verloren. Dann stellst du bei allen Elementen margin:0px; ein. Mit viel Glück funktioniert das dann.
Kein Gewehr auf meine Angaben - ich habe nicht extra nachgelesen, ob das Verhalten von margin tatsächlich so ausgelegt ist. Ich bin kein Freund des Nachschlagens in Specs ;) Einfach mal testen, und ansonsten Techniken wie Javascript einsetzen. Damit die Barrierefreiheit erhalten bleibt, solltest du dann ein Fallback dafür haben, falls jemand mit deaktiviertem Javascript deine Seite besucht. Zum Beispiel, indem du die absolute <div> standardmäßig mit einem overflow:auto; versiehst.
Vielleicht gibts auch noch mit CSS3 Möglichkeiten, die ich mangels Erfahrung mit CSS3 nicht direkt im Kopf habe. Ich fürchte aber nicht.
Grüße,
RIDER
Hey,
Ich warne: Es kann gut sein, dass sich dein Problem durch CSS nicht lösen lässt. Die Schwächen von CSS sind ohne Zweifel die Verallgemeinerung und die Anwendung auf variablen Inhalt. Dafür braucht es schon Dinge wie SASS, also entsprechende Präprozessor-Funktionalitäten. Oder eben JavaScript. Wenn du darauf nicht ausweichen kannst oder willst, kann ich dir noch einen letzten Versuch mit auf den Weg geben.
Ich mag eher nicht auf js zurückgreifen, da ich grad am Anfang bin und mir js grad noch etwas suspekt erscheint^^.
Versuche, die Höhe der
<div class="eintrag">auf "auto" zu stellen, damit der Browser die Wahl der Darstellung hat. Dann stellst du sicher, dass alleposition:static;besitzen - denn sobald auch nur eins der Elemente aus dem Elementfluss entfernt wird hast du so oder so verloren. Dann stellst du bei allen Elementenmargin:0px;ein. Mit viel Glück funktioniert das dann.
Ja, soweit war ich auch schon, da position:static; ja die default Einstellung ist hab ich auch so angefangen, nur es hilft leider nichts aber ich werds heut Abend nochmal probieren.
Kein Gewehr auf meine Angaben - ich habe nicht extra nachgelesen, ob das Verhalten von margin tatsächlich so ausgelegt ist. Ich bin kein Freund des Nachschlagens in Specs ;) Einfach mal testen, und ansonsten Techniken wie Javascript einsetzen. Damit die Barrierefreiheit erhalten bleibt, solltest du dann ein Fallback dafür haben, falls jemand mit deaktiviertem Javascript deine Seite besucht. Zum Beispiel, indem du die absolute
<div>standardmäßig mit einemoverflow:auto;versiehst.
Mit dem overflow:auto; hatte ich auch schon dran gedacht, wollte ich so aber nicht umsetzen. Wäre dann vllt der letzte ausweg.
Vielleicht gibts auch noch mit CSS3 Möglichkeiten, die ich mangels Erfahrung mit CSS3 nicht direkt im Kopf habe. Ich fürchte aber nicht.
Man lernt nie aus^^
Danke für deine Hilfe.
Gruß
Jo
@@Camping_RIDER:
nuqneH
Ich warne: Es kann gut sein, dass sich dein Problem durch CSS nicht lösen lässt. Die Schwächen von CSS sind ohne Zweifel die Verallgemeinerung und die Anwendung auf variablen Inhalt. Dafür braucht es schon Dinge wie SASS, also entsprechende Präprozessor-Funktionalitäten.
Nein, keine Chance.
Ein CSS-Präprozessor generiert (statisches) CSS, nicht mehr und nicht weniger. Du kannst das CSS, was der Präprozessor ausgibt, genauso auch per Hand schreiben. Nur wäre das aufwändiger, nicht so gut strukturiert, schlechter zu warten …
Du kannst mit einem CSS-Präprozessor aber nicht auf veränderliche Inhalte reagieren.
Qapla'
Aloha ;)
Nein, keine Chance.
Ein CSS-Präprozessor generiert (statisches) CSS, nicht mehr und nicht weniger. Du kannst das CSS, was der Präprozessor ausgibt, genauso auch per Hand schreiben. Nur wäre das aufwändiger, nicht so gut strukturiert, schlechter zu warten …
Du kannst mit einem CSS-Präprozessor aber nicht auf veränderliche Inhalte reagieren.
Stimmt, du hast Recht. Dicker Denkfehler meinerseits.
Hach, ich sehne mich einfach nach der eierlegenden Wollmilchsau... Dynamisches CSS ohne die Nachteile eines Javascripts (denn Javascript ist schon wieder so mächtig und vielseitig, dass es aus gutem Grund einfach deaktiviert werden kann und dann wieder eben nicht zur Darstellungsverbesserung verwendet werden kann). Bin ja schon froh mit der Dynamik, die CSS3 reinbringt. Aber z.B. Klickevents (in Form einer Pseudoklasse, :focus kann da nur bedingt als Ersatz dienen, da z.B. auf divs nicht oder zumindest nicht überall anwendbar), dynamische Berechnungen ... fehlen zumindest mir in der Stammfunktionalität von CSS immer noch schmerzlich...
Grüße,
RIDER
Guten Abend allerseits,
nun nach stundemlangem probieren und studieren der Positions-Werte hab ich mein Problem fast lösen können. Stehe aber vor dem Nächsten, wie das so ist^^
Und zwar habe ich jetzt mehrere relativ-positionierte <div>-Container und einen Statisch-positionierten <div>-Container, in einem übergeordneten Statischen, so positionieren können wie ich das gern hätte. So, dass der Statische am linken bereich des Elternelements liegt und mehrere relativ-positionierte, Rechts neben diesem.
Problem bei der Sache: die Relative-positionierten, schiebe ich neben das bild mit left: 170px; und top: -175px; aber das statische Elternelement merkt sich die Eigentliche Position des letzten Relative-positionierten Elements und endet darunter.
Und das bildet eine Lücke zwischen letztem Kindelement und Elternelement von.... wär hätte es gedacht 175px :/
Hat da vielleicht jemand eine Idee?
@ Martin:
Danke für deine Erklärungen, dass hat mich schon um einiges weitergebracht und mir gezeigt was ich mir alles noch anschauen sollte.
@ Gunnar:
Danke für die nützlichen links und tipps.
Gruß
Jo
Hi,
Problem bei der Sache: die Relative-positionierten, schiebe ich neben das bild mit
left: 170px;undtop: -175px;aber das statische Elternelement merkt sich die Eigentliche Position des letzten Relative-positionierten Elements und endet darunter.
ja, so ist position:relative definiert: Das Element wird aus seiner Normalposition verschoben, der ursprünglich vorgesehene Platz bleibt aber reserviert.
Ciao,
Martin
Guten morgen,
Problem bei der Sache: die Relative-positionierten, schiebe ich neben das bild mit
left: 170px;undtop: -175px;aber das statische Elternelement merkt sich die Eigentliche Position des letzten Relative-positionierten Elements und endet darunter.ja, so ist position:relative definiert: Das Element wird aus seiner Normalposition verschoben, der ursprünglich vorgesehene Platz bleibt aber reserviert.
Ok verstehe, aber dann muss es ja eine Anweisung geben wie das auch ohne position: relative; funktioniert. float: kanns nicht sein aber was dann?
Gruß
Jo
Aloha ;)
Problem bei der Sache: die Relative-positionierten, schiebe ich neben das bild mit
left: 170px;undtop: -175px;aber das statische Elternelement merkt sich die Eigentliche Position des letzten Relative-positionierten Elements und endet darunter.ja, so ist position:relative definiert: Das Element wird aus seiner Normalposition verschoben, der ursprünglich vorgesehene Platz bleibt aber reserviert.
Ok verstehe, aber dann muss es ja eine Anweisung geben wie das auch ohne
position: relative;funktioniert.float:kanns nicht sein aber was dann?
Humm-Homm. Ich bin in deinem Problem zwar gedanklich nicht 100% drin, aber vielleicht suchst du ja sowas wie http://de.selfhtml.org/css/eigenschaften/positionierung.htm#display@title=display:table-cell; mit display:table-row; im Elternelement. Sobald es aus den Kinderschuhen raus ist, kannst du auch flexbox verwenden (würde ich aktuell aber nicht unbedingt - Flexbox ist noch keine Recommendation sondern erst auf dem Weg dahin und daher muss man proprietäre Eigenschaften benutzen oder sogar damit rechnen, dass verschiedene Browser es nicht oder falsch interpretieren. Imho uncool).
[Nebenbei: Ich hab auf die alte Doku verlinkt. Im Wiki gibts auch nen Abschnitt zu display, aber da sind die table-Eigenschaften kaum erwähnt. Zumindest nicht ausreichend. @Matthias Apsel et. al.: Müsste man da vielleicht noch ändern / erweitern oder ist das gewollt? Nicht, dass ich das nicht täte (sobald ich Zeit find), aber dann müssts noch auf die gedankliche Todo-Liste.]
Grüße,
RIDER
Aloha :)
Humm-Homm. Ich bin in deinem Problem zwar gedanklich nicht 100% drin, aber vielleicht suchst du ja sowas wie http://de.selfhtml.org/css/eigenschaften/positionierung.htm#display@title=display:table-cell; mit
display:table-row;im Elternelement. Sobald es aus den Kinderschuhen raus ist, kannst du auch flexbox verwenden (würde ich aktuell aber nicht unbedingt - Flexbox ist noch keine Recommendation sondern erst auf dem Weg dahin und daher muss man proprietäre Eigenschaften benutzen oder sogar damit rechnen, dass verschiedene Browser es nicht oder falsch interpretieren. Imho uncool).
Naja, hmm , eig nicht wirklich da ich mir gleich am Anfang gemerkt hab das ich keine Tabelle als layout werkzeug mißbrauchen soll... daher hat das eig nichts mit display:table-row; zutun," oder irre ich da?".
Ich werd mich heute Abend nochmal eingehend damit beschäfftigen und hoffentlich endlich eine Lösung finden.
Ich vermute, dass die gesamte Positionierung misslingt, aufgrund des obersten absolute-positionierten <div>.
Gruß
Jo
Aloha ;)
Naja, hmm , eig nicht wirklich da ich mir gleich am Anfang gemerkt hab das ich keine Tabelle als layout werkzeug mißbrauchen soll... daher hat das eig nichts mit
display:table-row;zutun," oder irre ich da?".
Ja, du irrst. Es ist aber auch verwirrend. Die Regel, keine Tabelle als Layout-Werkzeug zu missbrauchen, bezieht sich auf HTML. Da HTML eine Markup Language und daher eine semantische Sprache ist, sollten in HTML nur tabellarisch aufgestellte Daten als Tabelle realisiert werden. Semantik ist auch eine Grundvoraussetzung für Barrierefreiheit. Kurz gesagt: Wenn du jegliches CSS und Javascript rauslässt, sollte deine Seite immer noch logisch-sinnvoll aufgebaut sein.
CSS hingegen ist eine Sprache, die Layout festlegt. In CSS ist grundsätzlich alles erlaubt was funktioniert, denn CSS soll nur die Präsentation des Inhalts festlegen und hat keinen tieferen, intrinsischen Sinn. Über display:table-row; missbrauchst du also keine Tabelle für Layout-Zwecke, sondern du sagst nur einem div: "Verhalte dich wie eine Tabellenzeile" beziehungsweise: "Du bekommst Kindelememte mit display:table-cell;. Stell diese nebeneinander mit gleicher Höhe dar."
Aufgrund der von dir schon genannten uncoolen float-Geschichte ist das auch eigentlich die einzige vollständig implementierte/standardisierte Lösung, wie Elemente nebeneinander existieren können.
Ich vermute, dass die gesamte Positionierung misslingt, aufgrund des obersten absolute-positionierten
<div>.
Wenn du display:table-row; benutzt, sollte dir das keine Probleme mehr bereiten.
Grüße,
RIDER
Servus,
Kann es sein das jegliche Anweisung mit display: nur für <p>oder<h.> Elemente funktioniert. Denn ich schaffe es nicht <div>-Container damit auszurichten. Nicht mit display: block; oder display: inline; oder display:table; oder dessen variationen.
Wie kann ich euch mein Problem am besten zeigen? Denn ich kriegs einfach nicht hin.
Gruß
Jo
Om nah hoo pez nyeetz, Jo!
Wie kann ich euch mein Problem am besten zeigen? Denn ich kriegs einfach nicht hin.
Am besten, indem du die fragliche Seite verlinkst. Du kannst sie auch zum Beispiel bei bplaced.net hochladen.
Matthias
Aloha ;)
:D Revanche. Diesmal warst du schneller.
Grüße,
RIDER
Aloha ;)
Kann es sein das jegliche Anweisung mit
display:nur für<p>oder<h.>Elemente funktioniert. Denn ich schaffe es nicht<div>-Container damit auszurichten. Nicht mitdisplay: block;oderdisplay: inline;oderdisplay:table;oder dessen variationen.
Nö. Müsste mit allem funktionieren.
Wie kann ich euch mein Problem am besten zeigen? Denn ich kriegs einfach nicht hin.
Entweder das Beispiel irgendwo hochladen, oder (falls du da nix zur Verfügung hast) z.B. in JSFiddle nachbauen, speichern und den Link hier posten.
Grüße,
RIDER
Hey,
ging ja flott^^ :)
Wie kann ich euch mein Problem am besten zeigen? Denn ich kriegs einfach nicht hin.
Entweder das Beispiel irgendwo hochladen, oder (falls du da nix zur Verfügung hast) z.B. in JSFiddle nachbauen, speichern und den Link hier posten.
Top wird sofort erledigt!
Gruß Jo
Hey,
http://jsfiddle.net/p3fyyvfn/
So sieht es grade aus, ich müsste es eig nurnoch hinkriegen, dass .eintrag_links und .eintrag_rechts Nebeneinander dargestellt werden und dessen Inhalt zentriert wird.
Und dann kann ich mich dem nächsten Problem zuwenden, schade das man das nicht sehen kann:
Das Bildchen welches den .beschreibungstext zuklappt soll sich eig in Abhängigkeit ob er offen oder zugeklappt ist ändern. So wie das hier im Forum mit den Ordnern vor den Themen umgesetzt ist.
Gruß Jo
Om nah hoo pez nyeetz, Camping_RIDER!
[Nebenbei: Ich hab auf die alte Doku verlinkt. Im Wiki gibts auch nen Abschnitt zu display, aber da sind die table-Eigenschaften kaum erwähnt. Zumindest nicht ausreichend. @Matthias Apsel et. al.: Müsste man da vielleicht noch ändern / erweitern oder ist das gewollt? Nicht, dass ich das nicht täte (sobald ich Zeit find), aber dann müssts noch auf die gedankliche Todo-Liste.]
In der Doku waren sie kaum ausreichender erwähnt ;-)
Ja. Es muss was getan werden.
Matthias
