[wordpress] widgets uit sidebar losweken van header class

[paQ]

Ik probeer widgets geplaatst in de header area NAAST elkaar de krijgen ipv onder elkaar.
Dat onder elkaar is een dingetje uit de sidebar, en wordt in de css aangehaald als ul
Zo krijg je dus css regels als ul.widget {settings}

Nu kan ik niet echt ontdekken of deze class losgeweekt moet worden als het ware voor widgets die ik in de header wil tonen. Maak ik ze namelijk ul.widget, dan komen ze (uiteraard) niet naast elkaar. Pas ik vervolgens de ul claas aan, naar

code:

display :inline;

dan komt de content van de widgets in de sidebar dus naast elkaar te staan. Let wel, alleen de content, nog steeds niet de widgets zelf.

de content van de widget zelf naast elkaar krijgen lukt wel in de header, ook zonder dat ik ze benoem tot ul, door bijv

code:

display: inline;
float: left;

maar nu moeten ze als widgets zelf nog naast elkaar komen.


Ik vind diverse topics op diverse fora hierover, maar ofwel de oplossing wordt niet gegeven, ofwel het beperkt zich dus weer tot de sidebar, of de content uit de widget zelf.

Is dit wel op te lossen met css?

[EN-IS]

paQ schreef op woensdag 29 augustus 2012 @ 13:02:
Is dit wel op te lossen met css?

Dit is op te lossen met CSS, zelf zoiets nooit ondernomen maar kan wel effe meekijken met je, heb je een voorbeeld (van het probleem natuurlijk )?

[ Voor 5% gewijzigd door EN-IS op 29-08-2012 13:05 ]

[paQ]

code:

/* Header widget */
#widget-header {
    position:absolute;
    right:80px;
    top:0;
    display: inline;
    }
    
    .widget-header {
    display: 0;
        
        }
        .widget-header h3 {
            display: inline;
            }

als ik de eerste display: inline, of de tweede op none zou zetten, laat ie niks zien. Dus dat klopt!
maar dat inline slikt ie niet.
kan net zo goed 0 gebruiken, geen verschil.

ik heb dit in mijn header.php:

code:

<?php } ?>
            <div id="widget-header">
              <?php if ( ! dynamic_sidebar( 'Header' ) ) : ?>
                <!-- Widgetized Header -->
              <?php endif ?>
            </div><!--#widget-header-->

[ Voor 31% gewijzigd door paQ op 29-08-2012 13:39 ]

[OkkE]

Ik denk dat je beter eens kunt kijken naar float.

Uit je eerste post haal ik dat elke widget een ul element is, dus probeer bijv. eens:

code:

.widget-header ul { float: left; }

Anders zou een uitgeklede test-case heel handig zijn, of iets meer code, want het gaat (gok ik) juist om de HTML die binnen die if-statement staat.

Overigens bestaat de waarde "0" voor display niet.

[paQ]

OkkE schreef op woensdag 29 augustus 2012 @ 13:49:
Ik denk dat je beter eens kunt kijken naar float.

Uit je eerste post haal ik dat elke widget een ul element is, dus probeer bijv. eens:

code:

.widget-header ul { float: left; }

Anders zou een uitgeklede test-case heel handig zijn, of iets meer code, want het gaat (gok ik) juist om de HTML die binnen die if-statement staat.

Overigens bestaat de waarde "0" voor display niet.

bijna!

code:

/* Header widget */
#widget-header {
    position:absolute;
    right:0px;
    top:0;
    display: inline;
    }
    
    .widget-header {
    display: 0;
    float: left;        
        }

zo werkt het

nu is het alleen nog spelen met

code:

margin-top:  ;

van de widgets (niet allemaal even hoog)