Jump to content
  • 0

отступ в футере

Softlink

Asked by Softlink,

 Share

Question

Softlink Explorer

Softlink

Posted
Posted

ситуация такая. Есть табы на страничке. При загрузке страницы в опере, все в порядке. Стоит переключиться на вторую вкладку, а потом обратно, в футере появляется отступ снизу пикселей в 10. При перезагрузке страницы все становится опять нормально.

В других браузерах такой проблемы нет.

как не должно быть:1.png

как должно быть: 2.png

Страничка тут.

Это баг в опере или можно как-то железно пригвоздить футер?

Опера 10.63

Link to comment
Share on other sites

18 answers to this question

Recommended Posts

  • 0
Softlink Explorer

Softlink

Posted
  • Author
Posted (edited)

не знаю конечно как у вас там все нормально но у меня вот что получается

http://xmages.net/show.php/2726179_png.html

хром 11

:rolleyes:

а у меня все красиво. И во всех браузерах.

Ладно, буду еще копать. Temiks, будете тестером)))

А в других браузерах как?

Edited by Softlink
Link to comment
Share on other sites
  • 0
Temiks Explorer

Temiks

Posted
Posted

та везде так, размер экрана по высоте 1024рх

во, значит в этом и проблема. Сейчас буду править. Спасибо :rolleyes:

ps чтобы проверить прикреплен ли футер к низу пользуйтесь масштабом ;)

Link to comment
Share on other sites
  • 0
Softlink Explorer

Softlink

Posted
  • Author
Posted (edited)

прибил абсолютом к низу. Учел разрешение в 1200 по высоте. Правда сам цветок вниз съехал(жалко :( ) при меньшем разрешении, но что поделаешь.

Вот проблема, образовалась, да? То по ширине подгоняем, а здесь с малым кол-вом контента пришлось учитывать и гнать по высоте.

Проблема с оперой отвалилась одновременно. Не любит она position:absolute ;)

Temiks, спасибо за твое разрешение монитора, а то так бы и было все. Я даже и не подумал об этом :)

p.s. тестил здесь http://viewlike.us Может кому пригодится :rolleyes:

Edited by Softlink
Link to comment
Share on other sites
  • 0
Temiks Explorer

Temiks

Posted
Posted

Softlink вы хотите прижать футер, то есть цветок? так ищите решение проще, сделайте див с 100% высоты задайте ему бг этот цветок указав позицию бг как по центру и снизу, и не что уезжать не будет

Link to comment
Share on other sites
  • 0
Temiks Explorer

Temiks

Posted
Posted (edited)

а если изменить масштаб то будет так

s_1304794253_70d41a2866.png

да уже решил проблему. Вроде все корректно везде работает теперь.

не а, + еще не удобно то что есть прокрутка, а она там ни к чему, так как мало контента

Edited by Temiks
Link to comment
Share on other sites
  • 0
Softlink Explorer

Softlink

Posted
  • Author
Posted

Softlink вы хотите прижать футер, то есть цветок? так ищите решение проще, сделайте див с 100% высоты задайте ему бг этот цветок указав позицию бг как по центру и снизу, и не что уезжать не будет

так не сработает этот вариант. 100% высоты будет браться в зависимости от кол-ва материала, а не от высоты окна. А если контента там на 200 пикселей, то и 100%=200px. Так что такая конструкция точно не подойдет.

Link to comment
Share on other sites
  • 0
Softlink Explorer

Softlink

Posted
  • Author
Posted (edited)
100% высоты будет браться в зависимости от кол-ва материала, а не от высоты окна.

Вот как раз все наоборот.

Читайте

пожалуйста. Смотреть ваш вариант можно здесь

в main высота 100% для него сделал фоном цветок с background-position:bottom

Edited by Softlink
Link to comment
Share on other sites
  • 0
buddah Explorer

buddah

Posted
Posted (edited)

Прежде чем просто скопировать и вставить код - подумайте над его сутью, организации структуры и т.д.

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

в main высота 100% для него сделал фоном цветок с background-position:bottom

А зачем в мейн? Вы же хотите, чтоб цветок в подвале был.

Edited by buddah
Link to comment
Share on other sites
  • 0
Temiks Explorer

Temiks

Posted
Posted

так не сработает этот вариант. 100% высоты будет браться в зависимости от кол-ва материала, а не от высоты окна. А если контента там на 200 пикселей, то и 100%=200px. Так что такая конструкция точно не подойдет.

все подойдет если сделать так


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title></title>
        <link type="text/css" href="css/style.css" rel="stylesheet" />
        <style type="text/css" >
            html, body {
                height: 100%;
                padding: 0;
                margin: 0;
            }
              .wrap {
                  height: 100%;
                  background: url(путь к картинке.jpg) bottom center;
              }
              .header {
                  min-height: 100px;
                  background: red;
              }
              .contant {

              }
        </style>
</head>
<body>
    <div class="wrap" >
        <div class="header" >

        </div>
        <div class="contant" >

        </div>
    </div>
</body>
</html>

в этом коде если будет много текста то текст будет залазить на сам бг

Link to comment
Share on other sites
  • 0
Softlink Explorer

Softlink

Posted
  • Author
Posted (edited)

вроде теперь все доделал - переверстал напрочь. Может уже голова совсем не варит сегодня, но в принцип действия этой системы я не совсем въехал :rolleyes: Буду еще разбираться. Думаю, завтра все пойму ;)

За помощь спасибо!

Edited by Softlink
Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Answer this question...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

×
 Share
Go to question listing
×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue. See more about our Guidelines and Privacy Policy

  I accept