تنظيم کردن ارتفاع

اندازه دادن به عناصرblock  :

 

به طور پيش فرض عناصر block عرضي معادل با 100% فضاي اطراف خود را در صفحه سايت اشغال مي کنند. حتي اگر که div اي که در برگيرنده آنهاست داراي ارتفاع يا عرض مشخصي باشد. تا اينجاي کار تمامي مثال هاي ما شامل اين قضيه مي شد اما اگر شما بخواهيد مي توانيد اين مقدار را عوض کنيد و به جاي 100% به آن مقدار ديگري را بدهيد.

 

تنظيم کردن عرض

 

در نظر بگيريد که شما چندين پاراگراف داريد که به طور پيش فرض اين پاراگراف ها عرض 100% دارند (چرا که block) هستند، و اکنون شما مي خواهيد تا يکي از اين پاراگراف ها بيشتر از بقيه چشمگير باشد و عرض آن با بقيه متفاوت باشد پس از طريق css به آن پاراگراف استايل خاصي مي دهيم.

 

    <p>We've stayed in quite a few caravan parks and camp sites over

    the last couple of months, and I've started to notice a few

    things that seem to suggest that there are some unwritten

    rules of staying at these places. Unwritten until now, that is.</p>

    <p>Everyone else on site will be better prepared and better

    equipped than you. It's a fact. No matter what extras you

    might carry, someone a couple of plots down will still have

    more. Utensil envy is rife.</p>

    <p class="attentiongrab">When you first park, the distance

    between the power supply and your van's power socket will be

    precisely 2 inches longer than the inadequate power lead that

    you own.</p>

    <p>On the hottest evenings, you will be parked next to someone

    with a very flashy van that's equipped with an air-con unit.

     It will be facing you, blowing out hot air and taunting you

    with its efficient hum.</p>

 

design-web-121.jpg

 

تنظيم کردن ارتفاع يک عنصر هم به همان سادگي عرض دادن به آن عنصر بلاک است، اما در بيشتر مواقع عموما از دادن يک ارتفاع ثابت به عناصر پرهيز مي شود زير را باعث مي شود تا محدوديتي را براي عناصر خود ايجاد کنيد اين کار تنها زماني صورت مي گيرد که بدانيد تعداد آيتم هاي موجود در تگ شما محدود است و بنابر اين براي اينکه مطمئن شويد ارتفاع آن همواره ثابت خواهد بود به آن مي توانيد ارتفاع بدهيد، به عنوان مثال براي منوي راهبر سايت که معمولا تعداد لينک هايي که در آن قرار مي گيرد در بين صفحات مختلف سايت  مشخص است.

XHTML  زير را در نظر بگيريد:

 

    <div id="maiavigation">

    <h3>Site Navigation</h3>

    <ul>

    <li><a href="home.html">Home</a></li>

    <li><a href="recent.html">Recent Work</a></li>

    <li><a href="portfolio.html">Portfolio</a></li>

    <li><a href="testimonials.html">Testimonials</a></li>

    <li><a href="contact.html">Contact</a></li>

    </ul>

    </div>

 

همانطور که در کد بالا مي بينيد يک تگ  div منوي راهبر ما را در برگرفته است و همانطور که مي بينيد داراي id است به اسم maiavigation و اگر به خاطر داشته باشيد قبلا گفتيم که div يک عنصر بلاک است ، پس مي توانيم به آن استايل دهي کرده و css بدهيم و در اين ميان چون تعداد اين لينک ها تقريبا مشخص است مي توان براي آن عرض و ارتفاع خاصي را در نظر گرفت، خوب پس بياييد با هم به آن استايل دهيم :

 

    #maiavigation {

    background-color: #ffcc33;

    color: navy;

    font-weight: bold;

    width: 200px;

    height: 400px;

    }

 

 

همانطور که در کد بالا مي بينيد من به اين منوي رنگ پس زمينه #ffcc33 نيز داده ام تا در زمان نمايش عنصر بلاک را به راحتي تشخيص دهيد و ببينيد، همچنين به آن عرض و ارتفاع ثابتي داده ام که به شکل يک چهارگوش نمايش يابد.

 

design-web-122.jpg

 

اگر منوي راهبري بيش از حد طولاني شود چه اتفاقي مي افتد؟

 

گفتيم که مي توانيم فرض کنيم که تعداد آيتم هاي منوي ما محدود است پس مي توان به آن عرض و ارتفاع داد، اما بايد اين نکته را در نظر گرفت که بسته به نوع مرورگر نحوه نمايش آن متفاوت است:

-    در فاير فاکس 3 و  IE 7 , 8ارتفاع داده شده باعث مي شود تا پس زمينه به همان ارتفاعي که مشخص شده به رنک مورد نظر (زرد رنگ ) نمايش يابد و از آنجا به  بعد از تگ فوق بيرون مي زند.

-    اما در مرورگر هاي قديمي IE نسخه هاي 6 به قبل از آن پس زمينه زرد رنگ بدون در نظر گرفتن اينکه ارتفاع ثابتي دارد اگر تعداد آيتم هاي آن زياد تر از ارتفاع داده شده شود توسعه مي يابد.

شکل زير به ترتيب از چپ به راست مصداق توضيحات بالاست:

 

design-web-123.jpg

 

نکته از مترجم :  اين تفاوت نمايش در مرورگرهاي مختلف يکي مهمترين مشکلات يک طراح حرفه ايست. در نتيجه براي يک طراحي سايت بدون نقص مي بايست مرحله به مرحله وب سايت را در مرورگرهاي مختلف تست نماييد.

 

افزودن border به عناصر block  :

 

براي عناصر بلاک شما مي توانيد انواع مختلفي از border (کناره) را به کار ببريد که شامل:

-    ضخامت هاي مختلف براي کناره ها

-    سبک دهي هاي مختلف به کناره ها (خطوط صاف ، نقطه چين و ...)

-    دادن رنگ هاي دلخواه

Css اي که مي توان براي اين مورد به کار برد به ترتيب: border-width   و  border-style   و  border-color.

به مثال زير نگاه کنيد تا بهتر آن را درک کنيد:

 

    .highlight {

    border-width: 5px;

    border-style: solid;

    border-color: black;

    }

 

design-web-124.jpg

 

کناره inset

 

اگر بردر solid به کار شما نمي آيد شما مي توانيد از بردر inset استفاده نماييد. شکل ظاهري آن مثل تصوير زير خواهد بود:

 

 

    .highlight {

    border-width: 10px;

    border-style: inset;

    border-color: #999999;

    }

 

design-web-125.jpg

 

:رنگي Border

 

شما مي توانيد از رنگ هم در css خود براي کناره ها استفاده کنيد تا بردرهايي با دو رنگ و جلوه متفاوت ايجاد کنيد:

 

design-web-126.jpg

 

    .highlight {

    border-width: 10px;

    border-style: ridge;

    border-color: red;

    {

 

مدل هاي ديگر بردر به شکل زير است:

 

design-web-127.jpg

 

    .highlight {

    border-width: 10px;

    border-style: dotted;

    border-color: purple;

    }

 

 

design-web-128.jpg

 

 

    highlight{

    border-width: 10px;

    border-style: dashed;

    border-color: purple;

    }