Zum Inhalt springen
View in the app

A better way to browse. Learn more.

Fachinformatiker.de

A full-screen app on your home screen with push notifications, badges and more.

To install this app on iOS and iPadOS
  1. Tap the Share icon in Safari
  2. Scroll the menu and tap Add to Home Screen.
  3. Tap Add in the top-right corner.
To install this app on Android
  1. Tap the 3-dot menu (⋮) in the top-right corner of the browser.
  2. Tap Add to Home screen or Install app.
  3. Confirm by tapping Install.

Html - hilfe bei styles benötigt

Empfohlene Antworten

Veröffentlicht

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 :rolleyes:

kann mir da einer auf die sprünge helfen?

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).

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 von 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>

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.

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 :D

gruß

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

nene die liste was schon ein guter vorschlag ;)

Archiv

Dieses Thema wurde archiviert und kann nicht mehr beantwortet werden.

Configure browser push notifications

Chrome (Android)
  1. Tap the lock icon next to the address bar.
  2. Tap Permissions → Notifications.
  3. Adjust your preference.
Chrome (Desktop)
  1. Click the padlock icon in the address bar.
  2. Select Site settings.
  3. Find Notifications and adjust your preference.