Einzelnen Beitrag anzeigen
  #1 (permalink)  
Alt 01.09.2012, 11:02
nARC nARC ist offline
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 19.05.2005
Beiträge: 12
nARC befindet sich auf einem aufstrebenden Ast
Standard 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:
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;
}
Mit Zitat antworten
Sponsored Links