Unterlagenliste erstellen mit Hilfe von CSS

Checkertaxi

Hallo, ich bin der Neue hier im Forum, und ich habe gleich mal eine Frage:

Ich möchte auf einer HTML-Seite ein Unterlagenverzeichnis erstellen, und das soll sinngemäß Folgendermaßen aussehen:

Code

[FONT=courier new]/U1/ sdgkh hkf sd dsfkj dfsjkjksd sdfasf
 
/U2/ veviugh wefbiwuf wfigfif wfiwfbw dfiuwbfiuwebf
     wbiwfwiuefb bwfiuewfie wfbiwfbwiebf wefiwefiwefw


/U3/ irwzrew wrhegogh rgorh woe trefwef hfow hgodg
     sdigodhiosdhs sgiohg sdgodg odgf sdosdig [/FONT]


...

Alles anzeigen

Ich wollte das zuerst mit den bekannten HTML-Befehlen <ol><li>...</li>....</ol> realisieren, aber damit kriegt man ja nur so Standardsachen hin wie 1. 2. 3. oder A) B) C). Man kann aber nicht angeben, dass vor der "1" ein "/U" und nach der "1" statt dem "." ein "/" stehen soll.

Deshalb kam mir die Idee, das Ganze mit Hilfe von CSS zu machen.

Der zugehörige HTML-Code ist in der folgenden Box ersichtlich:

HTML

<!DOCTYPE html>
<html>
<head>
<title>Individualformat zur Darstellung eines Unterlagenverzeichnisses</title>
<style type="text/css">
<!--
* {
font-family:sans-serif;
}
-->




#unr {
width:5em;
float:left;
background-color:yellow;
margin-top:0px;
text-align:center;
font-weight:bold;
<!-- font-family:sans-serif; -->
}




#txt {
margin-left:5em;
float:clear;
background-color:green;
margin-top:0px;
width:80%;
<!-- font-family:sans-serif; -->
}




</style>
</head>
<body>








<p id="unr">/U1/</p>
<p id="txt">Ein erster Test, ob das auch so klappt, wie ich mir das vorstelle! </p>












<p id="unr">/U2/</p>
<p id="txt">Und dann gibt es hier noch eine zweite Zeile, mit der ich sehen m&ouml;chte, 
wie das mit dem Zeilenumbruch so r&uuml;berkommt.</p>












<p id="unr">/U3/</p>
<p id="txt">Und dann gibt es hier noch eine zweite Zeile, mit der ich sehen m&ouml;chte, 
wie das mit dem Zeilenumbruch so r&uuml;berkommt.</p>




<p id="unr">/U4/</p>
<p id="txt">Ein erster Test, ob das auch so klappt, wie ich mir das vorstelle! </p>








<p id="unr">/U5/</p>
<p id="txt">Und dann gibt es hier noch eine zweite Zeile, mit der ich sehen m&ouml;chte, 
wie das mit dem Zeilenumbruch so r&uuml;berkommt.</p>








<p id="unr">/U6/</p>
<p id="txt">Und dann gibt es hier noch eine zweite Zeile, mit der ich sehen m&ouml;chte, 
wie das mit dem Zeilenumbruch so r&uuml;berkommt.</p>








</body>
</html>

Alles anzeigen

Hiermit habe ich allerdings ein Problem, denn die /U1/, /U2/, /U3/ ... erscheinen nicht genau untereinander, wie man das eigentlich vermuten sollte, sondern für mich unvorhersehbar versetzt.

Mir fiel auf, dass erst dann das von mir gewünschte Aussehen erscheint, wenn ich das Browserfenster schmaler mache, dass sich alle Bereiche, die ich mit der id "txt" versehen habe, sich über mindestens zwei Zeilen erstrecken.

Die Reaktion ist in allen Browsern, mit denen ich das ausprobiert habe, identisch (Internet-Explorer7 und aktuelle Versionen von Google-Chrome, Firefox)

Ich habe mir schon die Finger wund gegoogelt und fleißig SelfHTML durchgesucht, aber ich bin immer noch auf der Suche nach der Lösung des Problems.

Kann mir jemand der Experten hier im Forum einen sachdienlichen Hinweis geben?

LG
Checkertaxi

Bandit

Ähm, eine ID darf nur einmal vorkommen.

Checkertaxi

Ja, das habe ich auch schon irgendwo gelesen, dass eine ID nur einmal vorkommen darf. Weiß jetzt aber nicht in welchen Anwendungsfällen das gilt. Da steck ich nicht tief genug in der Materie drin.

Allerdings habe ich mein Beispiel mal umgestrickt und "class" statt "id" verwendet.

Zitat

<!DOCTYPE html>
<html>
<head>
<title>Individualformat zur Darstellung eines Unterlagenverzeichnisses</title>
<style type="text/css">


p.unr {
width:5em;
float:left;
background-color:yellow;
margin-top:0px;
text-align:center;
font-weight:bold;

}

p.txt {
margin-left:5em;
float:clear;
background-color:green;
margin-top:0px;
width:80%;

}

</style>
</head>
<body>

/U1/
Ein erster Test, ob das auch so klappt, wie ich mir das vorstelle! 

/U2/
Und dann gibt es hier noch eine zweite Zeile, mit der ich sehen möchte, wie das mit dem Zeilenumbruch so rüberkommt.

/U3/
Und dann gibt es hier noch eine zweite Zeile, mit der ich sehen
möchte, wie das mit dem Zeilenumbruch so rüberkommt.

/U4/
Ein erster Test, ob das auch so klappt, wie ich mir das vorstelle! 

/U5/
Und dann gibt es hier noch eine zweite Zeile, mit der ich sehen
möchte, wie das mit dem Zeilenumbruch so rüberkommt.

/U6/
Und dann gibt es hier noch eine zweite Zeile, mit der ich sehen
möchte, wie das mit dem Zeilenumbruch so rüberkommt.

</body>
</html>

Alles anzeigen

Das Ergebnis sieht jedoch haargenau so aus. Daraus schließe ich, dass der Fehler woanders liegen muss. Also ist die Frage weiterhin offen.

alxy

http://jsfiddle.net/e4F6B/

Also bei mir sind die schön untereinander...

Checkertaxi

Zitat von alxy

http://jsfiddle.net/e4F6B/

Also bei mir sind die schön untereinander...

Hi alxy,

wenn ich mir das unter jsfiddle.net ansehe, dann ist es bei mir zunächst auch untereinander. Hast du aber mal das Fenster "Result" horizontal größer gezogen, so dass der Text hinter /U1/ in eine einzige Zeile passt?
Bei mir sind dann auch wieder die (gelben) Kästen /U2/ und /U5/ nach rechts versetzt. Bei Dir etwa nicht?

Ich würde gerne verstehen, warum das so ist.

alxy

Bei mir siehts dann immernoch gut aus (FF13)

djheke

Warum nicht mit einer <ol> Liste

HTML

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Testpage</title>
    <style type="text/css">




ol {
 list-style:none;    
 width:12.25em;
}


li {
 position:relative;
 background:#ada;
 margin-bottom:2px;
}




li span {
 padding-top:5px;
float:left;
width:3em; 
display:block;
text-align:right;
}


li a {
 margin-left:4em;
 padding:5px;
 display:block;
 background:#dad;
 text-decoration:none;
 color:#000;
}


    </style>
</head>
<body>




<ol>
<li><span>[U1] </span> <a href="#.pdf"> Unterlage 1 Mit Beschreibung und Titel</a></li>
<li><span>[U2] </span> <a href=""> Unterlage 2 </a></li>
<li><span>[U3] </span> <a href=""> Unterlage 3 Mit Beschreibung und Titel</a></li>
<li><span>[U4]</span> <a href=""> Unterlage 4 </a></li>
</ol>


</body>
</html>

Alles anzeigen

Oder vielleicht so:

HTML

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Testpage</title>
    <style type="text/css">




ol {
 list-style:none;    
 width:40%;
}


li {
 position:relative;
 background:#ada;
 margin-bottom:2px;
}


li a {
 margin-left:3.5em;
 padding:5px;
 display:block;
 background:#dad;
 text-decoration:none;
 color:#000;
}


li:before {
 content:"[' attr(title) ']";
 padding-top:5px;
 float:left;
 width:3em; 
 text-align:right;
}
    </style>
</head>
<body>




<ol>
<li title="U1"> <a href="#.pdf"> Unterlage 1 Mit Beschreibung und Titel</a></li>
<li title="U2"> <a href=""> Unterlage 2 </a></li>
<li title="U3"> <a href=""> Unterlage 3 Mit Beschreibung und Titel</a></li>
<li title="U54"> <a href=""> Unterlage 54 </a></li>
</ol>


</body>
</html>

Alles anzeigen

Beispiele:
http://www.gipspferd.de/forumhilfe/ol-liste/
http://www.gipspferd.de/forumhilfe/ol-liste/index2.htm

Tags