[CSS] Tabellen-ähnliche Anordnung

Einklappen
X
 
  • Filter
  • Zeit
  • Anzeigen
Alles löschen
neue Beiträge

  • [CSS] Tabellen-ähnliche Anordnung

    Hi,

    Ich häng hier gerade an einem bestimmt total simplen Design-CSS-Problem fest und komme einfach nicht weiter.

    Es geht um folgendes:

    - Simple Newsausgabe in der Form:
    Code:
    <ul>
    <li>Datum: Das ist der Titel von News 1</li>
    <li>Datum: Das ist ein sehr sehr sehr sehr sehr sehr sehr langer Titel von News 2</li>
    </ul>
    Soweit so gut. Jetzt möchte ich aber, dass der Schriftzug von der zweiten News umgebrochen wird und hinter das Datum eingerückt wird. Siehe beigefügten Screenshot. So soll das aussehen (Auf dem Screenshot die unterste News).

    Ich habs darüber gelöst, indem ich dem Datum und der News-Überschrift jeweils ein label-Tag verpasst habe mit ein paar CSS Attributen. Also sozusagen:
    Code:
    <li><label style="display: block; float: left;">DATUM</label> 
    <label style="display: block; float: left;">Überschrifttext</label></li>
    Im Internet Explorer kommt dabei die Version raus, wie man sie auf dem Screenshot sieht. Auf dem Firefox allerdings nicht. Ich vermute, das liegt einfach daran, dass meine CSS-Defintionen wahrscheinlich total idiotisch sind. Aber ich weiß echt nicht weiter. Sieht jemand von euch, wo mein Denkfehler ist bzw. hat auch eine Mozilla-freundliche Lösung dieses Problems parat?

    Es soll wie gesagt nur ein einheitlicher Blocktext entstehen und lange News nicht umgebrochen werden und dann unter dem Datum erscheinen. Der umgebrochene Text soll schön bündig hinter dem Datum stehen, so wie auf dem Screenshot zu sehen. Nur habe ich echt keine Ahnung, wie man das "schön" mit CSS machen könnte.
    Angehängte Dateien
    Zuletzt geändert von Chrissi007; 07.01.2009, 12:50.
    Grüße, Chrissi
    Our Dreams are Wings

  • #2
    Das ist eine Tabelle. (border=0)


    mfg

    Kommentar


    • #3
      Ne, der Screeny kommt ja von mir selbst und stellt das Wunsch-Ergebnis dar. Auf dem Internet Explorer funktioniert die Ausgabe wie gesagt, nur auf dem Firefox siehts eben nicht so aus, wie auf dem Screeny.

      Hier ein Auszug aus dem Quelltext:

      Code:
      <li><label id="content_box_datefield">Son, 04.01.</label> 
      <a href="/?cmd=news&nid=8&ln=de">
      A b c D e f G h i J k l M</a> (0 Kommentare)</li>
      <li><label id="content_box_datefield">Son, 04.01.</label> 
      <a href="/?cmd=news&nid=7&ln=de">
      DCS: Black Shark veröffentlicht mit längerem Heading</a> (0 Kommentare)</li>
      und hier noch die Deklarationen von content_box_datefield

      Code:
      #content_box_datefield {
      display: block;
      	width: 70px;
      	float:left;
      	font-size: 11px;
      }
      Also es handelt sich schon um CSS und nicht um ein Tabellenlayout. Ein Tabellenlayout wollte ich an dieser Stelle vermeiden.


      Kurz noch mal erklärt:
      Was ich nicht möchte, ist dies:
      Code:
      25.12.2008: Das ist der Titel einer sehr langen News,
      die umgebrochen wurde (0 Kommentare)
      ... sondern:
      Code:
      25.12.2008: Das ist der Titel einer sehr langen News,
                  die umgebrochen wurde (0 Kommentare)
      Ich vermute, dass ich das irgendwie mit zwei label-Tags realisieren könnte. Quasi dem Datum einen "display: block; float: left;" zu verpassen und ähnliche Attribute auch auf das label-Tag für die Überschrift anwenden. Nur bin ich total ratlos, wie ich das umzusetzen habe.

      Über jeden noch so kleinen Tipp bin ich echt dankbar!
      Zuletzt geändert von Chrissi007; 07.01.2009, 21:35.
      Grüße, Chrissi
      Our Dreams are Wings

      Kommentar


      • #4
        Ich bin durchaus des Lesens mächtig.
        Das du keine Tabelle nutzt, seh ich an deiner Liste.

        Vlt hätte ich noch sagen müssen:

        "Nutz eine Tabelle, denn es ist eine."

        mfg
        Edit: Code bitte umbrechen.

        Kommentar


        • #5
          Du sprichst in Rätseln

          Tabellen mage ich so gut es geht außen vor lassen.

          Hier siehst du ein Livebeispiel (hatte gerade nix anderes):

          http://www.computerbase.de

          Die dortige Newsansicht wird unter Dienstag, 6. Januar 2009 ebenfalls umgebrochen. Hier ein Quelltextauszug:

          Code:
          <ul class="plain">
          
          <li class="compact_item">
          <small class="date">22:50</small>
          <a href="/news/allgemein/computerbase/2009/januar/computerbase_ces_las_vegas/">
          <strong>ComputerBase erreicht CES in Las Vegas</strong></a>
          <small>(29)</small>
          </li>
          
          <li class="compact_item">
          <small class="date">20:30</small>
          <a href="/news/software/multimedia/2009/januar/divx_7_windows/">
          <strong>DivX 7 für Windows verfügbar</strong></a> 
          <small>(50)</small>
          </li>
          
          </ul>
          Die haben im Prinzip genau das, was ich möchte. Das Datum steht stets einzeln vorne dran und der Text wird rechts sauber umgebrochen. Ich hab mich schon durch die dortigen css files durchgewühlt aber da ich mich mit css sehr wenig auskenne, komme ich mit den dortigen Deklarationen nicht wirklich zurecht. Die Seite zeigt mir ja, dass es mit css funktioniert - die Frage ist nur: wie? Für jemanden, der sich ein bisschen mit css auskennt müsste das doch zu beantworten sein, oder?

          EDIT: Mach mal die Computerbase-Seite kleiner, in dem du dein Fenster kleiner ziehst. Du wirst sehen wie bei wenig Platz die Newsüberschriften umgebrochen werden. Genau das brauche ich.
          Grüße, Chrissi
          Our Dreams are Wings

          Kommentar


          • #6
            Mit Firebug kannst du dir die effektiv verwendeten Styles der beteiligten HTML-Elemente anzeigen lassen. Dazu muss man kein CSS-Guru sein.

            Kommentar


            • #7
              Computerbase bescheißt mit Line-height: 130%. Das geht aber schätze ich spätestens bei der 3. Textzeile auch in die Hose.

              Lade Dir wie onemorenerd schons sagt den Firebug, oder die Web Developer Toolbar für den Firefox herunter. Mit der Funktion "CSS / View Style Information" kannst Du Dir die CSS-Eigneschaften von jedem Element anzeigen lassen.

              Trotzdem: Ich halte das auch für mit Kanonen auf Spatzen geschossen, und Tabellen viel besser geeignet. Für diesen Zweck sind Tabellen auch in CSS-Layouts gedacht, und auch das einzige Element das dafür vernünftig geeignet ist. Die allgemeine Verpöntheit von Tabellen bezieht sich darauf, sie als Layoutinstrument zu gebrauchen.
              Zuletzt geändert von pekka; 07.01.2009, 08:58.

              Kommentar


              • #8
                Tendenziell würde ich auch zu Tabelle raten.
                Ansonsten kannst du ein
                float:left;display:block;width:130px; auf das label und ein margin-left:140px auf den Rest versuchen (ggf. auch noch mit float:left) ... aber dolle ist das alles nicht

                Ein netter Guide zum übersichtlichen Schreiben von PHP/MySQL-Code!

                bei Klammersetzung bevorzuge ich jedoch die JavaCoding-Standards
                Wie man Fragen richtig stellt

                Kommentar


                • #9
                  Entschuldige für die äußerst knappe Formulierung heute Nacht.
                  Ich fand es aussagekräftig, aber vlt auch nur, weil ich wusste, was ich meine...

                  Was ich sagen wollte:

                  Dein Vorhaben ist keine Liste sondern eine Tabelle. Was computerbase da macht ist unsinnig und geht eventuell auf diese falsche Einstellung zurück:
                  Tabellen mage ich so gut es geht außen vor lassen.
                  Kurz knapp:
                  pekka: Tabellen sind für die Darstellung von tabellarischen Daten völlig in Ordnung und nach wie vor das A und O. Der allgemeine Konsens ist, daß man da von Tabellen weg soll, wo sie für Layoutzwecke benutzt werden.
                  Quelle
                  Edit: ich hab immer noch eine Scrollbar ausgehend von deinem 1. Beitrag

                  Kommentar


                  • #10
                    Super, habt mir weiter geholfen. Danke vielmals.

                    Scrollbar ist jetzt hoffentlich weg, ansonsten größeren Monitor kaufen
                    Grüße, Chrissi
                    Our Dreams are Wings

                    Kommentar


                    • #11
                      Original geschrieben von Chrissi007
                      Scrollbar ist jetzt hoffentlich weg, ansonsten größeren Monitor kaufen
                      Dein zweiter Post ist noch zu breit.

                      Wohl eher Forum wechseln, oder CSS manuell abändern...

                      Ein netter Guide zum übersichtlichen Schreiben von PHP/MySQL-Code!

                      bei Klammersetzung bevorzuge ich jedoch die JavaCoding-Standards
                      Wie man Fragen richtig stellt

                      Kommentar


                      • #12
                        Postingbreite noch mals geändert...

                        Das Problem habe ich jetzt doch css-seitig gelöst. Ich bin folgendermaßen vorgegangen, vielleicht interessierts ja den ein oder anderen:

                        <li style="margin-left: 70px;"> <label style="margin-left: -70px">D A T U M</label> L I N K </li>

                        Das gesamte LI-Element beginnt sozusagen bei einem margin von 70px. Das Label-Element Datum beginnt bei einem negativen Margin von -70px und gehört optisch sozusagen gar nicht mehr zur Liste dazu. Hat den selben Effekt wie wenn mans mit ner Tabelle machen würde und spart ein paar Zeilen Code. Obendrein dürfts eigentlich relativ solid sein und auf allen Browsern funktionieren. Meine ich zumindest.
                        Grüße, Chrissi
                        Our Dreams are Wings

                        Kommentar


                        • #13
                          Warum?
                          Es ist doch keine Liste sondern eine Tabelle

                          Kommentar


                          • #14
                            Heyho, es gibt eine Sehr gute lösung dazu die auch mir erst vor kurzem zur "Rettung" wurde:
                            <dl> <dt> und <dd>
                            der ungefähre aufbau würde so aussehen:
                            Code:
                            <dl  id="listen_name">
                            <dt>Spalte Links</dt>
                            <dd>Spalte Rechts</dd>
                            </dl>
                            Dazu muss mann nch einen kleinen CSS Angaben Pool nutzen:
                            Die DT Elemente brauchen
                            Code:
                            clear:left;
                            float:left;
                            und die DD Elemente
                            Code:
                            float:left;
                            und schon hat man eine Liste mit 2 Spalten kannst das ja mal ausprobieren und bei fragen dich einfach melden

                            Gruß
                            Richard | Muffi

                            Kommentar

                            Lädt...
                            X