[HTML/CSS] Aside is niet netjes rechts

[Dutchredgaming]

Geachte Tweakers,

Ik moet voor school een opdracht maken: een website maken over olympische sport.
Ik heb gekozen voor volleybal.

Ik wil de de asside naast mijn tekst (article) plaatsen, maar hij is maar onder me webpagina.
Kan iemand me helpen

<DELETED>

[ Voor 130% gewijzigd door Dutchredgaming op 11-01-2016 22:22 ]

[Strunkie]

Ok laat ik het netjes houden, je code is een grote spaghetti die niet eens fatsoenlijk werkt in Chrome.
Als je 2 divs naast elkaar wilt plaatsen bijv. een section en een aside dan moet je zoals je volgens mij ook gedaan hebt float gebruiken. Er moet dan wel ruimte zijn anders wordt de div eronder gedrukt.

Check mijn Fiddle maar even:
https://jsfiddle.net/6sjao7zb/

Check trouwens even Bootstrap of Foundation, dan is het een kwestie van styling, ideaal voor schoolprojecten.

[ Voor 13% gewijzigd door Strunkie op 09-01-2016 23:22 ]

[Shivs]

Ik heb net even je HTML bekeken in mijn editor en ik denk dat je moet beginnen met alles netjes neer te zetten. Dan zal je zien dat je een aantal fouten hebt gemaakt. Als voorbeeld geef ik je er alvast twee:

Je eerste header (met ID "content") wordt gesloten voor een article en een section. Beide worden echter geopend in de header en zouden dus afgesloten moeten zijn voordat je de header sluit.

Op regel 67 van de code moet de DIV worden gesloten, niet geopend.

Let op dat er nog een aantal in zitten die mogelijk invloed hebben op de werking van de pagina. Je zal zelf even goed moeten zoeken en kijken wat er niet goed staat, maar daarna denk ik dat je er al bent.

[DJMaze]

Strunkie schreef op zaterdag 09 januari 2016 @ 23:21:
Ok laat ik het netjes houden, je code is een grote spaghetti die niet eens fatsoenlijk werkt in Chrome.
Als je 2 divs naast elkaar wilt plaatsen bijv. een section en een aside dan moet je zoals je volgens mij ook gedaan hebt float gebruiken.

Dat van die "spaghetti" ben ik met je eens, maar.... "float"? HELL NO!
Float is voor totaal andere dingen bedoelt.

Welke css er wel voor bedoelt is, is: display table en table-cell

Heb er laatst nog ff snel één in elkaar geflanst, zie daarvoor cafedeboergroningen.nl met inspect element op #content en #content > aside

[Strunkie]

DJMaze schreef op zondag 10 januari 2016 @ 13:25:
[...]

Dat van die "spaghetti" ben ik met je eens, maar.... "float"? HELL NO!
Float is voor totaal andere dingen bedoelt.

Welke css er wel voor bedoelt is, is: display table en table-cell

Heb er laatst nog ff snel één in elkaar geflanst, zie daarvoor cafedeboergroningen.nl met inspect element op #content en #content > aside

Er zijn simpelweg 3 oplossingen:
- Float: Geen last van dat je content de containers uit elkaar drukken.
- Table-cell: Content kan je container uitelkaar drukken.
- inline-block

Om nou table-cell te kiezen uit deze? Alle frameworks zoals Foundation, Bootstrap e.d. gebruiken allemaal float. Wat mij betreft the way to go.

[NMe]

DJMaze schreef op zondag 10 januari 2016 @ 13:25:
[...]

Dat van die "spaghetti" ben ik met je eens, maar.... "float"? HELL NO!
Float is voor totaal andere dingen bedoelt.

Nou nou, toe maar. Waar zijn floats dán voor bedoeld volgens jou? Floats zijn net zo goed gewoon valide als oplossing in dergelijke gevallen, afhankelijk van je precieze doel...

Strunkie schreef op zondag 10 januari 2016 @ 13:45:
Alle frameworks zoals Foundation, Bootstrap e.d. gebruiken allemaal float.

Bootstrap is AFAIK stappen aan het zetten om (in elk geval optioneel) flex te gebruiken in plaats van floats, en stiekem heeft dat volgens mij voor dat soort frameworks wel de toekomst. Floats zijn nu vooral makkelijk in dat soort generieke toepassingen omdat je fijn met een grid kan werken dat verschillende dingen doet op verschillende resoluties, wat je met table-layouts een stukje lastiger afgaat (maar volgens mij ook niet onmogelijk is).

[ Voor 43% gewijzigd door NMe op 10-01-2016 17:55 ]

[DJMaze]

Float is bedoelt voor bijvoorbeeld afbeeldingen zodat tekst er omheen staat en niet inline.
Nadeel van float is dat je vervolgens een "clear" nodig hebt om verder te gaan.

Vroeger bestond table-cell niet en werd "float" gebruikt om het "table" element niet te hoeven toepassen om kolommen te realiseren.

Ga maar experimenteren met de CSS, je zal merken dat verschillende situaties verschillende resultaten leveren op verschillende scherm resoluties.

Merk ook op dat bij float:right op de aside, de aside als eerste in je html structuur moet. Dit voelt dan aan als "prio" content en daarna pas de rest.
Bij float:left op de content heb je weer een probleem met je footer onderaan (de clear:both nodig).
Het was vroeger een berg hacken met dit soort fratsen, en al helemaal omdat de parent elementen niet mee "resizen".

edit:

Voorbeeld gevonden: http://mechanitis.blogspo...lopers-joy-of-floats.html

[ Voor 34% gewijzigd door DJMaze op 10-01-2016 19:10 ]

[OkkE]

Ik ben het met je eens DJMaze, dat float een aantal eigenaardigheden heeft, maar om zo stellig te zeggen dat display:table het beste is... ook dat heeft zo wat eigenaardigheden. Beide hebben zo hun voor- en nadelen, net als dat inline-block voor sommige zaken weer handiger is.

Als we het dan toch hebben over wat waar voor bedoelt is, voor layout hebben we tegenwoordig Flexbox en Grid layout. Als beginnende developer zou ik mij daar dus in verdiepen.

---

On-topic: Ik denk dat er al genoeg tips zijn gegeven om weer een stapje verder te komen (o.a. fouten uit de code halen).

[DJMaze]

OkkE schreef op maandag 11 januari 2016 @ 08:54:
maar om zo stellig te zeggen dat display:table het beste is... ook dat heeft zo wat eigenaardigheden.

Daar heb je een goed punt!
Had niet verwacht dat het zo stellig zou overkomen.
Flexbox en Grid layouts zijn inderdaad ook mooie alternatieven, helaas worden grid layouts nog niet goed ondersteund (IE only).
http://caniuse.com/#search=grid

[Ed Vertijsment]

Er zijn hierboven al een aantal reacteis gegeven over verschillende oplossingen en in principe zijn er inderdaad meerdere manieren om het op te lossen, allemaal prima.

Omdat het hier (als ik het goed begrijp) om een schoolproject gaat zou ik me afzijdig houden van frameworks zoals Bootstrap. Bootstrap doet namelijk een hoop voor je en als je juist dingen wilt leren is dat misschien niet zo handig. Daarnaast is de kans groot dat als je precies weet wat je doet Bootstrap alleen maar in de weg zit.

Als ik jou was zou ik meer eest focussen op floats. Dit is momenteel een zeer gangbare techniek en belangrijk om goed te beheersen. Flexbox wordt ook steeds meer gebruikt en kan, als je er goed mee om kan gaan zeer handig zijn, zeker met responsive designs. De techniek gaat snel en grid staat ook voor de deur. Als je geïnteresseerd bent in webdevelopment zul je dus continu op de hoogte moeten blijven.

[Dutchredgaming]

Ik heb het opgelost

Zelf was ik niet duidelijk over geweest dat het in de section moest zitten.
Nu alles is aangepast is het goed.
Dank jullie wel voor de moeite!

Ik ga de code wissen, omdat klasgenoten houden van code jatten

Slotje mag

[NMe]

Dutchredgaming schreef op maandag 11 januari 2016 @ 22:22:
Slotje mag

Klopt, maar niet omdat je probleem is opgelost... Wel vanwege dit:

Ik ga de code wissen, omdat klasgenoten houden van code jatten

Nu heeft je topic geen enkele zin meer voor iemand anders die het nog terugvindt met de search. Lekkere instelling...