HTML [JS?] Elemente zentrieren...

[Brocken95]

Hallo, ich schreibe derzeit an einer kleinen Seite und habe ein Problemchen. Und zwar weiß ich nicht, wie ich die Elemente, die mit JS erzeugt werden zentrieren soll.

Hier ist der dazugehörige Code (wie kann ich den sinnvoll auslagern?! habe ein Script eingebunden, welches das "Trianglify" aufruft, eine .js Datei zu erstellen in der der Code in den <script> Tags ist, bringt leider keine Abhilfe?!):

        <div id="categories">
        <script>
                var pattern = Trianglify({
                    width: 200,
                    height: 200,
                    cell_size: 40,
                    /* seed: 'Blog', */
                    x_colors: 'Greens'
                    })
                document.body.appendChild(pattern.canvas())
        </script>

        <script>
            var pattern = Trianglify({
                width: 200,
                height: 200,
                cell_size: 40,
                /* seed: 'Kunst', */
                x_colors: 'Reds'
            })
            document.body.appendChild(pattern.canvas())
        </script>

        <script>
            var pattern = Trianglify({
                width: 200,
                height: 200,
                cell_size: 40,
                /* seed: 'Programmierung', */
                x_colors: 'Blues'
            })
            document.body.appendChild(pattern.canvas())
        </script>
        </div>

Ich dachte mir, dass ein "div" das Richtige wäre, um das zu realisieren, zumal auch hover-effekte irgendwie dazu kommen sollen und in diesen Kästchen ein Buchstabe angezeigt werden soll

In der ID steht derzeit nicht viel (habe das mit margin: auto probiert, mit vertical-align und mit text-align, leider bringt nichts davon Erfolge)

#categories {
    position: absolute;
    margin: auto;
}

Das "position: absolute;" steht da nur, weil ich's damit mal ausprobiert habe.

Wie mache ich das nun? ist es sinnvoll dafür eine unsichtbare Tabelle zu erstellen?

Und wenn ich schon dabei bin, möchte ich gleich noch fragen, wie ich in der Navigation (Code dazu folgt...) das Bild zentrieren kann und die anderen Menüpunkte jeweils links und rechts davon schreiben kann. weil wenn ich die gesamte Navigation zentriere, sieht das sehr krumm aus, da links mehr Buchstaben als rechts sind (oder andersrum).

Hier die Navigation:

        <nav>
            <a href="einsenden.html" style="color: goldenrod" title="Einsenden">Einsenden</a> #
            <a href="werben.html" title="Werben">Werben</a> #
            <a href="index.html" title="Homepage"><img class="logo" src="img/Logo.png" alt="Logo"></a> #
            <a href="links.html" title="Links">Links</a> #
            <a href="about.html" title="Über Mich">Über Mich</a>
        </nav>

(ist es ressourcentechnisch oder so sinnvoll statt "index.html" die Raute (#) zu verwenden?!)

Ich hoffe, dass mir hier jemand bei meinen kleinen Fragen helfen kann .

 

[Jokeboy]

#div {
text-align:center;
vertical-align:middle;
line-height: Xpx; --> statt "X" die höhe vom container, in dem fall 200px nehme ich an
}

So probiert?

 

[Brocken95]

Funktioniert leider auch nicht. Aber ja, 200px wäre richtig .

 

[Knalltuete]

Was soll dieses Javascript überhaupt machen? Habe es mal auf Codepen.io eingefügt, aber es passiert nichts?

 

[master.rv]

Hi,

setzt in dem ersten Tag das hier: align="center"

Beispiel: <div align="center" id="categories">

 

[MoOderSo]

Nur weil das JS im div Tag steht, heißt das nicht, dass die erzeugten Elemente auch dort landen.
Nur mal so als Tipp.

 

[Umbel]

+1 für MoOderSo, er fügt mit diesem Script ja scheinbar Canvas-Elemente dem Body hinzu, das hat mit dem Div in dem die Script-Tags stehen nix zu tun.

 

[Brocken95]

Hi,

setzt in dem ersten Tag das hier: align="center"

Beispiel: <div align="center" id="categories">

Ist das nicht CSS1/2? Mit CSS3 funktioniert das doch nicht mehr, oder? Aber ich werd's gleich mal testen.

// Funktioniert nicht.

Was soll dieses Javascript überhaupt machen? Habe es mal auf Codepen.io eingefügt, aber es passiert nichts?

Es erzeugt ein LowPoly Kästchen, welches immer mit einem random-seed gefüttert wird.
http://qrohlf.com/trianglify/

MoOderSo, Umbel - und was soll ich da nun machen? Ich kann es auch als .png oder .svg dort einfügen, würde das dann Abhilfe schaffen?

 

[MoOderSo]

Wenn du willst, dass sie im div mit der Id "categories" landen, dann muss du sowas machen:

document.getElementById("categories").appendChild(pattern.canvas());

und nicht document.body.appendChild.

 

[Umbel]

Was genau willst du überhaupt mit deinen "LowPoly-Kästchen mit random-seed" (Das Bullshit-Bingo hast du gewonnen^^) erreichen? Wenn du es für irgendwas als Hintergrund willst wird das so nix, wenn du einfach nur 3 bunte Kästen in deinem Categorie-Div haben willst mach es wie MoOderSo vorgeschlagen hast.

Hast du dir eigentlich schonmal im Browser deiner Wahl die WebDev-Tools angeschaut? Damit hättest du das Problem sicherlich auch selber finden können.

 

[Brocken95]

Wenn du willst, dass sie im div mit der Id "categories" landen, dann muss du sowas machen:

document.getElementById("categories").appendChild(pattern.canvas());

und nicht document.body.appendChild.

Danke . Werde ich gleich ausprobieren.

// Yay, es funktioniert . Danke.

@Umbel, es sollen 3 Verlinkungen werden. LowPoly deshalb, weil es mir gefällt... und das es nach jedem refresh anders aussieht, gefällt mir auch. Was du mit "Bullshit-Bingo" meinst, weiß ich nicht. Es spielt denke ich keine wesentliche Rolle, wofür dieses Kästchen genutzt werden soll. Denn das würde in einer Bewertung dieser von mir gewollten Nutzung enden... und das ist Off-Topic.

Also, einfach nur 3 Buttons, die immer anders aussehen und später noch zur gewünschten Stelle verlinken sollen.

Ja, die WebDev-Tools habe ich mir angeschaut, was soll mir das bringen?! Ich bin wohl offensichtlich keiner mit vielen Kenntnissen im WebDev/WebDesign Bereich. Ich dachte mir, dass ich durch Googlen eine Lösung finden würde, dies ist aber nicht der Fall, deswegen habe ich nun hier gefragt.

// Wie kann ich den Elementen mit box-shadow einen Schatten geben? Habe mir grad gedacht, dass man evtl. jeweils Divs macht und darunter einfach irgendein Kästchen in der Größe 200x200 (so wie die Buttons/Elemente) erstellt und diesem Kästchen gibt man dann einen Schatten?!

#buttons {
    height: 200px;
    width: 200px;
    background-color: #ffffff;
    color: #ffffff;
    box-shadow: 0px 5px 5px #141414;
    text-shadow: #141414;
}

Ohne Width, Height, Background-Color funktioniert es auch nicht. Der Schatten wird aber vom Browser (Chrome) Angezeigt (hab's probiert indem ich die Eigenschaften in die "categories" ID geladen habe).

 

[MoOderSo]

Gib doch deinen bunten Dingern direkt den Schatten. So in der Art:

#categories>canvas{
   box-shadow:2px 2px 10px 3px black;
}

 

[Brocken95]

Funktioniert zwar, aber nun sind die Elemente nicht mehr zentriert ^^.