Hilfe !! ich komm nicht weiter

Spawnsplitter

Zitat von threadi

Der erzeugte HTML-Code ist nicht valide. Entferne die <div>-Elemente um die <li>. Ein <li> darf nur innerhalb eines <ul> oder <ol> oder <menu> liegen. Siehe: https://developer.mozilla.org/en-US/docs/Web…etiredLocale=de
Ich verstehe dann weiterhin nicht was für ein "Gap" du meinst. Es gibt hier keinerlei Columns, nur Listenpunkte. Willst Du bei bestimmten Listenpunkten den visuellen Abstand erhöhen?

Genau das ist ja mein punkt ich soll jz zum Beispiel 2 div in eine column packen dann wieder 3 div in eine column und dann 2 und dann zwischen den columns einen abstand

Werbepost

Hallo!

Wenn du gerade an deiner Website arbeitest oder dein aktuelles Hosting überdenkst: Wir betreiben mit NetzLiving eine Hosting-Plattform, die speziell auf Performance, Sicherheit und einfache Verwaltung ausgelegt ist.

✔️ Schnelle Ladezeiten (optimiert für WordPress & Co.)
✔️ Deutsche Server & DSGVO-konform
✔️ Persönlicher Support (kein 0815-Ticket-System)

Mehr erfahren

threadi

Wieso sprichst Du von divs wenn ich schreibe, dass die dort nichts zu suchen haben?

Du hast für das was Du willst 2 Möglichkeiten:
a) Setze den Abstand per CSS. Dazu könntest Du die <li>-Menüpunkte die einen Abstand irgendwohin haben sollen per nth-child ansprechen (siehe https://developer.mozilla.org/en-US/docs/Web…etiredLocale=de) oder jedem <li> in deinem Quellcode eine Klasse geben und diese dann dafür verwenden.
b) Unterteile den HTML-Code weiter indem Du Listen innerhalb von <li> verwendest. Beispiel:

Code

<ul>
<li>
 <ul>
  <li>Menü 1</li>
  <li>Menü 2</li>
 </ul>
</li>
<li>
 <ul>
  <li>Menü 3</li>
  <li>Menü 4</li>
 </ul>
</li>
</ul>

Alles anzeigen

Dadurch kannst Du den gewünschten Abstand dann ebenfalls per CSS an den <li>'s der obersten Ebene setzen. Herausforderung ist natürlich in der Generierung diese Unterteilung einzubauen.

Ich würde Möglichkeit a) nehmen. Damit wärst Du sofort fertig.

Übrigens gibt es keinerlei Grund hier <div> zu verwenden. Weder hat das für Suchmaschinen irgendeine Bedeutung noch hilft es beim Styling.

Spawnsplitter

Zitat von threadi

Wieso sprichst Du von divs wenn ich schreibe, dass die dort nichts zu suchen haben?

[COLOR=#ff0000]Vollzitat gekürzt[/COLOR].

Das diese Optionen bestehen weis ich, das wäre auch kein Problem. Aber mein Ausbilder meint ich darf nicht mit CSS arbeiten sondern wenn nur mit den CSS Klassen von Elementor die so gut wie nirgends dokumentiert sind. Von Ihm kommt auch die Vorgabe <div> zu verwenden...

threadi

Ok, dann bin ich auch raus. Sowas macht man einfach nicht. Es ist sowas von falsch.

meisterleise

Wenn du nicht weiterkommst, warum sprichst du deinen Ausbilder dann nicht darauf an? Das ist schließlich der Sinn einer Ausbildung.
Außerdem sollte er dir erklären, was sein Sinn hinter der Verwendung von emt Klassen ist
Ein Lösungsansatz wäre, es einfach mal in emt mit Flexbox-Containern aufzubauen und sich dann anzusehen, wie emt das lösen würde, um es dann nachzubauen. Und die verwendeten Klassen siehst du dann auch gleich.

Zitat von threadi

Sowas macht man einfach nicht. Es ist sowas von falsch.

Was genau findest du nun falsch? Die emt Klassen nutzen zu müssen oder es mit divs aufzubauen? Ersteres finde ich auch irritierend, aber ansonsten würde ich das auch mit divs aufbauen und nicht mit Listen.

Spawnsplitter

[COLOR=#ff0000]Zitat gelöscht. Das Folgende bezieht sich auf den vorhergehenden Post.[/COLOR]

Das Problem ist das unser Ausbilder die devise verfolgt uns nicht zu helfen, sonst würden wir nichts lernen. Hab ich nämlich tatsächlich schon versucht haha. Er meinte der Sinn dahinter wäre das die emt klassen keine oder nur geringe Auswirkungen auf den Page Speed haben, und normales CSS eine Website extrem verlangsamen würde. Aber danke für den Tipp ich versuche es mal

Spawnsplitter

Oke habe es jz zumindest geschafft die divs in columns aufzuteilen haha

Spawnsplitter

PHP

$this->add_control(
        "column_distribution",
        [
            "label" => esc_html__("Spalten Verteilung", "elementor"),
            "type" => \Elementor\Controls_Manager::TEXT,
            "description" => esc_html__("Trennen Sie die Spalten mit einem , ohne Leerzeichen. ", "elementor"),
            "default" => "1"
        ]
    );








protected function zählenDerColumns($dis, $elementCount) {
    $data = explode(",", $dis);
    $ergebnis = array();
    $dataCount = 0;
    foreach($data as $elem) {
        $item = intval($elem);
        $dataCount += $item;
        $ergebnis[] = $item;
    }
    if ($dataCount != $elementCount) {
        return 0;
    } else {
        return $ergebnis;
    }
}


protected function render() {
    $settings = $this->get_settings_for_display();
    $fallback_defaults = [
        'fa fa-check',
        'fa fa-times',
        'fa fa-dot-circle-o',
    ];


    $this->add_render_attribute( 'icon_list', 'class', 'elementor-icon-list-items' );
    $this->add_render_attribute( 'list_item', 'class', 'elementor-icon-list-item' );


    if ( 'inline' === $settings['view'] ) {
        $this->add_render_attribute( 'icon_list', 'class', 'elementor-inline-items' );
        $this->add_render_attribute( 'list_item', 'class', 'elementor-inline-item' );
    }


    ?>
    <div <?php $this->print_render_attribute_string( 'icon_list' ); ?>>
        <?php
        


        $item_count = count($settings["icon_list"]);




        $daten = $this->zählenDerColumns($settings["column_distribution"],$item_count);
        $datenCount = 0;
        $datenIndex = 0;


        foreach ( $settings['icon_list'] as $index => $item ) :
            
            $repeater_setting_key = $this->get_repeater_setting_key( 'text', 'icon_list', $index );


            $this->add_render_attribute( $repeater_setting_key, 'class', 'elementor-icon-list-text' );


            $this->add_inline_editing_attributes( $repeater_setting_key );
            $migration_allowed = \Elementor\Icons_Manager::is_migration_allowed();


            if($datenCount == 0) {
                ?> <div> <?php ;
            }
            ?>
            <span class="elementor-icon-list-item elementor-inline-item elementor-repeater-item-<?php echo esc_attr($item["_id"]);?> inner-item">
                <?php
                if ( ! empty( $item['link']['url'] )) {
                    $link_key = 'link_' . $index;   
                    $this->add_link_attributes( $link_key, $item['link'] );
                    ?>
                    <a <?php $this->print_render_attribute_string( $link_key ); ?>>
                    <?php
                }
                if ( ! isset( $item['icon'] ) && ! $migration_allowed ) {
                    $item['icon'] = isset( $fallback_defaults[ $index ] ) ? $fallback_defaults[ $index ] : 'fa fa-check';
                }


                $migrated = isset( $item['__fa4_migrated']['selected_icon'] );
                $is_new = ! isset( $item['icon'] ) && $migration_allowed;
                if ( ! empty( $item['icon'] ) || ( ! empty( $item['selected_icon']['value'] ) && $is_new ) ) :
                    ?>
                    <span class="elementor-icon-list-icon">
                        <?php
                        if ( $is_new || $migrated ) {
                            \Elementor\Icons_Manager::render_icon( $item['selected_icon'], [ 'aria-hidden' => 'true' ] );
                        } else { ?>
                                <i class="<?php echo esc_attr( $item['icon'] ); ?>" aria-hidden="true"></i>
                        <?php } ?>
                    </span>
                <?php endif; ?>
                <span <?php $this->print_render_attribute_string( $repeater_setting_key ); ?>> </span>
                <?php if ( ! empty( $item['link']['url'] )) : ?>
                    </a>
                <?php endif; ?>
                </span>
            <?php


            if ($daten == 0 || $datenCount+1 == $daten[$datenIndex]) {
                ?> </div> <?php ;
                $datenCount = 0;
                $datenIndex++;
            }
            else $datenCount++;
            endforeach;     
            ?>       
    </div>
    <?php
}

Alles anzeigen

Willkommen! Melden Sie sich an oder registrieren Sie sich.

Hilfe !! ich komm nicht weiter

Jetzt mitmachen!