Zarovnanie sekcii

Cyanes · Napísal **Cyanes**: 06.01.2016 15:07

Ahojte, som v podstate začiatočník s HTML a CSS a momentálne pracujem na školskom projekte. To čo mám aktuálne spravené nájdete na http://www.handbok.6f.sk . Neviem si rady s dvoma vecami. Keď zmenšujem okno robí mi toto. http://imgur.com/KngCsVz a http://imgur.com/oQQxX6w .. Viem čím sú tieto veci spôsobené ale neviem ako ich vyriešiť.

Lessik · Napísal **Lessik**: 06.01.2016 15:23

na sidebar daj max-height a overflow: scroll ale cele to mas tak ako by som to ja nikdy nespravil

Cyanes · Napísal autor témy **Cyanes**: 06.01.2016 15:37

To je dobré pretože si to ty ani nerobil

.. Je to moja prvá práca ktorá zabrala viac ako 5 minút

.. Ani jeden z tých problémov sa nevyriešil. Popr. bol by som rád keby si si našiel čas a dal mi pár rád čo inak spraviť alebo tie najväčšie chyby ktoré robím, aj keď ich asi bude veľa

erikzet · Napísal **erikzet**: 06.01.2016 15:41

Jednotlive sekcie daj width v percentach, takze pri zmensovani ti bude prepocitavat velkost a ked uz to bude skarede tak pouzi media queries.

Cyanes · Napísal autor témy **Cyanes**: 06.01.2016 15:41

Koľko nastaviť max-height?

// Spojený príspevok Str 06.01.16 15:44

S media queries som ešte nepracoval, ako ho mám využiť v tomto prípade?

erikzet · Napísal **erikzet**: 06.01.2016 15:50

A ake mas vlastne zadanie? Mas spravit responzivnu stranku? Tak iba nastav width v percentach alebo max-width ako pisal lessik, som na mobile tak kod som nepozeral.

Cyanes · Napísal autor témy **Cyanes**: 06.01.2016 15:52

Nie, responzivitu neriešim.. Skúšal som to s width, max width, stále ro vyzeralo dobre len v určitom bode to skočilo pod seba.

// Spojený príspevok Str 06.01.16 15:53

A s tým sidebarom aby bol rovnako vysoký ako sekcia, nastavil som overflow:scroll ale koľko mám nastaviť max-height?

Webess · Napísal **Webess**: 06.01.2016 16:23

Narýchlo som sa na to pozrel a vypisujem to čo som si všimol:
- chýba ti <head>
- v navigácií máš <div> naviac
- na obrázku nepoužívaj width="100%" nastav to priamo v style.css, napríklad pre všetky obrázky img{width: 100%;}
- <center> si tiež nastav priamo v style.css text-align: center;

- v style.css ti chýbajú dvojbodky, bodkočiarky alebo ich máš niekde niekoľko za sebou
- pre .sidebar opakuješ background-color:pink;box-sizing:content-box;background-color:#F7F7F7;
- skús radšej používať tento zápis, aby si to mal prehľadnejšie a urobil tak menej chýb:

Kód:

img{
    width: 100%;
    border: 1px solid #000;
    border-radius: 5px;
}

Určite si toho naštuduj viac - http://www.w3schools.com/html/default.asp a http://www.w3schools.com/css/default.asp
Inak môžeš používať tagy z HTML5 štandardu <header> namiesto div.header, <aside> namiesto div.sidebar, <footer> namiesto div.footer atď. aspoň to budeš mať prehľadnejšie.

Zarovnanie sekcii

Podobné témy