النتائج 1 إلى 7 من 7

الموضوع: مشكلة في footer

  1. 13-04-2009 #1
    عضو نشيط
    love php
    تاريخ التسجيل
    Mar 2009
    المشاركات
    104

    مشكلة في footer



    السلام عليكم

    اخواني لدي هذا الاستايل و لكن مشكلته صفحة footer لا تتمدد

    اي لا تكون اسفل الصفحة اذا كان يوجد نص طويل

    كود PHP:
    <html>
    <    head>
    <    title>ead</title>
    <    meta http-equiv="Content-Type" content="text/html; charset=utf-8">

    <    style type="text/css">
    <!--

    #Table_01 {
            position:absolute;
            left:0px;
            top:0px;
            width:775px;
            height:680px;
    }

    #ead-01 {
            position:absolute;
            left:0px;
            top:0px;
            width:119px;
            height:40px;
    }

    #ead-02 {
            position:absolute;
            left:119px;
            top:0px;
            width:264px;
            height:40px;
    }

    #ead-03 {
            position:absolute;
            left:383px;
            top:0px;
            width:66px;
            height:40px;
    }

    #ead-04 {
            position:absolute;
            left:449px;
            top:0px;
            width:9px;
            height:40px;
    }

    #ead-05 {
            position:absolute;
            left:458px;
            top:0px;
            width:72px;
            height:40px;
    }

    #ead-06 {
            position:absolute;
            left:530px;
            top:0px;
            width:18px;
            height:40px;
    }

    #ead-07 {
            position:absolute;
            left:548px;
            top:0px;
            width:94px;
            height:40px;
    }

    #ead-08 {
            position:absolute;
            left:642px;
            top:0px;
            width:16px;
            height:40px;
    }

    #ead-09 {
            position:absolute;
            left:658px;
            top:0px;
            width:106px;
            height:40px;
    }

    #ead-10 {
            position:absolute;
            left:764px;
            top:0px;
            width:11px;
            height:40px;
    }

    #ead-11 {
            position:absolute;
            left:0px;
            top:40px;
            width:775px;
            height:186px;
    }

    #ead-15 {
            position:absolute;
            left:0px;
            top:226px;
            width:775px;
            height:433px;
    }

    #footer {
          position:absolute;
          bottom:0;
          width:100%;
      
    }
    .    roundedcornr_box_666968 {
           background: #ffffff;
    }
    .    roundedcornr_top_666968 div {
           background: url(roundedcornr_666968_tl.png) no-repeat top left;
    }
    .    roundedcornr_top_666968 {
           background: url(roundedcornr_666968_tr.png) no-repeat top right;
    }
    .    roundedcornr_bottom_666968 div {
           background: url(roundedcornr_666968_bl.png) no-repeat bottom left;
    }
    .    roundedcornr_bottom_666968 {
           background: url(roundedcornr_666968_br.png) no-repeat bottom right;
    }

    .    roundedcornr_top_666968 div, .roundedcornr_top_666968, 
    .    roundedcornr_bottom_666968 div, .roundedcornr_bottom_666968 {
           width: 100%;
           height: 30px;
           font-size: 1px;
    }
    .    roundedcornr_content_666968 { margin: 0 30px; }
    -->
    </    style>

    </    head>
    <    body style="margin:0px; background-color:#000000; ">

    <    div id="Table_01" style="position: absolute; left: 10%; top: 0px; right: 10%; bottom: 0px">
        <    div id="ead-01">
            <    img src="images/ead_01.png" alt="">
        </    div>
        <    div id="ead-02">
            <    a href="index.php">
                <    img src="images/ead_02.png"  border="0" alt=""></a>
        </    div>
        <    div id="ead-03">
            <    a href="index.php">
                <    img src="images/ead_03.png"  border="0" alt=""></a>
        </    div>
        <    div id="ead-04">
            <    a href="index.php">
                <    img src="images/ead_04.png"  border="0" alt=""></a>
        </    div>
        <    div id="ead-05">
            <    a href="index.php">
                <    img src="images/ead_05.png" border="0" alt=""></a>
        </    div>
        <    div id="ead-06">
            <    a href="index.php">
                <    img src="images/ead_06.png" border="0" alt=""></a>
        </    div>
        <    div id="ead-07">
            <    a href="index.php">
                <    img src="images/ead_07.png" border="0" alt=""></a>
        </    div>
        <    div id="ead-08">
            <    a href="index.php">
                <    img src="images/ead_08.png"  border="0" alt=""></a>
        </    div>
        <    div id="ead-09">
            <    a href="index.php">
                <    img src="images/ead_09.png" border="0" alt=""></a>
        </    div>
        <    div id="ead-10">
            <    a href="index.php">
                <    img src="images/ead_10.png"  border="0" alt=""></a>
        </    div>
      <    div id="ead-11">
                <    img src="images/h1.png"  alt="" />
        </    div>
        <    div id="ead-15" >
        <    div class="roundedcornr_box_666968">
       <    div class="roundedcornr_top_666968"><div></div></div>
          <    div class="roundedcornr_content_666968">
                 Lorem ipsum dolor sit amet, consectetur ......     
          </    div>
       <    div class="roundedcornr_bottom_666968"><div></div></div>
    </    div>
    </    div>
        <    div id="footer">
            <    img src="images/ead_16.png"alt="">
        </    div>
    </    div>

    </    body>
    </    html> 






    رد مع اقتباس رد مع اقتباس love php غير متواجد حالياً

  2. 14-04-2009 #2
    عضو نشيط
    Fez-Soft
    تاريخ التسجيل
    Feb 2009
    المشاركات
    210


    الكود عادي اشتغل عندي
    و الفوتر ظهر جيد

    ليكون كل شيء موثوق ..
    أرفق الصور المستعملة حتى اتأكد من توزيع الصفحة
    لأنه هكذا تقريبا كل الصفحة سوداء لا يظهر شيء





    __________________
    Fez-Soft creation website
    مدونة Fez-Soft
    اتبعني على تويتر
    رد مع اقتباس رد مع اقتباس Fez-Soft غير متواجد حالياً
  3. 15-04-2009 #3
    عضو نشيط
    love php
    تاريخ التسجيل
    Mar 2009
    المشاركات
    104


    اخي Fez-Soft

    تمدد الفوتر لم يعمل معي انظر للصورة في المرفقات

    ومرفق معها صورة الفوتر





    الصور المرفقة الصور المرفقة   
    رد مع اقتباس رد مع اقتباس love php غير متواجد حالياً
  4. 15-04-2009 #4
    عضو نشيط
    libyan top
    تاريخ التسجيل
    Jan 2008
    المشاركات
    54


    أنا لم أفهم من كلامك الا مشكلة عدم تمدد الفوتر .. وهذا هو التعديل ،،

    كود PHP:
    <html>
    <    head>
    <    title>ead</title>
    <    meta http-equiv="Content-Type" content="text/html; charset=utf-8">

    <    style type="text/css">
    <!--

    #Table_01 {
            position:absolute;
            left:0px;
            top:0px;
            width:775px;
            height:680px;
    }

    #ead-01 {
            position:absolute;
            left:0px;
            top:0px;
            width:119px;
            height:40px;
    }

    #ead-02 {
            position:absolute;
            left:119px;
            top:0px;
            width:264px;
            height:40px;
    }

    #ead-03 {
            position:absolute;
            left:383px;
            top:0px;
            width:66px;
            height:40px;
    }

    #ead-04 {
            position:absolute;
            left:449px;
            top:0px;
            width:9px;
            height:40px;
    }

    #ead-05 {
            position:absolute;
            left:458px;
            top:0px;
            width:72px;
            height:40px;
    }

    #ead-06 {
            position:absolute;
            left:530px;
            top:0px;
            width:18px;
            height:40px;
    }

    #ead-07 {
            position:absolute;
            left:548px;
            top:0px;
            width:94px;
            height:40px;
    }

    #ead-08 {
            position:absolute;
            left:642px;
            top:0px;
            width:16px;
            height:40px;
    }

    #ead-09 {
            position:absolute;
            left:658px;
            top:0px;
            width:106px;
            height:40px;
    }

    #ead-10 {
            position:absolute;
            left:764px;
            top:0px;
            width:11px;
            height:40px;
    }

    #ead-11 {
            position:absolute;
            left:0px;
            top:40px;
            width:775px;
            height:186px;
    }

    #ead-15 {
            position:absolute;
            left:0px;
            top:226px;
            width:775px;
            height:433px;
    }

    #footer {
          position:absolute;
          bottom:0;
          width:100%;
      
    }
    .    roundedcornr_box_666968 {
           background: #ffffff;
    }
    .    roundedcornr_top_666968 div {
           background: url(roundedcornr_666968_tl.png) no-repeat top left;
    }
    .    roundedcornr_top_666968 {
           background: url(roundedcornr_666968_tr.png) no-repeat top right;
    }
    .    roundedcornr_bottom_666968 div {
           background: url(roundedcornr_666968_bl.png) no-repeat bottom left;
    }
    .    roundedcornr_bottom_666968 {
           background: url(roundedcornr_666968_br.png) no-repeat bottom right;
    }

    .    roundedcornr_top_666968 div, .roundedcornr_top_666968, 
    .    roundedcornr_bottom_666968 div, .roundedcornr_bottom_666968 {
           width: 100%;
           height: 30px;
           font-size: 1px;
    }
    .    roundedcornr_content_666968 { margin: 0 30px; }
    -->
    </    style>

    </    head>
    <    body style="margin:0px; background-color:#000000; ">

    <    div id="Table_01" style="position: absolute; left: 10%; top: 0px; right: 10%; bottom: 0px">
        <    div id="ead-01">
            <    img src="images/ead_01.png" alt="">
        </    div>
        <    div id="ead-02">
            <    a href="index.php">
                <    img src="images/ead_02.png"  border="0" alt=""></a>
        </    div>
        <    div id="ead-03">
            <    a href="index.php">
                <    img src="images/ead_03.png"  border="0" alt=""></a>
        </    div>
        <    div id="ead-04">
            <    a href="index.php">
                <    img src="images/ead_04.png"  border="0" alt=""></a>
        </    div>
        <    div id="ead-05">
            <    a href="index.php">
                <    img src="images/ead_05.png" border="0" alt=""></a>
        </    div>
        <    div id="ead-06">
            <    a href="index.php">
                <    img src="images/ead_06.png" border="0" alt=""></a>
        </    div>
        <    div id="ead-07">
            <    a href="index.php">
                <    img src="images/ead_07.png" border="0" alt=""></a>
        </    div>
        <    div id="ead-08">
            <    a href="index.php">
                <    img src="images/ead_08.png"  border="0" alt=""></a>
        </    div>
        <    div id="ead-09">
            <    a href="index.php">
                <    img src="images/ead_09.png" border="0" alt=""></a>
        </    div>
        <    div id="ead-10">
            <    a href="index.php">
                <    img src="images/ead_10.png"  border="0" alt=""></a>
        </    div>
      <    div id="ead-11">
                <    img src="images/h1.png"  alt="" />
        </    div>
        <    div id="ead-15" >
        <    div class="roundedcornr_box_666968">
       <    div class="roundedcornr_top_666968"><div></div></div>
          <    div class="roundedcornr_content_666968">
                 Lorem ipsum dolor sit amet, consectetur ......     
          </    div>
       <    div class="roundedcornr_bottom_666968"><div></div></div>
    </    div>
        </    div>
    </    div>
        <    div id="footer">
            <    img src="images/ead_16.png"alt="">
    </    div>

    </    body>
    </    html> 






    رد مع اقتباس رد مع اقتباس libyan top غير متواجد حالياً
  5. 15-04-2009 #5
    عضو نشيط
    Fez-Soft
    تاريخ التسجيل
    Feb 2009
    المشاركات
    210


    اهلا ..
    الآن فهمت مشكلتك جيدا .. لذلك لنستفيد اكثر من الموضوع لازم تعرف سبب المشكلة
    و السبب كان من تقسيمك للصفحة وليس من أكواد Css

    انت عملت div للهيدر وآخر للمحتوى و ىخر للفوتر .. وهنا الخطأ
    كان يجب عمل div واحد كبير يجمع الكل .. كأساس .. و من ثم توزيع التقسيمات بداخله .. وحجز مكان للفوتر .. ثم استعمال الفوتر في اسفل الـ height الذي هو 100%

    طبعا كقاعدة عامة أنا عملت لك مثال خال من الصور و بمعرفات جديدة ..
    تابع :
    كود PHP:
    <!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>example .. Fez-Soft</title>
    <    style type="text/css">
    <!--
    body {
            font: 12px Tahoma; 
            background: #000; 
    }
    h1 { 
            font: bold 20px Arial;
     }
    h1, p {
             margin:0;
    }

    html, body {
            height: 100%;
            padding:0;
            margin:0;
        }
    #all {
            position:relative;
            background: #FFF;
            min-height: 100%;
            margin: 0 auto;
            width:760px;
            }
    /* pour IE */
    * html #container {     
            height: 100%;
        }
            #header {
                background:#fff;
                background : #eee ;
                padding:10px;
            }
            #contenent {
                padding:10px;
                padding-bottom:40px;   /*Height ->pour le footer*/
                }
                #clear {
                clear:both;
                height:0;
            }
            #footer {
                background: #ccc;
                position:absolute;
                height:40px;
                width:100%;
                bottom:0;
            }
                #footer p {
                    margin:0;
                    padding:10px;
                }
    -->
    </    style>
    </    head>
    <    body>

    <    div id="all">
      <    div id="header">header .. ici</div>
      <    div id="contenent">
        <    h1>grand titre h1</h1>
        <    p>ici je tapé mon text
    <br />
    Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede. Donec nec justo eget felis facilisis fermentum. Aliquam porttitor mauris sit amet orci. Aenean dignissim pellentesque felis. Morbi in sem quis dui placerat ornare. Pellentesque odio nisi, euismod in, pharetra a, ultricies in, diam. Sed arcu. Cras consequat
    Lorem ipsum dolor sit amet    , consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede. Donec nec justo eget felis facilisis fermentum. Aliquam porttitor mauris sit amet orci. Aenean dignissim pellentesque felis. Morbi in sem quis dui placerat ornare. Pellentesque odio nisi, euismod in, pharetra a, ultricies in, diam. Sed arcu. Cras consequat
    Lorem ipsum dolor sit amet    , consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede. Donec nec justo eget felis facilisis fermentum. Aliquam porttitor mauris sit amet orci. Aenean dignissim pellentesque felis. Morbi in sem quis dui placerat ornare. Pellentesque odio nisi, euismod in, pharetra a, ultricies in, diam. Sed arcu. Cras consequat
    Lorem ipsum dolor sit amet    , consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede. Donec nec justo eget felis facilisis fermentum. Aliquam porttitor mauris sit amet orci. Aenean dignissim pellentesque felis. Morbi in sem quis dui placerat ornare. Pellentesque odio nisi, euismod in, pharetra a, ultricies in, diam. Sed arcu. Cras consequat
    Lorem ipsum dolor sit amet    , consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede. Donec nec justo eget felis facilisis fermentum. Aliquam porttitor mauris sit amet orci. Aenean dignissim pellentesque felis. Morbi in sem quis dui placerat ornare. Pellentesque odio nisi, euismod in, pharetra a, ultricies in, diam. Sed arcu. Cras consequat
    Lorem ipsum dolor sit amet    , consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede. Donec nec justo eget felis facilisis fermentum. Aliquam porttitor mauris sit amet orci. Aenean dignissim pellentesque felis. Morbi in sem quis dui placerat ornare. Pellentesque odio nisi, euismod in, pharetra a, ultricies in, diam. Sed arcu. Cras consequat
    Lorem ipsum dolor sit amet    , consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede. Donec nec justo eget felis facilisis fermentum. Aliquam porttitor mauris sit amet orci. Aenean dignissim pellentesque felis. Morbi in sem quis dui placerat ornare. Pellentesque odio nisi, euismod in, pharetra a, ultricies in, diam. Sed arcu. Cras consequat
    Lorem ipsum dolor sit amet    , consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede. Donec nec justo eget felis facilisis fermentum. Aliquam porttitor mauris sit amet orci. Aenean dignissim pellentesque felis. Morbi in sem quis dui placerat ornare. Pellentesque odio nisi, euismod in, pharetra a, ultricies in, diam. Sed arcu. Cras consequat

    Lorem ipsum dolor sit amet    , consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede. Donec nec justo eget felis facilisis fermentum. Aliquam porttitor mauris sit amet orci. Aenean dignissim pellentesque felis. Morbi in sem quis dui placerat ornare. Pellentesque odio nisi, euismod in, pharetra a, ultricies in, diam. Sed arcu. Cras consequat
    Lorem ipsum dolor sit amet    , consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede. Donec nec justo eget felis facilisis fermentum. Aliquam porttitor mauris sit amet orci. Aenean dignissim pellentesque felis. Morbi in sem quis dui placerat ornare. Pellentesque odio nisi, euismod in, pharetra a, ultricies in, diam. Sed arcu. Cras consequat
    Lorem ipsum dolor sit amet    , consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede. Donec nec justo eget felis facilisis fermentum. Aliquam porttitor mauris sit amet orci. Aenean dignissim pellentesque felis. Morbi in sem quis dui placerat ornare. Pellentesque odio nisi, euismod in, pharetra a, ultricies in, diam. Sed arcu. Cras consequat
    Lorem ipsum dolor sit amet    , consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede. Donec nec justo eget felis facilisis fermentum. Aliquam porttitor mauris sit amet orci. Aenean dignissim pellentesque felis. Morbi in sem quis dui placerat ornare. Pellentesque odio nisi, euismod in, pharetra a, ultricies in, diam. Sed arcu. Cras consequat
    Lorem ipsum dolor sit amet    , consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede. Donec nec justo eget felis facilisis fermentum. Aliquam porttitor mauris sit amet orci. Aenean dignissim pellentesque felis. Morbi in sem quis dui placerat ornare. Pellentesque odio nisi, euismod in, pharetra a, ultricies in, diam. Sed arcu. Cras consequat
    Lorem ipsum dolor sit amet    , consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede. Donec nec justo eget felis facilisis fermentum. Aliquam porttitor mauris sit amet orci. Aenean dignissim pellentesque felis. Morbi in sem quis dui placerat ornare. Pellentesque odio nisi, euismod in, pharetra a, ultricies in, diam. Sed arcu. Cras consequat
    Lorem ipsum dolor sit amet    , consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede. Donec nec justo eget felis facilisis fermentum. Aliquam porttitor mauris sit amet orci. Aenean dignissim pellentesque felis. Morbi in sem quis dui placerat ornare. Pellentesque odio nisi, euismod in, pharetra a, ultricies in, diam. Sed arcu. Cras consequat

    Lorem ipsum dolor sit amet    , consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede. Donec nec justo eget felis facilisis fermentum. Aliquam porttitor mauris sit amet orci. Aenean dignissim pellentesque felis. Morbi in sem quis dui placerat ornare. Pellentesque odio nisi, euismod in, pharetra a, ultricies in, diam. Sed arcu. Cras consequat
    Lorem ipsum dolor sit amet    , consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede. Donec nec justo eget felis facilisis fermentum. Aliquam porttitor mauris sit amet orci. Aenean dignissim pellentesque felis. Morbi in sem quis dui placerat ornare. Pellentesque odio nisi, euismod in, pharetra a, ultricies in, diam. Sed arcu. Cras consequat
    Lorem ipsum dolor sit amet    , consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede. Donec nec justo eget felis facilisis fermentum. Aliquam porttitor mauris sit amet orci. Aenean dignissim pellentesque felis. Morbi in sem quis dui placerat ornare. Pellentesque odio nisi, euismod in, pharetra a, ultricies in, diam. Sed arcu. Cras consequat
    Lorem ipsum dolor sit amet    , consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede. Donec nec justo eget felis facilisis fermentum. Aliquam porttitor mauris sit amet orci. Aenean dignissim pellentesque felis. Morbi in sem quis dui placerat ornare. Pellentesque odio nisi, euismod in, pharetra a, ultricies in, diam. Sed arcu. Cras consequat
    Lorem ipsum dolor sit amet    , consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede. Donec nec justo eget felis facilisis fermentum. Aliquam porttitor mauris sit amet orci. Aenean dignissim pellentesque felis. Morbi in sem quis dui placerat ornare. Pellentesque odio nisi, euismod in, pharetra a, ultricies in, diam. Sed arcu. Cras consequat
    Lorem ipsum dolor sit amet    , consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede. Donec nec justo eget felis facilisis fermentum. Aliquam porttitor mauris sit amet orci. Aenean dignissim pellentesque felis. Morbi in sem quis dui placerat ornare. Pellentesque odio nisi, euismod in, pharetra a, ultricies in, diam. Sed arcu. Cras consequat
    Lorem ipsum dolor sit amet    , consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede. Donec nec justo eget felis facilisis fermentum. Aliquam porttitor mauris sit amet orci. Aenean dignissim pellentesque felis. Morbi in sem quis dui placerat ornare. Pellentesque odio nisi, euismod in, pharetra a, ultricies in, diam. Sed arcu. Cras consequat
    Lorem ipsum dolor sit amet    , consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede. Donec nec justo eget felis facilisis fermentum. Aliquam porttitor mauris sit amet orci. Aenean dignissim pellentesque felis. Morbi in sem quis dui placerat ornare. Pellentesque odio nisi, euismod in, pharetra a, ultricies in, diam. Sed arcu. Cras consequat
    </p>
        <    div id="clear"></div>
      </    div>
      <    div id="footer">
        <    p>footer ici .. copyright 2009</p>
      </    div>
    </    div>

    </    body>
    </    html> 
    هذا المثال يمكنك استعماله في اي موقع تريد ان تظهر الفوتر في الاسفل
    وضعت النص طريل جدا جدا و كررته غير مرة حتى نتأكد من الفوتر يتمدد

    المثال واضح لو قرأته .. ولكن سأوضح فقط نقاط سريعة :
    كود PHP:
    #all {
            position:relative;
            background: #FFF;
            min-height: 100%;
            margin: 0 auto;
            width:760px;
            } 
    هذا هو الديف الأكبر الذي سأوسطه ثم اجمع فيه الكل
    لكنني عملت فيه
    كود PHP:
        min-height: 100%; 
    هذه غير مدعومة أبدا من الاكسبلورر .. ولكن نحن كمطوري ويب يجب علينا ان نراعي توافق التصميم مع كل المتصفحات .. لذلك أضيف هذا الترقيع الخاص بالاكسبلورر

    كود PHP:
    * html #container {     
            height: 100%;
        } 
    كذلك أنبه على هذه :
    كود PHP:
        #contenent {
                padding:10px;
                padding-bottom:40px;   /*Height ->pour le footer*/
                } 
    بينت في الملاحظة ان هذه لطول الفوتر الذي تركت له مكان فارغ وهو 40px مثلا

    الآن لما اريد ان احدد الفوتر .. لكي أخذ هذا المكان وجب علي ان اعطيه نفس الارتفاع الذي تركت فارغا في contenent

    لذلك وضعت
    كود PHP:
        #footer {
                background: #ccc;
                position:absolute;
                height:40px;
                width:100%;
                bottom:0;
            } 
    40px .. اونت غير على حسب ااحتياجك


    هذه المثال الذي عملت لك .. يمكن لأوي مطور ويب أن يحتفظ به لانه اساس تزع أي موقع ب div و جعله ممتد للأسفل

    فقط غير المعرفات و غير الكلاماتو الالفوان و العرض وما شئت و اضف ال div الخاصة بمحتوا=يات الموقع الداخلية كيفما تريد بكل حرية داخل #contenent

    هذا ما يمكنني ان اعلق عليه .. والباقي في الكود ظاهر و بين و مفهوم

    ملاحظة : libyan top ممكن تراجع الكود لأنه لم يؤدي المطلوب - لما يكون النص طويل جدا -

    موفق بإذن الله





    التعديل الأخير تم بواسطة Fez-Soft ; 15-04-2009 الساعة 04:26 AM
    __________________
    Fez-Soft creation website
    مدونة Fez-Soft
    اتبعني على تويتر
    رد مع اقتباس رد مع اقتباس Fez-Soft غير متواجد حالياً
  6. 15-04-2009 #6
    عضو نشيط
    Fez-Soft
    تاريخ التسجيل
    Feb 2009
    المشاركات
    210


    عفوا .. كاستدراك

    الترقيع هذا أخطأت فيه في اسم ال id

    كود PHP:
    /* pour IE */ 
    * html #container {      
            height: 100%; 
        } 
    غيره من container الى all

    لأنني كنت اعمل على صفحتين في نفس الوقت فاختلطت المعرفات ^^"

    بالتوفيق ..





    __________________
    Fez-Soft creation website
    مدونة Fez-Soft
    اتبعني على تويتر
    رد مع اقتباس رد مع اقتباس Fez-Soft غير متواجد حالياً
  7. 15-04-2009 #7
    عضو نشيط
    love php
    تاريخ التسجيل
    Mar 2009
    المشاركات
    104


    الف الف شكر اخي Fez-Soft و libyan top

    الان يعمل الفوتر 100%





    رد مع اقتباس رد مع اقتباس love php غير متواجد حالياً




« مساعدة في عمل ستايل لسكربت | الان اصنع مربعات بزوايا دائرية بأشكال روعة CSS »

ضوابط المشاركة

  • لا تستطيع إضافة مواضيع جديدة
  • لا تستطيع الرد على المواضيع
  • لا تستطيع إرفاق ملفات
  • لا تستطيع تعديل مشاركاتك
  •  

قوانين المنتدى


أضف موقعك هنا| اخبار السيارات | حراج | شقق للايجار في الكويت | بيوت للبيع في الكويت | شركة كشف تسربات المياه | شركة عزل اسطح بالرياض | عزل فوم بالرياض| عزل اسطح بالرياض | كشف تسربات المياة بالرياض | شركة عزل اسطح بالرياض