طراحی سایت ساناتک
0
جمع و جور کردن تگ label با استفاده از CSS

تا اینجا فُرم ما درست بوده و خوب کار می کند، اما هم راستا نبودن کنترل text input کمی کار را زشت کرده است. خوشبختانه با استفاده از CSS می توانیم این مشکل را برطرف کنیم. به جای اینکه این style را به تمامی تگ های label درون فُرم اعمال کنیم، یک خصوصیت class به تمامی label ها اضافه می کنیم تا بتوانیم style مورد نظر خود را تنها به همین label اعمال نماییم. (در آینده Style های دیگری به سایر label ها اعمال خواهیم کرد). کد زیر را به Style1.css اضافه کنید، دقیقا قبل از بخش label پیشین:

form.contact label.fixedwidth {

display: block;         

width: 240px;

float: left;

}

 در اقدام بعدی خصوصیت class را به label های موجود در contact.html اضافه کنید. HTML شما باید اینگونه شده باشد:

<form action="" method="post" class="contact">

<fieldset>

<legend>Tell us About a Dive Event</legend>

<div>

<label for="contactname" class="fixedwidth">Contact

Name</label>

<input type="text" name="contactname" id="contactname"/>

</div>

<div>

<label for="telephone" class="fixedwidth">Telephone

Number</label>

<input type="text" name="telephone" id="telephone"/>

</div>

<div>

<label for="email" class="fixedwidth">Email Address</label>

<input type="text" name="email" id="email"/>

</div>

<div>

<label for="eventname" class="fixedwidth">What's the event

called?</label>

<input type="text" name="eventname" id="eventname"/>

</div>

<div>

<label for="eventdate" class="fixedwidth">When's the event

happening?</label>

<input type="text" name="eventdate" id="eventdate"/>

</div>

</fieldset>

</form>

 ظاهری منظم تر از label ها

ظاهری منظم تر از label ها

دقیقاً چه اتفاقی رخ داد؟

ببخشید که در اینجا اندکی کار را حرفه ای انجام دادیم! کاری که در این رابطه از مرورگر خواستیم به این بود:

display: block

 در تغییر جدی یک تگ inline را گرفته و آن را به یک block-level تبدیل می کند. (در اینجا این کار را با تگِ label انجام دادیم). با این تغییر جدید می توانیم کارهای بیشتری با آن انجام دهیم، به عنوان مثال تعیین width از این دست است.

width: 240px

 با تعیین width برای label فضای مورد نیاز خاصی را کنار گذاشتیم. لازم به ذکر است با توجه به تبدیل به block-level در آغاز و پایان تگ label ما break ظاهر می شود.

float: left

 در این مورد از این استفاده کردیم تا label را سمت چپ قرار دهیم؛ محتوایی که دقیقاً پس از آن خواهد آمد(درون فیلد form input) در سمت راست ردیف خواهد شد. دقیقاً مشابه همین مورد درون یک روزنامه نیز متن در اطراف یک تصویر جای می گیرد. بدون این قسمت کنترلِ text input در پایین متن label قرار می گرفت.

تعداد بازدید: 311
مطالب دیگر آموزش طراحی سایت
باگ‌ های شناخته شده مرورگرهاراستی‌ آزمایی کدهای CSS و HTML بعد از طراحی سایترفع خطاهای احتمالی هنگام طراحی سایتدقیق‌ تر شدن در استفاده از jQueryنمایش کپشن‌ های تصاویر درون گالری سایت
verification