Մուտք

Դիտել ողջ տարբերակը : Հարցեր CSS-ի վերաբերյալ


Rammstein
24.04.2015, 21:44
Մեկ-մեկ CSS-ով որոշ բաներ եմ բզբզում: Հիմնականում ինչ ինձ պետք ա եղել, ինքնուրույն կարողացել եմ գլուխ հանել, թեկուզ մի քիչ շատ ժամանակ ծախսելով: Բայց մեկ-մեկ նենց բաներ են հանդիպում, որ նախընտրում եմ հարցնել դրանից շատ ավելի հասկացող մարդկանց: :)
Rammstein
24.04.2015, 21:45
Միանգամից առաջին հարցս գրեմ.
Ակումբում էս span.postlinking-ի 13px բարձրությունը ո՞րտեղից ա եկել ու, որ ամենակարեւորն ա, ինչի՞ չի լինում height ավելացնելու միջոցով դա փոխել, թեկուզ վերջում !important գրելով:

http://i.imgur.com/lCFnUsBs.jpg (http://i.imgur.com/lCFnUsB.jpg)


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

http://i.imgur.com/FEumPkLs.jpg (http://i.imgur.com/FEumPkL.jpg)
Chuk
24.04.2015, 22:09
Միանգամից առաջին հարցս գրեմ.
Ակումբում էս span.postlinking-ի 13px բարձրությունը ո՞րտեղից ա եկել ու, որ ամենակարեւորն ա, ինչի՞ չի լինում height ավելացնելու միջոցով դա փոխել, թեկուզ վերջում !important գրելով:

http://i.imgur.com/lCFnUsBs.jpg (http://i.imgur.com/lCFnUsB.jpg)


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

http://i.imgur.com/FEumPkLs.jpg (http://i.imgur.com/FEumPkL.jpg)

Բավական վատ գրած 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
25.04.2015, 00:12
...

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

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


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


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

սրա տակ որ ավելացնում եմ ասենք height: 50px, շնորհակալության պատկերակը իջնում ա ներքեւ (50px-ի կենտրոնով), իսկ կողքի տեքստը մնում ա վերեւում: Էդ ինչի՞ց ա գալիս, ո՞նց կարելի ա անել, որ համ պատկերակը, համ տեքստը էդ 50 պիքսելի մեջտեղով լինեն:
Chuk
25.04.2015, 00:51
Հա, հասկացա: Սկզբում 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
25.04.2015, 03:32
Ռամշ, հիմա ուղեղս ուրիշ տեղ ա, կարող ա ավելի հեշտ ձև կա, մտքովս չի անցնում, բայց ոնց-որ էդ արածդ ձևով արդյունքին հասնելու համար քիչ մը բաներ ա կոդում պետք ձևափոխել: Կարճ ասեմ, թե ինչի ա նկարն իջնում, իսկ տեքստը չէ:

Նկարը դրվում ա 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-ը աշխատի:
Chuk
25.04.2015, 04:06
Ուրիշ բաներ փոխել ասելով նկատի ունես ոչ թե CSS-ի, այլ սայտի կոդի մե՞ջ:
Padding-ը նկատել էի, որ ազդում ա: Բայց համ էլ ուզում եմ իմանամ, թե ինչը չի թողում, որ vertical-align: middle-ը աշխատի:

Ամենաչսիրածս բանն ա էս vertical-align-ը, բայց փորձեմ ինչքան հասկանում եմ բացատրել :))

Էս պարամետրը մի քիչ էնքան էլ նենց չի աշխատում, ինչպես շատերին թվում ա, ու անձամբ իմ կարծիքով տրամաբանական կլիներ: Իրա անունից ենթադրելի ա, որ եթե ասենք div ունես ու իրան բարձրություն ես տվել, ուրեմն vertical-align-ով կարող ես ուղղահայաց կենտրոն գցել, վերևի կամ ներքևի եզրին կցել, բայց էդ իրականում տենց չի: Ավելին, div-ի վրա ինքն ընդհանրապես չի ազդում (եթե իհարկե div-ի վարքը չես փոխել ասենք inline կամ table-cell սարքելով):

1 ԴԵՊՔ. Ինքն ազդում ա inline ու inline-block տիպի էլեմենտների վրա: Հավասարեցումը կատարում ա ծնող էլեմենտի նկատմամբ: Հավասարեցումը կատարվում ա մոտավորապես ըստ տողի, ոչ թե բլոկի բարձրությամբ: Որպես հիմք վերցվում ա x-height-ը (x տառի բարձրությունը): Որ մոտավոր պատկերացնես սրա աշխատանքի սկզբունքը, էս կոդով տեստեր արա.



<div style="font-size: 50px; height:80px">
<span style="font-size: 12px; vertical-align:middle">middle alignied text</span>
</div>


Էստեղ փորձի փոխել div-ի font-size-ի արժեքը, ու տես, որ դրանից կախված span-ի տեքստի դիրքը փոխվում ա, փորձի փոխել div-ի height-ի արժեքը, ու տես, որ որևէ ազդեցություն չունի span-ի դիրքի համար:


2 ԴԵՊՔ. Պարամետրը ազդում ա նաև աղյուսակների վանդակների վրա (կարող ես հանձնարարել թե tr թեգերին, թե td-ներին), էս դեպքում ինքը ազդում ա տվյալ վանդակի ողջ բովանդակության վրա: Ու երևի գիտես, որ display պարամետրով կարող ես ասենք div-երին ու span-երին էլ աղյուսակի հատկություններով օժտես, մասնավորապես display-ի համար կան հետևյալ արժեքները.
display: table
display: teble-cell
display: table-row


---
Հիմա որպեսզի էս հնարավորությունը կարողանաս օգտագործելով քո ուզածին հասնես, իրա «շրջապատը» պետք ա համապատասխան փոխես:
Արէա
25.04.2015, 09:16
Մի հատ էլ սենց հարց.


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