کمک برای نوشتن کد

نمایش نسخه قابل چاپ

May 9th, 2016, 23:11
ata3929

1 فایل پیوست

کمک برای نوشتن کد

سلام
من میخوام یک کدی بنویسم به این شکل باشه

فایل پیوست 31274

کد css

کد:

.line { display:block; margin:10px auto; text-align:center; background:rgba(192,57,43,.7); width:40%; height:2px; border-radius:5px; } .line a { width:50px !important; height:50px !important; font-size:34px; color:#e74c3c; margin:-20px 0; }

کد php

کد PHP:

<div class="line"> <a class="fa fa-cogs"></a> </div>

ولی هر کاری میکنم نمیتونم فاصله بین دو خط و ایجاد کنم و مانند عکس بالا بشه

پیش نمایش زنده کد
https://jsfiddle.net/fzbbqu99/1/
May 9th, 2016, 23:36
m2n

پاسخ : کمک برای نوشتن کد

عزیز جان اون آیکن چرخ دنده هست یه باکس درست کنید مثلا 50*50 بک گراند سفید بدین بعد استایل تعریف کنید وسط وایسه اینجوری انگار اون دوتا خط از هم جدا شدن.
May 9th, 2016, 23:48
persianws

پاسخ : کمک برای نوشتن کد

از خاصیت position استفاده کنید ... به آیکن هم بکگروند سفید بدید ...
May 10th, 2016, 01:00
525214

پاسخ : کمک برای نوشتن کد

بفرمائید: https://jsfiddle.net/fzbbqu99/4/
مقدار top رو با توجه به اندازه آیکن میتونید تغییر بدید که دقیقا وسط خط قرار بگیره.
May 10th, 2016, 01:52
miladtnt

پاسخ : کمک برای نوشتن کد

از یه خاصیت html بنام fieldset و legend میتونین استفاده کنین

- - - Updated - - -

http://www.w3schools.com/tags/tag_fieldset.asp
May 14th, 2016, 17:14
shomalnetwork

پاسخ : کمک برای نوشتن کد

تشکر از همه دوستان
استفاده کردم

- - - Updated - - -

نوشته به عنوان legent قرار میگیره قابلیت جابجایی داره؟؟یا ثابته؟؟؟منظورم اینه اگه بخوام بیارمس وسط میشه؟؟
May 14th, 2016, 17:36
miladtnt

پاسخ : کمک برای نوشتن کد

نقل قول:

نوشته اصلی توسط shomalnetwork

تشکر از همه دوستان
استفاده کردم

- - - Updated - - -

نوشته به عنوان legent قرار میگیره قابلیت جابجایی داره؟؟یا ثابته؟؟؟منظورم اینه اگه بخوام بیارمس وسط میشه؟؟

بله چرا نشه legend مخصوص اینکاره

تو این کد مقدار margin-left رو تغییر بدین

<!DOCTYPE html>
<html>
<head>
<style>
legend {
display: block;
Margin-left: 20px;
padding-right: 2px;
border: none;
}
</style>
</head>
<body>

<p>A legend element is displayed like this:</p>

<fieldset>
<legend>Personalia:</legend>
Name: <input type="text"><br>
Email: <input type="text"><br>
Date of birth: <input type="text">
</fieldset>

<p>Change the default CSS settings to see the effect.</p>

</body>
</html>