ਸਾਰਣੀ ਬਗੈਰ ਲੇਆਉਟ ਬਣਾਉਣ ਲਈ CSS ਪੋਜੀਸ਼ਨਿੰਗ ਨੂੰ ਕਿਵੇਂ ਵਰਤਣਾ ਹੈ

ਟੇਬਲਲੇਬਲ ਲੇਆਉਟ ਨਵਾਂ ਡਿਜ਼ਾਈਨ ਫਰੰਟਅਰਜ਼ ਖੋਲੋ

ਖਾਕਾ ਲਈ ਟੇਬਲ ਦੀ ਵਰਤੋਂ ਕਰਨ ਦੇ ਕਈ ਕਾਰਨ ਹਨ. ਲੋਕ ਅਕਸਰ ਇਨ੍ਹਾਂ ਨੂੰ ਵਰਤਣਾ ਜਾਰੀ ਰੱਖਣ ਲਈ ਅਕਸਰ ਸਭ ਤੋਂ ਵੱਧ ਕਾਰਨਾਂ ਕਰਕੇ ਹੁੰਦਾ ਹੈ ਕਿਉਂਕਿ CSS ਦੇ ਨਾਲ ਲੇਆਉਟ ਕਰਨਾ ਮੁਸ਼ਕਲ ਹੁੰਦਾ ਹੈ. ਭਾਵੇਂ ਸੀਐਸਐਸ ਸਕ੍ਰਿਪਟ ਕਰਨਾ ਸਿੱਖਣ ਦੀ ਵਕੱਸ ਕਰਦਾ ਹੈ, ਜਦੋਂ ਤੁਸੀਂ ਸਮਝਦੇ ਹੋ ਕਿ CSS ਲੇਆਉਟ ਕਿਵੇਂ ਕਰਨਾ ਹੈ, ਤਾਂ ਤੁਸੀਂ ਇਸ ਗੱਲ ਤੇ ਹੈਰਾਨੀ ਹੋ ਸਕਦੇ ਹੋ ਕਿ ਇਹ ਕਿੰਨੀ ਸੌਖੀ ਹੋ ਸਕਦੀ ਹੈ. ਅਤੇ ਜਦੋਂ ਤੁਸੀਂ ਇੱਕ ਵਾਰ ਸਿੱਖੋਗੇ, ਤਾਂ ਤੁਸੀਂ ਦੂਜੀ ਸਭ ਤੋਂ ਆਮ ਕਾਰਨ ਕਰਕੇ ਲੋਕਾਂ ਨੂੰ CSS- ਦੀ ਵਰਤੋਂ ਨਾ ਕਰਨ ਲਈ ਦਿੰਦੇ ਹੋ- "ਇਹ ਟੇਬਲ ਲਿਖਣ ਲਈ ਤੇਜ਼ੀ ਨਾਲ ਹੁੰਦਾ ਹੈ." ਇਹ ਬਹੁਤ ਤੇਜ਼ ਹੈ ਕਿਉਂਕਿ ਤੁਸੀਂ ਟੇਬਲ ਜਾਣਦੇ ਹੋ, ਲੇਕਿਨ ਇੱਕ ਵਾਰ ਜਦੋਂ ਤੁਸੀਂ CSS ਸਿੱਖਦੇ ਹੋ, ਉਸ ਦੇ ਨਾਲ

CSS ਸਥਿਤੀ ਦੀ ਬ੍ਰਾਉਜ਼ਰ ਸਮਰਥਨ

CSS ਪੋਜਿੰਗਿੰਗ ਨੂੰ ਸਾਰੇ ਆਧੁਨਿਕ ਬ੍ਰਾਊਜ਼ਰਾਂ ਵਿੱਚ ਚੰਗੀ ਤਰ੍ਹਾਂ ਸਮਰਥਿਤ ਹੈ. ਜਦੋਂ ਤੱਕ ਤੁਸੀਂ ਨੈੱਟਸਕੇਪ 4 ਜਾਂ ਇੰਟਰਨੈਟ ਐਕਸਪਲੋਰਰ 4 ਦੇ ਲਈ ਕੋਈ ਸਾਈਟ ਨਹੀਂ ਬਣਾ ਰਹੇ ਹੋ, ਤੁਹਾਡੇ ਪਾਠਕਾਂ ਨੂੰ ਤੁਹਾਡੇ CSS- ਨੀਯਤ ਵੈਬ ਪੰਨਿਆਂ ਨੂੰ ਵੇਖਣ ਵਿੱਚ ਕੋਈ ਮੁਸ਼ਕਲ ਨਹੀਂ ਹੋਣੀ ਚਾਹੀਦੀ.

ਰੀਥੰਕਿੰਗ ਕਿਵੇਂ ਤੁਸੀਂ ਇੱਕ ਪੰਨਾ ਬਣਾਉ

ਜਦੋਂ ਤੁਸੀਂ ਟੇਬਲਸ ਦੀ ਵਰਤੋਂ ਕਰਦੇ ਹੋਏ ਇੱਕ ਸਾਈਟ ਬਣਾਉਂਦੇ ਹੋ, ਤਾਂ ਤੁਹਾਨੂੰ ਇੱਕ ਸਾਰਣੀਕਾਰ ਫਾਰਮੈਟ ਵਿੱਚ ਸੋਚਣਾ ਪਵੇਗਾ. ਦੂਜੇ ਸ਼ਬਦਾਂ ਵਿੱਚ, ਤੁਸੀਂ ਕੋਸ਼ਾਣੂਆਂ ਅਤੇ ਕਤਾਰਾਂ ਅਤੇ ਕਾਲਮਾਂ ਦੇ ਰੂਪ ਵਿੱਚ ਸੋਚ ਰਹੇ ਹੋ. ਤੁਹਾਡੇ ਵੈੱਬ ਪੇਜ਼ ਇਸ ਪਹੁੰਚ ਨੂੰ ਦਰਸਾਉਣਗੇ ਜਦੋਂ ਤੁਸੀਂ CSS ਪੋਜ਼ਿਸ਼ਨਿੰਗ ਡਿਜ਼ਾਈਨ ਤੇ ਜਾਂਦੇ ਹੋ, ਤਾਂ ਤੁਸੀਂ ਸਮੱਗਰੀ ਦੇ ਰੂਪ ਵਿੱਚ ਆਪਣੇ ਪੰਨਿਆਂ ਬਾਰੇ ਸੋਚਣਾ ਸ਼ੁਰੂ ਕਰੋਗੇ, ਕਿਉਂਕਿ ਸਮੱਗਰੀ ਨੂੰ ਤੁਸੀਂ ਕਿਤੇ ਵੀ ਰੱਖ ਸਕਦੇ ਹੋ ਜਿਵੇਂ ਲੇਆਉਟ ਵਿੱਚ ਹੈ- ਦੂਜੀ ਸਮੱਗਰੀ ਦੇ ਉੱਪਰ ਵੀ ਪੱਟੀਦਾਰ.

ਵੱਖ ਵੱਖ ਵੈੱਬਸਾਈਟਾਂ ਦੀਆਂ ਵੱਖ ਵੱਖ ਢਾਂਚਾ ਹਨ. ਪ੍ਰਭਾਵਸ਼ਾਲੀ ਪੰਨੇ ਨੂੰ ਬਣਾਉਣ ਲਈ, ਕਿਸੇ ਵੀ ਦਿੱਤੇ ਗਏ ਪੇਜ ਦੇ ਢਾਂਚੇ ਦਾ ਮੁਲਾਂਕਣ ਕਰਨ ਤੋਂ ਪਹਿਲਾਂ ਉਸ ਨੂੰ ਸਮਗਰੀ ਵੰਡੋ. ਇੱਕ ਉਦਾਹਰਨ ਪੇਜ ਵਿੱਚ ਪੰਜ ਵੱਖਰੇ ਭਾਗ ਸ਼ਾਮਲ ਹੋ ਸਕਦੇ ਹਨ:

1. ਹੈਡਰ ਬੈਨਰ ਐਡਵਰਟਾਈਜ਼, ਸਾਈਟ ਨਾਂ, ਨੇਵੀਗੇਸ਼ਨ ਲਿੰਕ, ਇਕ ਲੇਖ ਦਾ ਸਿਰਲੇਖ ਅਤੇ ਕੁਝ ਹੋਰ ਚੀਜ਼ਾਂ ਦੇ ਨਾਲ ਘਰ
2. ਸੱਜੇ ਕਾਲਮ ਇਹ ਖੋਜ ਬਾਕਸ, ਇਸ਼ਤਿਹਾਰ, ਵੀਡੀਓ ਬਾਕਸ ਅਤੇ ਖਰੀਦਦਾਰੀ ਖੇਤਰਾਂ ਦੇ ਨਾਲ ਪੰਨੇ ਦਾ ਸੱਜਾ ਪਾਸੇ ਹੈ.
3. ਸਮੱਗਰੀ ਇਕ ਲੇਖ, ਬਲਾਗ ਪੋਸਟ ਜਾਂ ਸ਼ਾਪਿੰਗ ਕਾਰਟ ਦਾ ਪਾਠ- ਪੰਨਾ ਦੇ ਮਾਸ ਅਤੇ ਆਲੂ.
4. ਇਨਲਾਈਨ ਵਿਗਿਆਪਨ ਇਸ਼ਤਿਹਾਰ ਸਮੱਗਰੀ ਦੇ ਅੰਦਰ ਇਨਲਾਈਨ
5. ਪਦਲੇਰ ਹੇਠਾਂ ਨੇਵੀਗੇਸ਼ਨ, ਲੇਖਕ ਦੀ ਜਾਣਕਾਰੀ, ਕਾਪੀਰਾਈਟ ਜਾਣਕਾਰੀ, ਨੀਵੇਂ ਬੈਨਰ ਵਿਗਿਆਪਨ, ਅਤੇ ਸਬੰਧਿਤ ਲਿੰਕ.

ਉਹ ਪੰਜ ਤੱਤਾਂ ਨੂੰ ਇੱਕ ਸਾਰਣੀ ਵਿੱਚ ਰੱਖਣ ਦੀ ਬਜਾਏ, HTML5 ਭਾਗਾਂ ਦੇ ਤੱਤ ਦਾ ਉਪਯੋਗ ਸਮੱਗਰੀ ਦੇ ਵੱਖ ਵੱਖ ਹਿੱਸਿਆਂ ਨੂੰ ਪ੍ਰਭਾਸ਼ਿਤ ਕਰਨ ਲਈ ਕਰਦੇ ਹਨ, ਅਤੇ ਫਿਰ ਸਫ਼ੇ ਉੱਤੇ ਸਮਗਰੀ ਦੇ ਤੱਤ ਰੱਖਣ ਲਈ CSS ਸਥਿਤੀ ਦੀ ਵਰਤੋਂ ਕਰਦੇ ਹਨ.

ਤੁਹਾਡੇ ਸੰਖੇਪ ਭਾਗਾਂ ਨੂੰ ਪਛਾਣਨਾ

ਤੁਹਾਡੇ ਦੁਆਰਾ ਆਪਣੀ ਸਾਈਟ ਦੇ ਵੱਖ ਵੱਖ ਵਿਸ਼ਾ ਸਮੱਗਰੀ ਖੇਤਰਾਂ ਨੂੰ ਪਰਿਭਾਸ਼ਿਤ ਕਰਨ ਤੋਂ ਬਾਅਦ, ਤੁਹਾਨੂੰ ਉਨ੍ਹਾਂ ਨੂੰ ਆਪਣੇ HTML ਵਿੱਚ ਲਿਖਣ ਦੀ ਲੋੜ ਹੈ. ਜਦੋਂ ਤੁਸੀਂ ਆਪਣੇ ਸੈਕਸ਼ਨਾਂ ਨੂੰ ਕਿਸੇ ਵੀ ਕ੍ਰਮ ਵਿੱਚ ਰੱਖ ਸਕਦੇ ਹੋ, ਤਾਂ ਪਹਿਲਾਂ ਆਪਣੇ ਪੰਨਿਆਂ ਦੇ ਸਭ ਤੋਂ ਮਹੱਤਵਪੂਰਣ ਅੰਗਾਂ ਨੂੰ ਰੱਖਣ ਦਾ ਇੱਕ ਚੰਗਾ ਵਿਚਾਰ ਹੁੰਦਾ ਹੈ. ਇਹ ਪਹੁੰਚ ਖੋਜ-ਇੰਜਨ ਔਪਟੀਮਾਈਜੇਸ਼ਨ ਦੇ ਨਾਲ ਨਾਲ, ਨਾਲ ਹੀ ਸਹਾਇਤਾ ਕਰੇਗਾ.

ਸਥਿਤੀ ਨੂੰ ਪ੍ਰਦਰਸ਼ਿਤ ਕਰਨ ਲਈ, ਇਕ ਪੰਨੇ ਨੂੰ ਤਿੰਨ ਕਾਲਮਾਂ ਨਾਲ ਦੇਖੋ, ਪਰ ਕੋਈ ਹੈਡਰ ਜਾਂ ਫੁੱਟਰ ਨਹੀਂ. ਤੁਸੀਂ ਆਪਣੀ ਪਸੰਦ ਦੇ ਕਿਸੇ ਵੀ ਕਿਸਮ ਦਾ ਖਾਕਾ ਬਣਾਉਣ ਲਈ ਪੋਜੀਸ਼ਨਿੰਗ ਦੀ ਵਰਤੋਂ ਕਰ ਸਕਦੇ ਹੋ.

ਤਿੰਨ-ਕਾਲਮ ਲੇਆਉਟ ਲਈ, ਤਿੰਨ ਭਾਗਾਂ ਨੂੰ ਪ੍ਰਭਾਸ਼ਿਤ ਕਰੋ: ਖੱਬੇ ਕਾਲਮ, ਸੱਜੇ ਕਾਲਮ ਅਤੇ ਸਮੱਗਰੀ

ਇਹ ਭਾਗ ਸਮੱਗਰੀ ਲਈ ਆਰਟਿਕਲ ਐਲੀਮੈਂਟ ਅਤੇ ਦੋ ਕਾਲਮ ਲਈ ਦੋ SECTION ਐਲੀਮੈਂਟਸ ਦੇ ਜ਼ਰੀਏ ਅਰੰਭ ਕੀਤਾ ਜਾਏਗਾ. ਹਰ ਚੀਜ਼ ਵਿੱਚ ਇਸਦਾ ਪਛਾਣ ਕਰਨ ਲਈ ਇੱਕ ਵਿਸ਼ੇਸ਼ਤਾ ਵੀ ਹੋਵੇਗੀ. ਜਦੋਂ ਤੁਸੀਂ id ਵਿਸ਼ੇਸ਼ਤਾ ਦਾ ਉਪਯੋਗ ਕਰਦੇ ਹੋ, ਤਾਂ ਤੁਹਾਨੂੰ ਹਰੇਕ id ਲਈ ਇੱਕ ਵਿਲੱਖਣ ਨਾਮ ਦਰਸਾਉਣਾ ਚਾਹੀਦਾ ਹੈ.

ਸਮੱਗਰੀ ਦੀ ਸਥਿਤੀ

CSS ਦੀ ਵਰਤੋਂ ਕਰਨ ਨਾਲ, ਤੁਹਾਡੇ ID'd ਤੱਤ ਦੇ ਲਈ ਸਥਿਤੀ ਨੂੰ ਪਰਿਭਾਸ਼ਿਤ ਕਰੋ. ਆਪਣੀ ਸਥਿਤੀ ਦੀ ਜਾਣਕਾਰੀ ਸਟਾਈਲ ਕਾਲ ਵਿਚ ਇਸ ਤਰ੍ਹਾਂ ਸਟੋਰ ਕਰੋ:

#content {

}

ਇਹਨਾਂ ਤੱਤਾਂ ਦੇ ਅੰਦਰਲੀ ਸਮੱਗਰੀ ਵੱਧ ਤੋਂ ਵੱਧ ਥਾਂ ਲੈ ਲਵੇਗੀ, ਜਿਵੇਂ ਕਿ ਇਹ, ਮੌਜੂਦਾ ਸਥਾਨ ਜਾਂ ਸਫ਼ੇ ਦੀ ਚੌੜਾਈ ਦਾ 100 ਪ੍ਰਤੀਸ਼ਤ. ਇੱਕ ਸੈਕਸ਼ਨ ਦੀ ਸਥਿਤੀ ਨੂੰ ਇੱਕ ਨਿਸ਼ਚਿਤ ਚੌੜਾਈ ਤੇ ਮਜਬੂਰ ਕੀਤੇ ਬਿਨਾਂ, ਪੈਡਿੰਗ ਜਾਂ ਮਾਰਜਿਨ ਵਿਸ਼ੇਸ਼ਤਾਵਾਂ ਨੂੰ ਬਦਲਣ ਲਈ.

ਇਸ ਲੇਆਉਟ ਲਈ, ਦੋ ਕਾਲਮ ਨੂੰ ਸਥਿਰ ਚੌੜਾਈ ਵਿੱਚ ਸੈੱਟ ਕਰੋ ਅਤੇ ਫਿਰ ਉਹਨਾਂ ਦੀ ਸਥਿਤੀ ਨੂੰ ਪੂਰਨ ਨਿਸ਼ਚਿਤ ਕਰੋ, ਤਾਂ ਕਿ ਉਹ HTML ਵਿੱਚ ਲੱਭੀਆਂ ਜਿੱਥੇ ਉਹ ਪ੍ਰਭਾਵਿਤ ਨਾ ਹੋਣ.

# ਖੱਬੇ-ਕਾਲਮ {
ਸਥਿਤੀ: ਸੰਪੂਰਨ;
ਖੱਬੇ: 0;
ਚੌੜਾਈ: 150 ਪੈਕਸ;
ਹਾਸ਼ੀਆ-ਖੱਬਾ: 10px;
ਹਾਸ਼ੀਆ-ਚੋਟੀ: 20px;
ਰੰਗ: # 000000;
ਪੈਡਿੰਗ: 3 ਪੈਕਸ;
}
# ਸੱਜੇ-ਕਾਲਮ {
ਸਥਿਤੀ: ਸੰਪੂਰਨ;
ਖੱਬੇ: 80%;
ਸਿਖਰ: 20px;
ਚੌੜਾਈ: 140 ਪੈਕਸ;
ਪੈਡਿੰਗ-ਖੱਬਾ: 10 ਪੈਕਸ;
z-index: 3;
ਰੰਗ: # 000000;
ਪੈਡਿੰਗ: 3 ਪੈਕਸ;
}

ਫੇਰ ਸਮੱਗਰੀ ਦੇ ਖੇਤਰ ਲਈ, ਸੱਜੇ ਤੇ ਖੱਬੇ ਮਾਰਜਿਨ ਨੂੰ ਸੈੱਟ ਕਰੋ ਤਾਂ ਕਿ ਸਮੱਗਰੀ ਦੋ ਬਾਹਰੀ ਕਾਲਮਾਂ ਨੂੰ ਓਵਰਲੈਪ ਨਾ ਕਰੇ.

#content {
ਸਿਖਰ: 0 ਪੈਕਸ;
ਹਾਸ਼ੀਆ: 0 ਪੈਕਸ 25% 0 165 ਪੈਕਸ;
ਪੈਡਿੰਗ: 3 ਪੈਕਸ;
ਰੰਗ: # 000000;
}

ਆਪਣੇ ਪੰਨੇ ਨੂੰ HTML ਸਲੇਬਸ ਦੀ ਬਜਾਏ CSS ਦੀ ਵਰਤੋਂ ਕਰਨ ਲਈ ਕੁਝ ਹੋਰ ਤਕਨੀਕੀ ਹੁਨਰ ਦੀ ਲੋੜ ਹੈ, ਲੇਕਿਨ ਇਹ ਭੁਗਤਾਨ ਹੋਰ ਲਚਕਦਾਰ ਅਤੇ ਜਵਾਬਦੇਹ ਡਿਜਾਈਨਾਂ ਤੋਂ ਬਾਅਦ ਅਤੇ ਬਾਅਦ ਵਿੱਚ ਤੁਹਾਡੇ ਪੰਨਿਆਂ ਨੂੰ ਢਾਂਚਾਗਤ ਅਡਜਸਟਮੈਂਟ ਬਣਾਉਣ ਵਿੱਚ ਬਹੁਤ ਸੌਖਾ ਹੈ.