PDA

View Full Version : سوال: مشکل با div در ساخت layout سایت



khz-web1
شنبه 24 تیر 1391, 08:38 صبح
سلام
من می خوام با div سایت خودم رو به شکل زیر در بیارم....
89624
ولی متاسفانه div طوری تنظیم نمیشه که خبر سایت بیاد دقیقا وسط سایت(سر جای خودش) و به شکل زیر در میاد...
89625
کد های سایت من به شکل زیر هستش



<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta content="text/html; charset=utf-8" http-equiv="Content-Type" /> <link href="css-layout.css" rel="stylesheet" type="text/css" /> <title>Untitled 1</title> </head> <body> <div id="main"> <div id="header"> </div> <div id="login"></div> <div id="statusbar"></div> <div id="body"> <div id="block"> <div id="block1"> <div id="block1_header"> </div> <div id="block1_body"> </div> <div id="block1_footer"> </div> </div> <div id="block2"> <div id="block2_header"> </div> <div id="block2_body"> </div> <div id="block2_footer"> </div> </div> </div> <div id="titr"> <div id="titr1"></div> <div id="titr2"></div> <div id="titr3"></div> </div> </div> <div id="footer"> <div id="footer_top"></div> <div id="footer_down"></div> </div> </div> </body> </html>







/* CSS layout */ #header{ width:998px; height:164px; background-color:blue; background-image:url('images/header.jpg'); word-wrap:break-word ; } #main{ width:998px; word-wrap : break-word ; } #login{ height:41px; background-color:aqua; background-image:url('images/login.jpg'); word-wrap:break-word ; } #statusbar{ height:40px; background-color:black; background-image:url('images/statusbar.jpg'); word-wrap:break-word ; } #footer_down{ height:36px; background-color:fuchsia; background-image:url('images/footer_down.jpg'); word-wrap:break-word ; } #footer_top{ height:57px; background-color:gray; background-image:url('images/footer_top.jpg'); word-wrap:break-word ; } #block{ width:235px; background-color:green; word-wrap:break-word ; } #block1_header{ width:235px; height:35px; background-color:lime; background-image:url('images/header_block.jpg'); word-wrap:break-word ; } #block1_body{ background-color:maroon; height:30px; background-image:url('images/bg_block.jpg'); word-wrap:break-word ; } #block1_footer{ background-color:navy; background-image:url('images/footer_block.jpg'); height:16px; word-wrap:break-word; } #block2{ width:235px; background-color:olive; word-wrap:break-word ; } #block2_header{ width:235px; height:35px; background-color:orange; background-image:url('images/header_block.jpg'); word-wrap:break-word ; } #block2_body{ background-color:purple; height:30px; background-image:url('images/bg_block.jpg'); word-wrap:break-word ; } #block2_footer{ background-color:red; height:16px; background-image:url('images/footer_block.jpg'); word-wrap:break-word ; } #titr{ width:763px; word-wrap:break-word; } #titr1{ background-color:silver; height:18px; width:763px; background-image:url('images/header_body.jpg'); word-wrap:break-word; } #titr2{ background-color:teal; height:18px; width:763px; background-image:url('images/bg_body.jpg'); word-wrap:break-word; } #titr3{ background-color:yellow; height:18px; width:763px; background-image:url('images/footer_body.jpg'); word-wrap:break-word; }




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

Saber Mogaddas
شنبه 24 تیر 1391, 09:05 صبح
سلام
باید تو استایل دیو هایی که در داخل تگ با id body هستند ، از دستور float استفاده کنید ..

float:right;

موفق باشید

khz-web1
شنبه 24 تیر 1391, 11:49 صبح
مهندس متاسفانه درست نشد...!!!

Saber Mogaddas
شنبه 24 تیر 1391, 13:19 عصر
سلام
مشکل پایه شما استایل ندادن به دیو های wraper هست.دیو رو باید توسط استایل های اون رام کنید.
من به 2 دیو به صورت زیر استایل دادم :

#body
{
width:998px;
min-height:10px;
overflow:hidden;
float:right;
}
#footer
{
float: right;
min-height: 10px;
width: 998px;
}

و به دو دیو داخلی body# استایل float:right/left; دادم:

#titr{
width:763px;
word-wrap:break-word;
float:right;
}
#block{
width:235px;
background-color:green;
word-wrap:break-word ;
float:left;
}

با این تغییرات درست میشه ، min-height رو به این دلیل دادم چون احتمالا این دیو های اصلی دارای طول متغییر خواهند بود.
موفق باشید..
پاورقی -- از دادن پیام خصوصی خودداری سوالات رو در تاپیک خود مطرح کنید .

khz-web1
شنبه 24 تیر 1391, 15:59 عصر
سلام ...
مشکلی که الان دارم اینکه ، وقتی که توی بلوک هام اینتر میزنم بلوک ها بزرگ نمیشن و خیلی بی ریخت میشه!!!!
با تشکر

Saber Mogaddas
یک شنبه 25 تیر 1391, 14:12 عصر
سلام
هر مشکلی یک دلیلی داره، دلیل مشکل شما هم اصولی کار نکردن شماست من کد های شمارو دیدم ، بعضی جاها به بعضی از تگ ها اصلا کدی ننوشتید عملا رو هوا هست ، و از کد های بی تاثیری اضافی تو کد نویسیتون استفاده کردید.
وقتی سوالی می پرسید به صورت دقیق منظورتون رو برسونید چون عزیزانی که اینجا پاسخ گوی شما خواهند بود به پروژه شما کاملا نا آشنا هستند.
تو این لینک (http://barnamenevis.org/showthread.php?350524-%D8%B7%D8%B1%D8%A7%D8%AD%DB%8C-%DB%8C%DA%A9-%D9%88%D8%A8-%D8%B3%D8%A7%DB%8C%D8%AA-%D8%B3%D8%A7%D8%AF%D9%87-%D8%A8%D8%A7-CSS-HTML) آموزش کامل طراحی وبسایت به صورت استاندارد هست که توش باکس هم کار کردیم که می تونید ازش استفاده کنید..
موفق باشید.