PDA

View Full Version : استفاده از div برای قالب بندی سایت به جای table


M.T.P
چهارشنبه 30 شهریور 1390, 23:11 عصر
با سلام
کد زیر یک ستون با عرض 800px رو در مرکز صفحه ایجاد میکند و در تمامی مرورگرها در وسط نمایش داده میشه اما تو IE میره سمت راست!

به نظر شما مشکل کجاست؟



<html dir="rtl" lang="fa-IR">

<head>
<title>My Title</title>
</head>

<body>

<div style="background-color:darkgreen;width:800px;margin-top:0px;margin-bottom:0px;margin-left:auto;margin-right:auto">Test text</div>

</body>
</html>

با تشکر
hamidre13
پنج شنبه 31 شهریور 1390, 06:10 صبح
شما یک دیو کلی دیگه بزار بعد این دیو رو بزار توش مشکلت حل میشه در ضمن واسه وسط قرار دادن هم فقط کافی هست اینو بنویسید:
margin:0 auto;
css-man
پنج شنبه 31 شهریور 1390, 10:28 صبح
همونطور که دوستمون گفتن بهتره از این کد استفاده بشه
margin:0 auto;
در ضمن بهتره از فایل خارجی css استفاده کنید و به این شکل کار نکنید
برای اینکه کدهاتون هم در تمام مرورگرها درستنمایش داده بشه میتونید از reset css استفاده کنید
Saber Mogaddas
پنج شنبه 31 شهریور 1390, 10:52 صبح
کد html..


<div id="Wraper-x">

</div>


کد Css

#Wraper-x
{
width:800px;
min-height:500px;
margin:auto;
background-color:#000;
}

موفق باشی..
M.T.P
پنج شنبه 31 شهریور 1390, 12:17 عصر
شما یک دیو کلی دیگه بزار بعد این دیو رو بزار توش مشکلت حل میشه در ضمن واسه وسط قرار دادن هم فقط کافی هست اینو بنویسید:
margin:0 auto;

یه دیو مادر براش گذاشتم بدون هیچ استایل خاصی اما باز تو IE میره سمت راست!


برای اینکه کدهاتون هم در تمام مرورگرها درستنمایش داده بشه میتونید از reset css استفاده کنید
چطوری این کار رو انجام بدم؟


کد html..
کد HTML:
<div id="Wraper-x">

</div>

کد Css

1
2
3
4
5
6
7
#Wraper-x
{
width:800px;
min-height:500px;
margin:auto;
background-color:#000;
}


موفق باشی..

اینو برای همین div بزارم یا برای div دیگه؟! برای یه div دیگه گذاشتم جواب نداد! :متفکر:
Saber Mogaddas
پنج شنبه 31 شهریور 1390, 14:36 عصر
این کل چیزی که می خوایی بزار تو 1 page> Html کن..
div وسط صفحه قرار می گیره..
cross browser



<html>
<head>

<style type="text/css">
#Wraper-x
{
width:800px;
min-height:500px;
margin:auto;
background-color:#000;
}
</style>

</head>

<body>

<div id="Wraper-x">

</div>

</body>
</html>



موفق باشی..
css-man
پنج شنبه 31 شهریور 1390, 15:03 عصر
هر مرورگری یک سری استایل های پیش فرض داره که صفحات رو بر اساس اونها به نمایش در میاره
مثلا ie ممکن تگ p رو با مارجین 4 نشون بده اما opera همین رو با مارجین 5
این موضوع باعث ممیشه یک صفحه در مرورگرهای مختلف به اشکال مختلفی به نمایش در بیاد
Reset.css با عث میشه که مرورگرهای مختلف در برخورد با تگهای مختلف عکسالعم یکسانی رو نشون بدن

برای اینکار یه راهش اینه که اگر خودت در سی اس اس مهارت کافی داری یک فایل Reset.css بنویسی اما اگر نمیتونی اینکار رو انجام بدی میتونی از Reset.css هایی که دیگران نوشتن استفاده کنی .

مثلا این فایل که مال یا هو هست خیلی هم مناسب نیست اما برای اینکه با این داستان آشنا بشی برات اینجا میزارمش
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,f orm,
fieldset,input,textarea,p,blockquote,th,td {
margin:0;
padding:0;
}
table { border-collapse:collapse;
border-spacing:0;
}
fieldset,img {
border:0;
}
address,caption,cite,code,dfn,em,strong,th,var {
font-style:normal;
font-weight:normal;
}
ol,ul {
list-style:none;
}
caption,th {
text-align:left;
}
h1,h2,h3,h4,h5,h6 {
font-size:100%; font-weight:normal;
}
q:before,q:after { content:'';
}
abbr,acronym {


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

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

موفق باشی امیدوارم بدردت خورده باشه
M.T.P
پنج شنبه 31 شهریور 1390, 15:43 عصر
این کل چیزی که می خوایی بزار تو 1 page> Html کن..
div وسط صفحه قرار می گیره..
cross browser
باز هم از توجه تون سپاسگزارم.
دوست من الان همین کد شما تو IE وسط قرار میگیره؟ واسه من تو IE وسط نمیره اما تو بقیه مرورگر ها درست وسط قرار میگیره.


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

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

موفق باشی امیدوارم بدردت خورده باشه
از شما هم کمال قدردانی رو دارم
دوست عزیز ، این کد شما رو هم در فایل css سایت گذاشتم ، تو همه مرورگرها وسطه اما نمیدونم چرا تو IE وسط نمیاد!
Saber Mogaddas
پنج شنبه 31 شهریور 1390, 16:42 عصر
دوست من الان همین کد شما تو IE وسط قرار میگیره؟ واسه من تو IE وسط نمیره اما تو بقیه مرورگر ها درست وسط قرار میگیره.


شما یه بار history IE رو کامل پاک کنین احتمالا مشکل از IE هست..
ورژن IE من 8 هستش ..تو سایت خودم استفاده کردم http://www.pars-click.com (http://www.pars-click.com/)
میلاد قاضی پور
پنج شنبه 31 شهریور 1390, 18:06 عصر
پوزیشن رو اکیدا روی relative بذارید . اگر جواب نداد در صورتی که در رزولوشن های مختلف صفحه به نسبت کشش پیدا نمیکنه (یعنی مثل سایت برنامه نویس. کافیه کنترل + منفی رو فشار بدید تا نتیجه رو ببینید) و در واقع مثل بلاگفا هست که موقع زوم آوت کل وبسایت کوچیک میشه در اینصورت برای اینکه خیال خودتون رو راحت کنید پوزیشن روی ابسولوت و فلوت رو مثلا روی لفت ست کنید بعد بهش مرگین لفت مورد نظر رو بدید تا در وسط قرار بگیره .
M.T.P
پنج شنبه 31 شهریور 1390, 22:54 عصر
دوستان text-align:center رو واسه body نوشتم درست شد!
البته این مشکل فقط واسه IE بود ، مرورگرهای دیگه مشکل نداشتن.


<html dir="rtl" lang="fa-ir">

<head>
<title>My Title</title>
</head>

<body style="margin:0px auto;text-align:center">

<div style="background-color:yellow;min-height:500px;width:800px;margin:0px auto;;text-align:right">Test text</div>

</body>
</html>