登录 | 注册 | FAQ
Anonymous

مشكلة في تأطير قائمة ( navigation )

+ 发表回复

2 篇帖子 分页: 1 / 1


مشكلة في تأطير قائمة ( navigation )

dagash » 周六 1月 07, 2012 4:34 pm

لدي قائمة ( navigation ) بالشكل التالي :
图片
أريد تأطيرها بالــcss على النحو التالي :
图片
( صورة يمين + محتوى ثابت ذو خلفية متمددة + صورة يسار ) .

قمت بعمل ثلاثة div
代码: 全选
div id="right">
   </div>
   
        <div id="content">
         content
             </div>
   
   <div id="left">
   </div>


وها هو كود css
代码: 全选
#content {
   background:url(images/navbarmid.png) repeat-x;
   height: 39px;
   line-height: auto;
}
#righ {
   background:url(images/navbarright.png) no-repeat top right;
   background-position: 0 0;
   float: right;
   height: 39px;
   width: 20px;
   float: right;
}

#left {
   background:url(images/navbarleft.png) no-repeat top left;
   float: left;
   background-position:-30px 0;
   height: 39px;
   width: 24px;
   float: left;
   
}





ولكن لم تضبط معي
ما الحل ..
头像

dagash

  • 帖子: 1
  • 注册: 周六 1月 07, 2012 4:19 pm

Re: مشكلة في تأطير قائمة ( navigation )

atik » 周三 1月 11, 2012 5:58 pm

لست متأكدا من ذلك ، يمكنك استخدام هذا الرمز لهذا الغرض. قل لي إذا كان هذا العمل أم لا.
代码: 全选
    <!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>css modification</title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"

    />


    <style type="text/css">
        #menu {
            background: url(images/navbarmid.png) repeat-x;
            height: 39px;/*the height of the background image;*/
            width: 960px;/*width of the menu*/
            overflow: hidden;
        }
       
    #righ {
       background:url(images/navbarright.png) no-repeat top right;
       float: right;
       height: 39px;
       width: 20px;
       float: right;
    }

    #left {
       background:url(images/navbarleft.png) no-repeat top left;
       float: left;
       height: 39px;
       width: 24px;
       float: left;
       
    }
#content {
       background: none;
       height: 39px;
       line-height: 39px;
       width: 900px;
       float: left;
       margin-left: 10px;
    }

    div.clear {
        clear: both;
    }


    </style>

    </head>

    <body>
        <div id="menu">
             <div id="right">
                 &nbsp;
             </div>
       
             <div id="content">
                content
              </div>
       
             <div id="left">
                 &nbsp;
             </div>

        </div>
        <div class="clear"></div>
    </body>
    </html>


头像

atik

  • 帖子: 471
  • 注册: 周一 10月 17, 2011 4:55 pm


+ 发表回复

分页: 1 / 1