Html'en... Bezig met Strato web... "Het" 'Draait'

Status
Niet open voor verdere reacties.
De website is verre van responsive. Het is eenvoudig uit te testen door je browser smaller te maken.
Valt de website niet netjes in elkaar, of valt de inhoud buiten het venster: Dan is deze niet responsive. In jouw geval valt de text erbuiten.

Kijk bijvoorbeeld eens naar www.tweakers.net, en maak het scherm wat breder en smaller: Je ziet dat het menu zich aanpast, en de linkerkolom verdwijnt, om vervolgens aan de zijkant te verschijnen nadat je op de knop linksboven drukt.

Verder is een HTML-stringetje (noem het maar gerust een 'tag') niet een magisch element die je site meteen responsive maakt.
Het is enkel een hulpmiddel om te vertellen dat je site site bijv. niet ingezoomd hoeft te worden. Ook de breakpoints moet je normaliter in CSS afhandelen. Maar je kan natuurlijk ook het Bootstrap 4 framework gebruiken. maar dan raad ik nog steeds aan om eerst eens te verdiepen in HTML en CSS.

Een groot nadeel van WYSIWYG-editor is de brakke HTML-code die eruit komt.
Vaak, en in dit geval dus ook, inline styling bij alle zelfde elementen. Onleesbare brei met herhalende stylen.

Code: 
<div id="wb_Text1" style="position:absolute;left:57px;top:466px;width:938px;height:61px;z-index:1;text-align:left;">
Kom jij er nog uit?

WYSIWYG beveel ik ook niet aan vanwege:
- Weinig mensen gebruiken het
- Het is niet schaalbaar
- Het is moeilijk te doorgronden doordat het vaak voorzien is van brakke code.
 
Laatst bewerkt:
We zullen er straks eens induiken... nu staan er andere dingen op het programma...
 
Mijn partner heeft nu breakpoints 1024, landscape toegevoegd... helpt dat?
Klik om te vergroten...
Stel dat je overal de horizontale waardes (width, left, enzovoort) zou omzetten in een percentage, dan zijn dit goede breakpoints
Code: 
body > div {
  box-sizing: border-box;
  width: 100%;
  margin: 0 auto;
  padding: 0 15px;
}
@media (min-width: 768px) {
  body > div { max-width: 720px; }
}
@media (min-width: 992px) {
  body > div { max-width: 960px; }
}
@media (min-width: 1200px) {
  body > div { max-width: 1140px; }
}

In de huidige situatie kan je met het aanbrengen van breakpoints geen responsive pagina maken.
Voorbeeld op pagina Doelstelling: <div id="wb_Text1" style="position:absolute; left:96px; top:96px; width:1129px; ....>
De 1129px + 96px geeft een totale breedte van 1225 pixels, dat is 3 a 4 keer de breedte van een smartphone.

Iets over de schermgrootte en responsive pagina's, die hebben niets met elkaar te maken.
Het gaat om de schermresolutie + de view-breedte (het bruikbare deel) van je browser.
Een pagina kan op een 12" 1920x1080 (Full HD) scherm er goed uit zien en op een 24" (1440x900 low budget) scherm niet.
Je kan de view (het bruikbare deel van je browser) smal of breed hebben staan, eenvoudig te testen.
 
bron zei:
Stel dat je overal de horizontale waardes (width, left, enzovoort) zou omzetten in een percentage, dan zijn dit goede breakpoints
Code: 
body > div {
  box-sizing: border-box;
  width: 100%;
  margin: 0 auto;
  padding: 0 15px;
}
@media (min-width: 768px) {
  body > div { max-width: 720px; }
}
@media (min-width: 992px) {
  body > div { max-width: 960px; }
}
@media (min-width: 1200px) {
  body > div { max-width: 1140px; }
}

In de huidige situatie kan je met het aanbrengen van breakpoints geen responsive pagina maken.
Voorbeeld op pagina Doelstelling: <div id="wb_Text1" style="position:absolute; left:96px; top:96px; width:1129px; ....>
De 1129px + 96px geeft een totale breedte van 1225 pixels, dat is 3 a 4 keer de breedte van een smartphone.

Iets over de schermgrootte en responsive pagina's, die hebben niets met elkaar te maken.
Het gaat om de schermresolutie + de view-breedte (het bruikbare deel) van je browser.
Een pagina kan op een 12" 1920x1080 (Full HD) scherm er goed uit zien en op een 24" (1440x900 low budget) scherm niet.
Je kan de view (het bruikbare deel van je browser) smal of breed hebben staan, eenvoudig te testen.
Klik om te vergroten...

Eh.. dus wat er in die tabel staat is toepasbaar in de website?

Nog wat:

Ik heb wat gevonden over responsive webpagina's en content. Kunnen we daar iets mee?
Code: 
<head>
<meta charset="UTF-8" /> <!-- bepaalt welke tekens/karakters-set wordt geladen -->
<meta http-equiv="Cache-Control" content="no-cache"/> <!-- bepaalt of- en hoelang de website-data in het geheugen van de browser bewaard blijft  -->
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /> <!-- instelling nodig voor IExplorer en Chrome -->
<meta name="viewport" content="width=device-width, initial-scale=1" /> <!-- viewport-schaling voor tablets en smarphones -->
<meta name="apple-mobile-web-app-capable" content="yes" /> <!-- yes= fullscreen op iPhone/iPad browser -->
<link rel="apple-touch-icon-precomposed" href="/apple-touch-icon.png" /> <!-- afbeelding (128 x 128 px) voor de button bij toevoegen aan Home-scherm (add to Home Screen) op iPhone/iPad -->
<meta name="mobile-web-app-capable" content="yes" />

mod: code in
Code: 
....
 tag gezet
 
Laatst bewerkt door een moderator:
Zie het commentaar erbij.
 
En zie ook berichtje #41 over de inline styling, die zit op elke pagina in de weg.

Alle berichtjes bij elkaar geeft dit resultaat:
De website kan alleen responsive worden gemaakt door deze opnieuw te maken, gebruik makend van een responsive structuur.
In de website builder 10 die je gebruikt zitten (volgens de maker) breakpoints die je hiervoor kan gebruiken. Op hun website staat meer info.
 
bron zei:
En zie ook berichtje #41 over de inline styling, die zit op elke pagina in de weg.

Alle berichtjes bij elkaar geeft dit resultaat:
De website kan alleen responsive worden gemaakt door deze opnieuw te maken, gebruik makend van een responsive structuur.
In de website builder 10 die je gebruikt zitten (volgens de maker) breakpoints die je hiervoor kan gebruiken. Op hun website staat meer info.
Klik om te vergroten...

Daar waren we al ingdoken... :) Gaan even verder neuzen hoe en wat, want het schijnt met WB10 wel mogelijk te zijn om (beperkt denk ik) een responsive site te maken.
 
Waarom blijf je nog op versie 10 hangen, en upgrade je niet naar versie 16?
 
Een voorbeeldje gemaakt wat een beetje op jouw homepage lijkt, maar dan responsive.
Ik heb het zoveel mogelijk jip-janneke gehouden. Het is niet een template zoals ik 'm normaal zou maken.
Je hebt alleen index.html en style-algemeen.css nodig. En je plaatjes natuurlijk, verder niets.

Om niet telkens het wiel opnieuw uit te vinden heb ik het volgende gebruikt.
- bootstrap-reboot : haalt verschillen weg tussen browsers en apparaten, en het is een goede basis.
- bootstrap-grid : hiermee kan je een responsive indeling maken.

Een responsive indeling maak je in een grid (als in een matrix) die je kan laten veranderen bij kleinere/grotere schermen.
Hoe dit werkt vind je op https://getbootstrap.com/docs/4.5/layout/grid/
Ook vind je uitleg op https://www.w3schools.com/bootstrap4/bootstrap_grid_system.asp

De hamvraag is: werkt dit in een oude WebBuilder zoals je die nu gebruikt? Dat weet ik niet.
 

Bijlagen

  • responsive-voorbeeld.zip
    11 KB · Weergaven: 18
PHP4U zei:
Waarom blijf je nog op versie 10 hangen, en upgrade je niet naar versie 16?
Klik om te vergroten...

€€€ hè?... Wij zoeken een volledig gratis, volledig werkend programma zonder ad-poeha en dan gaan we al gauw "met de metro".
 
bron zei:
Een voorbeeldje gemaakt wat een beetje op jouw homepage lijkt, maar dan responsive.
Ik heb het zoveel mogelijk jip-janneke gehouden. Het is niet een template zoals ik 'm normaal zou maken.
Je hebt alleen index.html en style-algemeen.css nodig. En je plaatjes natuurlijk, verder niets.

Om niet telkens het wiel opnieuw uit te vinden heb ik het volgende gebruikt.
- bootstrap-reboot : haalt verschillen weg tussen browsers en apparaten, en het is een goede basis.
- bootstrap-grid : hiermee kan je een responsive indeling maken.

Een responsive indeling maak je in een grid (als in een matrix) die je kan laten veranderen bij kleinere/grotere schermen.
Hoe dit werkt vind je op https://getbootstrap.com/docs/4.5/layout/grid/
Ook vind je uitleg op https://www.w3schools.com/bootstrap4/bootstrap_grid_system.asp

De hamvraag is: werkt dit in een oude WebBuilder zoals je die nu gebruikt? Dat weet ik niet.
Klik om te vergroten...

YOU ARE AMAZING!! :D Me likes!
 
!!Even Dit!!

Sinds vandaag krijgen we en gaan we mail krijgen over de website...

-----Oorspronkelijk bericht-----
Van: example@example.com
Verzonden: donderdag 22 oktober 2020 17:10
Aan: xxxxxxxxxx@xxxxx.nl
Onderwerp: website

Beste,

Kan ik even samenzitten met enkle van jullie websitebouwers.

Groetjes Lieven.

Dit gaat NIET gebeuren!

Het is niet de bedoeling dat we ondergespammed gaan worden met "zooi" betreffende de 'look' en functionaliteit van de website.
Daar hebben we hier dit fantastisch forum voor waar we enorm vooruit worden geholpen door diverse welwillende leden.

Waarvoor onze dank.

Jack Bax (Lupus)

mod: email van iemand anders verwijderd en tekst op normale grootte gezet.
 
Laatst bewerkt door een moderator:
Eh....zou toch maar even al die emailadressen verwijderen......zo krijg je nog meer spam.
 
Lupus zei:
€€€ hè?... Wij zoeken een volledig gratis, volledig werkend programma zonder ad-poeha en dan gaan we al gauw "met de metro".
Klik om te vergroten...
Onthoud wel dat het nu al 6 jaar achterloopt, en dat je tegenwoordig al betere code en functionaliteit hebt.
Als je het echt gratis wilt doen, dan kan je ook HTML5, CSS en JS leren. Er zijn daarvoor een hoop gratis editors die je het makkelijk maken. ;)
 
In de html van je website pagina heb je dit gezet
Code: 
<a href="mailto:..........@ziggo.nl">..........@ziggo.nl</a>

Elke (spam)bot leest dit en kan je spam sturen. Daar is geen "human" voor nodig.
 
bron zei:
In de html van je website pagina heb je dit gezet
Code: 
<a href="mailto:..........@ziggo.nl">..........@ziggo.nl</a>

Elke (spam)bot leest dit en kan je spam sturen. Daar is geen "human" voor nodig.
Klik om te vergroten...

Zal het er morgen even uit halen...
 
Tegen dan hebben de spambots hun werk al lang gedaan !!! Dit adres zit nu in lijsten voor spammers over de ganse wereld gestockeerd.
 
Hold on! Die e-mail die hier gepubliceerd werd lijkt mij niet bepaald iets van een spambot. Het feit blijft wel dat je voorzichtig moet zijn met een e-mailadres op een website te publiceren, maar volgens mij zijn de meeste spamfilters inmiddels wel volwassen genoeg om de rotzooi eruit te filteren. Ik zie bijvoorbeeld weinig mailadressen met letterlijk een (a) als apenstaartje om het 'harvesten' tegen te gaan.
 
Beter lezen helpt ...
De opmerking was "In de HTML van je website ..." en daar staat uiteraard wél het ganse mailadres.
 
Status
Niet open voor verdere reacties.
Steun Ons

Nieuwste berichten

Terug
Bovenaan Onderaan