Hilfe bei Wordpress Widget Ausrichtung

1. offizieller Beitrag

    Hallo zusammen,

    mir ist mein Programmierer/ Designer kurzfristig ausgefallen und ich selbst bekomme es nicht so recht hin.

    Ich habe folgendes Problem.

    Ich möchte auf der Seite http://michelfrisch.markusschirra.de unter den 3 Hauptwidgets, jeweils 4 Widgets nebeneinander haben und das auf zwei Reihen verteilt.

    die Widgets konnte ich einrichten, allerdings stimmt die Ausrichtung nicht. und im CSS kenne ich mich nicht aus.

    margin: auto; geht nicht bei den 4 Widget Spalten,

    habe das hier in den css Code eingefügt

    HTML
    #home_widget_4 {
    width: 22.8%;
}

    und habe diese Emphehlung bekommen
    "wobei das schon falsches HTML ist, denn eine ID darf es eigentlich nur 1x auf einer Seite geben. Also besser auf Class umstellen."

    Wie kann ich diese 4 Widgets so ausrichten das diese Mittig angezeigt werden?

    Vielen Dank

    Gruß Markus

    Hallo Markus
    Dein erstes Widget div von den 8 ist höher als die anderen
    und zwar 219px - alle anderen sind 200px

    woher es kommt weiß ich nicht musst Du suchen -
    oder erstmal
    in das erste div <div style="height=200px;" class=.....usw .... > schreiben

    funktioniert sofort -

    Gruß aus Hamburg modem-kind

    Also irgendwie will es bei mir nicht, ich habe die Widgets in der sidebar-home.php angelegt

    aber wenn ich dort das div angeben, passiert nix.

    - - - Aktualisiert - - -

    so ok das hat geklappt das sie wieder alle zusammen sind, allerdings sind Sie noch überlappend.

    Wie bekomme ich das weg?

    Habe das in die css der Child Theme eingefügt.

    HTML
    #home_widget_4 {
    width: 22.8%;
    height: 220px;
}

    Falsches div

    Deins rot siehe Quelltext .. FALSCH !

    Richtig Grün


    [INDENT]<?php

    // Exit if accessed directly
    if ( !defined( 'ABSPATH' ) ) {
    exit;
    }

    /**
    * Home Widgets Template
    *
    *
    * @file sidebar-home.php
    * @package Responsive
    * @author Emil Uzelac
    * @copyright 2003 - 2014 CyberChimps
    * @license license.txt
    * @version Release: 1.0
    * @filesource wp-content/themes/responsive/sidebar-home.php
    * @link http://codex.wordpress.org/Theme_Developm…8sidebar.php.29
    * @since available since Release 1.0
    */
    ?>
    <?php responsive_widgets_before(); // above widgets container hook ?>
    <div id="widgets" class="home-widgets">

    Du hast es hier falsch !!!
    <div id="home_widget_1" style="height=200px;" class="grid col-300"><?php responsive_widgets(); // above widgets hook ?>

    <?php if ( !dynamic_sidebar( 'home-widget-1' ) ) : ?>
    <div class="widget-wrapper">

    <div class="widget-title-home"><h3><?php _e( '', 'responsive' ); ?></h3></div>
    <div
    class="textwidget"><?php _e( '', 'responsive' ); ?></div>

    </div><!-- end of .widget-wrapper -->
    <?php endif; //end of home-widget-1 ?>

    <?php responsive_widgets_end(); // responsive after widgets hook ?>
    </div><!-- end of .col-300 -->

    <div id="home_widget_2" class="grid col-300">
    <?php responsive_widgets(); // responsive above widgets hook ?>

    <?php if ( !dynamic_sidebar( 'home-widget-2' ) ) : ?>
    <div class="widget-wrapper">

    <div class="widget-title-home"><h3><?php _e( '', 'responsive' ); ?></h3></div>
    <div
    class="textwidget"><?php _e( '', 'responsive' ); ?></div>

    </div><!-- end of .widget-wrapper -->
    <?php endif; //end of home-widget-2 ?>

    <?php responsive_widgets_end(); // after widgets hook ?>
    </div><!-- end of .col-300 -->

    <div id="home_widget_3" class="grid col-300 fit">
    <?php responsive_widgets(); // above widgets hook ?>

    <?php if ( !dynamic_sidebar( 'home-widget-3' ) ) : ?>
    <div class="widget-wrapper">

    <div class="widget-title-home"><h3><?php _e( '', 'responsive' ); ?></h3></div>
    <div
    class="textwidget"><?php _e( '', 'responsive' ); ?></div>

    </div><!-- end of .widget-wrapper -->
    <?php endif; //end of home-widget-3 ?>

    <?php responsive_widgets_end(); // after widgets hook ?>
    </div><!-- end of .col-300 fit -->

    erstes -  id="home_widget_4" div
    hier ist es richtig !

    <div id="home_widget_4" style="height=200px;" class="grid col-300">

    <?php responsive_widgets(); // responsive above widgets hook ?>

    <?php if ( !dynamic_sidebar( 'home-widget-4' ) ) : ?>
    <div class="widget-wrapper">

    <div class="widget-title-home"><h3><?php _e( 'Home Widget 4', 'responsive' ); ?></h3></div>
    <div
    class="textwidget"><?php _e( '', 'responsive' ); ?></div>

    </div><!-- end of .widget-wrapper -->

    <?php endif; //end of home-widget-4 ?>

    <?php responsive_widgets_end(); // after widgets hook ?>
    </div><!-- end of .col-300 -->

    <div id="home_widget_4" class="grid col-300">
    <?php responsive_widgets(); // responsive above widgets hook ?>

    usw. usw. .......

    [/INDENT]


    Mmhh also bei mir werden die Widgets Boxen immer noch überlappend dargestellt....^^

    Sorry bin halt kein Webdesigner,

    - - - Aktualisiert - - -

    Ich habe gerade auf dem Tablet geschaut,dort wird es richtig angezeigt. Nutze aktuell den Browser Pale Moon, schaue mal mit einem anderen.
    Sry

    Na, wenn
    .col-300

    300px bzw 33% bedeutet, kann es nicht gehen. Denn 4 x 33% sind mehr als 100%. Also eine Klasse nehmen die 25% entsricht.

    Zitat von Arne Drews

    Wenn schon Inline-Style, dann aber bitte richtig:

    Code
    style="height:200px;"

    ubbs ja .. ja natürlich ..grrrr sorry
    thx Arne ;)

    JA so natürlich .. - peinlich :)

    style="height: 200px;"
    /* Nicht !! style="height=200px;" ..Nicht das = Zeichen sondern ! Doppelpunkt: */

    - - - Aktualisiert - - -

    Zitat von djheke

    Na, wenn
    .col-300

    300px bzw 33% bedeutet, kann es nicht gehen. Denn 4 x 33% sind mehr als 100%. Also eine Klasse nehmen die 25% entsricht.


    sicher das col-300 300px = 33% bedeuten.. ?

    ich absolut nicht.. !

    und die obere Reihe funktioniert ja auch- mit dem col

    guck die mal die col classen in der min css an..
    die untere Reihe nur nicht weil das erste div oben zu tief nach unten geht
    und das die breite/width besetzt..

    - - - Aktualisiert - - -

    Zitat von Arne Drews

    Wenn schon Inline-Style, dann aber bitte richtig:

    Code
    style="height:200px;"


    Jo ;)

    5 Mal editiert, zuletzt von modem-kind (20. März 2016 um 19:45)

    Code
    .col-300 {
    width:31.914893617021%
}


.col-140,.col-220,.col-300,.col-380,.col-460,.col-540,.col-60,.col-620,.col-700,.col-780,.col-860 {
    display:inline;
    margin-right:2.127659574468%
}

    Trotzdem breiter als 100%. Bei 4 Container.
    Abgesehen davon, dass width und margin-right mehr als 33.334% sind, was aus meiner Sicht schlicht falsch ist.

    Egal, hier die Lösung (In der style.css eintragen).

    Code
    #widgets img {
 width:100%;
}

    4 Mal editiert, zuletzt von djheke (20. März 2016 um 21:53)

    Moin
    das stimmt natürlich djheke,

    allerdings wird die col-300 class-e in diesem Fall sowieso unwirksam
    da sie von einer nachfolgenden .css Datei überschrieben wird mit width: 22,8%
    sonst hätten Wir gar nicht so zu sehen bekommen.


    @Arne Drews
    das ich das => style="height=200px;" statt so => style="height:200px;" geschrieben habe
    kommt übrigens weil ich es mir im html aus ner <img angabe genommen Copy Paste habe
    ohne es zu überlegen.. oder zu kontrollieren..
    tja Faulheit is nicht immer das beste :)

    allgemein ist es bei Copy Paste ja öfters mal so das man sich einen Fehler
    so immer schön weiterverbreitet .. :)

    schönen Tag noch Allen..
    modem-kind

    - - - Aktualisiert - - -

    Moin
    das stimmt natürlich djheke,

    allerdings wird die col-300 class-e in diesem Fall sowieso unwirksam
    da sie von einer nachfolgenden .css Datei überschrieben wird mit width: 22,8%
    sonst hätten Wir gar nicht so zu sehen bekommen.

    Gruß #modem-kind{ display:left, } :)