Čaute,

vedel by mi niekto povedať prečo mi nechce zarovnať sekcie na pravú stranu ? Učím sa HTML / CSS a snažím sa napadobniť túto stránku: https://html5up.net/uploads/demos/dopet ... debar.html.

Konkretne chcem tie dve sekcie zarovnať vpravo. Skúšal som float: left; alebo right ale to nepomáha. marginom to zarovnať ide, ale to mi nepríde zrovna ako správne riešenie Ešte mi napadla možnosť namiesto <section> použiť <aside> ale to tiež neviem či by bolo správne riešenie...

Je možné, že v mojom kóde je aj niekde inde chyba a možno preto to blbne.
Css aj html je v prílohe...

Mimochodom - poznáte niekoho kto by bol ochotný mi s tým CSS pomôcť ? Samozrejme za príplatok. Čo som pogooglil, tak kurzy stále 700€ a to si nemôžem dovoliť

V dnesnej dobe (pokial nepotrebujes podporovat stare IE) je na toto dobry Flexbox

Dalej, ak pouzivas floaty, musis obom sekciam (vsetkym elementom co maju byt na jednom riadku) nastavit pevnu sirku (napr. 70% a 30%). Ak im nastavis sirku v % tak, ze dokopy vychadza 100%, tak potom nemozes pouzivat marginy (ak nechces na nastavenie sirky pouzivat calc -> napr. width: calc(70% - 15px); kde 70% je sirka aku chces a 15px je margin aky mas po stranach dokopy), ale paddingy. Samozrejme daj elementom box-sizing: border-box; Bezne je to davat na uplne vsetko, teda * { box-sizing: border-box; }

Section a Aside ti nijak nepomozu. To ze sa to menuje Aside a ma to byt na strane ako doplnkove info neznamena, ze to tam prehliadac da a nastyluje za teba

Inak, na nejake ucenie CSS najdes free tutorialy ked budes googlit nieco ako "free html & css tutorial".
Ja osobne rad len tak prechadzam https://codepen.io (hlavne v praci ) a pozeram co ludia robia, ale ak tam budes pozerat na popularne veci tak budes casto musiet aj nieco vediet, aby si to vobec pochopil.

Inak, ak ma niekto rad vyzvy: https://stories.uplabs.com/tagged/code

Tu je moje riešenie. Upozorňujem, že Html a CSS sa zaoberám len pre vlastné potreby, preto moje riešenie nemusí byť dobré. Navyše tam treba ošetriť veci, ktoré hádam zvládneš aj sám.

pozri si aj html súbor, pretože aj ten som editoval.

float-om to ide usporiadať, len všetko tomu musí byť uspôsobené. To znamená, že keď použiješ float, nemôžeš upravovať pozície marginom. Samozrejme margin použiť môžeš ale všetko záleží na čo to chceš použit, napr. na rozostupy medzi <div>. Čo ma teraz napadlo, že namiesto padding som mohol použiť margin.

Oblak - vďaka pekne Len čo sa týka tvojej opravy, tak nie je to vpravo, ale stále dole a na ľavej strane je ešte taký červený pás. Aspoň mne to tak zobrazuje stále

Michaelo - tiež vďaka. Môžem sa sýtať ako dlh osi sa učil CSS ? Ja moc tým marginom a paddingom nechápem stále mi to nejak rozhadzuje. Napísal som ti SS, ak si nájdeš kus čas. Mimochodom... mohol by si skúsiť opraviť moju prílohu, ktorú som poslal v 1 príspevku ? Stále sa neviem pohnúť ďalej...

Ja sa CSS stále učím. I keď si myslíš že niečo fakt vieš, tak prídeš na to, že nevieš všetko. Hlavne keď sa budeš snažiť optimalizovať web na rôzne prehliadače a zariadenia... No a potom máš vždy nejaké nové veci, hlavne tie staršie, na ktoré si zabudol, lebo síce boli cool, žiaden browser ich nepodporoval, no zrazu ich podporuje všetko okrem IE a Safari (Safari je nové IE, ak nie ešte horšie).

Osobne weby robím už cca 9 rokov. No len asi posledné 4 roky sa tomu venujem viac ako nejaké osobné webíky.

Rozdiel medzi marginom a paddingom je celkom podstatný a začiatočníkom celkom uniká.
Padding je miesto medzi obsahom elementu (napr textom, obrázkom) a borderom (takže sa naň stále vzťahuje aj pozadie elementu).
Margin je zasa miesto za borderom a na ten sa už napr také pozadie nevzťahuje.

Pár príkladov:
Ak dáš pod seba 2 elementy a obom nastavíš padding na 10px hore a dole, tak medzi nimi bude 20px medzera. Ak ale použiješ margin, horné a spodné medzery sa collapsnú (prekryjú), takže veľkosť medzery medzi nimi bude len tak veľká, ako najväčší margin (horný alebo dolný), v tomto prípade by bola medzera 10px. Ak by si mal margin 15px hore a 10px dole (na oboch), tak by bola medzera 15px.
Ďalší rozdiel môžeš vidieť aj v mnou poslanom kóde. Ak nastavíš box-sizing: border-box; tak prepneš Box model (ten vidíš aj v Chrome, keď inspectneš element, vypadá takto) daného elementu na typ, v ktorom padding a border bude započítaný do šírky elementu. Toto najlepšie uvidíš na reálnom príklade: http://codepen.io/MiChAeLoKGB/pen/xqJBQd
Stačí ak vieš anglicky a používaš Google a nájdeš toho dosť, väčšina otázok bola zodpovedaná na Stack Overflow (len tam dávaj pozor na dátum odpovede, odpoveď ohľadom CSS z roku < 2013 už nemusí byť takmer vôbec relevantná).


Prikladám upravený kód. Je to robené floatmi, ale ako som hovoril, flexbox je na toto až stupídne jednoduchý: https://css-tricks.com/snippets/css/a-guide-to-flexbox/