Back to Question Center
0

CSS નો ઉપયોગ કરીને પૂર્ણ બ્રાઉઝરની પહોળાઈને આવરિત તત્વો કેવી રીતે વિસ્તૃત કરવી CSS નો ઉપયોગ કરીને પૂર્ણ બ્રાઉઝરની પહોળાઈને આવરિત તત્વોને કેવી રીતે વિસ્તૃત કરવી તે સંબંધિત વિષયો: HTML વેબ ફોન્ટ કેનવાસ અને & મીમલ્ટ

1 answers:
સીએસએસનો ઉપયોગ કરીને પૂર્ણ બ્રાઉઝરની પહોળાઈને આવરિત તત્વોને કેવી રીતે વિસ્તૃત કરવી

લાંબો ટાઇટલ માટે માફ કરશો પરંતુ આ એક સામાન્ય સમસ્યા છે જે CSS લેઆઉટમાં છે. મોટે ભાગે, બ્રાઉઝર વિંડો ભરવા માટે અમને (કેન્દ્રિત) પૃષ્ઠની પહોળાઈને વિસ્તારવા માટે એક તત્વની જરૂર છે. લાક્ષણિક પેજ ડિઝાઇન:

CSS નો ઉપયોગ કરીને પૂર્ણ બ્રાઉઝરની પહોળાઈને આવરિત તત્વો કેવી રીતે વિસ્તૃત કરવીCSS રીલેટેડ વિષયોનો ઉપયોગ કરીને પૂર્ણ બ્રાઉઝરની પહોળાઈને આવરિત તત્વો કેવી રીતે વિસ્તૃત કરવી:
HTMLWeb ફોન્ટસાન્વાસ અને મીમલ્ટ

    



<મેટા અક્ષરસેટ = "યુટીએફ -8" />
 SiteName </ title>
</ head>
<body>
<લેખ>
<header> </ header>
<nav> </ nav>સામગ્રી .<footer> </ footer>
</ article>
</ body>
</ html> </code>   </pre>  <p>  બાહ્યતમ પૃષ્ઠ ઘટક CSS કોડનો ઉપયોગ કરીને કેન્દ્રિત છે જેમ કે:  </p>  <pre>   <code> 
લેખ
{
પહોળાઈ: 70%;
હાંસિયો: 0 સ્વતઃ;
} </code>   </pre> <div class="widget maestro maestro-content-type-html hide-for-mobile-SP" id="maestro-682">  </div>  <p>  તો આપણે આડી પશ્ચાદભૂને પુનરાવર્તન કેવી રીતે લાગુ કરીએ છીએ જે વિન્ડો ભરાય છે? પૃષ્ઠની ટોચ પર એલિમેન્ટ્સ સરળ છે કારણ કે આપણે  <code>  શરીર  </code>  ટેગ પર ઇમેજ નિર્ધારિત કરી શકીએ છીએ, અને જી.  </p>  <pre>   <code> 
શરીર
{
પૃષ્ઠભૂમિ: url (હેડર .png) 0 0 પુનરાવર્તન- x;
} </code>   </pre>  <p>  પરંતુ અમે તે  <code>  લેખ  </code>  ની અંદર હોવાથી ફૂટર માટે તે કરી શકતા નથી અને સ્થાન સામગ્રીની માત્રાથી નક્કી થાય છે - <a href="http://www.mpcshop.it/articoli/CASSELIN-CMSVC40-Macchina-sottovuoto-a-campana-barra-40.htm">macchina sottovuoto sacchetti</a>. સૌથી સ્પષ્ટ ઉકેલ આવર તત્વો છે, i. ઈ. અમે  <code>  લેખ  </code>  ની બહાર  <code>  ફૂટર  </code>  ખસેડો અને આંતરિક ટૅગ ઉમેરો:  </p>  <pre>   <code> સામગ્રી .</ article><footer>
<div class = "content">
 <p>  ફૂટર સામગ્રી.  </p> 
 </div> 
</ footer> </code>   </pre>  <p>  પછી આપણે તે મુજબ CSS સુધારી શકીએ:  </p>  <pre>   <code> 
ફૂટર
{
પહોળાઈ: 100%;
પૃષ્ઠભૂમિ: url (ફૂટર. png) 0 0 પુનરાવર્તન- x;
}div સામગ્રી
{
પહોળાઈ: 70%;
હાંસિયો: 0 સ્વતઃ;
} </code>   </pre>  <p>  તે સોલ્યુશન છે જેનો આપણે ઉપયોગ કરીએ છીએ તેમ છતાં તે સિમેન્ટીક HTML દેવતાઓને અસ્વીકાર કરે છે આંતરિક  <code>  DIV  </code>  આવશ્યક નથી - અમે તેને સીએસએસ સ્ટાઇલના હેતુ માટે ઉમેર્યા છે.  </p>  <p>  સદનસીબે, ત્યાં ક્રોસ બ્રાઉઝર સોલ્યુશન્સ છે કે જે વધારાના ટૅગ્સ જરૂર નથી સૌથી સરળ પદ્ધતિ એ પેડિંગની વિશાળ સંખ્યા ઉમેરવાનું છે, પછી તત્વને તેના મૂળ સ્થાને નકારાત્મક માર્જિન સાથે ખસેડો. ઘણી વખત સમાન-ઊંચાઈના સ્તંભ બનાવવા માટે વપરાય છે, પરંતુ આ કિસ્સામાં, અમે તે પહોળાઈ માટે અરજી કરી રહ્યા છીએ:  </p>  <pre>   <code> 
શરીર
{
ઓવરફ્લો-એક્સ: છુપાયેલ;
}. extendfull ,. વિસ્તારની ડાબી બાજુ
{
પેડિંગ-ડાબા: 3000px;
માર્જીન-ડાબે: -3000px;
}. extendfull ,. લંબાણપૂર્વક
{
પેડિંગ-જમણે: 3000px;
હાંસિયો-જમણે: -3000px;
} </code>   </pre>  <p>  જ્યારે "વિસ્તરેલ" વર્ગને તત્વ પર લાગુ કરવામાં આવે છે, ત્યારે તે બ્રાઉઝરની ડાબા હાથની ધારને વિસ્તારશે. એ જ રીતે, "વિસ્તૃત" તે જમણા હાથમાં વિસ્તરે છે અને બંનેને "વિસ્તરેલ" કરે છે. આડી સરકાવનારને અટકાવવા માટે, અમે  <code>  ઓવરફ્લો-એક્સ: છુપાવેલા  </code>   <code>  શરીર  </code>  થી લાગુ કરીએ છીએ.  </p>  <p>   <strong>  પ્રદર્શન પૃષ્ઠ જુઓ . </strong>   </p>  <p>  આ તકનીક IE8, IE9, ફાયરફોક્સ, ક્રોમ, સફારી અને ઓપેરામાં કામ કરે છે. રેમેડટ ટેગ માટે રિપ્લેસમેન્ટ નથી પરંતુ તે કેટલાક લેઆઉટ મુદ્દાઓ માટે વૈકલ્પિક ઉકેલ પ્રદાન કરે છે.  </p>  <h2>  પરંતુ હું ચોક્કસ આઇ 6 અને આઇ 7 આધાર જ જોઈએ!  </h2>  <p>  મીઠું? શું તમને ખાતરી છે? આ તકનીક તમારી ડિઝાઇનને તોડશે નહીં પરંતુ આઇ 6 (IE6) બાહ્ય તત્વની મર્યાદાઓની બહાર પૃષ્ઠભૂમિ બતાવવાનો ઇનકાર કરે છે. આઇ 7 તેના શ્રેષ્ઠ પ્રયાસ કરે છે, તેમ છતાં, "extendleft" સામાન્ય રીતે કામ કરે છે, તે "extendright" માટે કેસ નથી  </p>  <p>  અંગત રીતે, હું લેગસી બ્રાઉઝર્સને જેમ છોડી દઇશ . <em>  પણ હું તમારા બોસ નથી  </em> . સદભાગ્યે, તમે થોડું સીએસએસ યુક્તિ સાથે મુદ્દો ઠીક કરી શકો છો:  </p>  <pre>   <code> 
/ * આઇ 6/7 ફિક્સ * /. extendfull ,. extendleft. લંબાણપૂર્વક
{
સ્થિતિ: સંબંધિત;
પ્રદર્શન: ઇનલાઇન;
ફ્લોટ: ડાબે;
પહોળાઈ: 100%;
} </code>   </pre>  <p>  જો તમે નસીબદાર છો, તો આ આધુનિક બ્રાઉઝરમાં તમારા લેઆઉટ પર હાનિકારક અસર નહીં કરે. શુભેચ્છા!  </p>  <div class="Article_authorBio l-mv4 t-bg-white m-border l-pa3">  <div class="l-d-f l-pt3">  <img src = "/ img / 56f7596ec1df2d8a94a8384d7b2925801 com / avatar / 439aeaff7de2bae365adc3eb4947b44d? s = 96 & ડી = એમએમ & આર = જી" alt = "CSS નો ઉપયોગ કરીને પૂર્ણ બ્રાઉઝરની પહોળાઈને આવરિત તત્વો કેવી રીતે વિસ્તૃત કરવીCSS રીલેટેડ વિષયોનો ઉપયોગ કરીને પૂર્ણ બ્રાઉઝરની પહોળાઈને આવરિત તત્વો કેવી રીતે વિસ્તૃત કરવી:
HTMLWeb ફોન્ટસાન્વાસ અને મીમલ્ટ
"/>  <div class="f-lh-title">  <div class="f-c-grey-300">  લેખક મળો  </div>  <div class="f-large"> ક્રેગ બકલેર <i class="fa fa-twitter">   </i>   <i class="fa fa-google-plus">   </i>   <i class="fa fa-facebook">   </i>   <i class="fa fa-linkedin">   </i>   <i class="fa fa-github">   </i>   </div>  </div>  </div>  <div class="f-light f-lh-copy l-mt3">  ક્રેગ એક ફ્રીલાન્સ યુકે વેબ કન્સલ્ટન્ટ છે, જેણે આઇઇ 2 માટે તેનું પ્રથમ પૃષ્ઠ બનાવ્યું હતું. 0 માં 1995. ત્યારથી તે ધોરણો, સુલભતા, અને શ્રેષ્ઠ અભ્યાસ HTML5 તકનીકોની તરફેણ કરી રહ્યાં છે. તેમણે સાઇટપેઇન્ટ માટે 1,000 કરતાં વધુ લેખો લખ્યા છે અને તમે તેમને @ ક્રેગબકલર શોધી શકો છો </div>  </div>  </div>  </div>  </p>  </html>  </head>                                             
March 1, 2018