PDA

توجه ! این یک نسخه آرشیو شده میباشد و در این حالت شما عکسی را مشاهده نمیکنید برای مشاهده کامل متن و عکسها بر روی لینک مقابل کلیک کنید : کمک برای نوشتن کد


ata3929
May 9th, 2016, 23:11
سلام
من میخوام یک کدی بنویسم به این شکل باشه

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



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


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


پیش نمایش زنده کد
https://jsfiddle.net/fzbbqu99/1/
m2n
May 9th, 2016, 23:36
عزیز جان اون آیکن چرخ دنده هست یه باکس درست کنید مثلا 50*50 بک گراند سفید بدین بعد استایل تعریف کنید وسط وایسه اینجوری انگار اون دوتا خط از هم جدا شدن.
persianws
May 9th, 2016, 23:48
از خاصیت position استفاده کنید ... به آیکن هم بکگروند سفید بدید ...
525214
May 10th, 2016, 01:00
بفرمائید: https://jsfiddle.net/fzbbqu99/4/
مقدار top رو با توجه به اندازه آیکن میتونید تغییر بدید که دقیقا وسط خط قرار بگیره.
miladtnt
May 10th, 2016, 01:52
از یه خاصیت html بنام fieldset و legend میتونین استفاده کنین

- - - Updated - - -

http://www.w3schools.com/tags/tag_fieldset.asp
shomalnetwork
May 14th, 2016, 17:14
تشکر از همه دوستان
استفاده کردم

- - - Updated - - -

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

- - - 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>