1. Frank01
  2. de Cock
  3. Overige vragen
  4. maandag 28 januari 2019
Hallo allemaal,
Ik gebruik Joomla 3.9.2

Op een pagina van mijn website wil ik twee DIV elementen naast elkaar hebben staan als ik met de desktop mijn pagina bekijk en als mijn website met een mobiel apparaat wordt bekeken wil ik dat DIV 1 boven DIV2 komt te staan. (responsive dus)
In DIV 1 wil ik een menu zetten en in DIV 2 wil ik content (bep. pagina's van mijn website) weergeven.

Ik weet niet hoe ik dat voor elkaar krijg, kan/wil iemand mij vertellen "hoe" ik dat moet doen?

Bij voorbaat heel veel dank voor het advies! :)
Met vriendelijke groet,
Frank
Patrick Smits
Gebruikersgroep regio Utrecht
Geaccepteerde antwoord Pending Moderation
Een voorbeeld staat hier:

2 kolommen

Het breekpunt van een mobiel is 350/375px ipv 600px.
  1. meer dan een maand geleden
  2. Overige vragen
  3. # 1
Geaccepteerde antwoord Pending Moderation
Dank je, Patrick,

Als ik het menu in de linker kolom wil centreren, moet ik dan gewoon de div van het menu centreren?

Bij voorbaat dank voor de hulp! :)

Met vriendelijke groet,
Frank
  1. meer dan een maand geleden
  2. Overige vragen
  3. # 2
Patrick Smits
Gebruikersgroep regio Utrecht
Geaccepteerde antwoord Pending Moderation
Hoi Frank,

Nee, dan moet je de module van het menu centreren in de div.

Groet,
Patrick
  1. meer dan een maand geleden
  2. Overige vragen
  3. # 3
Geaccepteerde antwoord Pending Moderation
Hoi Patrick,
Ik ben heel erg blij met je hulp!
Ik heb echter een vraag; kan ik de linker kolom iets minder breed maken dan de rechter kolom, zodat er in de rechter kolom meer ruimte overblijft voor de content (tekst en een eventuele foto)?
Het geheel wil ik natuurlijk wel responsive houden.

Hoe kan ik dat doen?

Bij voorbaat veel dank voor de hulp! :)
Met vriendelijke groet,
Frank
  1. meer dan een maand geleden
  2. Overige vragen
  3. # 4
Patrick Smits
Gebruikersgroep regio Utrecht
Geaccepteerde antwoord Pending Moderation
Dat kan, alleen dan moet je voor beide kolommen een aparte class maken.

Ik probeer het met onderstaande code te verduidelijken:


.column-left {
float: left;
width: 20%;
padding: 10px;
height: 300px; /* Should be removed. Only for demonstration */
}

.column-right {
float: left;
width: 80%;
padding: 10px;
height: 300px; /* Should be removed. Only for demonstration */
}

<div class="row">
<div class="column-left" style="background-color:#aaa;">
<h2>Column-left</h2>
<p>Column-left is nu 20%</p>
</div>
<div class="column-right" style="background-color:#bbb;">
<h2>Column-right</h2>
<p>Column-right is nu 80%</p>
</div>


Vergeet de responsive niet:


@media screen and (max-width: 600px) {
.column-left, .column-right {
width: 100%;
}
}

Hoop dat dit een beetje duidelijk is, anders hoor ik het wel.

Groet,
Patrick
  1. meer dan een maand geleden
  2. Overige vragen
  3. # 5
Geaccepteerde antwoord Pending Moderation
Hoi Patrick,

Bedankt voor de snelle reactie! :)
Ik ga er morgen mee aan de slag!

Vriendelijke groet,
Frank
  1. meer dan een maand geleden
  2. Overige vragen
  3. # 6
Geaccepteerde antwoord Pending Moderation
Hoi Patrick,
Bedankt voor het laatste advies (hier boven)!
De pagina is nu mooi responsive, de verhouding 20% (links) en 80% (rechts) op smartphone en IPhone, lijkt nu goed te gaan, maar voor Ipad en tablet worden de kolommen van 20% (links) en 80% (rechts) aan de linker kant uitgelijnd te worden!

Wat kan ik hieraan doen?

Bij voorbaat veel dank voor de hulp!! :)
Met vriendelijke groet,
Frank
ps. Ik heb in mijn Firefox browser een extensie geïnstalleerd waarmee je de pagina in responsive-modus kan bekijken
  1. meer dan een maand geleden
  2. Overige vragen
  3. # 7
Patrick Smits
Gebruikersgroep regio Utrecht
Geaccepteerde antwoord Pending Moderation
Staan de blokken nu dan onder elkaar op de ipad?
Heb je een margin-left of margin-right ingesteld op de kolommen?

Heb je een link dat ik even mee kan kijken wat er gebeurd?
  1. meer dan een maand geleden
  2. Overige vragen
  3. # 8
Geaccepteerde antwoord Pending Moderation
Staan de blokken nu dan onder elkaar op de ipad?

Nee, de blokken staan naast elkaar - links uitgelijnd - in landscape en portrait mode....
Bij iedere smartphone in landscape mode trouwens ook. (dat zie ik nu pas)

Betekend dat dat ik misschien een margin-left of margin-right ingesteld moet hebben op de kolommen?
En waaar is dan precies de beste positie in de css?

Heb je een link dat ik even mee kan kijken wat er gebeurd?

Helaas staat mijn website (nog) op mijn xampp test-server op mijn PC, Ik kan heb wel even op een subdomein van mijn webserver zetten, maar ik vrees dat google dat niet leuk vind wegens dubblele content?

Bij voorbaat dank! :)
Groet, Frank
  1. meer dan een maand geleden
  2. Overige vragen
  3. # 9
Patrick Smits
Gebruikersgroep regio Utrecht
Geaccepteerde antwoord Pending Moderation
Als je de site op no index, no follow zet is dubbele content geen enkele probleem. Google leest de site dan niet. Vrees dat de code niet goed is. Waar het in de CSS staat is maakt niet uit, als het maar werkt op de site. Zorg wel dat je niet de core CSS aanpast, maar een custom.css of user.css file gebruikt.
  1. meer dan een maand geleden
  2. Overige vragen
  3. # 10
Geaccepteerde antwoord Pending Moderation
Ok, ik begrijp het nu, zodra de site op een subdomein heb gezet, hoor je het!
Bij voorbaat dank voor de hulp! :)
Met vriendelijke groet,
Frank
  1. meer dan een maand geleden
  2. Overige vragen
  3. # 11
Geaccepteerde antwoord Pending Moderation
Hallo Patrick,

Ik heb mijn website van mijn locale webserver xampp naar mijn hosting provider geüpload,
Je vind hem op: https://www.randagnet.nl

Bij voorbaat dank voor de hulp!
Met vriendelijke groet,
Frank
  1. meer dan een maand geleden
  2. Overige vragen
  3. # 12
Patrick Smits
Gebruikersgroep regio Utrecht
Geaccepteerde antwoord Pending Moderation
Hoi Frank,

Als ik geweten had dat de template gemaakt is in Artisteer had ik gelijk al kunnen zeggen dat artisteer niet geschikt is voor de bouw van responsive websites. De codes die de door het systeem gegenereerd worden zijn groots en moeilijk te doorgronden. Het is daarom lastig om de template om te gooien en er een responsive website van te maken. Kijk eens naar de template van Helix, T3 of joonext. Deze zijn allen responsive en veel beter te configureren.

Groet,
Patrick
  1. meer dan een maand geleden
  2. Overige vragen
  3. # 13
  • Pagina :
  • 1


Er zijn nog geen reacties op dit bericht.
U mag echter niet reageren op dit bericht.