استفاده divبه جای table

mostang

New Member
سلام
اول بگم که سرچ کردم تاپیک های زیادی رو هم خوندم ولی بیشترشون کمکم نکردن
کد پایین رو ملاحضه کنین

کد:
<html>
<head>
<style type="text/css">
<!--
body {
margin: 0px;
padding: 0px;
}
#header {
 background:#0F0;
 width:100%;
}
#content {
 float:left;
 background:#a56;
 height:600px;
}
#right {
 float:right;
 background:#660;
 max-width:200px;
 height:600px;
}
#footer {
 background:#c0c;
 width:100%;
 clear:both;
}
-->
</style>
</head>
<body>
<div id="header">Header Section</div>
<div id="content">Content Sectionnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnn</div>
<div id="right">Left Section</div>
<div id="footer">Footer Section</div>
</body>
</html>
من قصدم از نوشتن این کد این بوده که عامل Left Section حداکثر اندازه اش 200 باشه و بقیه صفحه رو همContent Section پر کنه
مشکلی که پیش اومده اینه که اولا عاملContent Section سایزش با محتوای داخلش تغییر میکنه مشکل بعدی اینکه من میخوام با کوچیک شدن صفحه مرورگر تمامی موارد موقعیت خودشون رو از دست ندن یعنی کوچیک نشن و همچنین عامل Left Section شوت نشه پایین.
من تا حال این کارا رو با جدول انجام میدادم بدون دردسر اما به دلیل سرعت لود css علی رغم میل باطنی مجبور به استفاده از ان شدم فعلان هم در css تازه کار هستم اولین مشکل بزگی که برام پیش اومده همین مشکله که اگه حلش کنید خیلی لطف کردین.
این مشکل اعصابمو ریخته به هم:mad:قاطی کردم:shock:
 
آخرین ویرایش:

shirini_forush

Well-Known Member
با سلام
مشکل اصلی این کد اینه که ترتیب مناسب برای استفاده از div ها رعایت نشده.
استفاده از Table خیلی راحت بود و نیازی به فکر کردن نداشت.
اما کار با div یه سری قوانینی داره که اگر رعایت نشه تو css ش میمونیم.
مثلا این که تقریبا برای هر layout ی که div based باشه ما باید تمام div ها رو تو یه div که معمولا تو منابع آموزشی اسم holder رو بهش میدن بذاریم.
در مجموع توصیه میکنم حتما قبل از سویچ کردن به layout خای div based یکی دو تا کتاب در زمینه ی طراحی صفحات وب که روی css و ساختار های جدید تر طراحی قوی کار کردن مطالعه کنید.
 

mostang

New Member
مرسی
اگه میشه چند کتاب معرفی کنید و اگه وقت دارید کدهایی که فرستادم رو برام درست کنید کارم گیره مرسی:d
 

maxpelank

Active Member
:cool:

با سلام

اقا با توجه به گفته شما من با دادن استایلposition:relative; این مشکلتون رو حل کردم .
امید وارم که بتنونه کمکتون بکنه
اینم تغیراتی که تو کد بالا دادم به position: دقت کنید که کجا چی دادم اشتباه نکنید .:

<html>
<head>
<style type="text/css">
<!--
body {
margin: 0px;
padding: 0px;
}
#header {
background:#0F0;
width:100%;
}
#content {
float:left;
background:#a56;
height:600px;
}
#right {
float:right;
background:#660;
max-width:200px;
height:600px;
}
#footer {
background:#c0c;
width:100%;
clear:both;
}
#main{
position:relative;
width:800px;
float:none;
}
-->
</style>
</head>
<body>
<div align="center">
<div id="main">
<div id="header">Header Section</div>
<div id="content">Content Sectionnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnn</div>
<div id="right">Left Section</div>
<div id="footer">Footer Section</div>
</div>
</div>
</body>
</html>

:cool:
 

tarhebartar

Member
اصلا شما width رو درست ندادی.تازه مشکلی هم نداره.در شمن padding هم یادت نره.float ها رو هم درست تر بده.

کلا مشکلش زیاد نیست
 

echessdesign

مدیر انجمن طراحی وب
دوست عزیز، پیش از زدن پست، به تاریخ تایپیک توجه کن، جدا از بالا آوردن تایپیک های قدیمی بپرهیزید.
 

echessdesign

مدیر انجمن طراحی وب
دوست عزیز، پیش از زدن پست، به تاریخ تایپیک توجه کن، جدا از بالا آوردن تایپیک های قدیمی بپرهیزید.
 

جدیدترین ارسال ها

بالا