Ergebnis 1 bis 7 von 7

Thema: Unterlagenliste erstellen mit Hilfe von CSS

  1. #1
    HTML Newbie
    Registriert seit
    29.06.2012
    Beiträge
    3
    Danke
    0
    Bekam 0 mal "Danke" in 0 Postings

    Standard Unterlagenliste erstellen mit Hilfe von CSS

    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:
    /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 
    
    ...

    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:


    Code:
    <!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>

    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
    Achtung: Dies ist ein alter Thread im HTML und Webmaster Forum
    Diese Diskussion ist älter als 90 Tage. Die darin enthaltenen Informationen sind möglicherweise nicht mehr aktuell. Erstelle bitte zu deiner Frage ein neues Thema im Forum !!!!!

  2. #2
    Bandit
    Gast

    Standard AW: Unterlagenliste erstellen mit Hilfe von CSS

    Ähm, eine ID darf nur einmal vorkommen.

  3. #3
    HTML Newbie
    Themenstarter

    Registriert seit
    29.06.2012
    Beiträge
    3
    Danke
    0
    Bekam 0 mal "Danke" in 0 Postings

    Standard AW: Unterlagenliste erstellen mit Hilfe von CSS

    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.

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

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

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

    </style>
    </head>
    <body>

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

    <p class="unr">/U2/</p>
    <p class="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 class="unr">/U3/</p>
    <p class="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 class="unr">/U4/</p>
    <p class="txt">Ein erster Test, ob das auch so klappt, wie ich mir das vorstelle! </p>

    <p class="unr">/U5/</p>
    <p class="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 class="unr">/U6/</p>
    <p class="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>
    Das Ergebnis sieht jedoch haargenau so aus. Daraus schließe ich, dass der Fehler woanders liegen muss. Also ist die Frage weiterhin offen.

  4. #4
    Samurai
    Registriert seit
    21.08.2011
    Beiträge
    233
    Danke
    0
    Bekam 0 mal "Danke" in 0 Postings

    Standard AW: Unterlagenliste erstellen mit Hilfe von CSS

    http://jsfiddle.net/e4F6B/

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

  5. #5
    HTML Newbie
    Themenstarter

    Registriert seit
    29.06.2012
    Beiträge
    3
    Danke
    0
    Bekam 0 mal "Danke" in 0 Postings

    Standard AW: Unterlagenliste erstellen mit Hilfe von CSS

    Zitat Zitat von alxy Beitrag anzeigen
    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.

  6. #6
    Samurai
    Registriert seit
    21.08.2011
    Beiträge
    233
    Danke
    0
    Bekam 0 mal "Danke" in 0 Postings

    Standard AW: Unterlagenliste erstellen mit Hilfe von CSS

    Bei mir siehts dann immernoch gut aus (FF13)

  7. #7
    Meister(in)
    Registriert seit
    24.02.2007
    Beiträge
    460
    Danke
    0
    Bekam 47 mal "Danke" in 47 Postings

    Standard AW: Unterlagenliste erstellen mit Hilfe von CSS

    Warum nicht mit einer <ol> Liste
    Code:
    <!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>
    Oder vielleicht so:
    Code:
    <!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>
    Beispiele:
    http://www.gipspferd.de/forumhilfe/ol-liste/
    http://www.gipspferd.de/forumhilfe/ol-liste/index2.htm
    Geändert von djheke (02.07.2012 um 11:43 Uhr)

Ähnliche Themen

  1. Web seite erstellen brauche Hilfe
    Von metal-spezial im Forum HTML & CSS Forum
    Antworten: 8
    Letzter Beitrag: 17.07.2007, 15:16
  2. Hilfe für css server erstellen
    Von cesar8917 im Forum Tutorials, Workshops und Anleitungen
    Antworten: 2
    Letzter Beitrag: 10.06.2007, 00:30
  3. brauche Hilfe beim erstellen von Kalkulator
    Von UmGuT im Forum HTML & CSS Forum
    Antworten: 2
    Letzter Beitrag: 30.08.2006, 13:37
  4. Bei funpic.de eine Homepage erstellen? Hilfe!
    Von General im Forum HTML & CSS Forum
    Antworten: 1
    Letzter Beitrag: 04.07.2006, 14:47
  5. Brauche Hilfe: Verwischter Pinselstrich erstellen
    Von teltim01 im Forum Forum für Grafiken und Bildbearbeitung
    Antworten: 3
    Letzter Beitrag: 16.01.2005, 23:02

Stichworte

Berechtigungen

  • Neue Themen erstellen: Nein
  • Themen beantworten: Nein
  • Anhänge hochladen: Nein
  • Beiträge bearbeiten: Nein
  •