Zum Inhalt springen

Nummerierte Liste einrahmen

isardor

Von isardor
in Webdesign

 Teilen

Empfohlene Beiträge

isardor

isardor

Geschrieben
Geschrieben

Hallo, ich habe hier auch mal ein Problem, undzwar möchte ich die OnlineHilfe für ein Programm zum Größtenteil mit den selben Stilen erzeugen wie das dazugehörige Handbuch.

Soweit ist das ja kein Problem und mit CSS klappt das super. Bis auf eine Sache:

Ich verwende jedemenge nummerierte Listen, also <OL>s und kann diese auch durch das CSS Stylen, nur hätte ich da gern noch einen rahmen drum, und zwar einen Rahmen der Nummer und Text einschließt.

Bisher funktioniert das nur so, dass der Text umrahmt wird, aber die Nummern frei stehen.

Weiß jemand wie sowas geht? Ich möchte nämlich nicht unbedingt alle ordered Lists in Defined Lists (oder wie die heißen) umschreiben.

Mal ein Codebeispiel.

In der CSS steht:

.note

{

    BORDER-RIGHT: red 0.2em solid;

    BORDER-TOP: red 0.2em solid;

    BORDER-LEFT: red 0.2em solid;

    BORDER-BOTTOM: red 0.2em solid;

    FONT-WEIGHT: bold;

    FONT-SIZE: 13px;

    COLOR: black;

    FONT-FAMILY: arial, helvetica

}[/PHP]

und dann in der HTM:

[PHP]
<ol class="note">
<li/>
Eintrag 1
<li/>
Eintrag 2
<li/>
Eintrag 2
<li/>
Eintrag 4
</ol>

Link zu diesem Kommentar
Auf anderen Seiten teilen
Mascha

Mascha

Geschrieben
Geschrieben
Hallo, ich habe hier auch mal ein Problem, undzwar möchte ich Ich verwende jedemenge nummerierte Listen, also <OL>s und kann diese auch durch das CSS Stylen, nur hätte ich da gern noch einen rahmen drum, und zwar einen Rahmen der Nummer und Text einschließt.

Bisher funktioniert das nur so, dass der Text umrahmt wird, aber die Nummern frei stehen.

In Firefox sieht es so aus, wie du es dir vorstellst.

Link zu diesem Kommentar
Auf anderen Seiten teilen
tobias-digital

tobias-digital

Geschrieben
Geschrieben
Hallo, ich habe hier auch mal ein Problem...

Naja, HTML und CSS sind das ja wohl nicht was Du da verzapft hast. Probier's mal gültig:


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 

<html> 

	<head>

		<title>1566</title>

		<style type="text/css">

		ol {

			border: 0.2em solid red;

			font: bold 13px Arial, Helvetica, sans-serif;

		}

		</style>

	</head>

	<body>

		<ol>

			<li>Eintrag 1</li>

			<li>Eintrag 2</li>

			<li>Eintrag 3</li>

			<li>Eintrag 4</li>

		</ol>

	</body> 

</html>

GRüße, Tobias

Link zu diesem Kommentar
Auf anderen Seiten teilen
isardor

isardor

Geschrieben
  • Autor
Geschrieben

1. Danke ich mach es jetzt mit DIV, ist zwar nicht sonderlich elegent, aber klappt. Firefox bringt mir nix, weil das Ganze am ende zu einer CHM werden soll. Danke.

@Tobias-Digital: stimmt, aber mein quelltext is XHTML 1.0 - konform, das ist nicht das selbe wie HTML, jedenfalls nicht ganz, besonders was die Konventionen angeht.

Und selbst in HTML 4 müssen listeneinträge nicht geschlossen werden.

Was stimmt nicht an meinem CSS code? der Aufruf? Die Styles stehen selbstverständlich in einer eigenen CSS-Datei. Schon aus dem grund weil ich ungefähr 20 verscheidene Textformate benutze. Und die auf jederseite einzubauen... naja.

Link zu diesem Kommentar
Auf anderen Seiten teilen
tobias-digital

tobias-digital

Geschrieben
Geschrieben

Stuss! Dein Quelltext ist alles, nur nicht XHTML konform, noch nicht mal HTML konform. Dein CSS stimmt auch nicht.

  1. ein Schreibweise wie <li/> gibt es nicht. Wenn schon, dann heißt das <li /> (Leerzeichen!)
  2. Der HTML-Standard erlaubt das weglassen des abschließenden Tags bei Listenpunkten, die einschlägigen Seiten empfehlen ihn aber dennoch zu notieren (siehe http://de.selfhtml.org/html/text/listen.htm#nummeriert)
  3. Die XHTML Standards verbieten das weglassen des abschließenden Tags bei nicht leeren Elementen (http://www.w3.org/TR/xhtml1/#h-4.3)
  4. Die (X)HTML Standards verbieten die Notation von CDATA innerhalb von ol-Tags. Hier muss CDATA in Listenelementen, also li-Tags, stehen, die bei dir aber jeweils direkt (jedoch falsch, siehe Punkt 1) geschlossen werden (siehe http://www.w3.org/TR/html401/struct/lists.html#h-10.2).
  5. Im CSS notierst Du "BORDER-RIGHT: red 0.2em solid;". Die Reihenfolge ist falsch. Richtig wäre die Nennung in der Reihenfolge Stärke, Art, Farbe (siehe z. B. http://www.perun.net/2004/06/25/css-kurzschreibweise/)

Außerdem empfehle ich grundsätzlich die Benutzung des Firefox, da er die Standards IMHO am besten interpretiert und sich Fehler im Markup leicht finden lassen.

Grüße, Tobias

Link zu diesem Kommentar
Auf anderen Seiten teilen
isardor

isardor

Geschrieben
  • Autor
Geschrieben

Gut, wenn du meinst. mit dem Umgangston muss du ja recht haben. und das W3C sollte seine Seiten auch mal überarbeiten, denn da steht auch an einigen Stellen <br/> anstatt <br /> wie es richtig heißt. Schreib denen doch mal auf deine liebenswürdige Art.

Und ich habe bereits darauf hingewiesen warum der Firefox nicht geht. Weil das ganze am Ende ein CHM wird, also eine compilierte HTML seite, nur mal zur Info und CHM nutzt den Internetexploit. Kannst ja meiner Firma auch mal empfehlen den Firefox zu zertifizieren, wenn du magst.

Und hier über die Reihenfolge von Stylesheets herzufallen, nur damit du etwas zu meckern hast, ist ja wohl das aller letzte.

Und eine Lösung zu meinem Problem hast du ja nun auch nicht beigetragen. Nein, eigentlich hast du es nicht mal am Rande erwähnt. hmm eigentlich sollte ich solche Trollposts ignorieren oder?

Link zu diesem Kommentar
Auf anderen Seiten teilen
tobias-digital

tobias-digital

Geschrieben
Geschrieben

Hä? Bleib mal auf dem Teppich Kollege! :)

und das W3C sollte seine Seiten auch mal überarbeiten, denn da steht auch an einigen Stellen <br/> anstatt <br /> wie es richtig heißt.

Zeig mir mal eine Stelle wo auf einer W3C-Seite falscher Code verwendet wird.

Und ich habe bereits darauf hingewiesen warum der Firefox nicht geht. Weil das ganze am Ende ein CHM wird, also eine compilierte HTML seite, nur mal zur Info und CHM nutzt den Internetexploit.

Ja und? Eine CHM Datei ist eine komprimierte Datei, die verschiedene Dateien enthält; z. B. Bild-Dateien, XML-Dateien und eben halt auch HTML Dateien. Was willst Du damit aussagen? Und was zur Hölle ist ein Internetexploit?

Kannst ja meiner Firma auch mal empfehlen den Firefox zu zertifizieren, wenn du magst.

Den Firefox kann man nicht zertifizieren.

Und hier über die Reihenfolge von Stylesheets herzufallen, nur damit du etwas zu meckern hast, ist ja wohl das aller letzte.

Tja, das Leben ist hart, aber soll ich Dir was flüstern? Genau das war ein elementarer Fehler in Deinem Markup. Nach nichts anderem hast Du gefragt.

Und eine Lösung zu meinem Problem hast du ja nun auch nicht beigetragen. Nein, eigentlich hast du es nicht mal am Rande erwähnt. hmm eigentlich sollte ich solche Trollposts ignorieren oder?

Ich hab doch in diesem Post (http://forum.fachinformatiker.de/877116-post5.html) eine eindeutige und gültige Lösung zu Deiner Frage gegeben!?

Grüße, Tobias

Link zu diesem Kommentar
Auf anderen Seiten teilen
isardor

isardor

Geschrieben
  • Autor
Geschrieben
Ja und? Eine CHM Datei ist eine komprimierte Datei, die verschiedene Dateien enthält; z. B. Bild-Dateien, XML-Dateien und eben halt auch HTML Dateien. Was willst Du damit aussagen?

Ich will damit aussagen, dass die HTML Hilfe nicht den Firefox sondern den IE benutzt.

Den Firefox kann man nicht zertifizieren.

Genau.

Tja, das Leben ist hart, aber soll ich Dir was flüstern? Genau das war ein elementarer Fehler in Deinem Markup. Nach nichts anderem hast Du gefragt.

Der Fehler war nicht elementar, es war nichteinmal ein richtiger Fehler und ich habe nicht um eine fehleranalyse gebeten sondern um einen Tipp.

Ich hab doch in diesem Post (http://forum.fachinformatiker.de/877116-post5.html) eine eindeutige und gültige Lösung zu Deiner Frage gegeben!?

Nein, die Lösung ist nicht gültig weil sie nicht im IE funktioniert, und der Firefox ist in diesem Fall nicht die Problemlösung, weil er nicht verwendet werden kann. Im übrigen hat meine version auch im Firefox funktioniert. Aber ich kann es gerne noch ein 4. mal sagen, ich kann bei diesem Problem keinen Firefox nutzen.

Außerdem ist das Thema eh erledigt, da es mit den DIVs sehr gut klappt.

Link zu diesem Kommentar
Auf anderen Seiten teilen
Gast
Dieses Thema wurde nun für weitere Antworten gesperrt.
 Teilen
Zur Themenübersicht

Fachinformatiker.de, 2024 by SE Internet Services

fidelogo_small.png

Schicke uns eine Nachricht!

Fachinformatiker.de ist die größte IT-Community
rund um Ausbildung, Job, Weiterbildung für IT-Fachkräfte.

Links

Fachinformatiker.de App

Download on the App Store
Get it on Google Play

Kontakt

Hier werben?
Oder sende eine E-Mail an

Social media u. feeds

Jobboard für Fachinformatiker und IT-Fachkräfte

×
×
  • Neu erstellen...