ورود

View Full Version : سوال: مشكل با قرار گيري جدول ها



mirzajavad
شنبه 17 مهر 1389, 22:58 عصر
سلام
دارم يك قالب ميزنم
ولي توي بخش قرار گيري سايد بار چپ به مشكل برخوردم هر كار ميكنم سر جاي خودش نميره
همه جور position رو هم بهش دادم درست نشد
دوستان ممنون ميشم يك نگاهي بندازين
آخه ميخواهم سريع بخشهاي ديگرش رو تكميل كنم چون نيازه :قلب:



body {
direction: rtl;
text-align: right;
font-family: tahoma;
text-decoration: none;
}

#wrapper {
width: 950px;
margin:auto;
font-size: 13px;
}

#header {
width: 950px;
height: 150;
-moz-border-radius:4px;
border: 1px solid #FF6600;
margin:10px 0 5px 0;
}

#r_col {
width: 200px;
float: right;
}

#l_col {
width: 200px;
float: left;
}

#sidbar {
width: inherit;
height: auto;
border: 1px solid #FF6600;
-moz-border-radius-bottomright:4px;
-moz-border-radius-bottomleft:4px;
margin-bottom: 5px;
}

#top_sidbar {
width: inherit;
border: 1px solid #FF6600;
border-bottom: 0;
-moz-border-radius-topright:4px;
-moz-border-radius-topleft:4px;
padding: 5px 0 5px 0;
text-align: center;
}

#c_col {
width: 538px;
margin: 0 auto;
}

#content {
width: inherit;
height: auto;
border: 1px solid #FF6600;
-moz-border-radius-bottomright:4px;
-moz-border-radius-bottomleft:4px;
margin-bottom: 5px;
}

#top_content {
width: inherit;
border: 1px solid #FF6600;
border-bottom: 0;
-moz-border-radius-topright:4px;
-moz-border-radius-topleft:4px;
padding: 5px 0 5px 0;
text-align: center;
float: none;
}

#footer {
width: 950px;
padding: 5px 0 5px 0;
border: 1px solid #FF6600;
clear: both;
-moz-border-radius:4px;
text-align: center;
}

#image {
margin: 10px;
border: 2px solid #CDCDCD;
width: 180px;
height: 180px;
}

#image img {
width: 180px;
height: 180px;
}

#image img:hover {
position: relative;
width: 300px;
left: 60px;
bottom: 60px;
height: 300px;
z-index: 1;
border: 3px solid #000000;
}




<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<meta http-equiv="Expires" content="Fri, Jan 01 1900 00:00:00 GMT">
<meta http-equiv="Pragma" content="no-cache">
<meta http-equiv="Cache-Control" content="no-cache">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta http-equiv="content-language" content="en">
<meta name="author" content="">
<meta http-equiv="Reply-to" content="@.com">
<meta name="generator" content="PhpED 4.5">
<meta name="description" content="توضيحات سايت">
<meta name="keywords" content="كلمات كليدي">
<meta name="creation-date" content="02/20/2006">
<meta name="revisit-after" content="15 days">
<title>عنوان سايت</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div id="wrapper">
<div id="header">
</div>
<div id="r_col">
<div id="top_sidbar">
عنوان
</div>
<div id="sidbar">
سايدبار راست
</div>
</div>
<div id="c_col">
<div id="top_content">
عنوان
</div>
<div id="content">
مطالب سايت
</div>
</div>
<div id="l_col">
<div id="top_sidbar">
عنوان
</div>
<div id="sidbar">
سايدبار چپ
</div>
</div>
<div id="footer">
كپي رايت
</div>
</div>
</body>
</html>

xoogle.ir
شنبه 17 مهر 1389, 23:19 عصر
مشکلتون float نکردن div وسط بود.
پیشنهاد میکنم اسم های بهتری برای المنت های صفحه تون انتخاب کنید. مثلا اسم گذاری با - توی css متداول هست نه با _ یعنی به جای top_content بهتره بذارید top-content

mirzajavad
شنبه 17 مهر 1389, 23:29 عصر
مرسي
آيا از شيوه خوبي در css نويسي استفاده مي كنم ؟
يك مشكل ديگه وقتي به top_content مقدار padding راست يا چپ ميدم ميرزه به هم ولي در مورد padding بالا و پايين مشكلي نداره !

xoogle.ir
یک شنبه 18 مهر 1389, 00:01 صبح
خب به خاطر این به هم میریزه که عرض div تون زیاد میشه.
یعنی اگر عرض div شما 600 باشه و شما 10 تا padding-right بهش اضافه کنید عرض div تون میشه 610.
برای اینکه این مشکل براتون پیش نیاد هر چه قدر که padding به div اضافه میکنید از عرض div کم کنید.
این قانون برای margin و border هم هست. یعنی این 3 تا استایل ، به عرض المنت شما اضافه میکنند.

پ ن : در مورد ارتفاع هم همین طوره.

mirzajavad
یک شنبه 18 مهر 1389, 00:07 صبح
ولي من اينجوري مقدار دهي كردم


width: inherit;

چون هر كدوم از سايدبارها و بخش مطالب همون طور كه مشاده ميكنيد درون يك نگه دارنده هستش و اين مقدار inherit بايد خودشو سازگار كنه

xoogle.ir
یک شنبه 18 مهر 1389, 00:31 صبح
من تا حالا اینو امتحان نکردم :متفکر: ولی به نظر نمیرسه که ارث بری ربطی به تعیین خودکار عرض div داشته باشه.
حالا بقیه دوستان بیشتر توضیح میدن