✔ Erstes Div aus einer Reihe dynamisch erstellen, ändern

G

gianfranco0104

Erfahrenes Mitglied
Moin, hab da mal wieder eine knifflige Aufgabe, welche ich nicht lösen kann.

ich habe hier einen Code welcher mir aus gesammelten Daten automatisch eine Reihe Divs erstellt (2-Reihig) in immer gleich großen Div Containern - das klappt auch wunderbar
Der Code Dazu schaut so aus:

Javascript: 
    insertDiv = function(wrapper, file){
        var fileName = file.split("_____")[1]
        var fileDay = file.substring(6,8)
        var fileMonth = file.substring(4,6)
        var fileYear = file.substring(2,4)
        var div = document.createElement('div')
        var content = fileName.replace(/.cm5/, "") + ", " + fileDay + "." + fileMonth + "." + fileYear
       
        // dem neuen Element Inhalt zuweisen
        div.innerHTML = content;
        // CSS-Eigenschaften über das style-Objekt
        div.style.display = "inline-block";
        // CSS über Klasse zuweisen
        div.className += " metroFileBoxAuto";
        wrapper.appendChild(div);
    };

Dazu in der HTML, zwischen dem Div, wo alles erstellt wird:
HTML: 
<div id="openerWrapper">
    <script type="text/javascript">
            var wrapper = document.getElementById('openerWrapper'),
            tmp = [],
            count = 0,
            rows;

            // wrapper initialisieren
            // 1. Anzahl Zeilen
            rows = 2;
       
            // 2. Ausgabe-Matrix erstellen
            for(var c=0; c<files.length; c+=2){
                // Neue Spalte in Matrix
                tmp[count] = [];

                // Spalte mit den Elementen des File-Arrays füllen
                for(var r=0; r<rows; r++){
                    tmp[count][r] = files[c+r];
                }
                count++;
            }

            // Über die Matrix iterieren
            for(var i=0; i<rows; i++){
                for(var j=0; j<tmp.length; j++){
                    if(tmp[j][i]){
                        insertDiv(wrapper, tmp[j][i]);
                    }
                }
                // Zeile umbrechen
                wrapper.appendChild(document.createElement('br'));
            }
       
        </script>
</div> <!-- ende openerWrapper -->

Der Style der (kleinen) Div Boxen:
CSS: 
      .metroFileBoxAuto {
          background-color:#ffca08;
          margin-left:40px;
          margin-top:40px;
          text-align:right;
          font-family:Segoe, "Segoe UI", "DejaVu Sans", "Trebuchet MS", Verdana, sans-serif;
          color:#FFFFFF;
          font-size:0.9em;
          line-height: 618px;/**/
          font-weight:100;
          width:350px;
          height:270px;
          border-bottom: 80px solid #000000;
      }


Soweit passt alles, doch das Problem ist folgendes. Das erste Div, welches erzeugt wird soll aber einen anderen Style haben > (große) Div Box:
CSS: 
.metroFileBIGBox {
          background-color:#ffca08;
          margin-top:40px;
          float:left;
          width:740px;
          height:660px;
          border-bottom: 80px solid #000000;
      }

wie bekomme ich das so hin, dass die erst erzeugte (kleine) Div zur Großen wird?
in etwa so:
div.png
 
Wenn das div immer an der selben Stelle steht könntest du es über CSS lösen.

Dank CSS3 gibt es den Selektor nth-child
CSS: 
div:nth-child(3) {
   height: 150px;
   width: 150px;
}
 
@merzi86 , Danke! hätte nicht gedacht, dass das so einfach geht. Musste aber child(2) setzen, da er sich sonst zwischen dem ersten und zweiten angesiedelt hat.
Problem ist jetzt aber, dass mein Text in der selben höhe steht, wie auch bei den gleichen.
wenn ich Line-height anwende, dann stimmen die höhen in allen Divs nicht mehr.
Da der erzeugte Text insgesamt im Style gesteuert wird geht das also nicht. gibt es eine Möglichkeit dem "separaten, großen DIV" zu sagen, dass sein text woanders steht? wie gesagt mit Line-height in der div:nth-child(2) habe ich probiert klappt aber nicht.
momentan schaut es so aus:
divb.png

Text sollte in die Schwarze box runter, wie bei den kleinen...
 
Du kannst Probieren den Text mittels Padding zu verschieben.
Die kann allerdings kann das bei den ein oder anderen Browser etwas anders ausgelegt werden.
Eine etwas andere Methode wäre den Text nicht direkt in das div zu schreiben sondern in ein Span oder in ein paragraph und dies mittels margin zu verschieben.
Dies ist auch eine etwas elegantere Variante als den Text über line-height nach unten zu drücken.
 
Noch mehr Probleme. mit child(2) habe ich zwar diesen Div an die richtige stelle gerückt, aber dafür andere dinge verstellt. kann ich mit nth-child nur diese Boxen ansteuern - inetwa so div:nth-child(metroFileBoxAuto)? Wobei "metroFileBoxAuto" die kleinen Boxen sind, welche ich die erste abändere.

Zum Text verschieben; Da es ja eigentlich die selben Div-Elemente sind, verändere ich den einen, verändere ich alle - somit egal ob via <SPAN> oder <P>, wie du im meinem JS-Code oben sehen kannst. - Kuddelmuddel. :(
 
Hallo gianfranco0104

Ist der schwarze teil in deinem div nicht ein eigenes Element? Falls nein, tu das. Dann ist der Text ein child des schwarzen Elements und dementsprechend unabhängig vom gelben Teil.

Grüsse
Cromon
 
Wenn du aber die änderungen in der Sektion mit dem nth-child schreibst wird nur dieses eine Element verändert.

Welche anderen Dinge hat es denn verstellt?
 
@Cromon, danke - so klappts mit dem "Child(2)". Perfekt. Jetzt sind die anderen Elemente wieder unberührt.

Zum Thema eigene DIVs:
Die Schwarze Box ist kein eigenes Div. Ging irgendwie nicht. ich konnte in meiner Dynamik JS das nicht erzeugen. s. Oben, beide Scripte erzeugen in Verbindung mit der metroFileBoxAuto CSS die Box... ´Hatte im Script versucht 3 Elemente zu machen, also BOX(Gelb) Box(footer, schwarz) und Text im Footer, hat aber nicht geklappt. das Script erzeugt immer nur ein Element, also musste ich tricksen: Schwarze Box ist einfach ein dicker "border-bottom: 80px solid #000000" und der Text mit line-height reingedrückt.
 
Zuletzt bearbeitet:
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück