Willkommen auf dem Portal für Mediengestalter

Jigity · Threadersteller

Hallo Leute,

hab ein Problem wo ich nicht wieter komm! Hab eine XML-Datei, die ich mittels CSS im Browser anzeigen will. Vieles klappt auch schon, aber mein Problem liegt in der Positionierung der Objekte (divs). In meiner XML datei ist für jedes Objekt die Position left, top, width und height hinterlegt, kann ich diese Attributwerte im CSS direkt auslesen, so dass die Positionierung des div-blocks aufgrund dieser Attributwert festgelegt wird?

Wäre um jede Hilfe dankbar! Auch ein klares nein, never ever hilft mir! * Keine Ahnung... *

Raumwurm · **Verfasst** Do 06.04.2006 16:47 **Titel**

Komm da nicht ganz mit. Du definierst die
Container statisch in deiner XML inline per
style='blub'. Theoretisch willst du die aber
besser im css-File definiert haben und da
hakts jetzt - oder wie? Zeig doch mal einfach.

Jigity · Threadersteller

Nix statisch! Die Datei xml-Datei wird über ein PlugIn aus einem Layoutprogramm erzeugt. Und in dieser Datei versuch ich dann die Webdarstellung ohne vorherige transformierung über xslt, direkt mit css zu realisieren.

Als Beispiel, vielleicht wird's dann verständlicher:

xml-Datei:
<?xml version="1.0" encoding="iso-8859-1"?>
<?xml-stylesheet type="text/css" href="div.css"?>
<layout>
<textframe>
<position left="10" top="20" width="30" height="50"/>
<content>
<text>Hier steht der Text der Div-Box!</text>
</content>
</textframe>
<textframe>
<position left="50" top="60" width="70" height="80"/>
<content>
<text>Weiterer Text steht hier</text>
</content>
</textframe>
</layout>

css-datei:
textframe {display: span; position:absolute; top: ./position/@top left: ./position/@left; width:150px; height:150px; z-index:1; }
position(display: none)
content(display: block)
text {font: normal 100.01% Helvetica, Arial, sans-serif; color: black; background-color: white;}

Und wie kann ich jetzt in css auf die Attribute in der xml-Datei zugreifen, mit normalem XPath wie ich es probiert hab, hat's nicht geklappt.

beeviZ · **Verfasst** Do 06.04.2006 21:39 **Titel**

garnich. aber wenn die werte immer relativ ähnlich sind kannste es mit

*[top="10"] {top: 10px;}
*[top="20"] {top: 20px;}
*[top="30"] {top: 30px;}
etc ...

machen. allerdings klappt das ganze nur im firefox, safari und vermutlich auch im opera.

Jigity · Threadersteller

Die Werte sind leider völlig unterschiedlich! Menno!

Kann ich auf die Werte zugreifen, wenn diese als Text_Node vorliegen?
Über content: oder so ähnlich?

Also bsp.:
<position>
<left>10</left>
<top>20</top>
<width>100</width>
<height>200</height>
</position>

Oder gibt es denn irgendeine Möglichkeit sei es Farbe, Border oder ähnliches direkt aus der XML-Datei auszulesen und in CSS zu verwerten?

beeviZ · **Verfasst** Do 06.04.2006 23:39 **Titel**

auch nich. höchstens mit php. und sehr wahrscheinlich wohl auch mit xslt. aber davon hab ich keine ahnung.

Jigity · Threadersteller

Ok! Danke erstmal.
Zwar ein ernüchterndes Ergebnis, aber dann muß ich halt doch ein xslt-StyleSheet schreiben indem ich dann inline css einbinde. *Schnief*

Jigity · Threadersteller

Also falls es jemanden interessiert wie das ganze mit xslt zu lösen ist, dann hier mein Lösungsansatz für diesen weg!

XML-Datei:(div.xml)
<?xml version="1.0" encoding="iso-8859-1"?>
<?xml-stylesheet type="text/xsl" href="div.xsl"?>
<layout>
<textframe>
<position left="10" top="20" width="30" height="50"/>
<content>
<text>Hier steht der Text der Div-Box!</text>
</content>
</textframe>
<textframe>
<position left="50" top="60" width="70" height="80"/>
<content>
<text>Weiterer Text steht hier</text>
</content>
</textframe>
</layout>

XSLT-StyleSheet:(div.xsl)
<?xml version="1.0" encoding="iso-8859-1"?>
<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform" xmlns:fo="http://www.w3.org/1999/XSL/Format">

<xsl:template match="/">
<html>
<head>
<title>Titel der Seite</title>
</head>
<body>
<xsl:apply-templates/>
</body>
</html>
</xsl:template>

<xsl:template match="textframe">
<div>
<xsl:attribute name="style">
position:absolute;
left:<xsl:value-of select="./position/@left"/>mm;
top:<xsl:value-of select="./position/@top"/>mm;
width:<xsl:value-of select="./postition/@width"/>mm;
height:<xsl:value-of select="./position/@height"/>mm;
</xsl:attribute>
<xsl:apply-templates/>
</div>
</xsl:template>

<xsl:template match="text">
<xsl:value-of select="."/>
</xsl:template>

</xsl:stylesheet>

Wird bei aufruf der XML-Datei auch in den gängigsten Browsern korrekt angezeigt, hab allerdings noch nicht alle getestet *zwinker*

Willkommen auf dem Portal für Mediengestalter

Thema: CSS und XML vom 06.04.2006

CSS und XML