1. дома
  2. Вопрос и ответ
  3. CSS DIV/Footer Не на Bottom

CSS DIV/Footer Не на Bottom

2013-11-23 2 views
0

Я имею проблему с помощью CSS ...CSS DIV/Footer Не на Bottom

Я сделал веб-страницу, по одному с помощью Div контейнеров и после окончания я хотел поставить колонтитула в нижней части ..

, но теперь, когда когда-либо я пишу что-то его не будет ниже все .. Вместо этого всплывающего-й в середине страницы .. и справа ..

Я попытался с помощью CSS и bottom:0; и многих других .. . Но не только нижний колонтитул, но и любой новый контейнер/div идет в середине страницы не ниже всего.

.footer { 
    position:absolute; 
    bottom:0; 
    width:100%; 
    background:#6cf; 
}

Не работает :(

http://jsfiddle.net/sDN7w/

я помещал CSS и HTML кода есть .. но без картинок это перепуталось .. но все же авторские права на, поступающие сверху .. даже там ... Если ничего не работает, я загружу все это на сайт, чтобы вы, ребята, могли это ясно видеть.

источник

2013-11-23 Rifshan

+2

вы можете добавить HTML и CSS полный исходный код здесь, или вы можете сделать скрипку? – softvar

+0

Установили ли вы положение тела относительно, а высота - 100%? –

+0

Вы можете найти свой ответ здесь, на http://stackoverflow.com/questions/1488565/how-to-stick-a-footer-to-bottom-in-css?rq=1 –

ответ

1

Что вы сделали, должно работать.

Например:

<div class="footer"></div> 

.footer { 
    position:absolute; 
    bottom:0; 
    width:100%; 
    background:#6cf; 
    height: 100px; 
}

Посмотрите на этой скрипке: http://jsfiddle.net/2xLJ6/

источник

2013-11-23 10:21:56

+0

Но так, как только страница становится прокручиваемый, нижний колонтитул больше не будет привязан к нижней части этой страницы? – softvar

+0

Чтобы он располагался внизу, даже при прокрутке вам нужно использовать 'position: fixed' – enyce12

+0

Я не хочу, чтобы он прокручивался. Мне нужен нижний колонтитул в конце страницы .. как и большинство других обычных страниц. – Rifshan

0

убедитесь, что ваш колонтитул из всех других Div тегов

<style> 
    .footer { 
     position:absolute; 
     bottom:0; 
     width:100%; 
     background:#6cf; 

    } 
</style> 
<body> 
<!-- other div elements --> 
<!-- footer --> 
<div class="footer">whatever text... bla bla bla...</div> 
</body>

Надежда, что помогает .. ...

источник

2013-11-23 10:31:59

+0

Footer чуть выше тега тела, как ваш .. Но не работает .. – Rifshan

+0

мог бы вы отправить мне коды .. /? –

+0

http://jsfiddle.net/sDN7w/ – Rifshan

0

ознакомьтесь с этой скрипкой

http://jsfiddle.net/vigneshvdm/AM6MX/1/

HTML

<div class="footer">provide footer text here 
</div> 
<div class="other"></div> 
<div class="other"></div>

CSS

.footer { 
    position:absolute; 
    bottom:0px; 
    width:100%; 
    background:#6cf; 
    height: 30px; 
    text-align:center; 
} 
.other{ 
    width:100px; 
    height: 100px; 
    background:green; 
    margin-left:30px; 
}

В вашем случае проблема заключается в том, что нижнее положение будет перезаписана TOP значения. Таким образом, вы можете попробовать дать верхнее значение, а это будет работать! Вы можете проверить это here

источник

2013-11-23 10:40:32

+0

Проверьте мой jsfiddle в первом посте .. – Rifshan

+0

http://jsfiddle.net/vigneshvdm/sDN7w/1/ –

0

Проверьте это, я поставил в подвал, прикрепленный к нижней

http://codepen.io/anon/pen/Cdyhv

</div> 
<div class="footer">Copy Rights</div> 

</body> 

.footer { 
    background-color:#32c0da; 
    position:fixed; 
    width:100%; 
    height:50px; 
    bottom:0; 
    left:0; 
}

источник

2013-11-23 11:07:02 Nibbler

+0

Нижний колонтитул движется .. Мне нужно, чтобы он застрял на внизу страницы .. – Rifshan

0

там я идти ... было это то, что у хотел .. ??

<html> 
<head> 
<style> 
body {  
    font-family:Arial, Helvetica, sans-serif; 
    color:#7f7d78; 
    background:#daf0f6 url(images/background_slice.png) repeat-x; 
    height:100%; 
    position:relative; 
} 

.main { 

} 
.main .background { 
    background-image:url(images/background.png); 
    background-repeat:no-repeat; 
    min-height:100%; 
} 
.main .background .header { 
} 
.wrap { 
    margin: auto; 
    min-height:100%; 
    width: 1024px; 
} 
.wrap .main .background .logo { 
    background-image:url(images/logo.png); 
    background-repeat:no-repeat; 
    width:194px; 
    height:83px; 
} 


.wrap .main .background .logo h1, .logo small { 
    margin:0px; 
    display:block; 
    text-indent:-9999px; 
} 

ul#menu { 
    margin: 0px; 
    padding: 0px; 
    position: absolute; 
    right: 100px; 
    top: 26px; 
} 
ul#menu li { 
    display:inline; 
    margin-left:12px; 
} 
ul#menu li a { 
    text-decoration:none; 
    color:#716d6a; 
    font-family:Verdana, Arial, Helvetica, sans-serif; 
    font-size:10px; 
    font-weight:bold; 
    text-transform:uppercase; 
} 
ul#menu li a.active, ul#menu li a:hover { 
    color:#211e1e; 
} 

#slider_container { 
    background-image:url(images/slider_background.png); 
    background-repeat:repeat-x; 
    display:block; 
    border:1px solid #ffffff; 
    padding:10px; 
    overflow:auto; 
} 
.wrap .main .background .content2 { 
    width: 1024px; 
    float:left; 
} 
.wrap .main .background .content2 .intro { 
    padding-left: 20px; 
    padding-top: 5px; 
    width: 1005px; 
    height: 200px; 
    background-image: url(images/content_background.png); 
    background-repeat: repeat-x; 
    border:1px solid #ffffff; 
} 
.wrap .main .background .content2 .intro .intro_font { 
    font-size: 13px; 
} 
.wrap .main .background .content2 .intro .intro_font .intro_pic { 
    padding: 5px; 
} 
.wrap .main .background .content1 { 
    width: 1024px; 
    float:left; 
} 
.wrap .main .background .content1 .flights { 
    width: 284px; 
    background-image: url(images/content_background.png); 
    background-repeat: repeat-x; 
    padding-left: 20px; 
    padding-right: 20px; 
    float: left; 
    margin-right: 22px; 
    border:1px solid #ffffff; 
} 
.wrap .main .background .content1 .flights .flight_pic { 
    float: left; 
} 
.wrap .main .background .content1 .flights .flight_price { 
    float: right; 
} 


.wrap .main .background .content1 .cruises { 
    width: 285px; 
    height: 195px; 
    background-image: url(images/content_background.png); 
    background-repeat: repeat-x; 
    padding-left: 20px; 
    padding-right: 20px; 
    float: left; 
    margin-right: 22px; 
    border:1px solid #ffffff; 
} 
.wrap .main .background .content1 .cruises .cruises_pic { 
    float: left; 
} 
.wrap .main .background .content1 .cruises .cruises_price { 
    float: right; 
} 
.wrap .main .background .content1 .vacations .vacations_pic { 
    float: left; 
} 
.wrap .main .background .content1 .vacations .vacations_price { 
    float: right; 
} 




.wrap .main .background .content1 .vacations { 
    width: 285px; 
    height: 195px; 
    background-image:url(images/content_background.png); 
    background-repeat:repeat-x; 
    padding-left:20px; 
    padding-right:20px; 
    float:left; 
    border:1px solid #ffffff; 
} 

.wrap .main .background .content1 h3 { 
    color:#32c0da; 
} 
.footer { 
    background-color:#32c0da; 
    margin-bottom:0px; 
    width:100%; 
} 
</style> 
</head> 
<body> 
<div class="wrap"> 

    <div class="main"> 

     <div class="background"> 

      <div class="header"> 

       <ul id="menu"> 
        <li><a href="">Home</a></li> 
        <li><a href="">Tours</a></li> 
        <li><a href="">Hotels</a></li> 
        <li><a href="">Cruises</a></li> 
        <li><a href="">Arrivals</a></li> 
        <li><a href="">Destinations</a></li> 
       </ul> 

       <div class="logo"> 
        <h1>Rippe Travels</h1> 
       </div> 

      </div> 



    <br> 

    <div class="content2"> 

     <div class="intro"> 
     <h2>Travel planning starts here....</h2> 
     <p class="intro_font" ><img src="images/intro.png" class="intro_pic" align="right">Whether you’re looking for hotels, flights, cruises or vacation packages, we make it easy to plan and book virtually any trip. Extraordinary starts with Rippe Travels.<br><br> 
     It may be the vacation of your dreams, but sometimes nightmarish things happen. Choose one of our comprehensive plans, or build the travel insurance package that will give you the peace of mind you need.<br><br> 
     Protect yourself from theft or lost credit cards with American Express Travelers Cheques. They never expire and are accepted at thousands of locations worldwide. We'll replace them if they're lost or stolen, and we're here to offer assistance 24/7. 
     </p> 

     </div> 
    </div> 


    <div class="content1"> 

     <div class="flights"> 
     <h3>Flights</h3> 
     <p>A small descriptive text goes here, about the planes we have.</p> 
     <img class="flight_pic" src="images/flights.png" alt="flight"><img src="images/flights1.png" alt="price" width="92" height="69" class="flight_price"> 
     </div> 

     <div class="cruises"> 
     <h3>Cruises</h3> 
     <p>A small descriptive text goes here, about the planes we have.</p> 
     <img class="cruises_pic" src="images/cruises.png" alt="cruises"> 
     <img src="images/cruises1.png" alt="price" width="102" height="69" class="cruises_price"> 
     </div> 

     <div class="vacations"> 
     <h3>Vacations</h3> 
     <p>A small descriptive text goes here, about the planes we have.</p> 
     <img class="vacations_pic" src="images/vacations.png" alt="vacations"> 
     <img src="images/vacations1.png" alt="price" width="114" height="69" class="vacations_price"> 
     </div> 

    </div> 

     </div> 

    </div> 
</div> 

<div style="position:absolute;"> 
Copyright... bla bla bla..... 
</div> 







    </body> 
    </html>

источник

2013-11-23 11:14:03

+0

Да .. Это в значительной степени то, что я хочу .. Какие изменения вы сделали? , и я хочу сохранить файл css отдельно. – Rifshan

+0

Я просто возился с кодами ..... –

0

HTML-страницы ....

<html> 
<head> 
<link href="booboo.css" type="text/css" rel="stylesheet" /> 
</head> 
<body> 
<div class="wrap"> 

    <div class="main"> 

     <div class="background"> 

      <div class="header"> 

       <ul id="menu"> 
        <li><a href="">Home</a></li> 
        <li><a href="">Tours</a></li> 
        <li><a href="">Hotels</a></li> 
        <li><a href="">Cruises</a></li> 
        <li><a href="">Arrivals</a></li> 
        <li><a href="">Destinations</a></li> 
       </ul> 

       <div class="logo"> 
        <h1>Rippe Travels</h1> 
       </div> 

      </div> 



    <br> 

    <div class="content2"> 

     <div class="intro"> 
     <h2>Travel planning starts here....</h2> 
     <p class="intro_font" ><img src="images/intro.png" class="intro_pic" align="right">Whether you’re looking for hotels, flights, cruises or vacation packages, we make it easy to plan and book virtually any trip. Extraordinary starts with Rippe Travels.<br><br> 
     It may be the vacation of your dreams, but sometimes nightmarish things happen. Choose one of our comprehensive plans, or build the travel insurance package that will give you the peace of mind you need.<br><br> 
     Protect yourself from theft or lost credit cards with American Express Travelers Cheques. They never expire and are accepted at thousands of locations worldwide. We'll replace them if they're lost or stolen, and we're here to offer assistance 24/7. 
     </p> 

     </div> 
    </div> 


    <div class="content1"> 

     <div class="flights"> 
     <h3>Flights</h3> 
     <p>A small descriptive text goes here, about the planes we have.</p> 
     <img class="flight_pic" src="images/flights.png" alt="flight"><img src="images/flights1.png" alt="price" width="92" height="69" class="flight_price"> 
     </div> 

     <div class="cruises"> 
     <h3>Cruises</h3> 
     <p>A small descriptive text goes here, about the planes we have.</p> 
     <img class="cruises_pic" src="images/cruises.png" alt="cruises"> 
     <img src="images/cruises1.png" alt="price" width="102" height="69" class="cruises_price"> 
     </div> 

     <div class="vacations"> 
     <h3>Vacations</h3> 
     <p>A small descriptive text goes here, about the planes we have.</p> 
     <img class="vacations_pic" src="images/vacations.png" alt="vacations"> 
     <img src="images/vacations1.png" alt="price" width="114" height="69" class="vacations_price"> 
     </div> 

    </div> 

     </div> 

    </div> 
</div> 

<div style="position:absolute;"> 
Copyright... bla bla bla..... 
</div> 







    </body> 
    </html>

booboo.css страница ..

body {  
    font-family:Arial, Helvetica, sans-serif; 
    color:#7f7d78; 
    background:#daf0f6 url(images/background_slice.png) repeat-x; 
    height:100%; 
    position:relative; 
} 

.main { 

} 
.main .background { 
    background-image:url(images/background.png); 
    background-repeat:no-repeat; 
    min-height:100%; 
} 
.main .background .header { 
} 
.wrap { 
    margin: auto; 
    min-height:100%; 
    width: 1024px; 
} 
.wrap .main .background .logo { 
    background-image:url(images/logo.png); 
    background-repeat:no-repeat; 
    width:194px; 
    height:83px; 
} 


.wrap .main .background .logo h1, .logo small { 
    margin:0px; 
    display:block; 
    text-indent:-9999px; 
} 

ul#menu { 
    margin: 0px; 
    padding: 0px; 
    position: absolute; 
    right: 100px; 
    top: 26px; 
} 
ul#menu li { 
    display:inline; 
    margin-left:12px; 
} 
ul#menu li a { 
    text-decoration:none; 
    color:#716d6a; 
    font-family:Verdana, Arial, Helvetica, sans-serif; 
    font-size:10px; 
    font-weight:bold; 
    text-transform:uppercase; 
} 
ul#menu li a.active, ul#menu li a:hover { 
    color:#211e1e; 
} 

#slider_container { 
    background-image:url(images/slider_background.png); 
    background-repeat:repeat-x; 
    display:block; 
    border:1px solid #ffffff; 
    padding:10px; 
    overflow:auto; 
} 
.wrap .main .background .content2 { 
    width: 1024px; 
    float:left; 
} 
.wrap .main .background .content2 .intro { 
    padding-left: 20px; 
    padding-top: 5px; 
    width: 1005px; 
    height: 200px; 
    background-image: url(images/content_background.png); 
    background-repeat: repeat-x; 
    border:1px solid #ffffff; 
} 
.wrap .main .background .content2 .intro .intro_font { 
    font-size: 13px; 
} 
.wrap .main .background .content2 .intro .intro_font .intro_pic { 
    padding: 5px; 
} 
.wrap .main .background .content1 { 
    width: 1024px; 
    float:left; 
} 
.wrap .main .background .content1 .flights { 
    width: 284px; 
    background-image: url(images/content_background.png); 
    background-repeat: repeat-x; 
    padding-left: 20px; 
    padding-right: 20px; 
    float: left; 
    margin-right: 22px; 
    border:1px solid #ffffff; 
} 
.wrap .main .background .content1 .flights .flight_pic { 
    float: left; 
} 
.wrap .main .background .content1 .flights .flight_price { 
    float: right; 
} 


.wrap .main .background .content1 .cruises { 
    width: 285px; 
    height: 195px; 
    background-image: url(images/content_background.png); 
    background-repeat: repeat-x; 
    padding-left: 20px; 
    padding-right: 20px; 
    float: left; 
    margin-right: 22px; 
    border:1px solid #ffffff; 
} 
.wrap .main .background .content1 .cruises .cruises_pic { 
    float: left; 
} 
.wrap .main .background .content1 .cruises .cruises_price { 
    float: right; 
} 
.wrap .main .background .content1 .vacations .vacations_pic { 
    float: left; 
} 
.wrap .main .background .content1 .vacations .vacations_price { 
    float: right; 
} 




.wrap .main .background .content1 .vacations { 
    width: 285px; 
    height: 195px; 
    background-image:url(images/content_background.png); 
    background-repeat:repeat-x; 
    padding-left:20px; 
    padding-right:20px; 
    float:left; 
    border:1px solid #ffffff; 
} 

.wrap .main .background .content1 h3 { 
    color:#32c0da; 
} 
.footer { 
    background-color:#32c0da; 
    margin-bottom:0px; 
    width:100%; 
}

думаю, что это время у дать мне что-нибудь .....

источник

2013-11-23 11:31:15

+0

Спасибо большое! – Rifshan

Смежные вопросы

 Смежные вопросы