|
|||
Balkendiagramm mit CSS, verschoben
Hallo,
ich arbeite gerade an einem Balkendiagram, welches ich mit CSS realisiert habe. Dabei werden die Daten aus einer MySQL Datenbank gezogen. Es sieht soweit alles sehr gut aus...nur zerhaut mir das Layout etwas. Und zwar sind die Balken um ein "Feld" nach links verschoben wie im Bild zu sehen ist. Leider finde ich den Fehler nicht. Die Balken sollten eigentlich genau über den Monaten angezeigt werden. Vielleicht erkennt hier jemand den Fehler und könnte mir kurz helfen. Der Quellcode zu dem ganzen: PHP-Code:
Code:
#archives { height:100px; float:left; display:block; position: relative; margin-bottom: 35px; } #archives .month { float:left; height:145px; text-align:center; } #archives .month a.bar { float:left; border-bottom:0px !important; background:#000; margin-right:1px; display:block; bottom:0px; position:absolute; opacity:0.4; -webkit-transition: opacity 0.5s; -moz-transition: opacity 0.5s; -o-transition: opacity 0.5s; transition: opacity 0.5s; color:#fff !important; padding-top:10px; font-size:12px; } #archives .month a.bar:hover { opacity:1; } #archives .month span.name { float:left; margin-top:105px; text-align:center; float: left; width: 100%; font-size:12px; color:#999; line-height: 18px !important; } #archives .month span.name a { color:#999; } #archives .month span.name a:hover { border-bottom:1px solid #ddd; color:#333; } |
Sponsored Links |
|
|||
Die vorliegenden Informationen reichen nicht aus, um dir helfen zu können.
Bei Problemen wie diesem ist das verwendete Backend (PHP, MySQL) irrelevant. Wichtig ist dagegen der ausgegebene HTML-Code (und das dazu passende CSS), mit dem der Fehler nachvollzogen werden kann. Ich kann dir daher nur einen allgemeinen Ratschlag geben: Die gezeigten Informationen solltest du ein einer (HTML-)Tabelle ablegen, so dass die Monatsangaben (th-Elemente) mit den dazugehörigen Werten (td-Elemente) verknüpft sind. Damit sparst du dir dieses aufwändige Puzzlespiel in CSS Auch weniger Klassen und den Verzicht auf style-Attribute lege ich dir nahe.
__________________
Über Internet Explorer 8: Noch bis 8. April 2014 wird der Internet Explorer 6 mit Sicherheitsupdates versorgt. Bereits jetzt kann dieser Browser aber vollständig durch den IE8 ersetzt werden. Ältere Betriebssysteme und Browserversionen werden von Microsoft nicht mehr unterstützt. Auch Programme, die den IE7 benötigen, sind kein Argument gegen IE8, da dieser über entsprechende Kompatibilitätsschichten verfügt. Ab sofort gilt daher der Internet Explorer 8 als vorausgesetzer Mindeststandard. |
Sponsored Links |
|
|||
Hey gato,
kein Problem - anbei das ausgelieferte HTML: Und nein Tabellen sind nicht gewünscht Eine derartige Struktur ist zwar etwas fummelig, wie du dies bereits festgestellt hast - ist jedoch eine Voraussetzung. Die Styleelemente sind in der Tat sehr unschön, nur weiß ich eben nicht wie ich dies im Moment anders lösen sollte. Ohne auf Frameworks zurück zu greifen. HTML-Code:
<div id="archives"> <div class="month" style="width:58px;"> <a href="#" class="bar" style="left:-58px;width:57px;height:75px;">375</a> <span class="name">Sep<br /> 2011</span> </div><div class="month" style="width:58px;"> <a href="#" class="bar" style="left:0px;width:57px;height:79.6px;">398</a> <span class="name">Okt<br /> 2011</span> </div><div class="month" style="width:58px;"> <a href="#" class="bar" style="left:58px;width:57px;height:85.2px;">426</a> <span class="name">Nov<br /> 2011</span> </div><div class="month" style="width:58px;"> <a href="#" class="bar" style="left:116px;width:57px;height:63.2px;">316</a> <span class="name">Dez<br /> 2011</span> </div><div class="month" style="width:58px;"> <a href="#" class="bar" style="left:174px;width:57px;height:85.8px;">429</a> <span class="name">Jan<br /> 2012</span> </div><div class="month" style="width:58px;"> <a href="#" class="bar" style="left:232px;width:57px;height:86.4px;">432</a> <span class="name">Feb<br /> 2012</span> </div><div class="month" style="width:58px;"> <a href="#" class="bar" style="left:290px;width:57px;height:92px;">460</a> <span class="name">Mrz<br /> 2012</span> </div><div class="month" style="width:58px;"> <a href="#" class="bar" style="left:348px;width:57px;height:77.8px;">389</a> <span class="name">Apr<br /> 2012</span> </div><div class="month" style="width:58px;"> <a href="#" class="bar" style="left:406px;width:57px;height:85.8px;">429</a> <span class="name">Mai<br /> 2012</span> </div><div class="month" style="width:58px;"> <a href="#" class="bar" style="left:464px;width:57px;height:77.2px;">386</a> <span class="name">Jun<br /> 2012</span> </div><div class="month" style="width:58px;"> <a href="#" class="bar" style="left:522px;width:57px;height:80.4px;">402</a> <span class="name">Jul<br /> 2012</span> </div><div class="month" style="width:58px;"> <a href="#" class="bar" style="left:580px;width:57px;height:49.4px;">247</a> <span class="name">Aug<br /> 2012</span> </div> </div> Geändert von nARC (01.09.2012 um 12:29 Uhr) |
|
|||
Wieso nicht? Dies ist genau das Einsatzgebiet für das Tabellen ursprünglich entwickelt wurden.
Zitat:
Zitat:
Damit hast ja schon mal begonnen, nur nicht konsequent durchgezogen: #archives beinhaltet nur div-Elemente, diese div-elemente brauchen also keine Klasse (#archives div). Diese div-Elemente enthalten jeweils ein a und ein span-Element. Niemals etwas anderes. Für beide Elemente sind also Klassen unnötig (#archives a bzw. #archives span). Zugegeben, die height-Angabe für die Höhe der Balken wird vermutlich drinbleiben müssen (es ist ein kalkulierbarer Nachteil des Systems). Nun gut, lösen wir mal das Problem. Es liegt darin, dass $i bei -1 zu zählen beginnt (warum auch immer), deshalb wird beim ersten Element für left der Wert -58px eingetragen. Entweder du initiierst $i mit dem Wert 0 oder du rechnest ($width+1)*($i+1). |
|
|||
Ach verdammte Hacks, die -1. JA war zu Testzwecken in einer Prozedur eingebaut und in einer anderen Funktion generiert worden. Ist mir ja schon fast etwas peinlich - Mit einer 0 klappt es natürlich so wie es sollte
Dennoch vielen Dank für Deine Analyse und eben den Tipp, den ich suchte. Was Tabellen angeht, nun ja -dies könnte man damit wirklich sehr schnell lösen ich weiß. Nur wenn der "Chef" einem sagt, nix Tabellen - auch wenn diese genau zu dem Zweck verwendet werden sollen...nun ja. Damals noch hat er ganz "tolle" Seiten mit Tabellen gemacht, Heute nicht mehr sagt er...daher kommt der irrglaube denke ich Jedenfalls vielen Dank für deine Hilfe |
|
|||
Zitat:
Manchmal hilft es dennoch, die Konsequenzen aus der Beratungsresistenz aufzuzeigen. |
Themen-Optionen | |
Ansicht | |
|
|
Ähnliche Themen | ||||
Thema | Autor | Forum | Antworten | Letzter Beitrag |
CSS Magento Header bei verschiedener Auflösung total verschoben | Clark-Kent | CSS | 0 | 20.06.2010 13:53 |
2 CSS Files -> 1 CSS File | Habi | CSS | 7 | 17.02.2010 16:25 |
MYspace mehr als nur CSS oder ? | Vinceone | CSS | 0 | 12.07.2007 03:21 |
Eric Meyer's CSS | Petty | Ressourcen | 0 | 21.11.2005 09:18 |
Mozilla ignoriert externes css | DarkWanderer | CSS | 9 | 22.09.2005 12:39 |