Rare afbreking in het voetdeel van webstek

[GerardX]

Eens kijken of het lukt om verhelderende afbeeldingen bij mijn vraag te plaatsen.

Wanneer ik het 'browser"-venster versmal, wordt de tekst in het voetdeel van mijn webstek (in ontwikkeling) op een rare manier afgebroken (zie bijgaande afbeelding).

Van de van invloed zijnde stijl heb ik ook een afbeelding geplaatst.

Iemand een idee wat de oorzaak is en hoe die te verhelpen?

 

[bron]

Hey GerardX, andere gebruikers op dit forum kunnen helaas niet helpen zonder relevante html/css code. Een screenshot is niet werkbaar. Het lijkt erop dat je de pagina op je pc hebt staan, dan zijn er 3 mogelijkheden

- code (het gedeelte waar het om gaat) hier in een bericht plakken.
- code in een JSFiddle (klik) zetten en het linkje hier delen.
- de pagina online zetten en het linkje hier delen.

 

[bron]

Een afbeelding invoegen kan alleen in de wysiwyg modus.

- Klik op knop "Ga geavanceerd" (onder bericht vak)
- Klik daarna op knopje A/A (links op werkbalk)

Klik op de plek waar de afbeelding moet komen. De rest weet je

 

[GerardX]

Hey GerardX, andere gebruikers op dit forum kunnen helaas niet helpen zonder relevante html/css code. Een screenshot is niet werkbaar.

Waarom niet? Wanneer ik in het kader "Bijgevoegde kleine afbeeldingen" op zo'n afbeelding klik, verschijnt dat venstergroot en is de de betreffende pagina en de daarbij behorende CSS3 uitstekend te lezen. Niettemin, zal ik op basis van jouw hierna volgende bericht nogeens kijken, hoe ik dingen beter kan doen.

Het lijkt erop dat je de pagina op je pc hebt staan, dan zijn er 3 mogelijkheden

- code (het gedeelte waar het om gaat) hier in een bericht plakken.
- code in een JSFiddle (klik) zetten en het linkje hier delen.
- de pagina online zetten en het linkje hier delen.

Helaas is het momenteel zo, dat ik zit te wachten op een nieuwe 'router', maar door gebrek aan 'chip's is het de vraag hoe lang ik nog moet wachten. Dit betekent, dat ik dingen op een 'stick' moet zetten en er vervolgens mij naar de bibliotheek moet om daar die dingen weer op "HelpMij" te krijgen. Een heel gedoe dus. Over een uurtje sluit de bieb en maandag kan ik daar pas om 13.oo uur weer terecht.

 

[bron]

Je kan in je console (plaatje 2 hierboven) de html kopiëren (rechter muisknop) en hier plakken.
Dan hoef je niet langs de bieb

Wanneer ik in het kader "Bijgevoegde kleine afbeeldingen" op zo'n afbeelding klik, verschijnt dat venstergroot en is de de betreffende pagina en de daarbij behorende CSS3 uitstekend te lezen.

Een vraag over css kan alleen goed worden beantwoord als de bijbehorende html bekend is.
Zonder html krijg je algemene "heb je hiernaar gekeken?" antwoorden, bijvoorbeeld "Heb je naar @media gekeken?"

 

[GerardX]

Een afbeelding invoegen kan alleen in de wysiwyg modus.

- Klik op knop "Ga geavanceerd" (onder bericht vak)
- Klik daarna op knopje A/A (links op werkbalk)

Klik op de plek waar de afbeelding moet komen. De rest weet je

Vele vloeken later (ik wordt er gek van dat dingen telkens foetsie zijn, anders reageren dan ik gewend be, je niet simpele iets van de ene plek naar de andere kunt verslepen enz. enz.) lijkt het er op dat het nu iets beter is gelukt?

 

[GerardX]

Een afbeelding invoegen kan alleen in de wysiwyg modus.

- Klik op knop "Ga geavanceerd" (onder bericht vak)

Waar kan ik die @#$% vinden?

- Klik daarna op knopje A/A (links op werkbalk)

Ggggggrrrr waar?

Klik op de plek waar de afbeelding moet komen. De rest weet je

Met veel pijn en moeite (vraag niet hoe) bleken de betreffende bestanden in een kader in mijn bericht terecht te zijn gekomen. Tjonge jonge wat een opgaaf.

Prettig weekend verder.

 

[Aar]

Ik geef toe dat het uploaden van afbeeldingen op deze site, niet altijd even makkelijk werkt. Als Bron's stappen te lastig zijn kan je ook altijd op www.imgbb.com een afbeelding uploaden, en de UBB-code hier plakken.

Code-voorbeelden kunnen prima op JSfiddle.net. Een ideale 'zandbak' om in te (samen)werken. Aanrader. Ken je het niet.... Probeer het uit!

 

[femke98]

Wanneer ik het 'browser"-venster versmal, wordt de tekst in het voetdeel van mijn webstek (in ontwikkeling) op een rare manier afgebroken (zie bijgaande afbeelding).

Mijn vraag is welk deel van de footer is niet goed, want ik zie het niet. Geef even aan om welke tekst het gaat in de footer.

Zie trouwens het screenshot zodat de tekst beter te zien is.

Is de rest wel oké? Anders is je website niet responsive.

Edit: nu zie ik wat je bedoeld, het is de zin:

Deze webstek werd gemaakt door mij.......etc.
Ik ga even het andere plaatje van je bekijken, maar dat kan ik natuurlijk niet veranderen. Vandaar dat men je vraagt of je zit kan kopieeren en in code wilt zetten.
Is niet zo moeilijk, Je hebt de webstek op je pc. Kopieer de footer tekst (je hebt er nu een plaatje van gemaakt, maar je moet de tekst kopieeren)
Daarna pak je in het tekstveld van Helpmij de knop # (naast de quoteknop en de knop <>.
Dan krijgen we de code te zien en kunnen we er wat mee.

Succes.

Edit 2: heb het plaatje bekeken, hier kunnen inderdaad niets mee. Wij willen ook graag zien hoe je de tekst in de footer gezet heb. Dus niet alleen de code maar ook de tekst. Dus de html ervan.

 

[bron]

Waar kan ik die drukknoppen vinden?

Achtergrond info: Het forum staat standaard op BBcode omdat dit voor de meeste gebruikers prettig werken is. Nadeel hiervan is dat het invoegen van een afbeelding "2 klikken extra kost".

Helpmij heeft graag dat je afbeeldingen op dit forum upload en niet op sites van derden. Bovendien gaat dit sneller.

- Klik op "Ga geavanceerd" (onder het tekstvak waar je het bericht typt)



- Klik daarna op knopje A/A (je schakelt van BBcode naar wysiwyg)



That's all, 2 extra klikken valt best mee.

 

[GerardX]

Je kan in je console (plaatje 2 hierboven) de html kopiëren (rechter muisknop) en hier plakken.

Dat de HTML correct werkt, is op te maken uit het feit, dat de voet correct getoond op alle pagina's waarvan een voorbeeld van de "index.html"-pagina (plaatje 1). Alle opmaak zit, zoals het hoort, in CSS in een apart CSS-bestand "stijlen.css". Niettemin, bedankt voor de tip.

Een vraag over css kan alleen goed worden beantwoord als de bijbehorende html bekend is.

Lijkt me sterk, want wat voegt dat toe? HTML doet immers niets en bevat slechts inhoud, waaronder "ankers" waaraan opmaakstijlen gekoppeld zijn.

 

[Aar]

Dat de HTML correct werkt, is op te maken uit het feit, dat de voet correct getoond op alle pagina's waarvan een voorbeeld van de "index.html"-pagina (plaatje 1). Alle opmaak zit, zoals het hoort, in CSS in een apart CSS-bestand "stijlen.css". Niettemin, bedankt voor de tip.

Lijkt me sterk, want wat voegt dat toe? HTML doet immers niets en bevat slechts inhoud, waaronder "ankers" waaraan opmaakstijlen gekoppeld zijn.

Dus je denk dat we meteen moeten uitgaan dat je HTML foutloos is? Ik heb wel vaker gezien dat mensen met foute classes/ID's in de HTML een buggend design hadden.
Dus wees gewoon compleet met het plaatje. Deel gewoon de HTML én CSS. En bij sterke voorkeur op www.jsfiddle.net. Een betere zandbak in in samen te werken zal je niet vinden, denk ik.

 

[GerardX]

Html (bij CSS)

Bij deze, voor de volledigheid, op veler verzoek.

<div id="voet">
   Deze webstek werd door <a href="mailto:mijnnaam@example.nl">mij</a> ontworpen op een Raspberry Pi met het RaspberryPi(Linux)-besturingssysteem en het Geany-ontwikkelingsprogramma.
</div>

Terzijde:
Het verschijnsel doet zich voor bij de 'browser's Chrome en Internet Explorer 11. Vreemd genoeg niet bij de kleine 'browser' NetSurf.


mod. emailadres vervangen door dummy adres en html in

.....

tags gezet

 

[GerardX]

That's all, 2 extra klikken valt best mee.

Plaatjes zijn vaak zeer helpvol. Bedankt. Heb het afgedrukt voor tot het in m'n genen zit.

 

[GerardX]

Is de rest wel oké? Anders is je website niet responsive.

Ja, de rest mankeert t.n.t. niets.

Edit: nu zie ik wat je bedoeld, het is de zin:

Deze webstek werd gemaakt door mij.......etc.

Inderdaad.

Wij willen ook graag zien hoe je de tekst in de footer gezet heb. Dus niet alleen de code maar ook de tekst. Dus de html ervan.

Zie mijn bericht waarin ik die HTML-code heb vermeld.

 

[femke98]

Haal even je e-mail adres af, spam je kent het wel.

En, heb je daar in de footer kolommen gemaakt? Het lijkt er zo op. Of dat je het in het thema (neem aan dat je die zelf gemaakt hebt?) verwerkt hebt.
Of is het een bestaand thema? Daarom ook even de CSS en alles wat er bij hoort. Anders kunnen we niets.

 

[Aar]

Of doe niet moeilijk, en zet het in JSfiddle.net.
HTML bij HTML, CSS bij CSS en runnen en saven maar.

 

[bron]

html bij #13 mankeert niets aan dus het is de html daar omheen, of het is andere css die de vormgeving beïnvloedt

 

[bron]

Het verschijnsel doet zich voor bij de 'browser's Chrome en Internet Explorer 11.

Dat IE11 niet correct werkt kan heel goed, de oude IE11 heeft geen goede flexbox support (display: flex).
Om IE11 compatibel te maken zal je -ms- css eigenschappen ook erbij moeten zetten.

Chrome, Edge en Firefox hebben een goede flexbox support.

Aanvulling: display: flex in #voet is overbodig omdat er, volglens bericht #13, alleen tekst in staat.

 

[Aar]

Over Internet Explorer 11 gesproken:



It's partytime!


mod. foto verkleind.