چرا حریم footer رعایت نمی شود و مطالب زیر ان می افتند؟

ساخت وبلاگ

آخرین مطالب

امکانات وب

چرا حریم footer رعایت نمی شود و مطالب زیر ان می افتند؟

سلام خدمت اعضای محترم انجمن
بنده یک سوال از حضور شما داشتم:

من می خواهم برای سایتی که طراحی می کنم یک footer قرار بدهم. به همین دلیل به سایت bootsnip رفتم و یک footer پیدا کردم . این footer را دانلود کردم.
مشکلی که برای من پیش امده این است که وقتی محتوای مطالب سایت (یعنی انچه باید بالای footer قرار بگیرد ) را پر می کنم مطالب به جای اینکه بالای footer قرار

بگیرند می ایند زیر footer می افتند . و من هرچی این کد را بالا و پایین می کنم متوجه نمی شوم چرا باید یک المان زیر المان دیگری قرار بگیرد ؟ آخر این برای خودش یک
div است و آن برای خودش div دیگری است چرا باید این زیر ان بیفتد؟ مگر المان ها هرکدام یک جایی ندارند؟

من کل کد را اینجا قرار می دهم لطفا اگه از دستتون براومد منو راهنمایی کنید که چرا یک این اتفاق می افتد
خیلی ممنون

کد HTML:
<!DOCTYPE html><html lang="en"><head>    <meta charset="utf-8">    <!-- This file has been downloaded from Bootsnipp.com. Enjoy! -->    <title>Tall Footer With Gradient Image - Bootsnipp.com</title>        <meta name="viewport" content="width=device-width, initial-scale=1">    <link href="http://netdna.bootstrapcdn.com/bootstrap/3.1.0/css/bootstrap.min.css" rel="stylesheet">    <style type="text/css">        /* Footer styles-------------------------------------------------- */html {  position: relative;  min-height: 100%;}body {  /* Margin bottom by footer height */  margin-bottom: 60px;}#footer {  position: absolute;  bottom: 0;  width: 100%;  /* Set the fixed height of the footer here */  height: 280px;  background:  /* color overlay */    linear-gradient(      rgba(240, 212, 0, 0.45),      rgba(0, 0, 0, 0.45)    ),    /* image to overlay */    url(http://images.cdn.fotopedia.com/_avPIZmqM3w-7z161LH_268-hd.jpg);}

/* Custom footer CSS-------------------------------------------------- */
.container {  width: auto;  max-width: 680px;  padding: 0 15px;}.container .text-muted {  margin: 20px 0;}.footertext {  color: #ffffff;}
    </style>    <script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>    <script src="http://netdna.bootstrapcdn.com/bootstrap/3.1.0/js/bootstrap.min.js"></script></head><body><div class="container well">  <h2><center>Web Stuff Goes Here</center></h2>  <h2><center>Web Stuff Goes Here</center></h2>  <h2><center>Web Stuff Goes Here</center></h2>  <h2><center>Web Stuff Goes Here</center></h2>  <h2><center>Web Stuff Goes Here</center></h2>  <h2><center>Web Stuff Goes Here</center></h2>  <h2><center>Web Stuff Goes Here</center></h2>  <h2><center>Web Stuff Goes Here</center></h2>  <h2><center>Web Stuff Goes Here</center></h2>  <h2><center>Web Stuff Goes Here</center></h2>  <h2><center>Web Stuff Goes Here</center></h2>  <h2><center>Web Stuff Goes Here</center></h2>  <h2><center>Web Stuff Goes Here</center></h2>  <h2><center>Web Stuff Goes Here</center></h2>  <h2><center>Web Stuff Goes Here</center></h2>  <h2><center>Web Stuff Goes Here</center></h2>  <h2><center>Web Stuff Goes Here</center></h2>  <h2><center>Web Stuff Goes Here</center></h2>    <h2><center>Web Stuff Goes Here</center></h2></div><div id="footer">    <div class="container">        <div class="row">            <h3 class="footertext">About Us:</h3>            <br>              <div class="col-md-4">                <center>                  <img src="http://oi60.tinypic.com/w8lycl.jpg" class="img-circle" alt="the-brains">                  <br>                  <h4 class="footertext">Programmer</h4>                  <p class="footertext">You can thank all the crazy programming here to this guy.<br>                </center>              </div>              <div class="col-md-4">                <center>                  <img src="http://oi60.tinypic.com/2z7enpc.jpg" class="img-circle" alt="...">                  <br>                  <h4 class="footertext">Artist</h4>                  <p class="footertext">All the images here are hand drawn by this man.<br>                </center>              </div>              <div class="col-md-4">                <center>                  <img src="http://oi61.tinypic.com/307n6ux.jpg" class="img-circle" alt="...">                  <br>                  <h4 class="footertext">Designer</h4>                  <p class="footertext">This pretty site and the copy it holds are all thanks to this guy.<br>                </center>              </div>            </div>            <div class="row">            <p><center><a href="#">Contact Stuff Here</a> <p class="footertext">Copyright 2014</p></center></p>        </div>    </div></div><script type="text/javascript">
</script></body></html>
تمپوs...
ما را در سایت تمپوs دنبال می کنید

برچسب : نویسنده : خنج tempos بازدید : 173 تاريخ : سه شنبه 28 آذر 1396 ساعت: 13:51

آرشیو مطالب

پيوندهای روزانه

لینک دوستان

خبرنامه