zurück zur Startseite
  


Zurück XHTMLforum > (X)HTML und CSS > CSS
Seite neu laden Balkendiagramm mit CSS, verschoben

Antwort
 
LinkBack Themen-Optionen Ansicht
  #1 (permalink)  
Alt 01.09.2012, 12:02
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
  #2 (permalink)  
Alt 01.09.2012, 12:10
Standardkatze
XHTMLforum-Kenner
 
Registriert seit: 06.02.2007
Beiträge: 1.820
gato ist einfach richtig nettgato ist einfach richtig nettgato ist einfach richtig nettgato ist einfach richtig nettgato ist einfach richtig nett
Standard

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.
Mit Zitat antworten
Sponsored Links
  #3 (permalink)  
Alt 01.09.2012, 12:16
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 19.05.2005
Beiträge: 12
nARC befindet sich auf einem aufstrebenden Ast
Standard

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)
Mit Zitat antworten
  #4 (permalink)  
Alt 01.09.2012, 12:38
Standardkatze
XHTMLforum-Kenner
 
Registriert seit: 06.02.2007
Beiträge: 1.820
gato ist einfach richtig nettgato ist einfach richtig nettgato ist einfach richtig nettgato ist einfach richtig nettgato ist einfach richtig nett
Standard

Zitat:
Zitat von nARC Beitrag anzeigen
Und nein Tabellen sind nicht gewünscht
Wieso nicht? Dies ist genau das Einsatzgebiet für das Tabellen ursprünglich entwickelt wurden.

Zitat:
Zitat von nARC Beitrag anzeigen
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 anzeigen
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).
Mit Zitat antworten
  #5 (permalink)  
Alt 01.09.2012, 12:49
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 19.05.2005
Beiträge: 12
nARC befindet sich auf einem aufstrebenden Ast
Standard

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
Mit Zitat antworten
  #6 (permalink)  
Alt 01.09.2012, 12:57
Standardkatze
XHTMLforum-Kenner
 
Registriert seit: 06.02.2007
Beiträge: 1.820
gato ist einfach richtig nettgato ist einfach richtig nettgato ist einfach richtig nettgato ist einfach richtig nettgato ist einfach richtig nett
Standard

Zitat:
Zitat von nARC Beitrag anzeigen
Damals noch hat er ganz "tolle" Seiten mit Tabellen gemacht, Heute nicht mehr sagt er...daher kommt der irrglaube denke ich
Naja, sowas gibt es.

Manchmal hilft es dennoch, die Konsequenzen aus der Beratungsresistenz aufzuzeigen.
Mit Zitat antworten
  #7 (permalink)  
Alt 01.09.2012, 13:00
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 19.05.2005
Beiträge: 12
nARC befindet sich auf einem aufstrebenden Ast
Standard

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
Mit Zitat antworten
Antwort

Themen-Optionen
Ansicht

Forumregeln
Es ist Ihnen nicht erlaubt, neue Themen zu verfassen.
Es ist Ihnen nicht erlaubt, auf Beiträge zu antworten.
Es ist Ihnen nicht erlaubt, Anhänge hochzuladen.
Es ist Ihnen nicht erlaubt, Ihre Beiträge zu bearbeiten.

BB-Code ist an.
Smileys sind an.
[IMG] Code ist an.
HTML-Code ist aus.
Trackbacks are an
Pingbacks are an
Refbacks are aus


Ä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


Alle Zeitangaben in WEZ +2. Es ist jetzt 16:04 Uhr.