Html - hilfe bei styles benötigt

[Gast alexC++]

Hallo,

ich hätte gern folgendes ergebnis:

Überschrift1

text1 text2 text3

Überschrift

text4 text5 text6

usw.

habe folgendes html

<div style="background-color: blue; width: 600px;">

	<div style="background-color: green;">

		<p><strong>ueberschrift</strong></p>

		<p style="font-size: 20px; width: 150px; float: left;">schlecht</p>

		<p style="font-size: 20px; width: 150px;">okay</p>

		<p style="font-size: 20px; width: 150px;">gut</p>

	</div>

	<div style="background-color: green;">

		<p><strong>ueberschrift</strong></p>

		<p style="font-size: 20px; width: 150px; float: left;">ok</p>

		<p style="font-size: 20px; width: 150px;">okay</p>

		<p style="font-size: 20px; width: 150px;">gut</p>

	</div>

	<div style="background-color: green;">

		<p><strong>ueberschrift</strong></p>

		<p style="font-size: 20px; width: 150px; float: left;">gut</p>

		<p style="font-size: 20px; width: 150px;">okay</p>

		<p style="font-size: 20px; width: 150px;">gut</p>

	</div>

</div>

ich mag kein thml und css

kann mir da einer auf die sprünge helfen?

[macrominds]

Auch wenn Du kein HTML und CSS magst.. ins HTML gehören keine Styles rein.

Ausserdem verfügt HTML über mehr als div und p.

Also:

<div>

<h1>Überschrift1</h1>

<ul>

  <li>schlecht</li><li>okay</li><li>gut</li>

</ul>

</div>

Styles definierst Du im Stylesheet. Da kannst Du z.B. folgendes schreiben:

div{

   background-color:#0f0;

}

h1{

  font-weight:bold;

}

li{

  display:inline;

  margin-right:1em;

}

So kann man den Code dann auch besser lesen.

Wenn Du gelegentlich mit HTML und CSS zu tun hast, empfehle ich das Buch Little Boxes und die Verwendung von selfhtml (einfach mal danach googeln).

[Gast alexC++]

ich erstelle gerade eine xsl-datei und deshalb habe ich die styles in das html gemacht, da ich so den besseren überlick habe.

wie mache ich die <li> nebeneinander?

gruß

<xsl:template match="answer-group">

	<div style="background-color:green;">

		<xsl:copy-of select="answer-group-text/*"/>

	    <ul style="list-style-type: none;">

		    <xsl:apply-templates select="result"/>

	     </ul>		

	</div>

</xsl:template>



<xsl:template match="result">


   <xsl:choose>

	<xsl:when test="position() = 1">

		<xsl:choose>

			<xsl:when test="answer < 40">

				<li style="display:inline; font-size:20px;"><xsl:copy-of select="answer- text/*" /></li>

			</xsl:when>

			<xsl:when test="answer > 39">

				<li style="display:inline; font-size:40px;"><xsl:copy-of select="answer-text/*" /></li>

			</xsl:when>	

			<xsl:otherwise/>

		</xsl:choose>

	</xsl:when>


	<xsl:when test="position() = last()">

		<xsl:choose>

			<xsl:when test="answer < 40">

				<li style="display:inline; font-size:20px;"><xsl:copy-of select="answer-text/*" /></li>

			</xsl:when>	

			<xsl:when test="answer > 39">

				<li style="display:inline; font-size:40px;"><xsl:copy-of select="answer-text/*" /></li>

			</xsl:when>					

		</xsl:choose>

	</xsl:when>



	<xsl:otherwise>

		<xsl:choose>

		   <xsl:when test="answer < 40">

			<li style="display:inline; font-size:20px;"><xsl:copy-of select="answer-text/*" /></li>

		   </xsl:when>

		   <xsl:when test="answer > 39">

			<li style="display:inline; font-size:40px;"><xsl:copy-of select="answer-text/*" /></li>

  		   </xsl:when>		

		</xsl:choose>

	</xsl:otherwise>

   </xsl:choose>


	</xsl:template>

Bearbeitet 22. September 2010 von alexC++

[Gast alexC++]

so sieht man es besser:

<ul>

   <li style="display: inline; font-size: 20px; list-style-type: none;">     <p>schlecht</p></li>

  <li style="display: inline; font-size: 40px; list-style-type: none;"><p>okay</p></li>

  <li style="display: inline; font-size: 40px; list-style-type: none;"> <p>gut</p></li>

</ul>

[macrominds]

display:inline.

Verzichte auf die p (Blockelemente) in li.

Hm.. also ich an Deiner Stelle würde mich erstmal über HTML und CSS informieren, bevor ich es versuche über XSLT zu erstellen. Just my 2ct.

[Gast alexC++]

Auf die p-blockelemente kann ich leider nicht verzichten, da die aus

der datenbank kommen.

ich habe den inhalt der liś als display:inline; gemacht und es funktioniert.

Da html und css bei mir nebensache sind und nur selten in meinen

transformatoren vorkommen, eigne ich mir das ab und zu mal an ja,

ist aber nicht meine hauptaufgabe.

-> und ich könnte auf html und css verzichten

gruß

[macrominds]

hm.. klar. Wie Du meinst. Mit copy-of select kopierst Du doch aber einen Teilbaum. D.h. in der Quelle muss auf jeden Fall valides HTML vorliegen. Dann könntest Du auch das p entfernen:)

Hehe:) Aber ich verstehe schon. Viel Spaß noch. Ich hoffe ich konnte helfen.

Übrigens war das <ul>/<li> auch nur ein Vorschlag für aus meiner Sicht semantisch sinnvolleres HTML. Du kannst das komplett weglassen und z.B. p mit display:inline formatieren.

Viele Grüße,

macrominds

[Gast alexC++]

nene die liste was schon ein guter vorschlag