Kleine CSS Frage

AngiWaters

Huhu!

Ich habe in meiner Sidebar einen Counter eingebaut. Der counter ist kein plugin, lässt sich aber über ein kleines Template leicht anpassen. Das Template sieht folgendermaßen aus:

Code

<li>Besucher total:
      <span style="text-align: right;">{V_TOTAL_VISITORS}</span>
   </li>
      <li>Besucher heute:
      <span style="text-align: right;">{V_VISITORS_TODAY}</span>
   </li>
      <li>Besucher gestern:
      <span style="text-align: right;">{V_VISITORS_YESTERDAY}</span>
   </li>
      <li>Gerade online:
      <span style="text-align: right;">{V_VISITORS_CURRENTLY_ONLINE}</span>
   </li>
      <li>Hits total:
      <span style="text-align: right;">{V_TOTAL_PAGE_VIEWS}</span>
   </li>

Alles anzeigen

Mit span style habe ich versucht hinzubekommen, dass die Zahlen jeweils rechts am Rand stehen. Das funktioniert aber leider nicht. Wie bekomme ich das hin? Link zur Seite

LG, Angi

Werbepost

Hallo!

Wenn du gerade an deiner Website arbeitest oder dein aktuelles Hosting überdenkst: Wir betreiben mit NetzLiving eine Hosting-Plattform, die speziell auf Performance, Sicherheit und einfache Verwaltung ausgelegt ist.

✔️ Schnelle Ladezeiten (optimiert für WordPress & Co.)
✔️ Deutsche Server & DSGVO-konform
✔️ Persönlicher Support (kein 0815-Ticket-System)

Mehr erfahren

Magnifikatz

Ich weiß, Tabellen sind verpönt, aber ich würde es als Tabelle machen.
All die Befehle wie: display:block, display:inline, text-aligns in Listen gelten ja immer für die gesamte Liste.
Oder du müßtest probieren, jeweils zwei Listen pro Zeile hinzukriegen, die hintereinander stehen und dann jede für sich per css formatiert werden können (also für den Text eine Liste und für die generierten Zahlen eine weitere Liste). Doch da finde ich Tabellen irgendwie einfacher...

Vielleicht hat ja noch jemand ne Idee - mein Wissen ist zu klein in diesem speziellen Fall...

SuMu

du könntest ul und oder li mit css als classe formatieren

Woodstock

In der Version 3.1.1 des chCounters (die ich noch nutze) wird das per Tabelle geregelt.
Vielleicht musst du nicht nur das, was rechts stehen soll, in ein span packen, sondern auch das linke? Also so:

Code

<li><span class="links">Besucher total:</span>
      <span class="rechts">{V_TOTAL_VISITORS}</span>
   </li>

und dann "links" und "rechts" mit text-align oder float definieren.
Ansonsten würde ich es auch per Tabelle machen. Magnifikatz hat zwar Recht, dass Tabellen verpönt sind, aber wenn es um Darstellung tabellarischer Daten geht, warum dann nicht eine Tabelle benutzen?

Monika

[quote='AngiWaters','Kleine CSS Frage']:

Code

<li class="counter">Besucher total:
      <span>{V_TOTAL_VISITORS}</span>
   </li>
      <li class="counter">Besucher heute:
      <span>{V_VISITORS_TODAY}</span>
   </li>
      <li class="counter">Besucher gestern:
      <span>{V_VISITORS_YESTERDAY}</span>
   </li>
      <li class="counter">Gerade online:
      <span>{V_VISITORS_CURRENTLY_ONLINE}</span>
   </li>
      <li class="counter">Hits total:
      <span>{V_TOTAL_PAGE_VIEWS}</span>
   </li>

Alles anzeigen

in die style.css

Code

li.counter{float:left; text-align:left;}
li.counter span{float:right;text-align:right;}

mag es so nicht dann:

Code

div.sidebar ul li ul li.counter{float:left; text-align:left;}
 div.sidebar ul li ul li.counter span{float:right;text-align:right;}

sollte dann etwas *zerfließen*, wegen der floats, bitte melden ;)

lg

AngiWaters

Erstmal danke an alle die geantwortet haben! :)

Woodstock: Mit Tabelle hatte ich es vorher, das sah noch schlimmer aus. Da waren zwar die Zahlen am Rand, aber überall Zeilenumbrüche die nicht dort sein sollten und der Abstand zwischen Titel ("Counter") und Beginn des Counters an sich war riesig. Sah blöd aus :mrgreen:

Aber das letzte hier sieht ja ganz vielversprechend aus und ich probiere es jetzt gleich mal aus. :)

Hihi... also, das rechtsbündige funktioniert nun. Allerdings ragt es über den rand hinaus. Sieht lustig aus :mrgreen: und es zerhaut das Design. Hm *grübel* wisu tut es su?

Span gegen div austauschen klappt auch nicht wirklich, dann wird der nächste text zwar in dieselbe zeile gepackt, aber die zahl steht wieter drunter... heilloses durcheinander .

Olafb

Gut, versuch ich mal ;)
du musst das jeweils drehen:

HTML

<li class="counter">
      <span>{V_TOTAL_PAGE_VIEWS}</span>
Hits total:
   </li>

dann so in die CSS:

HTML

div.sidebar ul li ul li.counter span{float:right;}

Müsste erst mal klappen, willst du nicht drehen dann so:

HTML

<li class="counter">
     <span class="hits">Hits total:</span>
      <span class="count">{V_TOTAL_PAGE_VIEWS}</span>
   </li>

dann so in die CSS:

HTML

div.sidebar ul li ul li.counter span.hits{float:left;}
 div.sidebar ul li ul li.counter span.count{float:right;}

AngiWaters

Juchu jetzt ist es richtig. :) Danke Olaf! :)

Olafb

Nee nicht wirklich, es geht in dem Gerät was du nutzt aber nicht in allen anderen, ich hab nämlich was nicht bedacht :(

ergänze:

HTML

div.sidebar ul li ul li.counter{
 clear:both;
}
div.sidebar ul li ul li.counter span.hits{
 float:left;
}
div.sidebar ul li ul li.counter span.count{
 float:right;
}

EDIT Noch was vergessen ;)

HTML

div.sidebar ul li ul li.counter:last-child{
 margin-bottom:20px;
}

AngiWaters

Hui okay... da hab ich natürlich mal wieder nicht dran gedacht. thx :)

AngiWaters

Noch eine kleine Nachfrage hierzu: wegen last child bekomme ich beim css validator diesen fehler:

Unbekanntes Pseudoelement oder Pseudoklasse: :last-child

Wie krieg ich den weg? und was bedeutet er überhaupt :)

mastermind

SELFHTML: Stylesheets / CSS-Eigenschaften / Pseudoelemente und Pseudoklassen

Wenn der Validator :last-child als Fehler wertet, dann ist es entweder falsch verwendet, oder der Validator arbeitet fehlerhaft.

AngiWaters

Hm, da bin ich nun überfragt. Hab die Zeile mit dem last-child so übernommen wie sie hier in diesem beitrag steht. (9.3., 0 Uhr 46) Aus dem Selfhtml Artikel werd ich auch nicht wirklich schlauer...

Olafb

Dat stimmt man so, default validiert der Validator gegen CSS2. Das ist aber CSS3, guckst du hier

AngiWaters

Aaaah :) okay, vielen Dank für die Info!

Willkommen! Melden Sie sich an oder registrieren Sie sich.

Kleine CSS Frage

Jetzt mitmachen!