Hilfe bei Wordpress Widget Ausrichtung

markus181

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

modem-kind

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

markus181

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.

HTML

<?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_Development#Widgets_.28sidebar.php.29
 * @since          available since Release 1.0
 */
?>
<?php responsive_widgets_before(); // above widgets container hook ?>
    <div id="widgets" class="home-widgets">
        <div id="home_widget_1" 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 -->






<div id="home_widget_4" 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 ?>


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


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


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


            <?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 ?>


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


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


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


            <?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 ?>


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


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


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


            <?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 ?>


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


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


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


            <?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 ?>


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


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


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


            <?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 ?>


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


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


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


            <?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 ?>


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


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


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


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




    </div><!-- end of #widgets -->
<?php responsive_widgets_after(); // after widgets container hook ?>

Alles anzeigen

- - - 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;
}

modem-kind

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>
<?php endif; //end of home-widget-1 ?>

<?php responsive_widgets_end(); // responsive after widgets hook ?>
</div>

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

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

<?php responsive_widgets_end(); // after widgets hook ?>
</div>

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

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

<?php responsive_widgets_end(); // after widgets hook ?>
</div>

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

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

</div>

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

<?php responsive_widgets_end(); // after widgets hook ?>
</div>

usw. usw. .......

[/INDENT]

markus181

geht nicht irgendwie..

modem-kind

Lüg nich Markus ..
geht doch - .. seh ich ja http://michelfrisch.markusschirra.de/

Gruß aus Hamburg

Arne Drews

Wenn schon Inline-Style, dann aber bitte richtig:

Code

style="height:200px;"

markus181

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

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.

markus181

Ok danke,

modem-kind

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

djheke

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%;
}

modem-kind

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, }

Tags