વેબપેજ પર ટેક્સ્ટની ડાબે એક છબી કેવી રીતે ફ્લોટ કરવી

વેબપેજ લેઆઉટની ડાબી બાજુએ એક છબીને ગોઠવવા માટે CSS નો ઉપયોગ કરવો

આજે લગભગ કોઈ વેબ પૃષ્ઠ જુઓ અને તમે તે પૃષ્ઠોની બલ્ક બનાવીને ટેક્સ્ટ અને છબીઓનો સંયોજન જોશો. પૃષ્ઠ પર ટેક્સ્ટ અને છબીઓ ઉમેરવાનું ખૂબ જ સરળ છે લખાણને ફકરા, સૂચિ અને હેડિંગ જેવી સ્ટાન્ડર્ડ HTML ટૅગ્સનો ઉપયોગ કરીને કોડેડ કરવામાં આવે છે, જ્યારે છબીઓ ઘટકનો ઉપયોગ કરીને શામેલ કરવામાં આવે છે.

તે ટેક્સ્ટ બનાવવા માટેની ક્ષમતા અને તે છબીઓ એકસાથે સારી રીતે કામ કરે છે તે મહાન વેબ ડિઝાઇનર્સને અલગથી સેટ કરે છે! તમે ફક્ત તમારા ટેક્સ્ટ અને છબીઓને એક પછી એક દેખાવા નથી માગતા, જે આ બ્લોક-લેવલ તત્વો મૂળભૂત રીતે લેઆઉટ હશે. ના, તમે ટેક્સ્ટ અને છબીઓ કેવી રીતે એકસાથે પ્રવેશે છે તેના પર કેટલાક નિયંત્રણ જોઈએ છે, આખરે તમારી વેબસાઇટની વિઝ્યુઅલ ડિઝાઇન શું હશે.

પેજની ડાબી બાજુ સાથે સંકળાયેલ એક ઈમેજ ધરાવતી વખતે તે પેજનો ટેક્સ્ટ તેની ફરતે પ્રવેશે છે તે પ્રિન્ટેડ ડિઝાઇન અને વેબ પાનાંઓ માટે એક સામાન્ય ડિઝાઇન સારવાર છે. વેબ શરતોમાં, આ અસરને છબી ફ્લોટિંગ તરીકે ઓળખવામાં આવે છે આ શૈલી "ફ્લોટ" માટે CSS પ્રોપર્ટી સાથે પ્રાપ્ત થાય છે. આ ગુણધર્મ ડાબી બાજુ સંરેખિત છબીની આસપાસ તેના જમણા બાજુ પર ટેક્સ્ટને વહન કરવા માટે પરવાનગી આપે છે. (અથવા તેના ડાબેરી બાજુની જમણેરી સંરેખિત છબીની આસપાસ.) ચાલો આ દ્રશ્ય અસરને કેવી રીતે હાંસલ કરવી તે જુઓ.

HTML સાથે પ્રારંભ કરો

પ્રથમ વસ્તુ જેને તમારે કરવાની જરૂર છે તે સાથે કેટલાક એચટીએમએલ કામ કરે છે. અમારા ઉદાહરણ માટે, અમે ટેક્સ્ટનું ફકરો લખીશું અને ફકરોની શરૂઆતમાં એક છબી ઉમેરીશું (ટેક્સ્ટ પહેલાં, પરંતુ શરૂઆતના

ટૅગ પછી). અહીં તે HTML માર્કઅપ જે દેખાય છે તે છે:

ફકરોનો ટેક્સ્ટ અહીં જાય છે. આ ઉદાહરણમાં, અમારી પાસે હેડશોટ ફોટોની એક છબી છે, તેથી આ ટેક્સ્ટ એવી વ્યક્તિ વિશે હશે જેનું હેડશોટ છે.

ડિફૉલ્ટ રૂપે, અમારા વેબપૃષ્ઠ ટેક્સ્ટની ઉપર છબી સાથે પ્રદર્શિત કરશે. આનું કારણ એ છે કે છબીઓ HTML માં બ્લોક-લેવલ તત્વો છે. આનો અર્થ એ છે કે બ્રાઉઝર ડિફૉલ્ટ દ્વારા છબી ઘટક પહેલા અને પછી રેખા બ્રેક્સ પ્રદર્શિત કરે છે. આપણે આ મૂળભૂત દેખાવને CSS તરફ વળ્યા છે. પ્રથમ, જોકે, અમે અમારા છબી તત્વ માટે વર્ગ મૂલ્ય ઉમેરશો. તે વર્ગ "હૂક" તરીકે કાર્ય કરશે કે જે અમે અમારા CSS માં પાછળથી ઉપયોગ કરીશું.

ફકરોનો ટેક્સ્ટ અહીં જાય છે આ ઉદાહરણમાં, અમારી પાસે હેડશોટ ફોટોની એક છબી છે, તેથી આ ટેક્સ્ટ એવી વ્યક્તિ વિશે હશે જેનું હેડશોટ છે.

નોંધ કરો કે "ડાબે" આ વર્ગ પોતાના પર કંઇ જ નથી! અમારા ઇચ્છિત શૈલીને હાંસલ કરવા માટે, અમારે હવે CSS નો ઉપયોગ કરવાની જરૂર છે.

સીએસએસ સ્ટાઇલ

અમારા "HTML" વર્ગના લક્ષણ સહિત, અમારા એચટીએમએલ સાથે, આપણે હવે સીએસએસ તરફ જઈ શકીએ છીએ. અમે અમારા સ્ટાઈલશીટમાં એક નિયમ ઉમેરીશું જે તે ઈમેજને ફ્લોટ કરશે અને તેનાથી આગળ થોડું પેડિંગ ઉમેરશે જેથી તે છબી, જે આખરે છબીની આસપાસ લપેટી છે તે તેની સામે ખૂબ નજીકથી ન ચાલે. અહીં તમે લખી શકો તે CSS છે:

.left {float: left; ગાદી: 0 20px 20px 0; }

આ શૈલી તે ચિત્રને ડાબી બાજુએ મૂકે છે અને થોડો ગાદી ઉમેરે છે (કેટલીક સીએસએસ શાબ્દિક ઉપયોગ કરીને) છબીની જમણા અને નીચે.

જો તમે એવા પૃષ્ઠની સમીક્ષા કરતા હોવ કે જે આ HTML ને બ્રાઉઝરમાં શામેલ કરે છે, તો છબી હવે ડાબી બાજુથી ગોઠવાશે અને ફકરોનો ટેક્સ્ટ બે વચ્ચેના અંતરની યોગ્ય રકમ સાથે તેના જમણા ખૂલે છે. નોંધ કરો કે અમે ઉપયોગ કરેલ "ડાબે" ના વર્ગ મૂલ્ય મનસ્વી છે. અમે તેને કંઈપણ કહી શકીએ છીએ કારણ કે "ડાબે" શબ્દ તેનાથી કંઇ જ નથી. આ HTML માં એક ક્લાસ એટ્રિબ્યુટ હોવું જરૂરી છે કે જે વાસ્તવિક CSS શૈલી સાથે કામ કરે છે જે તમે જે દ્રશ્ય ફેરફારો કરી રહ્યા છો તે નિર્ધારિત કરે છે.

આ શૈલીઓ પ્રાપ્ત કરવા માટે વૈકલ્પિક રીતો

ઇમેજ તત્વને ક્લાસ એટ્રીબ્યુટ આપવાનો આ અભિગમ અને ત્યારબાદ સામાન્ય CSS સ્ટાઇલનો ઉપયોગ કરીને તત્વ તત્વ એકમાત્ર રસ્તો છે જે તમે આ "ડાબી ગોઠવાયેલ છબી" દેખાવ પૂર્ણ કરી શકો છો તમે છબીનું વર્ગ મૂલ્ય બંધ પણ કરી શકો છો અને વધુ વિશિષ્ટ પસંદગીકાર લખીને CSS સાથે તેને સ્ટાઇલ કરી શકો છો. હમણાં પૂરતું, ચાલો એક ઉદાહરણ જોઈએ, જ્યાં તે છબી "મુખ્ય-સામગ્રી" ના વર્ગ મૂલ્ય સાથે ડિવિઝનની અંદર છે.