مشکل در کنار هم قرار دادن تصاویر در html و css

شروع موضوع توسط Cyletech ‏20 فوریه 2011 در انجمن زبان HTML

  1. Cyletech

    Cyletech Member

    ارسال‌ها:
    721
    تشکر شده:
    797
    امتیاز دستاورد:
    16
    سلام دوستان،

    لطفاً به تصویر زیر نگاه کنید ، مشکلم رو متوجه خواهید شد.

    [​IMG]
    کدی که در صفحه HTML نوشتم اینگونه هست:​
    HTML:

    [RIGHT]<div id="title">
    <img src="images/title_right.gif" width="8px" height="38px"/><div class="ctitle">اینجا می تونیم بنویسیم</div><img src="images/title_left.gif" width="8px" height="38px"/></div>
    [/RIGHT]
    کدی هم که برای CSS نوشتم این است:​
    HTML:

    [RIGHT]#title{
    color: white;
    }
    #title .ctitle{
    background-color: black;
    width: 25%;
    height: 38px;
    }
    [/RIGHT]
    مطمئناً مشکلم رو متوجه شدید. فقط یک خواهشی هم دارم. اگر مشکل دیگه ای می بینید که باید برطرفش کنم (دارم تمرین می کنم) بهم بگین تا دیگه تکرار نکنم. مرسی :rose:

    یک سوال دیگری هم دارم: مرورگر از کدوم سمت شروع به خوندن کد ها می کنه؟ مثلاً اول هدر بعد راست و بعد چپ یا غیره؟​
     
    نوشته شده توسط Cyletech در ‏20 فوریه 2011
    abasaghaee از این پست تشکر کرده است.
  2. tenaonline

    tenaonline Member

    ارسال‌ها:
    67
    تشکر شده:
    22
    امتیاز دستاورد:
    8
    شما اصلاً میخواید چیکار کنید؟
    یک باکس باشه که توش بنویسید و لبه هاش گرد باشه ؟
    مشکلتون رو واضح توضیح بدید :)
     
    نوشته شده توسط tenaonline در ‏22 فوریه 2011
  3. Milad

    Milad Well-Known Member

    ارسال‌ها:
    835
    تشکر شده:
    1,252
    امتیاز دستاورد:
    93
    استفاده از Float
     
    نوشته شده توسط Milad در ‏22 فوریه 2011
    echessdesign و Cyletech از این پست تشکر کرده اند.
  4. Cyletech

    Cyletech Member

    ارسال‌ها:
    721
    تشکر شده:
    797
    امتیاز دستاورد:
    16
    از float الان استفاده کردم. فقط مشکل الان اینجاست که زیر اون خط مشکلی تصاویر قرار گرفتن. وگرنه چپ و راستشون درسته. کد Css نهایی اینه:
    HTML:
     
    #title{
    color: white;
    margin: auto;
    }
    #title .ctitle{
    background-color: black;
    width: 25%;
    height: 38px;
    margin: auto;
    }
    #title .ltitle{
    float: left;
    }
     
    html هم شده این:
    HTML:
     
    <div id="title">
    <img src="images/title_right.gif" style="margin: auto; float: right;" width="8px" height="38px"/><div class="ctitle">اینجا می تونیم بنویسیم</div><img src="images/title_left.gif" class="ltitle" width="8px" height="38px"/></div>
     
     
    نوشته شده توسط Cyletech در ‏22 فوریه 2011
    abasaghaee از این پست تشکر کرده است.
  5. Mohammad

    Mohammad Member

    ارسال‌ها:
    881
    تشکر شده:
    685
    امتیاز دستاورد:
    16
    یعنی چی ؟؟؟ لطف کنید مثل قبل یه عکس بذارید
     
    نوشته شده توسط Mohammad در ‏22 فوریه 2011
    echessdesign از این پست تشکر کرده است.
  6. sharktech

    sharktech کاربر فعال

    ارسال‌ها:
    1,545
    تشکر شده:
    1,324
    امتیاز دستاورد:
    36
    PHP:
    <style>
    #title {
       direction:rtl;
        font-family:Tahoma, Geneva, sans-serif;
        margin: 5px auto;
        width: 200px;
        height:30px;
        border:1px solid #000;
       background:#000;
       color:#FFF;
       -moz-border-radius: 10px;
        -webkit-border-radius: 10px;
        border-radius: 10px;
        padding:8px 10px 0 0
    }
    </style>
    <p id="title">اینجا می تونی بنویسیم</p>
     
    نوشته شده توسط sharktech در ‏22 فوریه 2011
    Cyletech، pouya saadeghi، Milad و یک نفر دیگر از این ارسال تشکر کرده اند.
  7. Milad

    Milad Well-Known Member

    ارسال‌ها:
    835
    تشکر شده:
    1,252
    امتیاز دستاورد:
    93
    همینی که دوستمون sharktech گفتند بهترین روشه ، فقط تو ie ساپرت نمیشه که نسخه 9 برطرف شده این مشکل ! و اینکه برای استفاده از عکس باید یک کمی position هم قاطی مسئله کنی .
     
    نوشته شده توسط Milad در ‏22 فوریه 2011
    echessdesign از این پست تشکر کرده است.
  8. Cyletech

    Cyletech Member

    ارسال‌ها:
    721
    تشکر شده:
    797
    امتیاز دستاورد:
    16
    ممنونم از همه ولی ای کاش یکم بیشتر توجه می کردید. خب آخه چند درصد کاربران از IE9 الان استفاده می کنن؟ تازشم خودم ندارم. چطوری امتحانش کنم؟ با مرورگر دیگری هم نمیخوام کار کنم. یعنی واقعاً این همه کار بلد اینجا هست نمی دونه چطوری عکسها رو با Css مرتب کنیم کنار هم؟ الان اینطوری هست با کدی که قبلاً گذاشتم.

    [​IMG]
     
    نوشته شده توسط Cyletech در ‏23 فوریه 2011
    abasaghaee از این پست تشکر کرده است.
  9. Mohammad

    Mohammad Member

    ارسال‌ها:
    881
    تشکر شده:
    685
    امتیاز دستاورد:
    16
    با فایرفاکس 3 و اینترنت اکسپلورر 8 امتحان کردم

    PHP:


    <style>
    .text-style {
        padding:0px;
        margin:0px;
        text-align:center;
        color:#fff;
       font-size:8pt;
        font-family:Tahoma;
        line-height:3.5em;
        }
    .left {
        background:#313131 url('1.png') left no-repeat;
       width:300px;
        height:40px;
        float:left;
        padding:0px;
        margin:0px;
        }
    .right {
        background:url('2.png') right no-repeat;     float:left;
        width:10px;
        height:40px;
        padding:0px;
        margin:0px;
        }
    </style>

    <div class="text-style">
        <div class="left">
        محل نوشتن</div><div class="right"></div>
    </div>

     
    روش های بهتر از این هم زیاده
     

    پیوست ها:

    • Capture.PNG
      Capture.PNG
      اندازه فایل:
      کیلوبایت 1.2
      نمایش ها:
      17
    • html.zip
      اندازه فایل:
      کیلوبایت 2.4
      نمایش ها:
      10
    نوشته شده توسط Mohammad در ‏23 فوریه 2011
    echessdesign و Cyletech از این پست تشکر کرده اند.
  10. echessdesign

    echessdesign مدیر انجمن طراحی وب

    ارسال‌ها:
    4,375
    تشکر شده:
    3,833
    امتیاز دستاورد:
    113
    درود بر شما
    من استفاده از span در لینک رو پیشنهاد می کنم:
    کد (Text):
    <!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>
    <title></title>
        <style type="text/css">
            a.linkStyle:link, a.linkStyle:visited {
                text-decoration:none;
                display:block;
                float:right;
                direction:rtl;
                background:transparent url('r-bg.gif') right center no-repeat;
                padding:8px 10px 0 0;
                color:#fff;
                height:29px;
            }
            a.linkStyle:hover {
                color:red;
            }
            a .spanStyle {
                background:#000 url('l-bg.gif') left center no-repeat;
                padding:9px 10px 10px 30px;
            }
        </style>
    </head>

    <body>

        <a href="" class="linkStyle">
            <span class="spanStyle">حسین سعیدی</span>
        </a>
        <a href="" class="linkStyle">
            <span class="spanStyle">حسین سعیدی</span>
        </a>
    </body>
    </html>
     
     

    پیوست ها:

    • spanstyle.zip
      اندازه فایل:
      کیلوبایت 1.1
      نمایش ها:
      10
    نوشته شده توسط echessdesign در ‏26 فوریه 2011
    Milad و Mohammad از این پست تشکر کرده اند.

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