قرار دادن یک عکس در صفحه با موقعیت دلخواه با css

شروع موضوع توسط mamad.noise ‏18 جولای 2012 در انجمن زبان HTML

  1. mamad.noise

    mamad.noise کاربر فعال انجمن فتوشاپ

    ارسال‌ها:
    1,123
    تشکر شده:
    909
    امتیاز دستاورد:
    113
    با سلام خدمت اساتید گرامی
    من به یه مشکلی خوردم(لطفا مبتدی راهنمایی کنید!):-?
    من یه صفحه HTML درست کردم که یه بکگراند داره یه پازیشن بکگراند و میخوام 4تاگزینه رو یا موقعیت های خاص داخل صفحه بزارم(مثل صفحه اصلی مجید آنلاین)
    نمیدونم با div میشه یا نه من با div زدم و بهش pading دادم تو مرورگر خودم خوبه اما اگه مرورگر رو مینیمایز کنم یا از سیستم دیگه ای بازش کنم اندازش بهم میریزه و جای اولش نیس:shock:
    نمیدونم منظورم رو واضح گفتم یا نه؟اما ایشاالله که اینجور باشه
    من کد هارو میزارم تا واضح تر بشه:
    کد CSS:
    کد (Text):
    * {
        margin: 0px;
        float: none;
        padding: 0px;
    }

    body {
        background: #000 url(images/back.jpg) no-repeat;
        background-position:center -5px;
        font: normal small Verdana, Arial, Helvetica, sans-serif;
        color: #959595;
    }

    p.main1
    {hight:500px;}

    p.main2
    {
        padding-top:100px;
        padding-left:400px;
    }

     
    کد HTML:
    HTML:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

    <html xmlns="http://www.w3.org/1999/xhtml">

    <head>

    <meta http-equiv="content-type" content="text/html; charset=utf-8" />


    <meta name="keywords" content="" />

    <meta name="description" content="" />


    <link href="style.css" rel="stylesheet" type="text/css" />


    </head>

    <body>
    <p class="main1">
    <p class="main2">
      <img src="images/test.png" alt="" width="116" height="116" />
    </body>

    </html>

     
    پیشاپیش ممنون:rose:
     
    آخرین ویرایش: ‏18 جولای 2012
    نوشته شده توسط mamad.noise در ‏18 جولای 2012
  2. MASIHA68

    MASIHA68 Member

    ارسال‌ها:
    53
    تشکر شده:
    32
    امتیاز دستاورد:
    18
    به جای کد عکس کد زیر رو قرار بده بعد هم به جای top . left و ... عدد قرار بده و ...
    <img src="images/test.png" alt="" width="116" height="116" style="position:absolute; left: 239px; top: 139px;" />
    من با چندتا مرور گر امتحان کردم عکس سر جاش موند .
     
    نوشته شده توسط MASIHA68 در ‏19 جولای 2012
    mamad.noise از این پست تشکر کرده است.
  3. mamad.noise

    mamad.noise کاربر فعال انجمن فتوشاپ

    ارسال‌ها:
    1,123
    تشکر شده:
    909
    امتیاز دستاورد:
    113
    بهتر شد اما بازم حرکت میکنه مثلا وقتی مینیمایز میکنم جاش عوض میشه یا تو سیستم دیگه ای با مانیتور اندازه ی دیگه
    پیشاپیش ممنون
     
    نوشته شده توسط mamad.noise در ‏19 جولای 2012
  4. MASIHA68

    MASIHA68 Member

    ارسال‌ها:
    53
    تشکر شده:
    32
    امتیاز دستاورد:
    18
    دوست من مشکل شما با مقدار دهی درصدی درست میشه مثلا top رو 20 درصد قرار بدین . در این صورت مقدار صفحه هرچقد باشه بیست درصد از بالا فاصله ایجاد میشه .
     
    نوشته شده توسط MASIHA68 در ‏19 جولای 2012
    mamad.noise از این پست تشکر کرده است.
  5. mamad.noise

    mamad.noise کاربر فعال انجمن فتوشاپ

    ارسال‌ها:
    1,123
    تشکر شده:
    909
    امتیاز دستاورد:
    113
    ممنون میشه تو کد اعمال کنین؟
    پیشاپیش ممنون:rose:
     
    نوشته شده توسط mamad.noise در ‏19 جولای 2012
  6. MASIHA68

    MASIHA68 Member

    ارسال‌ها:
    53
    تشکر شده:
    32
    امتیاز دستاورد:
    18
    بفرمایید
    این بار که سایز صفحه رو تغییر بدید می بینید که مکان عکس هم تغییر می کنه
    در کل اگه کل کدهای سایتتون رو قرار بدیدن راحتتر میشه کمک کرد
    کد (Text):

       <img src="images/test.png" alt="" width="116" height="116" style="position:absolute; left: 20%; top: 20%">

     
     
    نوشته شده توسط MASIHA68 در ‏19 جولای 2012
    mamad.noise از این پست تشکر کرده است.
  7. mamad.noise

    mamad.noise کاربر فعال انجمن فتوشاپ

    ارسال‌ها:
    1,123
    تشکر شده:
    909
    امتیاز دستاورد:
    113
    دسنن درد نکنه
    بهتر شدش
    کد دیگه ای ندارم
     
    نوشته شده توسط mamad.noise در ‏20 جولای 2012
    echessdesign از این پست تشکر کرده است.
  8. techno_a

    techno_a New Member

    ارسال‌ها:
    1
    تشکر شده:
    0
    امتیاز دستاورد:
    1
    سلام دوستان میشه بفرمایید یه کد رو چطور تو یه موقعیتی قرار دهیم؟
    یه کد که با کلیک روش یه کارایی انجام بده.
    ممنون
     
    نوشته شده توسط techno_a در ‏13 آوریل 2015

به اشتراک بگذارید