Inline-Elemente untereinander platzieren

[Pierre]

Hallo

ich hab da ein Problem, wo ich nicht weiterkomme. Auf meiner Projektseite gibts eine Accordeon Funktion zum auf- und zuklappen von Content. Der übergeordnete Titel (h3) soll rechts neben dem Wort ein grafisches Element erhalten, welches den Aufklappmodus anzeigen soll.

Musterseite

H3 ist wie folgt definiert:
h3.off {
 background-image:url(images/pfeil-rechts.gif);
 background-position:100% 3px;
 background-repeat:no-repeat;
 clear:left;
 cursor:pointer;
 display:inline;
 padding-right:25px;
}

Nun habe ich die h3 als inline-Elemente definiert, damit das grafische Element schön am Ende des Textes erscheint. Sind nun aber alle Inhalte eingeklappt, rutschen natürlich die h3-Elemente die rechts noch Platz haben dahinter. Ich könnte nun nach jedem h3 ein br einfügen, ist aber ungüstig, da der Kunde die Inhalte selbst erstellt (Drupal und fck-Editor) und dies somit sehr umständlich ist. Wie schaff ich es durch normals css Markup, ohne Hinzufügen von weiterem HTML Code (br oder span) die als inline definierten h3 Elemente untereinander anzuordnen? Ich komm da nicht weiter. Kann mir da jemand mit einem Tipp weiterhelfen?

Besten Dank
Pierre

[ChrisB]

Hi,

Wie schaff ich es durch normals css Markup, ohne Hinzufügen von weiterem HTML Code (br oder span) die als inline definierten h3 Elemente untereinander anzuordnen?

float/clear - damit wuerden "einzeilige" Elemente auch nur so breit, wie es ihr Inhalt erfordert. Bei mehrzeiligen natuerlich wieder Essig.

Der übergeordnete Titel (h3) soll rechts neben dem Wort ein grafisches Element erhalten, welches den Aufklappmodus anzeigen soll.

Soll das nur den Status anzeigen - oder ist das auch klickbar, um den Status zu wechseln? In letzterem Falle wuerde mich nicht so gegen das Hinzufuegen eines zusaetzlichen Elementes straeuben.

Deine angegebene Musterseite ist uebrigens per HTTP Auth geschuetzt - so lange du uns keine Zugangsdaten mitteilst, also lediglich als Muster fuer die Standard-403-Seite des Apachen zu gebrauchen :-)

MfG ChrisB

[Pierre]

ups, so kommt man auf die Musterseite:

paulvantrigt
feuerloescher

inline oder float macht wohl keinen grossen Unterschied. Mir ist auf jeden Fall nichts anderes eingefallen um das grafische Element rechts neben dem Text zu platzieren.

[ChrisB]

Hi,

inline oder float macht wohl keinen grossen Unterschied. Mir ist auf jeden Fall nichts anderes eingefallen um das grafische Element rechts neben dem Text zu platzieren.

:after und content koenntest du auch noch nutzen - wenn dir der IE egal ist :-)

MfG ChrisB

[Pierre]

Leider kann ich in diesem Fall den IE nicht vernachlässigen (würd ich aber gerne ;-)

Das Problem mit zusätzlichem Markup ist eben, dass der Kunde diese Texte selbst via fck eingibt und meine Erfahrung zeigt, dass sobald es irgendwelche Workarounds gibt die Kunden damit überfordert sind. Würde ich diesen Content bewirtschaften wärs überhaupt kein Problem. Aber fck ist schon heikel genug zum Bedienen.

Vielleicht probier ichs mit einem leeren Div nach dem Titel, dem man eine Klasse zuordnen kann. Ist aber ne ziemlich hässliche Lösung, die ich sehr gerne umgehen würde.

[MudGuard]

Hi,

:after und content koenntest du auch noch nutzen - wenn dir der IE egal ist :-)

Müßte das in diesem Fall nicht heißen: wenn Dir der IE am :after vorbeigeht ;-)

cu,
Andreas

[Gunnar Bittersmann]

@@ChrisB:

:after und content koenntest du auch noch nutzen - wenn dir der IE egal ist :-)

p::after  
{  
 content: "bar";  
}  
  
p  
{  
 display: expression(  
[code lang=javascript]  (function (element)  
   {  
    element.innerHTML += "bar";  
    element.style.display = "block";  
   }  
  )(this)

)
}[/code]

Na bitte, geht doch.  :-)

Live long and prosper,
Gunnar

PS: Anmerkungen 1 und 2

[MudGuard]

Hi,

p::after

{
content: "bar";
}

p
{
display: expression(
[code lang=javascript]  (function (element)
   {
    element.innerHTML += "bar";
    element.style.display = "block";
   }
  )(this)

>  )  
> }[/code]  
  

> Na bitte, geht doch.  :-)  
  
Reicht so aber nicht, denn für das ::after können auch noch eigene Eigenschaften gesetzt werden. (z.B. `p::after { content:"bla"; color:red; }`{:.language-css})  
  
Es müßte also statt des Anhängens des content-Strings ans innerHTML ein Element erzeugt und angehängt werden mit diesem String als Inhalt, und für dieses Zusatzelement dann noch das CSS gesetzt werden.  
  
Außerdem:  
Wenn jetzt im Dokument selbst der Inhalt des Elements per js abgefragt oder geändert wird, muß auch dort jeweils wieder dafür gesorgt werden, daß der zusätzliche Text bzw. das zusätzliche Element richtig behandelt bzw. bearbeitet wird, also z.B. bei Abfragen, ob innerHTML leer ist oder ob firstChild null ist, bei zuGriff auf's lastChild, usw.  
  
In Browsern (also wenn ::after korrekt verarbeitet wird) ist das natürlich viel einfacher.  
  
cu,  
Andreas

-- 
[Warum nennt sich Andreas hier MudGuard?](http://MudGuard.de/)  
[O o ostern ...](http://ostereier.andreas-waechter.de/)  
  
Fachfragen unaufgefordert per E-Mail halte ich für unverschämt und werde entsprechende E-Mails nicht beantworten. Für Fachfragen ist das Forum da.  

[ChrisB]

Hi,

Auf meiner Projektseite gibts eine Accordeon Funktion zum auf- und zuklappen von Content. Der übergeordnete Titel (h3) soll rechts neben dem Wort ein grafisches Element erhalten, welches den Aufklappmodus anzeigen soll.

Wenn der Content in Bereiche aufgeteilt ist, die sich einzeln auf- und zuklappen lassen, und deren jeder auch eine eigene Ueberschrift rechtfertigt - dann ist vermutlich auch ein gruppierender Div-Container um Einzelueberschrift und nachfolgenden Inhalt gerechtfertigt.
Inline-Ueberschrift alleine im Div-Container, Rest ausgeblendet - laesst die Ueberschriften immer noch untereinander stehen.

MfG ChrisB

[schwarze Piste]

Tachchen!

Kann mir da jemand mit einem Tipp weiterhelfen?

Sollte es nicht möglich sein, H3 die Blockeigenschaften zu
lassen und darin ein zusätzliches SPAN-Element zu platzieren?

Ansonsten gibt es :after, teilweise sogar über die eigentlichen
Fähigkeiten des Browsers hinaus über die Bibliothek, mit der das
Accordion realisiert wird.

Gruß

Die schwarze Piste