• اطلاعیه ها

    • Morteza

      باهم بسازیم: اطلس ووکامرس و وردپرس   14/07/96

      تاپیک ایجاد شده برای بحث در جهت ایجاد یک منبع، ویکی، صفحات توضیحی و یا بخش آموزشی جامع برای وردپرس و متعلقات مختلف آن است. لطفا جهت مشارکت در این بحث، ارائه پیشنهاد و یا انتقاد به تاپیک فوق مراجعه کنید. باهم بسازیم: اطلس ووکامرس و وردپرس
saranekonam

بهم ریختگی CSS

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

سلام
بنده یه کد ساده CSS نوشتم ولی وقتی به عنصر قرمز رنگ خاصیت float:left میدم از main میزنه بیرون و میره پایین
من میخوام عنصر قرمز بیاد کنار عنصر سبز

کد HTML

<!doctype html>
<html>

<head>
  <meta charset="UTF-8">
  <link rel="stylesheet" href="style.css">
  <title>تست</title>
</head>

<body>
  <div class="header"></div>
  <div class="main">
<!-- header Class -->
  <div class="right-box"></div>
  <div class="content"></div>
</div>
</body>

</html>

 

 

کد CSS

body{
  margin: 0;
  padding: 0;
  direction: rtl;
  background-color: #000000;
}
.main{
  background-color: #000000;
  width: 960px;
  height: auto;
  border: 5px solid white;
  margin: 10px auto;


}
.header {
  background-color: #ffffff;
  height: 137px;
  width: 960px;
  margin: auto;
}
.right-box {
  margin: 10px;
  width: 230px;
  height: 900px;
  background-color: #92c586;
}
.content {
  width: 690px;
  height: 900px;
  margin: 10px;
  background-color: red;
}

 

عکس:

 

Untitled-1.jpg

0

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


لینک به پست

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

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

ویرایش شده در توسط M.Javad
0

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


لینک به پست
در 31 دقیقه قبل، M.Javad گفته است :

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

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

0

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


لینک به پست

سلام!

الآن عرض content 960 پیکسل هست و main  هم دقیقا همین مقداره پس کلا نباید انتظار داشته باشین چیز دیگه ای توش جا بشه!

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

معمولا در اینجور مواقع نباید به div مادر width ثابت بدین ...

موفق باشین;)

0

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


لینک به پست
در 9 دقیقه قبل، mashkook گفته است :

سلام!

الآن عرض content 960 پیکسل هست و main  هم دقیقا همین مقداره پس کلا نباید انتظار داشته باشین چیز دیگه ای توش جا بشه!

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

معمولا در اینجور مواقع نباید به div مادر width ثابت بدین ...

موفق باشین;)

عرض content 690 هستش نه 960

جای

<div class="content"></div>

رو با

<div class="right-box"></div>

عوض کردم.

 

 

-----

 

و به عنصر. content مقدار float:left رو اضافه کردم درست شد.

 

شانسی درست شد.

شما میدونید چرا اینجوری درست شد؟

0

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


لینک به پست

درسته ! اشتباه دیدم :) !

---

برای این کارتون هم :

float:left میگه که عنصر سمت چپ باشه ( از سمت چپ شروع بشه ) 

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

فک میکنم عوض کردن جای این دو تا اهمیتی نداشته باشه و فقط با float درست میشد (الآن هم به اون عنصر دیگه float :right  بدین که مشکل نخورین)

در کل css باید باهاش خیلی ور رفت تا درست نوشتنش دستتون بیاد ، استدلال ها و پیشفرض های خاصی برای خودش داره...:))

1

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


لینک به پست
در 1 ساعت قبل، mashkook گفته است :

درسته ! اشتباه دیدم :) !

---

برای این کارتون هم :

float:left میگه که عنصر سمت چپ باشه ( از سمت چپ شروع بشه ) 

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

فک میکنم عوض کردن جای این دو تا اهمیتی نداشته باشه و فقط با float درست میشد (الآن هم به اون عنصر دیگه float :right  بدین که مشکل نخورین)

در کل css باید باهاش خیلی ور رفت تا درست نوشتنش دستتون بیاد ، استدلال ها و پیشفرض های خاصی برای خودش داره...:))

جاش که عوض میشه واقعا تاثیر داره
خودتون تست کنید

0

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


لینک به پست

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

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

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

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


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

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

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


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