html/css/js otazky

ryderpowered

Zdravím, robím jednu stránku v html,css a js. Hneď prvá vec, čo neviem urobiť je dať to menu do riadku. Vďaka.

To si nás informoval. Čo si skúšal použiť?

René

Display: inline

René: Jasne proaktivita. btw: má použiť inline-block.

Ide mi o to aby sám vykázal nejakú snahu. Inak sa naučí iba lepiť kód a bude tvoriť patlanice, ktoré zaberajú 90% dnešného internetu.

ryderpowered

weroro napísal:René: Jasne proaktivita. btw: má použiť inline-block.

Ide mi o to aby sám vykázal nejakú snahu. Inak sa naučí iba lepiť kód a bude tvoriť patlanice, ktoré zaberajú 90% dnešného internetu.

Nerieš hlúposti zas. Skúšal som, prvé čo ma napadlo bolo inline block a nejde mi to.

Edit: Už funguje. Len to muselo byť v li-čku, neviem prečo to nefungovalo na ul..

*****HERO*****

lebo licka su tie elementy ktore chces dat do riadku, a nie ul

ryderpowered

Ďalšia vec ako nastavím tym položkam v menu výšku riadka? Skusal som line-height dávat všade ale nepomáha.

Spoiler

Kód: Vybrať všetko

.menu {
height:8%;
width:100%;
background-color:rgb(51,204,255);
display: table;
vertical-align:middle;
text-align: center;

}

ul {
width:100%;
display: inline-block;
padding-top: 12px;

}

ul li {
display: inline-block;
width: 15vw;
border-right: 1px solid white;
letter-spacing: 2px;


}

ul li:first-child {
display: inline-block;
border-right: 1px solid white;
letter-spacing: 2px;
}

ul li:hover{
background-color: hotpink;

}

ul li a{
text-decoration: none;
color: white;


}

//autoeditácia príspevku (07 Jún 2017, 21:28)
Respektíve mi to roztiahne celý ten modrý pás čiže "menu" (v css).

//autoeditácia príspevku (07 Jún 2017, 22:43)
Surne potrebujem odpoved

Niekto?

//autoeditácia príspevku (08 Jún 2017, 0:00)
Pohoda už to mam.

Zrus padding wrappera a nastav padding linkom podla toho, co chces. A vykasli sa na inline block a namiesto toho si pozri nieco o flexboxe. Najdes kopu tutorialov.

jorg22

Aiden: To mi vysvetli naco by pouzival flexbox? Je to pomerne nova CSS vlastnost podporovana skor najnovsimi prehliadacmi a je snou spojenych viacero bugov na niektorych prehliadacoch.

display: inline-block; Je uz podporovany par rokov vsetkymi prehliadacmi.

Globalna podpora je v sucasnosti na urovni 97.59% Tych "bugov" je par a vacsinu nemusis riesit https://github.com/philipwalton/flexbug ... /README.md

Cize pouzival by ho preto, ze moze, mal by o nom vediet a na takyto styling je vhodny. Za chvilu bude chciet multicolumn layout s rovnakou vyskou elementov a zacne vytahovat floats?

Michaelo

Pokial nemusis podporovat stare IE (9<), tak sa nemusis flexu bat... Ja som v praci spravil plne responzivne flex tabulky ktore funguju tak, ze ak browser podporuje flex, tak pouzivaju flex, inak sa prepnu na floaty (ciste CSS, ziadne JS) a funguje to super. Plus my sme uz nastastie konecne prestali podporovat stare prehliadace I9< a pod.

Ale osobne by som tiez zaciatocnikovi nehovoril, aby hned skocil na flexy. Najprv je dobre sa naucit zaklady a pochopit co robi co a potom sa hrat s vertikalnym centrovanim

html/css/js otazky

html/css/js otazky

Re: html/css/js otazky

Re: html/css/js otazky

Re: html/css/js otazky

Re: html/css/js otazky

Re: html/css/js otazky

Re: html/css/js otazky

Re: html/css/js otazky

Re: html/css/js otazky

Re: html/css/js otazky

Re: html/css/js otazky