XHTMLforum

XHTMLforum (http://xhtmlforum.de/index.php)
-   CSS (http://xhtmlforum.de/forumdisplay.php?f=73)
-   -   Balkendiagramm mit CSS, verschoben (http://xhtmlforum.de/showthread.php?t=68052)

nARC 01.09.2012 12:02

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.

http://s7.directupload.net/images/120901/96urnm33.png

Der Quellcode zu dem ganzen:

PHP-Code:

foreach($archives as $month) {
       echo 
'<div class="month" style="width:'.($width+1).'px;">
             <a href="#" class="bar" style="left:'
.(($width+1)*$i).'px;width:'.$width.'px;height:'.($month['posts']/5).'px;">'.$month['posts'].'</a>
             <span class="name">'
.$month_names[$month['month']].'<br /> '.$month['year'].'</span>
             </div>'
;
       
$i++;


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;
}


gato 01.09.2012 12:10

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.

nARC 01.09.2012 12:16

Hey gato,
kein Problem - anbei das ausgelieferte HTML:

Und nein Tabellen sind nicht gewünscht :twisted:
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>


gato 01.09.2012 12:38

Zitat:

Zitat von nARC (Beitrag 520087)
Und nein Tabellen sind nicht gewünscht :twisted:

Wieso nicht? Dies ist genau das Einsatzgebiet für das Tabellen ursprünglich entwickelt wurden.

Zitat:

Zitat von nARC (Beitrag 520087)
Eine derartige Struktur ist zwar etwas fummelig, wie du dies bereits festgestellt hast - ist jedoch eine Voraussetzung.

Eine Voraussetzung wofür? Ich sehe weder gestalterisch noch seitens des Backends ein Problem bei der Umsetzung. Das Problem bei der aktuellen Umsetzung siehst du dagegen selbst. Ein weiteres Problem tritt auf, wenn das Anzeigefenster zu schmal wird.

Zitat:

Zitat von nARC (Beitrag 520087)
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.

Du hast hier nur gleichartige Elemente, deren innere Struktur ebenfalls gleichartig aufgebaut ist. D.h. du musst lediglich dem äußersten zur Struktur gehörigen Element eine eindeutige Kennung geben und kannst die darinliegenden Elemente allein mit hilfe von Selektoren ansprechen.

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).

nARC 01.09.2012 12:49

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 :roll:

Jedenfalls vielen Dank für deine Hilfe :)

gato 01.09.2012 12:57

Zitat:

Zitat von nARC (Beitrag 520090)
Damals noch hat er ganz "tolle" Seiten mit Tabellen gemacht, Heute nicht mehr sagt er...daher kommt der irrglaube denke ich :roll:

Naja, sowas gibt es.

Manchmal hilft es dennoch, die Konsequenzen aus der Beratungsresistenz aufzuzeigen.

nARC 01.09.2012 13:00

Glaub mir, bei dem würde das nichts mehr bringen. Zu oft versucht, zu oft gescheitert - soll er seinen Kunden selbst erklären warum manches durchs Knie ins Auge gemacht wurde ;)


Alle Zeitangaben in WEZ +2. Es ist jetzt 17:06 Uhr.

Powered by vBulletin® Version 3.8.11 (Deutsch)
Copyright ©2000 - 2024, vBulletin Solutions, Inc.

© Dirk H. 2003 - 2023