Հարցեր CSS-ի վերաբերյալ

[Rammstein]

Մեկ-մեկ CSS-ով որոշ բաներ եմ բզբզում: Հիմնականում ինչ ինձ պետք ա եղել, ինքնուրույն կարողացել եմ գլուխ հանել, թեկուզ մի քիչ շատ ժամանակ ծախսելով: Բայց մեկ-մեկ նենց բաներ են հանդիպում, որ նախընտրում եմ հարցնել դրանից շատ ավելի հասկացող մարդկանց:

[Rammstein]

Միանգամից առաջին հարցս գրեմ.
Ակումբում էս span.postlinking-ի 13px բարձրությունը ո՞րտեղից ա եկել ու, որ ամենակարեւորն ա, ինչի՞ չի լինում height ավելացնելու միջոցով դա փոխել, թեկուզ վերջում !important գրելով:




Կողքի span.postcontrols-ին ինչ բարձրություն տալիս եմ, ընդունում ա:

[Chuk]

Միանգամից առաջին հարցս գրեմ.
Ակումբում էս span.postlinking-ի 13px բարձրությունը ո՞րտեղից ա եկել ու, որ ամենակարեւորն ա, ինչի՞ չի լինում height ավելացնելու միջոցով դա փոխել, թեկուզ վերջում !important գրելով:




Կողքի span.postcontrols-ին ինչ բարձրություն տալիս եմ, ընդունում ա:

Բավական վատ գրած 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):


Ոնց-որ թե խուճուճ գրեցի, բայց կարծում եմ, որ կհասկանաս

[Rammstein]

...

Ոնց-որ թե խուճուճ գրեցի, բայց կարծում եմ, որ կհասկանաս

Հա, հասկացա: Սկզբում display: block փորձել էի, բայց երեւի ուրիշ տեղ էի գրել, կամ հետը ուրիշ բան էլ էի գրել, չգիտեմ, արդյունք չէր տվել:


Մի հատ էլ սենց հարց.

.postbitlegacy .postfoot .textcontrols a.post_thanks_button, .postbit .postfoot .textcontrols a.post_thanks_button {

սրա տակ որ ավելացնում եմ ասենք height: 50px, շնորհակալության պատկերակը իջնում ա ներքեւ (50px-ի կենտրոնով), իսկ կողքի տեքստը մնում ա վերեւում: Էդ ինչի՞ց ա գալիս, ո՞նց կարելի ա անել, որ համ պատկերակը, համ տեքստը էդ 50 պիքսելի մեջտեղով լինեն:

[Chuk]

Հա, հասկացա: Սկզբում display: block փորձել էի, բայց երեւի ուրիշ տեղ էի գրել, կամ հետը ուրիշ բան էլ էի գրել, չգիտեմ, արդյունք չէր տվել:


Մի հատ էլ սենց հարց.

.postbitlegacy .postfoot .textcontrols a.post_thanks_button, .postbit .postfoot .textcontrols a.post_thanks_button {

սրա տակ որ ավելացնում եմ ասենք height: 50px, շնորհակալության պատկերակը իջնում ա ներքեւ (50px-ի կենտրոնով), իսկ կողքի տեքստը մնում ա վերեւում: Էդ ինչի՞ց ա գալիս, ո՞նց կարելի ա անել, որ համ պատկերակը, համ տեքստը էդ 50 պիքսելի մեջտեղով լինեն:

Ռամշ, հիմա ուղեղս ուրիշ տեղ ա, կարող ա ավելի հեշտ ձև կա, մտքովս չի անցնում, բայց ոնց-որ էդ արածդ ձևով արդյունքին հասնելու համար քիչ մը բաներ ա կոդում պետք ձևափոխել: Կարճ ասեմ, թե ինչի ա նկարն իջնում, իսկ տեքստը չէ:

Նկարը դրվում ա 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;
Դե պարզ ա, արդեն կարող ես ուզածդ չափերը դնել:

[Rammstein]

Ռամշ, հիմա ուղեղս ուրիշ տեղ ա, կարող ա ավելի հեշտ ձև կա, մտքովս չի անցնում, բայց ոնց-որ էդ արածդ ձևով արդյունքին հասնելու համար քիչ մը բաներ ա կոդում պետք ձևափոխել: Կարճ ասեմ, թե ինչի ա նկարն իջնում, իսկ տեքստը չէ:

Նկարը դրվում ա 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;
Դե պարզ ա, արդեն կարող ես ուզածդ չափերը դնել:

Ուրիշ բաներ փոխել ասելով նկատի ունես ոչ թե CSS-ի, այլ սայտի կոդի մե՞ջ:
Padding-ը նկատել էի, որ ազդում ա: Բայց համ էլ ուզում եմ իմանամ, թե ինչը չի թողում, որ vertical-align: middle-ը աշխատի:

[Արէա]

Մի հատ էլ սենց հարց.

.postbitlegacy .postfoot .textcontrols a.post_thanks_button, .postbit .postfoot .textcontrols a.post_thanks_button {

սրա տակ որ ավելացնում եմ ասենք height: 50px, շնորհակալության պատկերակը իջնում ա ներքեւ (50px-ի կենտրոնով), իսկ կողքի տեքստը մնում ա վերեւում: Էդ ինչի՞ց ա գալիս, ո՞նց կարելի ա անել, որ համ պատկերակը, համ տեքստը էդ 50 պիքսելի մեջտեղով լինեն:

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), բայց ամեն խմբի վրա տարբեր կերպ է ազդում։
Աղյուսակային էլեմենտների համար կիրառելիս հատկությունը գործում է էլեմենտի կոնտենտի համար, ինլայն էլեմենտների համար կիրառելիս, ցույց է տալիս տվյալ էլեմենտի ուղղահայաց դասավորությունը իր հարևան ինլայն էլեմենտների նկատմամբ։