Ben jij een codecracker?! Multicolumns CSS

Wil je in een html division (div) tekst en content opdelen in een gebalanseerde gecalculated layout van platte tekst naar een ‘multi column’ b.v. naar 2 kolommen. Gebruik dan onderstaande CSS code. 

/* On this page – the no columns parts */
.no-columns p
{
          column-count: 1;
          -webkit-column-count: 1; /* Chrome, Safari, Opera */
          -moz-column-count: 1; /* Firefox */
}
.multi-column
{
          column-count: 2;
          -webkit-column-count: 2; /* Chrome, Safari, Opera */
          -moz-column-count: 2; /* Firefox */
}
@media screen and (max-width: 770px)
 {
          .multi-column
          {
                     column-count: 1;
                     -webkit-column-count: 1; /* Chrome, Safari, Opera */
                     -moz-column-count: 1; /* Firefox */
          }
}

Je kunt b.v. via je Visual Composer een class toevoegen zoals ‘multi-column’, dat kan ook in HTML via de gebruikelijke wegen. Als je de code goed naleest dan vind je daar opdrachten die samenhangen met responsive websites. Dit houd in dat zoals in dit geval de 2 kolommen wordt samengevoegd beneden een schermbreedte van 770 pixels tot 1 kolom. Dit is alle code die je nodig hebt voor slimme layouts! Ben je een leek maar je denkt de code te begrijpen? Overweeg een toekomst in webdevelopment of webdesign!

Navigatiemenu; current selected item en subitem aanduiding

Als je zelf thema’s gaat bouwen is het goed om te weten dat je in WordPress een hoop kunt bereiken met css code alleen; WordPress gebruikt vaste selectors die je altijd kunt aanspreken.

Het meestal horizontale menu bovenin (navigatiemenu) bijvoorbeeld. Laten we beginnen met: Current selected item. We kunnen met de selectors: a, a:hover, a:visited, a:active een aantal css manipulaties toepassen. Maar wat je langs deze weg niet bereikt; Het geklikte item highlighten. (Soms zijn die menu items gehighlighted met een streep onder het item of de hele background is anders).

Met de volgende code kun je dit oplossen:

.current-menu-item a
{

border-left:0px solid;
border-top:0px solid;
border-right:1px solid;
border-bottom:1px solid;
border-bottom-color :#888;
border-right-color: #888;
-webkit-box-shadow: inset 1px 1px 2px 0px rgba(0, 0, 0, 1);
-moz-box-shadow: inset 1px 1px 2px 0px rgba(0, 0, 0, 1);
box-shadow: inset 1px 1px 2px 0px rgba(0, 0, 0, 1);
background-color:rgba(255,255,255,0.125);
}

Let op! Het gaat niet om de css code tussen de accolade’s, maar om de selector: .current-menu-item a Wat je tussen de accolade’s zet is jouw keuze.

Dan gaan we naar: Subitem aanduiding.

 We zien ook welke menu items subpagina’s bevatten door een aanduiding met een ‘+’ of iets anders. Zweven of hoveren we daarboven met de muis dan komt er een menu. Het gaat om die ‘+’ of een door jou gekozen teken. Dit bereiken we met de volgende css code:

/******** vertical arrow top menu sub items ********/
.nav-menu li > a:after
{
color: #000;
content: ‘ ∨’;
}

.nav-menu li > a:only-child:after
{
content: ”;
}
/***************************************************/

Met color: #000; bepaal je de kleur voor het subitem symbool en: content: ‘ ∨’; is het symbool dat wordt gebruikt voor de aanduiding van subitems in het menu.

Details, maar zeker niet onbelangrijk!

 

Succes!