Mobiel internet

Frank01
Onderwerp Auteur
Gebruiker
website-portal met toeristische links in de kop van Noord-Holland

Lees meer

28 jan 2019 19:11 #18855 door Frank01

Mobiel internet werd gestart door Frank01

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

Discussie gesloten.

Patrick
Gebruiker
Joomla Enthousiasteling

Lees meer

29 jan 2019 04:16 #18856 door Patrick

Beantwoord door Patrick in topic Mobiel internet

Een voorbeeld staat hier:

2 kolommen

Het breekpunt van een mobiel is 350/375px ipv 600px.

Discussie gesloten.

Frank01
Onderwerp Auteur
Gebruiker
website-portal met toeristische links in de kop van Noord-Holland

Lees meer

29 jan 2019 06:52 #18857 door Frank01

Beantwoord door Frank01 in topic Mobiel internet

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

Discussie gesloten.

Patrick
Gebruiker
Joomla Enthousiasteling

Lees meer

29 jan 2019 07:07 #18858 door Patrick

Beantwoord door Patrick in topic Mobiel internet

Hoi Frank,

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

Groet,
Patrick

Discussie gesloten.

Frank01
Onderwerp Auteur
Gebruiker
website-portal met toeristische links in de kop van Noord-Holland

Lees meer

29 jan 2019 20:53 #18868 door Frank01

Beantwoord door Frank01 in topic Mobiel internet

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

Discussie gesloten.

Patrick
Gebruiker
Joomla Enthousiasteling

Lees meer

29 jan 2019 21:02 #18869 door Patrick

Beantwoord door Patrick in topic Mobiel internet

Dat kan, alleen dan moet je voor beide kolommen een aparte class maken.

Ik probeer het met onderstaande code te verduidelijken:

Code:

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

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

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

Vergeet de responsive niet:

Code:

@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

Discussie gesloten.

Frank01
Onderwerp Auteur
Gebruiker
website-portal met toeristische links in de kop van Noord-Holland

Lees meer

29 jan 2019 21:42 #18871 door Frank01

Beantwoord door Frank01 in topic Mobiel internet

Hoi Patrick,

Bedankt voor de snelle reactie!

Ik ga er morgen mee aan de slag!

Vriendelijke groet,
Frank

Discussie gesloten.

Frank01
Onderwerp Auteur
Gebruiker
website-portal met toeristische links in de kop van Noord-Holland

Lees meer

30 jan 2019 19:29 #18874 door Frank01

Beantwoord door Frank01 in topic Mobiel internet

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

Discussie gesloten.

Patrick
Gebruiker
Joomla Enthousiasteling

Lees meer

30 jan 2019 20:34 #18875 door Patrick

Beantwoord door Patrick in topic Mobiel internet

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?

Discussie gesloten.

Frank01
Onderwerp Auteur
Gebruiker
website-portal met toeristische links in de kop van Noord-Holland

Lees meer

30 jan 2019 21:06 #18876 door Frank01

Beantwoord door Frank01 in topic Mobiel internet

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

Discussie gesloten.

Gemaakt door Kunena