kolommen of tekstvlakken in twenty eleven

maresterre
(@maresterre)

10 jaren, 2 maanden geleden

Goedenavond,

Ik hoop dat iemand mij kan helpen met het volgende.

Voor de pagina ‘links’ van mijn website (nog niet gepubliceerd)wil ik graag een ‘startpagina-achtige’ layout creëren met diverse kolommen/gekleurde tekstvlakken met links. Elk vlak heeft dan zijn eigen soort links, zoals ‘winkels’ in het ene tekstvlak, ‘nieuws’in het andere enz enz.

En dan zou ik ook nog graag willen dat deze pagina ‘responsive’ is, dus meebeweegt als het formaat van het beeldscherm kleiner wordt. DAt doen de gewone stukjes tekst wel, maar op een andere pagina probeer ik ook een gekleurd tekstvlak in te voegen, maar die beweegt ook niet mee.
(zie hieronder)

Wie kan mij hierbij helpen? Het liefst op een manier met zo min mogelijk programmeren, want daar heb ik dus eigenlijk geen verstand van, ik kan alleen een beetje knippen en plakken als ik het heel duidelijk in een stappenplannetje voorgeschoteld krijg :((

Ik heb al eens wat geprobeerd overigens via Zedity, maar volgens mij is dat ook niet responsive, of valt dit responsive te maken? En met multiple content blocks kwam ik tot nu toe ook niet echt uit de voeten..

Ik hoop dat iemand iets weet,

Alvast hartelijk bedankt,
Maresterre

ps.
Dit is het tekstvlak wat ik al heb geprobeerd:

<div style=”font-family: Arial,Helvetica,sans-serif; font-size: 9pt; font-style: italic; background-color: #b8e78d; text-align: center; width: 550px; border: 0px solid purple; padding: 8px;”>

<img style=”margin-right: 6px;” alt=”” align=”center” /><b>
Kopje </b>
tekst tekst tekst

</div>

4 reacties aan het bekijken - 1 tot 4 (van in totaal 4)

W.P. Ginfo
(@wp-ginfo)

10 jaren, 1 maand geleden

Als je een responsive site wilt bereiken, begin dan met het gebruiken van een responsive theme.

Kies uit de reeks van responsive themes vervolgens een theme dat -met een beetje fantasie- lijkt op wat je qua indeling etc. op wat je wilt bereiken. Zo maak je een basis zonder al teveel gedoe.

Vervolgens pas je kleuren en kleurvlakken aan naar wens.
Soms is het gebruik van wat basis CSS / HTML daarbij onontbeerlijk.
LianneL
(@liannel)

10 jaren, 1 maand geleden
Hoi Maresterre,

Je wilt best iets customs, dus je ontkomt niet helemaal aan ietwat html / css te gebruiken.

De blokken zou je inderdaad kunnen opzetten met de html/css die je al geeft. Je moet hieruit wel (heel belangrijk!) width:550px; er tussenuit halen. Essentie van responsive design is namelijk dat een element geen vastgetimmerde breedte heeft. Ik snap niet helemaal wat die img-tag ertussen doet, je linkt immers niet naar een daadwerkelijk plaatje, maar als je eenmaal een blokje naar wens hebt, kun je dit zo vaak herhalen als je wilt.

Met een grid column plugin kun je vervolgens de blokken in drie responsive kolommen krijgen. Ik heb er eentje even bekeken, die in jouw geval lijkt te volstaan.

Stel je voor dat je in drie kolommen wilt werken dan zet je op de pagina:
```
[bscolumns class="one_third"]blokjes in de eerste kolom[/bscolumns]

[bscolumns class="one_third"]blokjes in de tweede kolom[/bscolumns]

[bscolumns class="one_third_last"]blokjes in de derde kolom[/bscolumns]
```
Succes!
Thread starter maresterre
(@maresterre)

10 jaren, 1 maand geleden

Beste W.P. Ginfo en LianneL, bedankt voor jullie reacties!

Ik dacht dat twenty eleven ook responsive is? De tekst beweegt mee als ik mijn beeldscherm verklein, dus dat lijkt mij positief. Het enige dat volgens mij op mijn site nog niet helemaal responsive is, zijn mijn menu’s, dus daar moet ik nog even achteraan..Tips zijn altijd welkom 🙂

Het hoofdmenu lijkt redelijk responsive tot op Ipad beelschermgrootte (ongeveer) maar als je richting telefoonscherm gaat, komt het menu in allerlei regels onder elkaar en maakt hij niet meer gebruik van de ruimte..

Als iemand hier een tip voor mij heeft, hoe ik dit menu meer resonsive kan maken, hoor ik het heel graag..

Voor wat betreft mijn oorspronkelijke vraag, reageer ik in de volgende post

Alvast bedankt,
Maresterre

LianneL
(@liannel)

10 jaren, 1 maand geleden

Hoi Maresterre,

als een theme responsive is, wil dit niet zeggen dat alles wat je erin zet zich responsive gedraagt. In jouw eerste post geef je bijvoorbeeld een html-blok in met een vaste breedte van 550px. Dit is dan maatgevend voor de breedte van dit blok, en geeft -hoe responsive je theme ook is,- een blok van 550px breed ieder scherm, ook op een iPhone-scherm van 320px breed. In dit laatste geval krijg je dan een horizontale scrollbalk. Het is belangrijk om dit principe te begrijpen.

Maak voor je menu-vragen een nieuw item aan? En voor dit verhaal is het gemakkelijk om een linkje te hebben naar je site, want dan kan het probleem beter worden geanalyseerd.

Succes!
Lianne

4 reacties aan het bekijken - 1 tot 4 (van in totaal 4)

Het onderwerp ‘kolommen of tekstvlakken in twenty eleven’ is gesloten voor nieuwe reacties.

kolommen of tekstvlakken in twenty eleven

Onderwerptags

Weergaven