mohammad06

ایجاد فاصله استاندارد

3 ارسال در این موضوع قرار دارد

سلام

من در سایت خودم وقتی میخوام بین چند عنصر فاصله بزارم دچار این مشکل هستم که چقدر فاصله بزارم

مثلا

داخل هدر 3 تا عنصر هست مثل دکمه منو و سبدخرید و سرچ فرم حالا دکمه منو همینطور که میبینم تشخیص میدم خیلی از دوتا دیگه دور و رفته توی لوگو در حالت ریسپانسیو منظورم حالا چطوری فاصله بین سرچ فرم و سبدخرید را چطوری بدست بیارم که این هم همانقدر فاصله داشته باشه

مثل تایپ کردن داخل برگه که بعد هر کلمه تو حالت استاندارد یک space میزنیم و اگر 3 تا خورده باشه زشت میشه

هدر دیجی کالا را که دیده باشید به طور مثال متوجه هستید که فاصله از لب صفحه تا ایکون حساب کاربری و از ایکون حساب کاربری هم مسلما تا ایکون کناری که سبدخرید فاصله یکیه حالا دقیق من میخوام این فاصله را بدست بیارم که چند پیکسل هست که وقتی بهم ریختگی پیش میاد دقیق تر مارجین بدم مثل خط کش گذاشتن

به اشتراک گذاری این ارسال


لینک به ارسال
به اشتراک گذاری در سایت های دیگر

:| هر کی فهمید توضیح بده

به اشتراک گذاری این ارسال


لینک به ارسال
به اشتراک گذاری در سایت های دیگر

درود.

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

اما عموما فاصله ی 5 پیکسل بین عناصر نزدیک به هم کافیه. 

 

و برای اینکه کلیدها، لینک ها و ... در حالت رسپانسیو و در حالت عادی دسکتاپ بتونند موقعیت مکانی خودشون رو حفظ کنند، یکی از راه هاش استفاده از position: absolute هست.

استفاده از این دستور در CSS کمی ممکنه شما رو دچار مشکل کنه، چون با این دستور، عنصری که تعیین کردید مکانش ثابت باشه، در هر شرایطی مکانش ثابت هست. یعنی اگر متن یا عناصر متغیر دیگه ای هم داخل اون محدوده باشند، عنصری که absolute شده، روی دیگر عناصر قرار میگیره.

 

برای استفاده از این دستور:

1. اول باید محدوده ای که این عنصر قراره داخلش قرار بگیره رو relative کنید. برای مثال اگر می خواهید این عنصر رو در نوار بالای سایت قرار بدید، به Class اصلی اون نوار، این دستور CSS رو اضافه کنید:

لطفا برای مشاهده code وارد سایت شوید و یا ثبت نام کنید.

2. عنصر مورد نظر رو absolute کنید. بعد از Relative کردن محدوده ی اصلی، الان می تونیم با Absolute کردن و استفاده از دستورات right و top مکان اون عنصر رو در نوار تثبیت کنیم.

حالا در این بخش از دو راه میشه عنصر مورد نظر رو مکان دهی کرد. 

اگر فقط یک عنصر (لینک/کلید/ یا هر چی) دارید، می تونید دستور زیر رو در Class مربوط به همون عنصر اضافه کنید:

لطفا برای مشاهده code وارد سایت شوید و یا ثبت نام کنید.

با این سه دستور، عنصر شما به حالت ثابت تبدیل میشه و به سمت چپ نوار با فاصله ی 5 پیکسل و با فاصله ی 10 پیکسل از بالای نوار قرار خواهد گرفت.

 

اما اگر بیش از 1 عنصر داشتید که باید همه رو به صورت دسته جمعی در یک مکان ثابت قرار بدید، بهتره کل عناصر مورد نظر رو داخل یک Div اضافه قرار بدید و بعد دستور بالا رو به اون DIV اضافه کنید. به این ترتیب چند عنصر شما باهم در یک مکان ثابت قرار خواهند گرفت. برای فاصله بین عناصر هم میتونید از margin-right: 5px استفاده کنید.

 

 

البته استفاده از Absolute یکی از راه های تعیین مکان عناصر در طراحی هست. همچنین میشه از Float یا حتی از Text Align هم گاهی اوقات استفاده کرد.

به اشتراک گذاری این ارسال


لینک به ارسال
به اشتراک گذاری در سایت های دیگر

برای ارسال دیدگاه یک حساب کاربری ایجاد کنید یا وارد حساب خود شوید

برای اینکه بتوانید دیدگاهی ارسال کنید نیاز دارید که کاربر سایت شوید

ایجاد یک حساب کاربری

برای حساب کاربری جدید در سایت ما ثبت نام کنید. عضویت خیلی ساده است !


ثبت نام یک حساب کاربری جدید

ورود به حساب کاربری

دارای حساب کاربری هستید؟ از اینجا وارد شوید


ورود به حساب کاربری

  • چه کسانی در حال بازدید هستند؟   0 کاربر

    هیچ کاربر عضوی،در حال مشاهده این صفحه نیست.