مشکل دیو تو دیو کردن!

شروع موضوع توسط vahid03 ‏15 آگوست 2012 در انجمن زبان HTML

  1. vahid03

    vahid03 Member

    ارسال‌ها:
    125
    تشکر شده:
    14
    امتیاز دستاورد:
    18
    سلام

    بنده در حال طراحی یک قالب هستم برای وردپرس قالب رو از فتوشاپ در آوردم و به html تبدیل کردم حالا یک مشکل دارم من بعد از بکگراند یک کادر بزرگ به طول اوتو و عرض 990 ایجاد کردم تا کلا همه چیزو داخل اون قرار بدم مثل ساید بار و مطالب و غیره. این کادر رو main اسمشو گزاشتم.

    مشکل اصلی اینه که من سایدبار های چپ و راست رو داخل دیو اصلی این کار وارد میکنم ولی وقتی که به ساید بار ها مطلب مثل تبلیغ بنری اضافه میکنم این کادر همراه ساید بار کش نمیاد طولش و ساید بار از این کادر بیرون میزنه در حالی که مطالب پست ها بیرون نمیزنه و هر چقدر پست اضافه کنم این کادر هم بزرگتر میشه.

    کد های html ساید بار به این صورته.

    کد (Text):
    [LEFT]

    <body>
    <div id="main">
    <div class="nav">
      </div>
    <div id="tolbar1">
    <div class="tolbar1">
    <div class="tol_right">
    </div>

    <div class="ads">
      <img src="3d_120x240.gif" width="120" height="240" />
        <img src="3d_120x240.gif" width="120" height="240" />
      <img src="3d_120x240.gif" width="120" height="240" />
      <img src="3d_120x240.gif" width="120" height="240" />
      <img src="3d_120x240.gif" width="120" height="240" />
      <img src="3d_120x240.gif" width="120" height="240" />


    </div>

    <div class="tol_right2">
    </div>
    <div class="tol_right2_ul">
    دانلود
    </div>

    <div class="tol_right3">
    </div>
    </div></div>
    [/LEFT]
     
    و کد های استایل ساید بار هم اینه.


    کد (Text):
    [LEFT]#tolbar1{
        width:185px;
        float:right;
    }


    .tolbar1{
        background-color:#FFF;
        background-repeat:repeat;
        border:solid 1px #CCC;
        padding: 5px 10px 0px 0px
        border-radius:10px;
        -moz-border-radius:10px;
        box-shadow:0px 0px 15px #CCC inset;


    }

    .tol_right{
        width:153px;
        height:38px;
        background-image:url(images/ads.gif);
        margin:10px auto;
        border-radius:5px;
        -moz-border-radius:5px;
        box-shadow:0px 0px 15px #09F inset;


    }

    .ads{
        margin:20px 0px 0px 30px;
        box-shadow:0px 0px 15px #09F ;
        width:120px;

    }

    .tol_right2{
        width:153px;
        height:38px;
        background-image:url(images/cat.gif);
        margin:10px auto;
        border-radius:5px;
        -moz-border-radius:5px;
        box-shadow:0px 0px 15px #09F inset;


    }
    .tol_right3{
        width:153px;
        height:38px;
        background-image:url(images/status.gif);
        margin:10px auto;
        border-radius:5px;
        -moz-border-radius:5px;
        box-shadow:0px 0px 15px #09F inset;


    }

    .tol_right2_ul{
        font-size:11px;
        direction:rtl;
        margin-right:20px;
        background-image:url(images/arrow_right.gif);
        background-repeat:no-repeat;
        background-position:right bottom;
        padding:2px 10px 0px 0px ;
    }
    [/LEFT]
     

    لطفا کد هارو برسی کنید و مشکل رو بگید این موضوع برام خیلی مهمه.
     
    نوشته شده توسط vahid03 در ‏15 آگوست 2012
  2. vahid03

    vahid03 Member

    ارسال‌ها:
    125
    تشکر شده:
    14
    امتیاز دستاورد:
    18
    کسی نیست. مهمه ها
     
    نوشته شده توسط vahid03 در ‏15 آگوست 2012
  3. scup

    scup Member

    ارسال‌ها:
    549
    تشکر شده:
    385
    امتیاز دستاورد:
    16
    وقتی float میدی .. هرجا دیگه float نیست باید اینو بزاری [HTMLS]<div style = "clear:both" > </...[/HTMLS]

    مثلا

    [HTMLS]
    <div id = "side" style="float:left"></...
    <div id = "side" style="float:left"></...
    <div style = "clear:both" > </..
    <div id="footer" > </..
    [/HTMLS]
     
    آخرین ویرایش: ‏17 آگوست 2012
    نوشته شده توسط scup در ‏17 آگوست 2012
    masco از این پست تشکر کرده است.
  4. scup

    scup Member

    ارسال‌ها:
    549
    تشکر شده:
    385
    امتیاز دستاورد:
    16
    اگه آنلاین فایلتونو بزارید یا یک عکس بزارید بهتر میتونم کمکتونم .. :)
     
    نوشته شده توسط scup در ‏17 آگوست 2012

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