دو div تو در تو [بایگانی]

teymoorei

یک شنبه 31 فروردین 1393, 14:48 عصر

سلام
دوستان چطور میتونم طرح زیر رو با تگ های div ایجاد کنم ؟
118188

ab.ali

یک شنبه 31 فروردین 1393, 22:55 عصر

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Test</title>

<style>

.F{
width:400px;
height:400px;
border:1px solid #000;
margin:0px auto}

.L{
width:500px;
height:50px;
border:1px solid #000;
margin:30px -50px 0px 0px}

</style>

</head>

<body dir="rtl">

<div class="F">

<div class="L"></div>
</div>

</body>
</html>

برای دیو داخلی از position:absolute هم می تونی استفاده کنی!

teymoorei

یک شنبه 31 فروردین 1393, 23:36 عصر

سلام

ممنونم از توجه تون

یه سوال دارم فقط

من کد زیر رو میدونم چیکار میکنه ، اما مفهومی متوجه نمیشم ، اگه میشه یه توضیح بدید :

margin:0px auto

ab.ali

یک شنبه 31 فروردین 1393, 23:58 عصر

سلام

ممنونم از توجه تون

یه سوال دارم فقط

من کد زیر رو میدونم چیکار میکنه ، اما مفهومی متوجه نمیشم ، اگه میشه یه توضیح بدید :

margin:0px auto

نگاه کنید دوست عزیز شما برای فاصله دادن به یک دیو با position:relative یا static به صورت پیشفرض از margn استفاده می کنیم که چهار نوع داره :

margin-top فاصله از بالا
margin-left فاصله از چپ و ...

یعنی یک دیو چه تو در تو و چه بیرون از یک دیو فاصله دیو دومی رو از دیو اولی مشخص می کنه.
گاهی اوقات در CSS همه تگ های بالایی رو با هم مخلوط می کنیم و این طوری margin: فاصله از بالا - فاصله از راست- فاصله از پایین -فاصله از چپ

توی همون مثالی که برای شما زدم گفتم به دیو اولی margin: 0px auto یعنی از بالا فاصله اش صفر باشه و بطور خودکار از سمت راست که جهت صفحه همون نیز راسته گفتیم بیا وسط وایسا، حالا اگز جهت صفحه چپ بود باید به چپی auto بدیم!

البته برای position:absolute قضیه فرق داره!

حمید . ه

دوشنبه 01 اردیبهشت 1393, 00:09 صبح

نکته ای که در مورد margin و padding لازم میدونم بگم
تا اونجایی که دوستمون جز به جز مقادیر رو گفتن کا از بالا و چپ و .... درست بود اما
وقتی شما دو مقدار میدید مثل کد زیر
margin:0 auto
مرورگر به این صورت مقادیر رو ست میکنه که مقدار اول رو برای بالا و پایین قرار میده و مقدار دوم رو برای چپ و راست
این که گفتید اگه چپی بود باید به چپی بدیم اشتباهه برای مثالتون
مساله بعدی اینکه برای قالب بندی اصلی سایت از position:absolute استفاده نکنید چون باعث میشه سایتتون بهم بریزه

ab.ali

دوشنبه 01 اردیبهشت 1393, 00:33 صبح

با تشکر از دوست عزیز که مشکل منو گفتند همچنین به موضوع خیلی خوبی اشاره کردند که در طراحی و قالب بندی نباید از absolute استفاده کرد به خصوص اگر شما در کار وردپرس هم کار می کنید. چون relative به نسبت اجزای دیگر مکانش عوض می شه ولی absolute ثبت و دقیق در جایی که شما مشخص کنی قرار می گیره که یکی از مشکلاتش قرار گیری پست ها است که با ساتفاده از absolute هر مطلب روی مطلب دیگری قرار می گیره!

teymoorei

پنج شنبه 09 مرداد 1393, 18:30 عصر

سلام

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

چطور میتونم تگ div رو کامل بچسبونم به لبه بالای مرورگر ؟

باتشکر

omidparkour

پنج شنبه 09 مرداد 1393, 18:38 عصر

سلام
باید شما از css reset استفاده کنید
کد زیر رو به ابتدای فایل css تون اضافه کنید:
*{ text-decoration:none;
margin: 0 auto;
padding: 0;
border: 0;
outline: 0;
direction: rtl;
font-family:"B Yekan";
}

omidparkour

پنج شنبه 09 مرداد 1393, 18:38 عصر

البته اگر منظورتون رو درست متوجه شده باشم :چشمک:

vimax23

پنج شنبه 09 مرداد 1393, 19:09 عصر

دیوهای تو در تو دو تا نکته اصلی داره
دیو پدر position:relative; میگیره
دیو فرزند position:absolute; بعد با مارجین میتونی جا به جاش کنی

در مورد سئوال دومت top:0px; باشه دیو به بالا می چسبه اگر میخوایی کلا ثابت بمونه باید display:fixed; باشه

teymoorei

جمعه 10 مرداد 1393, 14:26 عصر

سلام

ممنونم از توجه تون

اما مشکل حل نشد این کد ها رو قبلا تست کرده بودم

من میخوام به نوار بالا ی مرور گر بچسبه توی تصویر زیر همه چی معلومه :

121848

vimax23

جمعه 10 مرداد 1393, 14:34 عصر

سلام ممنونم از توجه تون اما مشکل حل نشد این کد ها رو قبلا تست کرده بودم من میخوام به نوار بالا ی مرور گر بچسبه توی تصویر زیر همه چی معلومه : 121848 کد رو بزار تو http://jsfiddle.net/

teymoorei

جمعه 10 مرداد 1393, 14:51 عصر

خوب این سایت چیکار میکنه ؟
باید من چیکار کنم ؟

masoud_pnu

جمعه 10 مرداد 1393, 18:21 عصر

شما باید margin تگ body روهم صفر کنی.
jsfiddleهم یه سایته که به شما امکان میده کدهاتون رو توش قرار بدید.یه ادیتوره که قابلیت تفسیر کدهارو هم داره.

teymoorei

جمعه 10 مرداد 1393, 18:58 عصر

من margin رو هم 0 کردم ولی فایده ای نداشته .

لطفا یه راهنمایی اساسی بفرمایید .

masoud_pnu

جمعه 10 مرداد 1393, 19:03 عصر

الان برگردم منزل براتون انجامش میدم.روچشمام.

masoud_pnu

جمعه 10 مرداد 1393, 20:40 عصر

سلام.ببین این واسه فول اسکرین هستش.خواستی تا واسه مینیمایز شده رو هم ردیف کنیم.
http://jsfiddle.net/XhLeX/

teymoorei

جمعه 10 مرداد 1393, 21:59 عصر

ممنون درست شد