Semantische tekst, lijst en tabellen 600px

[Vonstrain]

Niet mer van toepassing

[ Voor 97% gewijzigd door Vonstrain op 19-01-2016 15:56 ]

[NMe]

Wat is nu je probleem/vraag?

[Vonstrain]

NMe schreef op maandag 04 januari 2016 @ 17:08:
Wat is nu je probleem/vraag?

Ik heb het aangepast, mijn excusses
De vraag is hoe verwerk ik dit in mijn html/css code?

[F.West98]

Dat zou toch gewoon in je boek moeten staan lijkt mij?
Anders staat er ook heel veel gewoon op internet, zoek eens naar "semantic tags", "float columns" en "media tags css". Ik denk dat je dan al een heel stuk wijzer bent.

[NMe]

Sorry, maar ook dat is geen vraag. Je omschrijft een design waarbij je eigenlijk vrijwel alle HTML en CSS ook al omschrijft. Wat heb je nu? Waar loop je tegenaan? Wat gaat er fout? Wat gaat er precies niet goed? Zie De Quickstart.

Floats zouden bij te weinig ruimte al automatisch onder elkaar terecht moeten komen. De rest is een kwestie van de juiste widths/maxwidths opgeven en eventueel met wat mediaquery's werken. Als je helemaal hip wil doen (en er meer voordeel uit kan halen dan alleen dit kleine dingetje) dan kun je eens naar Bootstrap kijken.

[_Thanatos_]

NMe schreef op maandag 04 januari 2016 @ 17:25:
dan kun je eens naar Bootstrap kijken.

Dat lijkt me niet zo verstandig bij een schoolopdracht, waar het juist de bedoeling is dat je er iets van leert en het zelf maakt. Een kant-en-klaar (crap, imho) framework pakken staat daar lijnrecht tegenover (en zal door de docent ook als zodanig worden beoordeeld, ga ik vanuit).

Maak een media-query die je laat breken op 600px. Of nee, op 37.5em zelfs iirc. Pixels zijn zoom-agnostisch en dat wil je niet. In die mediaquery laat je de floats voor je kolommen vervolgens niet meer floaten. De rest moet wel lukken

[NMe]

_Thanatos_ schreef op maandag 04 januari 2016 @ 17:44:
[...]

Dat lijkt me niet zo verstandig bij een schoolopdracht, waar het juist de bedoeling is dat je er iets van leert en het zelf maakt. Een kant-en-klaar (crap, imho) framework pakken staat daar lijnrecht tegenover (en zal door de docent ook als zodanig worden beoordeeld, ga ik vanuit).

Er zijn vast ook leraren die wel een "right tool for the job"-mentaliteit hebben. Je persoonlijke mening over bootstrap neemt niet weg dat het wereldwijd heel veel gebruikt wordt en zeker zijn doel dient. Maar als de leraar wil dat je het helemaal zelf doet zonder überhaupt naar libraries te kijken dan is er de rest van mijn post.

Maak een media-query die je laat breken op 600px. Of nee, op 37.5em zelfs iirc. Pixels zijn zoom-agnostisch en dat wil je niet. In die mediaquery laat je de floats voor je kolommen vervolgens niet meer floaten. De rest moet wel lukken

Als een gefloat element niet naast een ander gefloat element past omdat je het venster smaller sleept dan staat 'ie vanzelf al onder dat element, daar hoef je de float niet voor weg te halen.

[_Thanatos_]

NMe schreef op maandag 04 januari 2016 @ 17:53:
Als een gefloat element niet naast een ander gefloat element past omdat je het venster smaller sleept dan staat 'ie vanzelf al onder dat element, daar hoef je de float niet voor weg te halen.

Dat ligt eraan hoe je de floats gemaakt hebt. Met vaste breedte wordt het al lelijk als ze onder elkaar vallen. Ze behouden dan hun breedte. Dus helemaal vanzelf gaat het niet. Maar als je ze een procentuele breedte hebt gegeven, vallen ze nooit onder elkaar (en dat is wat ik meestal doe). Vandaar.

Als je zonder mediaqueries wilt werken, kom je al gauw bij flexbox uit.

[ Voor 8% gewijzigd door _Thanatos_ op 04-01-2016 20:06 ]

[NMe]

Max-width van 100% doet vaak ook veel.

[OkkE]

Vonstrain schreef op maandag 04 januari 2016 @ 16:54:

Ik dien mijn website te voorzien van semantische tags om de inhoud te beschrijven.

Dus, je begint met HTML5 elementen voor de structuur.

Daarna dien ik de lijsten en tabellen op te maken met behulp van CSS.

Tabellen en lijsten stijlen met CSS.

Ten slotte moet de tekst van de homepage in twee kolommen, die naast elkaar staan, door middel van float. Op schermen die smaller zijn dan 600px moeten de kolommen echter weer onder elkaar komen te staan.

Het idee hier bij is dat je de kolommen float en een width:100% geeft om mee te beginnen en dan op een bepaalde breedte Media Query toevoegt, waarbij je de breedte van de kolommen op 50% zet.

Pro-tip: stel ook een box-sizing:border-box in op de kolommen zodat je ze padding kunt geven zonder problemen.

Hoe verwerk ik dit in mijn html/css code?

Mocht iemand nog aanvullende informatie hebben of mijn CSS code, dan hoor ik het graag

Mocht je verder specifieke vragen hebben over een stukje CSS of HTML dat je gemaakt hebt: plaats dat stukje code hier en wij kunnen je vast verder helpen.