Bitte um Hilfe bei Positionierung von dynamischen divs

[PaveLow]

Hallo,

Ich habe ein Problem mit der Positionierung von divs in einer anderen div.

Unzwar mach ich jetzt grade ein dynamisches Balkendiagramm dessen Balken ich nicht richtig positioniert bekomme. Sie ordnen sich immer automatisch oben in der div an. Wenn ich sie auf Position: absolute; stelle ordnen sie sich unten an, aber alle an erster Stelle ineinander. Die Höhe und Breite der Balken wird automatisch der Datenbank angepasst.

Es gibt noch eine übergeordnete div und einige die neben dem Chart platziert sind.

#Chart{
    background-color:white;
    margin-left: 8%;
    width: 90vw;
    height: 92%;
    position:relative;
    border-left: 3px solid black;
    border-bottom: 3px solid black;
    border-radius: 2px;
    border-color: black;
    //clear: both;
    padding-bottom: 1px;
   // overflow: hidden;
}
#bars{
    margin-left: 1%;
    margin-right: 1%;
    background-color: #edda4e;
    float: left;
    bottom: 0;
    }

Bsp:

<div id="Chart">
<div id="bars" style="height:100%; width:50%;"></div>
<div id="bars" style="height:25%; width:50%;"></div>
<div id="bars" style="height:75%; width:50%;"></div>
<div id="bars" style="height:33%; width:50%;"></div>
</div>

[Robert B.]

Moin,

Unzwar mach ich jetzt grade ein dynamisches Balkendiagramm dessen Balken ich nicht richtig positioniert bekomme.

Warum verwendest du div und nicht SVG?

<div id="Chart">
<div id="bars" style="height:100%; width:50%;"></div>
<div id="bars" style="height:25%; width:50%;"></div>
<div id="bars" style="height:75%; width:50%;"></div>
<div id="bars" style="height:33%; width:50%;"></div>
</div>

Eine ID muss eindeutig sein. Das ist in deinem Code nicht der Fall.

Viele Grüße
Robert

[PaveLow]

Sry aber bin ziemlich neu in dem Thema css und php und daher kenn ich leider noch nicht all meine Möglichkeiten.

Außerdem komm so leider auch noch nicht viel weiter.

[PaveLow]

habe bars zur eine class geändert aber so viel tut sich immer noch nicht. Es verhält sich immer noch gleich.

[beatovich]

hallo

Unzwar mach ich jetzt grade ein dynamisches Balkendiagramm dessen Balken ich nicht richtig positioniert bekomme.

Warum verwendest du div und nicht SVG?

Warum SVG, wenn die Hauptsache der Information eine Liste ist, die zusätzlich noch grafisch aufgepeppt ist?

[Gunnar Bittersmann]

@@beatovich

Warum verwendest du div und nicht SVG?

Warum SVG

Weil SVG das für Diagramme sinnvolle Format ist.

Und wenn man schon eine Grafik mit divs baut, sollte man das kennzeichnen: <div role="img">

wenn die Hauptsache der Information eine Liste ist, die zusätzlich noch grafisch aufgepeppt ist?

Was für eine Liste? „Zusätzlich“? Zusätzlich zu? Wo sind die Daten?

In SVG kann man die Daten barrierefrei unterbringen. Beispiel, für den generierten SVG-Quelltext auf 🔽 clicken, View Compiled HTML wählen.

Oder wenn schon div, dann die Daten als Elementinhalte: <div class="bars" style="height:42%; width:50%;">42%</div> und visuell verstecken. (Dann aber nicht role="img"` setzen.)

LLAP 🖖

[beatovich]

hallo

Ich sehe eine Skyline ohne jegliche Aussage.

wenn die Hauptsache der Information eine Liste ist, die zusätzlich noch grafisch aufgepeppt ist?

Was für eine Liste? „Zusätzlich“? Zusätzlich zu? Wo sind die Daten?

Beginne doch mit einer Liste (Daten hast du ja), danach kannst du die Breite der Elemente noch farbliche Kennzeichnen, um eine weiteren relativen Anhaltspunkt in visueller Form zu bieten.

In SVG kann man die Daten barrierefrei unterbringen. Beispiel, für den generierten SVG-Quelltext auf 🔽 clicken, View Compiled HTML wählen.

Klickedicklickedicklick, passiert nix...

Eventuell geht's ja, aber nicht in diesem codepen

[Gunnar Bittersmann]

@@beatovich

Beginne doch mit einer Liste

Schon desser als divs. Aber vermutlich ist eine Tabelle angebracht.

In SVG kann man die Daten barrierefrei unterbringen. Beispiel, für den generierten SVG-Quelltext auf 🔽 clicken, View Compiled HTML wählen.

Klickedicklickedicklick, passiert nix...

Eventuell geht's ja, aber nicht in diesem codepen

?? JavaScript aus?

LLAP 🖖

[Matthias Apsel]

Hallo Gunnar Bittersmann,

Und wenn man schon eine Grafik mit divs baut, sollte man das kennzeichnen: <div role="img">

Aber nicht alle, sondern nur das umgebende.

Bis demnächst
Matthias

[PaveLow]

Habt ihr sonst noch irgendein Lösungsvorschlag? So schwer kann es doch nicht sein die richtig dynamisch zu positionieren.

[JürgenB]

Hallo,

… positionieren.

das ist das Stichwort. Sieh mal hier: https://wiki.selfhtml.org/wiki/CSS/Eigenschaften/Positionierung/left

Gruß
Jürgen

[j4nk3y]

Hey,

Etwa so?

Gruß
Jo

[PaveLow]

eigentlich sind sie dynamisch und solten von der margin 1% abgegrenzt werden und damit nebeneinander platziert.

[j4nk3y]

Hey,

eigentlich sind sie dynamisch und solten von der margin 1% abgegrenzt werden und damit nebeneinander platziert.

Sie haben doch alle einen Abstand nach links und rechts von 1%.

Edit: Und dort ist nichts dynamisch, für eine dynamische Änderung bräuchtest du mindestens eine Animation im CSS wenn dann auch noch die Datenbank eine Rolle spielen soll kommst du nicht um Ajax rum und falls diese von anderen Client Interaktionen beeinflusst werden sollen, bräuchtest du einen Websocket.

Gruß
Jo

[PaveLow]

Das dynamische daran ist das sich das Diagramm ganz der Daten bank anpasst und sich dannach auch erstellt.

[PaveLow]

werden aber nicht nebeneinander platziert was ja eben mein Problem ist. Wenn ich den Abstand nach link einfüge stehen immer noch alle hintereinander nur mit ein bisschen mehr Abstand zu Chart

[PaveLow]

Danke funktioniet super ;) jankeys Lösung klappt doch habe etwas übersehen.

Nochmal Vielen Dank an alle