Մեկ-մեկ CSS-ով որոշ բաներ եմ բզբզում: Հիմնականում ինչ ինձ պետք ա եղել, ինքնուրույն կարողացել եմ գլուխ հանել, թեկուզ մի քիչ շատ ժամանակ ծախսելով: Բայց մեկ-մեկ նենց բաներ են հանդիպում, որ նախընտրում եմ հարցնել դրանից շատ ավելի հասկացող մարդկանց:
Բավական վատ գրած css ա, սկսեմ էդտեղից:
Էդ երկու span-երի display-ն էլ inline ա դրած (display:inline):
Inline էլեմենտները height ու width չեն կարող ստանալ, դրա համար էլ ինչքան էլ դնես, չի փոխի:
Բայց էստեղ մի հատ նյուանս կա: Երբ որ դու էդ էլեմենտիդ տալիս ես float արժեք (span.postcontrols-ի դեպքում float:right), էլեմենտդ միանգամից ուրիշ հատկություն ա ձեռք բերում, ինքը կարծեմ inline-block ա դառնում (որը css-ում չի երևա):
Հիմա եթե դու span.postlinking-ին նույնպես տաս float (ասենք՝ float:left), արդեն կընդունի բարձրությունդ: Կարող ես նաև իրան առանց դրա, միանգամից դարձնես block կամ inline-block (display: block կամ display: inline-block):
Ոնց-որ թե խուճուճ գրեցի, բայց կարծում եմ, որ կհասկանաս
Քայլ առ քայլ՝ դարից դար
Խենթ եմ
Հա, հասկացա: Սկզբում display: block փորձել էի, բայց երեւի ուրիշ տեղ էի գրել, կամ հետը ուրիշ բան էլ էի գրել, չգիտեմ, արդյունք չէր տվել:
Մի հատ էլ սենց հարց.
սրա տակ որ ավելացնում եմ ասենք height: 50px, շնորհակալության պատկերակը իջնում ա ներքեւ (50px-ի կենտրոնով), իսկ կողքի տեքստը մնում ա վերեւում: Էդ ինչի՞ց ա գալիս, ո՞նց կարելի ա անել, որ համ պատկերակը, համ տեքստը էդ 50 պիքսելի մեջտեղով լինեն:Կոդ:.postbitlegacy .postfoot .textcontrols a.post_thanks_button, .postbit .postfoot .textcontrols a.post_thanks_button {
Ռամշ, հիմա ուղեղս ուրիշ տեղ ա, կարող ա ավելի հեշտ ձև կա, մտքովս չի անցնում, բայց ոնց-որ էդ արածդ ձևով արդյունքին հասնելու համար քիչ մը բաներ ա կոդում պետք ձևափոխել: Կարճ ասեմ, թե ինչի ա նկարն իջնում, իսկ տեքստը չէ:
Նկարը դրվում ա background-ով, ու իրա համար ուղղահայաց հավասարությունը կենտրոն ա դրած: Ասենք եթե փոխես, ու սրա փոխարեն՝ «url(images/buttons/post_thanks.png) no-repeat transparent left» գրես «url(images/buttons/post_thanks.png) no-repeat transparent left top», ապա նկարն էլ չի իջնի: Տեքստը ուղղահայաց կենտրոն դնելու համար vertical-align: middle ա պետք դնել, բայց էս դեպքում չի աշխատի, ուրիշ բաներ էլ ա պետք փոխել:
Իսկ քո ուզած արդյունքին էս դեպքում ավելի հեշտ ա padding-ներով հասնել՝ առանց height-ը օգտագործելու. padding-top:10px; padding-bottom:10px;
Դե պարզ ա, արդեն կարող ես ուզածդ չափերը դնել:
Վերջին խմբագրող՝ Chuk: 25.04.2015, 00:57:
Քայլ առ քայլ՝ դարից դար
Խենթ եմ
Ամենաչսիրածս բանն ա էս vertical-align-ը, բայց փորձեմ ինչքան հասկանում եմ բացատրել
Էս պարամետրը մի քիչ էնքան էլ նենց չի աշխատում, ինչպես շատերին թվում ա, ու անձամբ իմ կարծիքով տրամաբանական կլիներ: Իրա անունից ենթադրելի ա, որ եթե ասենք div ունես ու իրան բարձրություն ես տվել, ուրեմն vertical-align-ով կարող ես ուղղահայաց կենտրոն գցել, վերևի կամ ներքևի եզրին կցել, բայց էդ իրականում տենց չի: Ավելին, div-ի վրա ինքն ընդհանրապես չի ազդում (եթե իհարկե div-ի վարքը չես փոխել ասենք inline կամ table-cell սարքելով):
1 ԴԵՊՔ. Ինքն ազդում ա inline ու inline-block տիպի էլեմենտների վրա: Հավասարեցումը կատարում ա ծնող էլեմենտի նկատմամբ: Հավասարեցումը կատարվում ա մոտավորապես ըստ տողի, ոչ թե բլոկի բարձրությամբ: Որպես հիմք վերցվում ա x-height-ը (x տառի բարձրությունը): Որ մոտավոր պատկերացնես սրա աշխատանքի սկզբունքը, էս կոդով տեստեր արա.
Էստեղ փորձի փոխել div-ի font-size-ի արժեքը, ու տես, որ դրանից կախված span-ի տեքստի դիրքը փոխվում ա, փորձի փոխել div-ի height-ի արժեքը, ու տես, որ որևէ ազդեցություն չունի span-ի դիրքի համար:Կոդ:<div style="font-size: 50px; height:80px"> <span style="font-size: 12px; vertical-align:middle">middle alignied text</span> </div>
2 ԴԵՊՔ. Պարամետրը ազդում ա նաև աղյուսակների վանդակների վրա (կարող ես հանձնարարել թե tr թեգերին, թե td-ներին), էս դեպքում ինքը ազդում ա տվյալ վանդակի ողջ բովանդակության վրա: Ու երևի գիտես, որ display պարամետրով կարող ես ասենք div-երին ու span-երին էլ աղյուսակի հատկություններով օժտես, մասնավորապես display-ի համար կան հետևյալ արժեքները.
display: table
display: teble-cell
display: table-row
---
Հիմա որպեսզի էս հնարավորությունը կարողանաս օգտագործելով քո ուզածին հասնես, իրա «շրջապատը» պետք ա համապատասխան փոխես:
Վերջին խմբագրող՝ Chuk: 25.04.2015, 04:09:
Քայլ առ քայլ՝ դարից դար
Խենթ եմ
Rammstein (25.04.2015)
height: 50px - ի հետ (կամ առանց դրա) line-height: 50px; էլ ավելացրու, տեքստն էլ կիջնի։
vertical-align - ը աշխատում է 2 տիպի էլեմենտների հետ՝ աղյուսակային (table, th, td, display: table, display: table-cell) և ինլայն (span, a, img, em, strong և այլն, display: inline, display: inline-block), բայց ամեն խմբի վրա տարբեր կերպ է ազդում։
Աղյուսակային էլեմենտների համար կիրառելիս հատկությունը գործում է էլեմենտի կոնտենտի համար, ինլայն էլեմենտների համար կիրառելիս, ցույց է տալիս տվյալ էլեմենտի ուղղահայաց դասավորությունը իր հարևան ինլայն էլեմենտների նկատմամբ։
Այս պահին թեմայում են 1 հոգի. (0 անդամ և 1 հյուր)
Էջանիշներ