Smartphone negeert de laatste in een serie breaks <br /> binnen een div

[Aloneal]

Mijn site is klaar en online en werkt goed. Ik ben aardig tevreden met het resultaat. Er is echter één detail wat ik jammer vind. Dit heeft ermee te maken dat er een kleine layout wijziging plaatsvindt bij bezoek via smartphone.

Ik maak gebruik van opsommingen en heb daarvoor de volgende CSS:

.opsomming {
position: relative;
width: 30px;
text-align: left;
height: auto;
float: left;
padding: 0px;
}

In HTML komt er dan zoiets te staan:

<div class="opsomming">-<br /><br /><br /></div> Text text textText text textText text textText text textText text textText text textText text textText text textText text textText text textText text textText text textText text textText text text. <br />
<div class="opsomming">-</div> Text text textText text textText text textText. <br />

De breaks in de div is om alle regels van de (soms wat langere) tekst naar rechts te duwen.

Dit werkt in alle browsers goed. Echter op mijn smartphone (Android) wordt de laatste regel van iedere tekst niet naar rechts geduwd. Je zou denken dat de smartphone browser graag een break erbij heeft.

Kent iemand het probleem en is het op te lossen?

Het is een minor issue omdat mijn site niet voor smartphone is ontworpen, maar het is toch leuk als het daar óók tot in details in orde kan zijn.

Alvast bedankt.

 

[DJJochem]

Lijkt me eerder een probleem bij Android dan jouw site.
Geef me de URL eens, dan kan ik het proberen.

 

[Aloneal]

Ik ben nu niet thuis maar ik zal vanavond of morgen even proberen een dummy page aan te maken. Overigens denk ik dat er misschien een oplossing is. Op de een of andere manier maakt Android aan de rechterkant van de main div ruimte waar de tekst niet uitgevuld wordt. Dit gebeurt niet op pagina's waar ik binnen de main div óók een sub div heb staan met CSS float: right;

Dus ik zal morgen ook uit proberen om een lege sub div aan de rechterkant te laten floaten. Kijken of dan de tekst gewoon over de volle breedte van de main div wordt uitgevuld.

Tips blijven welkom natuurlijk. Morgen geef ik nog een reactie.

---edit---

Inmiddels heb ik een kale dummy pagina aangemaakt om het probleem te laten zien: *verwijderd*
Check je normale pc/laptop en je (Android) smartphone.

Hopelijk weet iemand raad, want een lege rechts floatende div werkte zojuist niet (maar misschien moet ik wat verder daarmee experimenteren).

---edit 2---

Om de opsomming in één div te zetten i.p.v. verschillende kleine (wat achteraf logischer was geweest ook) helpt ook al niet. Android negeert bij mij gewoon die div als er een break ipv tekst staat.

---edit 3---

Oke, zo moet je het dus oplossen: Opsomming in een (of meerdere) div's (float: left, de tekst die rechts moet blijven staan die moet je in een apparte div met zetten met float: right; Zet je de tekst in een div met float: left; dan werkt het niet.

Het is wel even wat extra werk op een 30-tal pagina's, maar dat moet dan maar even. De link heb ik maar weer verwijderd.

 

[petje11]

Ik zie het probleem eigenlijk niet. de dummypage ziet er op mijn smartphone exact hetzelfde uit als op mijn pc.

Edit: je hebt hem net aangepast begrijp ik.

 

[Aloneal]

Dat had ik inderdaad Petje, en het probleem leek opgelost. Totdat ik het bij één van mijn echte webpagina's uitprobeerde. Nu werpt Android de rechts floatende textbox helemaal onder de opsomming (terwijl het in de standaard pc browsers weer allemaal prima werkt.

Ik heb opnieuw de dummy page geupload met een voorbeeld van mijn originele layout op http://www.aejlhs.com/mobileproblems.html

Als iemand er nog naar wil kijken zou dat fijn zijn.

---Edit---

Ik heb een Samsung Nexus S. Ik gebruik de standaard geinstalleerde browser. Android versie 4.1.2.

 

[csshunter]

Hoi Aloneal,
Eigenlijk is het gebruiken van een "afstand-div" met (lege) <br />'s zo'n beetje vragen om moeilijkheden.

• <br />'s zijn niet voor opmaak bedoeld!
• Op deze manier is het aantal benodigde <br />'s afhankelijk van de hoeveelheid tekstregels ernaast.
  
  
• Wil je achteraf iets in de tekst aanpassen (veranderen, toevoegen, weghalen), dan kan het vies fout gaan en moeten de <br />'s handmatig worden bijgesteld. Dat is niet lekker werken!
  
  
• Mocht de bezoeker de lettergrootte opschalen in zijn/haar browser, omdat dat voor hem/haar nodig is om de inhoud te kunnen lezen, dan kan de tekst-inhoud naar een volgende regel springen > en daar staat dan net geen <br /> voor!

Maar ... waren er in een ver, ver verleden niet eens <ul>'letjes bedacht?
De standaard-manier om opsommingslijstjes te maken, die vanzelf rekening houden met inspringen: snel werken en altijd prijs!
En in een minder ver verleden: mooie css uitgevonden om die <ul>'s en <li>'s precies zo op te maken zoals je het wilt hebben?

• Testerdetest: opsomming.htm

Benieuwd wat de Android er van maakt!
Met vriendelijke groet,
CSShunter

[edit]Geïmplanteerd op je testpagina wordt het dan deze:[/edit]

• no-mobile-problems.htm (?)

 

[Aloneal]

Bedankt CSS Hunter!!!

In mijn autodidactisch leerproces had ik nog niks opgepikt van <ul>etjes en <li>tjes. Ik post hier regelmatig, maar dat is omdat ik een redelijke amateurist ben in HTML/CSS en niet, zoals jij, een kenner. Ik heb heel veel aan de tips die je geeft. Zeker hier ook weer! Ik kan flink aan de slag met deze info! :thumb:

---Edit---

Nog een vraagje: is er ook zo'n handige code voor opsommingen? Dus:
1)
2)
3)


---Edit 2---

Oke, <ol> dus...

 

[csshunter]

Oke, <ol> dus...

Ja, en er zijn ook nog andere mogelijkheden:

• 01, 02, 03, .., 09, 10, 11, ... enz. (met voorloop-nul)
• i, ii, iii, iv, ... (op z'n latijns, kleine letters)
• I, II, III, IV, ... (idem, hoofdletters)
• a, b, c, d, ...
• A, B, C, D, ...
• en nog een stel (bv. kleine vierkantjes, open cirkeltjes).

Het overzicht:

• In de officiële css-specificatie: [url]www.w3.org/TR/CSS2/generate.html#lists[/URL].
• In de css-wiki van w3c (wat makkelijker te lezen): [url]www.w3.org/wiki/CSS/Properties/list-style-type[/URL].

Maar niet alle mogelijkheden draaien in alle browsers:

• Zie de compatibility-tabel bij quirksmode: [url]www.quirksmode.org/css/lists.html[/URL].
• En ook de toelichtingen bij de css-reference van sitepoint: reference.sitepoint.com/css/list-style-type

Speciaal aanbevolen voor autodidactische leerprocessen: de startpagina's van deze 4 opnemen in je Favorieten!
Zo ben ik ook begonnen: flink daarin bladeren en ermee experimenteren om snel de status van rookie achter je te laten.

Met vriendelijke groet,
CSShunter
______
PS: Met een background-image (met no-repeat) voor de <li>'s kan je ook eigen fabrikaat markers tonen: driehoekjes, pijltjes, wat je maar wilt. Daarbij zet je dan de list-style op none, om de gewone markers weg te laten.
Officieel kan het ook met een list-style-image, maar die doen het niet in Opera. Background-images wel!

 

[Aloneal]

Ze staan nu in mijn favo's.

Ikdiv een appart topic nog een vraag over ul ol en li gesteld.


---Edit---

De problemen zijn nog niet helemaal opgelost. Met de voetnoten werkt het perfect. Ik heb echter ook een pagina waar ik nu dus een opsomming heb staan met <ul> en <li> met daarachter een paginanummer. Hierbij staat de tekst met <ul><li> in <div1> en het paginanummer in <div2> met <br />

De tekst moet links uitgelijnd worden en de paginanummers rechts. Maar de paginanummers moeten op dezelfde lijn blijven staan als de gerelateerde tekst. Kan ik dat voor elkaar krijgen? Mijn mobiel maakt soms dus van één lijn twee lijnen bij de tekst, maar het paginanummer daarachter verspringt natuurlijk niet mee.

---edit---

Ik zou misschien voor iedere lijn twee divs in één div kunnen zetten. Dat geeft wel veel code. Is het een gangbare/sjieke oplossing?