چگونه کد را وسط چین کنیم؟

سیدرضا بازیار · مرداد 93

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

http://www.rabeteha.com/page/menu

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

این اولین کدی هست که به دست خودم طراحی شده :lol:

amirali.bk · مرداد 93

سلام

شما کل ul هاتون رو بزار تو ی دایو مثلا footermenu

بعدش به بدنه position:relative بدید و به کلاس footermenu

position:absolute و left و bottom مقدار بدید بهش که بیاد وسط اوکی بشه

IMasoud · مرداد 93

از

position:absolute

تو این مورد استفاده نکنید چون کد های بهتر و بهینه تری سهت از نظر نمایش در صفحه می تونید از Margin استفاده کنید

اگر بخواید دلیل

position:absolute

هم می تونم بگم

سیدرضا بازیار · مرداد 93

توی کد یه دونه ul هست که 6 تا il داره

من ul رو توی div گذاشتم و توی margin:auto قرار دادم

اما هیچ تغییری نکرد

کد:


<!DOCTYPE html>
<html>
<head>
<title>balyan</title>
<style>
il:hover {
background-color: #999;
transition-duration:1s;
}
ul {
width:100%;
height:89px;
background-color: #CCC;
padding:30px
}
il {
width:80px;
height:75px;
margin:1px;
padding:3px;
text-align:center;
float:left;
transition-duration:1s;
}
a {
text-decoration:none;
color:#333;
display:block;
width:80px;
height:75px;
}
</style>
</head>
<body>
<ul>
<il>
<a href="#">
<img src="http://up.vbiran.ir/uploads/37121140655863940686_1406576070_internt_web_technology-01.png" width="50px" height="50px" />
Web
</a>
</il>
<il>
<a href="#">
<img src="http://up.vbiran.ir/uploads/4003414065591402141_1406577063_download.png" width="50px" height="50px" />
Download
</a>
</il>
<il>
<a href="#">
<img src="http://up.vbiran.ir/uploads/43111140655949812560_1406577425_bubble.png" width="50px" height="50px" />
Forum
</a>
</il>
<il>
<a href="#">
<img src="http://up.vbiran.ir/uploads/2217140656001119536_1406577936_package_games.png" width="50px" height="50px" />
Game
</a>
</il>
<il>
<a href="#">
<img src="http://up.vbiran.ir/uploads/2601114065604056941_1406578330_music.png" width="50px" height="50px" />
Music
</a>
</il>
<il>
<a href="#">
<img src="http://up.vbiran.ir/uploads/3729140656063419676_1406578565_read_message.png" width="50px" height="50px" />
SMS
</a>
</il>
</ul>
</body>
</html>

amirali.bk · مرداد 93

از
position:absolute
تو این مورد استفاده نکنید چون کد های بهتر و بهینه تری سهت از نظر نمایش در صفحه می تونید از Margin استفاده کنید
اگر بخواید دلیل
position:absolute
هم می تونم بگم

دلیلش رو می فرمایید؟

IMasoud · مرداد 93

دلیلش رو می فرمایید؟

چون نیازی نیست

مشاهده کن

به راحتی با display و text-align میشه آورد وسط

http://www.cssdesk.com/fdCbA

توی کد یه دونه ul هست که 6 تا il داره

من ul رو توی div گذاشتم و توی margin:auto قرار دادم

اما هیچ تغییری نکرد

کد:


<!DOCTYPE html>
<html>
<head>
<title>balyan</title>
<style>
il:hover {
background-color: #999;
transition-duration:1s;
}
ul {
width:100%;
height:89px;
background-color: #CCC;
padding:30px
}
il {
width:80px;
height:75px;
margin:1px;
padding:3px;
text-align:center;
float:left;
transition-duration:1s;
}
a {
text-decoration:none;
color:#333;
display:block;
width:80px;
height:75px;
}
</style>
</head>
<body>
<ul>
<il>
<a href="#">
<img src="http://up.vbiran.ir/uploads/37121140655863940686_1406576070_internt_web_technology-01.png" width="50px" height="50px" />
Web
</a>
</il>
<il>
<a href="#">
<img src="http://up.vbiran.ir/uploads/4003414065591402141_1406577063_download.png" width="50px" height="50px" />
Download
</a>
</il>
<il>
<a href="#">
<img src="http://up.vbiran.ir/uploads/43111140655949812560_1406577425_bubble.png" width="50px" height="50px" />
Forum
</a>
</il>
<il>
<a href="#">
<img src="http://up.vbiran.ir/uploads/2217140656001119536_1406577936_package_games.png" width="50px" height="50px" />
Game
</a>
</il>
<il>
<a href="#">
<img src="http://up.vbiran.ir/uploads/2601114065604056941_1406578330_music.png" width="50px" height="50px" />
Music
</a>
</il>
<il>
<a href="#">
<img src="http://up.vbiran.ir/uploads/3729140656063419676_1406578565_read_message.png" width="50px" height="50px" />
SMS
</a>
</il>
</ul>
</body>
</html>

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


ul {
width: 100%;
height: 89px;
background-color: #CCC;
padding: 30px;
text-align: center;
}

در ضمن li نه il


li {
width: 80px;
height: 75px;
margin: 1px;
padding: 3px;
text-align: center;
display: inline-block;
transition-duration: 1s;
}

سیدرضا بازیار · مرداد 93

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

استفاده کردم. اما هیچ اثری نکرد

در ضمن li نه il

متوجه این اشتباه شده بودم. اما به دو دلیل این اشتباه رو کردم:

1- واسه مخفی کردن نقطه تو پر کنار اون

2- واسه اینکه برعکس هم کار میکرد

:lol:

amirali.bk · مرداد 93

د

چون نیازی نیست
مشاهده کن
به راحتی با display و text-align میشه آورد وسط
http://www.cssdesk.com/fdCbA

دوسته عزیز دلیلتون همین بود؟؟

text-align برای متن کار میکنه نه عکس به کار شده در نمونه فوق

یکی از بهترین راه ها برای قرار گیری عکس و متن در یک دایو والد همین position ها هستند ..مورد شما غیر اصولی هست چون برای عکس و متن جور در نمیاد

موفق باشید

IMasoud · مرداد 93

د
دوسته عزیز دلیلتون همین بود؟؟
text-align برای متن کار میکنه نه عکس به کار شده در نمونه فوق
یکی از بهترین راه ها برای قرار گیری عکس و متن در یک دایو والد همین position ها هستند ..مورد شما غیر اصولی هست چون برای عکس و متن جور در نمیاد
موفق باشید

لطفاً اول یه تست بنما بعد نقد کنید

http://www.cssdesk.com/RuXJE

سیدرضا بازیار · مرداد 93

طبق گفته اساتید html5 باید واسه وسط چین از margin استفاده کرد. هر چند کد های دیگه هم این کار رو انجام میدن، اما margin صحیح تر هست.

البته این کد ذهن من رو به کلی مشغول کرده. هیچ کدی نمیتونه اون رو بیاره وسط صفحه!

IMasoud · مرداد 93

طبق گفته اساتید html5 باید واسه وسط چین از margin استفاده کرد. هر چند کد های دیگه هم این کار رو انجام میدن، اما margin صحیح تر هست.
البته این کد ذهن من رو به کلی مشغول کرده. هیچ کدی نمیتونه اون رو بیاره وسط صفحه!

الان دیگه با لینکی که دادم مشکلی نیست میاد وسط

سیدرضا بازیار · مرداد 93

الان دیگه با لینکی که دادم مشکلی نیست میاد وسط

نه

هیچ تغییری نکرده

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

IMasoud · مرداد 93

اینو به جای کدای قبلی اضافه کن


ul {
width: 100%;
height: 89px;
background-color: #CCC;
padding: 30px;
text-align: center;
}
li {
width: 80px;
height: 75px;
margin: 1px;
padding: 3px;
text-align: center;
display: inline-block;
transition-duration: 1s;
}

سیدرضا بازیار · مرداد 93

شمای بجای float از display استفاده کردید

در حالی که استاندارد جدید میشه از float استفاده کنیم. تفاوت این دوتا چیه؟

شما بدون استفاده از list-style-type:none; تونستید نقطه تو پر رو بردارید!

کلا این کد باعث شد که نا امید بشم. چون چیز هایی رو. که یاد گرفته بودم جواب نمیدن. اما کد شما جواب داد

IMasoud · مرداد 93

خوب قرار نیست که یک استاندارد جدید اضافه میشه دیگه از روش های گذشته استفاده نکنیم

چون اینجا ما از li در ul در شرایط خاصی استفاده می کنیم نمی تونیم از float استفاده کنیم

چرا؟

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

از سایت http://stackoverflow.com/ استفاده کنید آموزش های جامعی توش هست

سیدرضا بازیار · مرداد 93

خوب قرار نیست که یک استاندارد جدید اضافه میشه دیگه از روش های گذشته استفاده نکنیم
چون اینجا ما از li در ul در شرایط خاصی استفاده می کنیم نمی تونیم از float استفاده کنیم
چرا؟
چونکه از والدش میاد بیرون و در نتیجه والد بدون فرزند می مونه و حرفی برای گفتن نداره
از سایت http://stackoverflow.com/ استفاده کنید آموزش های جامعی توش هست

اون سایت خارجیه...

کد float اون رو از چپ به راست شناور کرد (در حالی که پیشفرض از بالا به پایین بود) و کد list-style-type اون رو از حالت نقطه تو پر خارج میکرد. اما این دو کد باعث شد که از حالت والد خارج بشه و به دستور وسط چین شدن پیروی نکنه

اما کد شما تونست کار چندین کد رو انجام بده

حالا 2 تا سوال برام پیش اومده:

کد شما "display: inline-block;" دقیقا چه کار هایی رو انجام میده؟

سوال دوم رو توی پست بعدی میپرسم

ویرایش شده مرداد 93 توسط سیدرضا بازیار

IMasoud · مرداد 93

اون سایت خارجیه...
کد float اون رو از چپ به راست شناور کرد (در حالی که پیشفرض از بالا به پایین بود) و کد list-style-type اون رو از حالت نقطه تو پر خارج میکرد. اما این دو کد باعث شد که از حالت والد خارج بشه و به دستور وسط چین شدن پیروی نکنه
اما کد شما تونست کار چندین کد رو انجام بده
حالا 2 تا سوال برام پیش اومده:
کد شما "display: inline-block;" دقیقا چه کار هایی رو انجام میده؟
سوال دوم رو توی پست بعدی میپرسم

display:block حالت یه بلوک عمل می کنه یعنی مثل یه بلوک سیمانی دقیقاً مثل همون حالا فرض کن 10 تا بلاک روی هم چیدیم این میشه block

اما اگر از inline استفاده کنیم خط میشه معنیش با خودشه In:در + Line: خط

که با اضافه کردن textalign هم وسط چین میشه

سیدرضا بازیار · مرداد 93

من روزانه 8 ساعت به آموزش برنامه نویسی می پردازم و 4 ساعت هم کلا چشمم بسته و تایپ میکنم... . اما حالا متوجه شدم که باید بیشتر تمرین کنم

اگه دقت کنید، سمت چپ کد یکم از صفحه فاصله داره

من میخوام کد رو واسه فوتر بزارم که دقیقا فوتر رو بدون هیچ مشکلی بگیره (واسه یه صفحه html)

لطفا راهنمایی کنید

IMasoud · مرداد 93

من روزانه 8 ساعت به آموزش برنامه نویسی می پردازم و 4 ساعت هم کلا چشمم بسته و تایپ میکنم... . اما حالا متوجه شدم که باید بیشتر تمرین کنم
اگه دقت کنید، سمت چپ کد یکم از صفحه فاصله داره
من میخوام کد رو واسه فوتر بزارم که دقیقا فوتر رو بدون هیچ مشکلی بگیره (واسه یه صفحه html)
لطفا راهنمایی کنید

دست عزیز شما از پایه مشکل دارید

1- باید از ابزار ریست استفاده کنید http://meyerweb.com/eric/tools/css/reset/reset.css

سیدرضا بازیار · مرداد 93

دست عزیز شما از پایه مشکل دارید
1- باید از ابزار ریست استفاده کنید http://meyerweb.com/...reset/reset.css

ابزار ریست چیه؟ و اون لینک چیه؟

اون منو رو که ساختم میخوام بزاریم پایین سایتم www.balyan.ir

از چه کدی استفاده کنم؟

IMasoud · مرداد 93

ابزار ریست چیه؟ و اون لینک چیه؟
اون منو رو که ساختم میخوام بزاریم پایین سایتم www.balyan.ir
از چه کدی استفاده کنم؟

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

اما در خصوص RESET باید بگم به قالب سایت کمک می کنه که از مقدار های اولیه که مرورگر استفاده می کنه جلو گیری کنه مثلاً اکثر مرورگر ها به تگ P فاصله از بالا و پایین می دن(Margin) که زیاد جالب نیست، و شما باید این ریست رو مثل یه فایل سی اس اس به قالبتون اضافه کنید یا همون به فایل Style.css اضافه کنید

در ضمن اگر اضافه کردید دیدید که همه چیز تغییر کرده از نظر فاصله ها و اندازه ها بدونید که در اون حالت درست هستش نه حالت قبل و دوباره مقدار دهی کنید.

سیدرضا بازیار · مرداد 93

سایتت رو دیدم که منو درست شده
اما در خصوص RESET باید بگم به قالب سایت کمک می کنه که از مقدار های اولیه که مرورگر استفاده می کنه جلو گیری کنه مثلاً اکثر مرورگر ها به تگ P فاصله از بالا و پایین می دن(Margin) که زیاد جالب نیست، و شما باید این ریست رو مثل یه فایل سی اس اس به قالبتون اضافه کنید یا همون به فایل Style.css اضافه کنید
در ضمن اگر اضافه کردید دیدید که همه چیز تغییر کرده از نظر فاصله ها و اندازه ها بدونید که در اون حالت درست هستش نه حالت قبل و دوباره مقدار دهی کنید.

الآن منو درست شده اما پایین صفحه قرار نمیگیره (فقط بعد از سرچ پایین میاد)

حالا چیکار کنم که منو همیشه پایین باشه؟ (با متن ها هم حرکت کنه)

ویرایش شده مرداد 93 توسط سیدرضا بازیار

IMasoud · مرداد 93

من بخوام الان برای شما توضیح بدم به جای نمیرسه و این تاپیک خودش میشه یه دوره آموزشی

شما کلاً به اصول کد نویسی آشنا نیستید پیشنهاد می کنم هدفمند تر مطالعه کنید

سیدرضا بازیار · مرداد 93

من بخوام الان برای شما توضیح بدم به جای نمیرسه و این تاپیک خودش میشه یه دوره آموزشی
شما کلاً به اصول کد نویسی آشنا نیستید پیشنهاد می کنم هدفمند تر مطالعه کنید

من فقط میخوام یه فوتر مثل بقیه سایت ها قرار بدم

اما توی هیچ انجمنی پاسخ نگرفتم

Farzad · مرداد 93

من فقط میخوام یه فوتر مثل بقیه سایت ها قرار بدم
اما توی هیچ انجمنی پاسخ نگرفتم

شاید مشکل از پرسیدن و انتظارات شماست

ساختار کدتون صحیح نیست کلاً.

چگونه کد را وسط چین کنیم؟

پست های پیشنهاد شده

سیدرضا بازیار 257

لینک به ارسال

amirali.bk 656

لینک به ارسال

IMasoud 102

لینک به ارسال

سیدرضا بازیار 257

لینک به ارسال

amirali.bk 656

لینک به ارسال

IMasoud 102

لینک به ارسال

سیدرضا بازیار 257

لینک به ارسال

amirali.bk 656

لینک به ارسال

IMasoud 102

لینک به ارسال

سیدرضا بازیار 257

لینک به ارسال

IMasoud 102

لینک به ارسال

سیدرضا بازیار 257

لینک به ارسال

IMasoud 102

لینک به ارسال

سیدرضا بازیار 257

لینک به ارسال

IMasoud 102

لینک به ارسال

سیدرضا بازیار 257

لینک به ارسال

IMasoud 102

لینک به ارسال

سیدرضا بازیار 257

لینک به ارسال

IMasoud 102

لینک به ارسال

سیدرضا بازیار 257

لینک به ارسال

IMasoud 102

لینک به ارسال

سیدرضا بازیار 257

لینک به ارسال

IMasoud 102

لینک به ارسال

سیدرضا بازیار 257

لینک به ارسال

Farzad 3805

لینک به ارسال

به گفتگو بپیوندید