پوزیشن سایت

webdesign89 · Mar 3, 2011

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

سوال دوم:
در رزولوشن های مختلف یا کوچک کردن مرورگر بعضی از div ها از ردیف خود خارج می شوند و به ردیف پایین می روند و صفحه بهم می خورد.

1pouya · Mar 3, 2011

دوست عزیز یه نگاه به این تاپیک بنداز
اینجا جواب سوالتون رو دادم :
http://forum.majidonline.com/showthread.php?t=162120

webdesign89 · Mar 3, 2011

مشکل وسط صفحه بودن حل شد اما مشکل اینکه آن یکی div میره پایین حل نشد
این طور که اینجا نوشته که باید margin:0 auto گذاشت این مشکل پیش میاد که من نمی تونم div هام را با فواصل دلخواه با هم فاصله بزارم.
الان این مشکل را می تونید حل کنید هم اینکه این ها کل این 3 تا div که همه باید تو یک ردیف باشند بیاند وسط بعد با هم فاصله دلخواه من را داشته باشند.
همچنین با کوچک شدن صفحه نیاد زیر.
کد را میزارم:
html:

کد:

<div id="a"></div>
<div id="b"></div>
<div id="c">

css:

کد:

#a {
    float:left;
    height: 210px;
    width: 150px;
     margin:10px atuo;
    border: 1px solid #DCDCDC;
    background-color: #FFF;
    font-size: 20px;
    text-align: left;
}
#b {
    height: 300px;
    width: 600px;
    border: 1px solid #DCDCDC;
      margin: 0 auto;
    background-color: #FFF;
}
#c {
    height: 210px;
    width: 150px;
    margin:0 auto;
    border: 1px solid #DCDCDC;
    background-color: #FFF;
    text-align: left;
    font-size: 20px;
    float:left;
}

مرسی

1pouya · Mar 4, 2011

این مثال رو براتون درست کردم

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

HTML:

<!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 http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>CENTER div template by 1POUYA</title>
</head>

<body>
<div align="center" style="margin:0 auto; width:900px; height:auto; background-color:#CCC; padding:10px; color:#900">
    <div style="width:100%; height:350px;">
        <div style="float:right; background-color:#999; width:140px; height:100%;">
            <h4>menu2</h4>
        </div>
        <div style="float:right; background-color:#999; width:600px; height:100%; margin-right:10px"><h2>Content</h2></div>
        <div style="float:right; background-color:#999; width:140px; height:100%; margin-right:10px">
            <h4>menu3</h4>
        </div>
    </div>
</div>
</body>
</html>

webdesign89 · Mar 4, 2011

مشکلم را میشه بگی چی بوده دیگه به همچین مشکلی نخورم
راستی یک سوال دیگه چرا 2 تا div ساختی بعد این 3 تا ردیف را در آنها گذاشتی؟

یک سوال دیگه هم برام پیش آمد اگر صفحه نمایش یکی خیلی بزرگ باشه قاعدتا طرف راست و چپ خیلی خاله میشه برای حل این مشکل باید چی کار کرد؟

1pouya · Mar 4, 2011

webdesign89 گفت:
مشکلم را میشه بگی چی بوده دیگه به همچین مشکلی نخورم
راستی یک سوال دیگه چرا 2 تا div ساختی بعد این 3 تا ردیف را در آنها گذاشتی؟

اون تگ div اول اصطلاحا بهش میگن wrapper و تنظیمات کلی صفحه رو به اون میدن
مثل موقعیت، عرض، فاصله از گوشه ها و ...

تگ دوم هم تنظیمات کلی او 3 تای دیگه رو مشخص میکنه

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

webdesign89 گفت:
یک سوال دیگه هم برام پیش آمد اگر صفحه نمایش یکی خیلی بزرگ باشه قاعدتا طرف راست و چپ خیلی خاله میشه برای حل این مشکل باید چی کار کرد؟

جواب این سوالتون هم اینجاست:
http://forum.majidonline.com/showthread.php?p=1062416#post1062416

webdesign89 · Mar 4, 2011

مرسی اگر منو های من عکس باشه آیا width عمل می کنه ؟
یا width به صورت درصدی فقط برای div های بدون عکس استفاده میشه؟مثلا من تایتل آن دیو راست را یک عکس 200*50 بگذارم بعد width نمی تونه تغییری اعمال کنه؟

amirv60 · May 15, 2011

" مشکلم را میشه بگی چی بوده دیگه به همچین مشکلی نخورم"

مشکل شما در div دوم این بود که float:left; نداشت.

یه جستجو بزن آموزش طراحی سایت با css ، بیشتر یاد می گیری.

ninjavb · Nov 1, 2011

1pouya گفت:

این مثال رو براتون درست کردم

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

HTML:

<!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 http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>CENTER div template by 1POUYA</title>
</head>

<body>
<div align="center" style="margin:0 auto; width:900px; height:auto; background-color:#CCC; padding:10px; color:#900">
    <div style="width:100%; height:350px;">
        <div style="float:right; background-color:#999; width:140px; height:100%;">
            <h4>menu2</h4>
        </div>
        <div style="float:right; background-color:#999; width:600px; height:100%; margin-right:10px"><h2>Content</h2></div>
        <div style="float:right; background-color:#999; width:140px; height:100%; margin-right:10px">
            <h4>menu3</h4>
        </div>
    </div>
</div>
</body>
</html>

با سلام
سایت من یه هدر داره دو یا سه تا ستون وسط صفحه و footer ش هم به چهار قسمت تقسیم میشه. من اینا رو با جدول کشیدم . ولی نمیدونم چرا با اینکه اومدم اندازه ها رو به درصد دادم ولی بازم برای خودشون کوچیک و بزرگ میشند . مثلا وقتی یه عکس رو تو قسمت فوتر میزارم یه کمی از عکس رو دوباره تکرار میکنه . من تو قسمت فوتر یه جدول جدا کشیدم. میشه کد کلیش رو برام بنویسید که تو همه ی مرور گر ها یه جور نشون بده و به هم نریزه.
در ضمن من دیدم شما توی کدتون فقط از div استفاده کردید و از table استفاده نکردید چرا ؟ اصلا تگ div کارش چیه ؟