3245

وسط چین کردن یک باکس در css

9 پست در این موضوع

ارسال شده در (ویرایش شده)

سلام

دوستان من در فوتر باکسی تنظیم کردم که این باکس نمایش آخرین مطالب rss رو نمایش میده

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

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

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

[ATTACH=CONFIG]6657[/ATTACH]

ویرایش شده در توسط 3245

Share this post


Link to post
Share on other sites
سلام

دوستان من در فوتر باکسی تنظیم کردم که این باکس نمایش آخرین مطالب rss رو نمایش میده

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

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

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

[ATTACH=CONFIG]6657[/ATTACH]

با استفاده از دستور margin-right و margin-left درcss می توانید باکس را از سمت راست جدا کنید

مقادیر متفاوتی به margin-right بدهید تا به هدفتان دست یابید.

موفق باشید

Share this post


Link to post
Share on other sites

ممنون از شما، اما تونستم با دستور زیر نیازم رو بهتر برآورده کنم

    position: relative;
   right: 500px;

اما متاسفانه مشکلی که هست، این باکس دارای عکس تایتل و دارای هشت فیلد در پایینش هست همونطور که در عکس میبینید، این باعث میشه که بخویم هریک از اینها را جای دهی کنیم کار سختی بشه، با توجه به اینکه قصد اضافه کردن 4 باکس دیگه برای موضوعات دیگر هم دارم.

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

ممنون از پاسخ شما.

Share this post


Link to post
Share on other sites

سلام

یک کلاس با موقعیت Center ایجاد کنید ، مابقی رو درونش قرار بدید :

کد CSS :

@charset "utf-8";
/* CSS Document */

.Thems
 {
  position:relative;
  margin:0 auto;
  background:#999;
  border-radius:7px;
  width:700px;
  height:400px;
  padding:10px;

 }

#box-1
 {
  width:150px;
  height:100px;
  background-color:#09C;
 }

کد html :

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<link href="style.css" rel="stylesheet" type="text/css">
</head>

<body>

<div class="Thems">

<!------- محتوای اول ------------->
<div id="box-1">Hello</div>

<!------- محتوای دوم ------------->
<!------- محتوای سوم ------------->
<!----------- . ------------->
<!----------- . ------------->
<!----------- . ------------->

</div>

</body>
</html>

نتیجه در خروجی :

do.php?imgf=joomlaforum.ir_14057087951.jpg

Share this post


Link to post
Share on other sites
سلام

یک کلاس با موقعیت Center ایجاد کنید ، مابقی رو درونش قرار بدید :

کد CSS :

@charset "utf-8";
/* CSS Document */

.Thems
 {
  position:relative;
  margin:0 auto;
  background:#999;
  border-radius:7px;
  width:700px;
  height:400px;
  padding:10px;

 }

#box-1
 {
  width:150px;
  height:100px;
  background-color:#09C;
 }

کد html :

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<link href="style.css" rel="stylesheet" type="text/css">
</head>

<body>

<div class="Thems">

<!------- محتوای اول ------------->
<div id="box-1">Hello</div>

<!------- محتوای دوم ------------->
<!------- محتوای سوم ------------->
<!----------- . ------------->
<!----------- . ------------->
<!----------- . ------------->

</div>

</body>
</html>

نتیجه در خروجی :

do.php?imgf=joomlaforum.ir_14057087951.jpg

با تشکر از شما،

خیلی خیلی ممنون،

فقط یک مشکلی، من الان کد رو اضافه کردم، اما باکس افتاده بالا، و نوشته Hello جای درستی افتاده، فقط نمیدونم چطور باکس رو کنترل کنم که پشت Hello بیفته دقیقا.

در اسکرین شات ببینید لطفا

[ATTACH=CONFIG]6661[/ATTACH]

ممنون.

Share this post


Link to post
Share on other sites
موقعیت های قالب رو فعال کنید و دموی آنلاین قرار بدید.

متاسفانه قالب سیستم مدیریت محتوا جوملا نیست

و روی لوکال هست

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

Share this post


Link to post
Share on other sites

من با حذف position:relative; تونستم این مشکل رو حل کنم.

فقط الان میخواستم Hello رو ببرم بالاتر، روی لایه سفید بندازم، چطور میتونم انجام بدم این مورد رو؟

ممنون از پاسخ های حرفه ای شما.

Share this post


Link to post
Share on other sites

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

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

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

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


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

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

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


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