راهنمایی در کدنویسی ( خط عمودی )

[SadraHkm 20]

سلام دوستان

لطفا این سایت رو ببینیید :

http://themes.profteamsolutions.com/selfie/?page_id=2002#1440006894266-e8e486c0-a692

اون قسمت "MY EXPERIENCE" رو ببینید ( حدودا انتهای قالب ) میبینید که یه خط به طور شاخه شاخه تقسیم شده. چطور میشه بدون content یه همچین خط عمودی درست کرد ؟ ( فقط خطش . یعنی کاری به اون باکس ها ... دیگه ندارم . فقط همون خط عموده که وسط صفحس )

ممنون

[graphicno 77]

از این کد استفاده شده :

 

.timeline.timeline-selfie:after {
    content: "";
    position: absolute;
    top: 0;
    left: 50%;
    margin-left: -1px;
    background-color: rgba(0, 0, 0, 0.2);
    height: 100%;
    width: 2px;
    border-radius: 2px;
    display: block;
}

 

[SadraHkm 20]

در 18 دقیقه قبل، graphicno گفته است :

از این کد استفاده شده :

 

.timeline.timeline-selfie:after {
    content: "";
    position: absolute;
    top: 0;
    left: 50%;
    margin-left: -1px;
    background-color: rgba(0, 0, 0, 0.2);
    height: 100%;
    width: 2px;
    border-radius: 2px;
    display: block;
}

 

میدونم. خودم دیدم. ولی چون اون content معلوم نیست نمیشه درستش کرد. دیگه از چه راهی میشه همچین چیزی درست کرد ؟

[graphicno 77]

خب اصلا اینجا content نیازی نیست اون ی رنگ واسه بکگراند تعیین کرده بعدش مقدار height رو 100% قرار داده برای width خط هم که 2px در نظر گرفته شما از طریق inspect کد رو بررسی کنید کامل متوجه میشید چون وقتی width رو غیر فعال میکنید کلا خط از بین میره 

[SadraHkm 20]

در 5 دقیقه قبل، graphicno گفته است :

خب اصلا اینجا content نیازی نیست اون ی رنگ واسه بکگراند تعیین کرده بعدش مقدار height رو 100% قرار داده برای width خط هم که 2px در نظر گرفته شما از طریق inspect کد رو بررسی کنید کامل متوجه میشید چون وقتی width رو غیر فعال میکنید کلا خط از بین میره 

خب درسته . توی inspect هم رفتم دیدم. اون بکگراند و ارتفاع و عرضی که داده، به محتوی اون content داده. همینطوری که نمیشه height و width داد. چون با حذف کردن content، خط میره

ویرایش شده بهمن 94 توسط hcp90

[graphicno 77]

در 3 دقیقه قبل، hcp90 گفته است :

خب درسته . توی inspect هم رفتم دیدم. اون بکگراند و ارتفاع و عرضی که داده، به محتوی اون content داده. همینطوری که نمیشه height و width داد

شما به این صورت عمل کنید :

.timeline {
    position: absolute;
    top: 0;
    left: 50%;
    margin-left: -1px;
    background-color: rgba(0, 0, 0, 0.2);
    height: 100%;
    width: 2px;
    border-radius: 2px;
    display: block;
}

خودم تست کردم به درستی نشون داد خط رو عکس هم ضمیمه کردم

ویرایش شده بهمن 94 توسط graphicno

[SadraHkm 20]

در 13 دقیقه قبل، graphicno گفته است :

شما به این صورت عمل کنید :

.timeline {
    position: absolute;
    top: 0;
    left: 50%;
    margin-left: -1px;
    background-color: rgba(0, 0, 0, 0.2);
    height: 100%;
    width: 2px;
    border-radius: 2px;
    display: block;
}

خودم تست کردم به درستی نشون داد خط رو

آهان. درست شد . ممنون