Проблема с фиксированым подвалом

Z3RO · July 3, 2011

Здравствуйте. Есть такая проблема: у меня есть фиксированый подвал, но он накрывает контент(Скриншот). Как мне зделать, чтобы контент поднялся выше подвала, если контент и боковые панели находятся в класе .layout, а подвал в .foot. Ниже приведен CSS Код

.layout{

margin: auto;

position: relative;

width: 95%;

}

.foot{

background-color: rgba(198,214,229,0.8);

bottom: 0;

left: 5%;

width: 90%;

position: fixed;

-moz-border-radius: 10px 10px 0 0;

-webkit-border-radius: 10px 10px 0 0;

border-radius: 10px 10px 0 0;

}

Если нужна дополнительная информация, пишите.

geonerstiem · July 3, 2011

delete

Z3RO · July 3, 2011

delete

Всмысле?

Softlink · July 3, 2011

delete
Всмысле?

это спамер, лучше код скиньте, как у вас все сделано.

Хотя есть такое предчувствие, что надо Зделать как-то так:

position:absolute;
bottom:0px;
margin-top:xxx /* высота футера */

Z3RO · July 3, 2011

Нет, так не подойдет, поскольку так подвал налазит на контент и там и остается при прокрутке. Вот код страницы


<?xml version="1.0" encoding="utf-8"?>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ru">
<head><meta http-equiv="content-type" content="text/html; charset=utf-8"/>
<link rel="shortcut icon" href="http://zcms/favicon.ico" />
<meta name="keywords" content="Key" />
<meta name="description" content="Description" />
<link rel="alternate" type="application/rss+xml" title="RSS | Новости ресурса" href="http://zcms/rss.php" />
<title>ZCMS | ZCMS</title>
<link rel="stylesheet" href="http://zcms/theme/default/style.css" type="text/css" />
<link rel="stylesheet" href="http://zcms/theme/default/web.css" type="text/css" />
<script type="text/javascript" src="http://zcms/inc/web/js/lib.js"></script>
</head><body onload="set_timeouts()"><div class="logo"><a href="http://zcms" title="http://zcms"><img src="http://zcms/theme/default/images/weblogo.gif" alt=""/></a></div><div class="header"><div class="text">Привет, гость!</div><a href="http://zcms/reg">Регистрация</a><a href="http://zcms/login">Вход</a></div><div class="layout"><div class="navigation"><a href="../news">Новости</a><a href="../guestbook">Гостевая</a><a href="../chat">Чат</a><a href="../articles">Статьи</a><a href="../info">Информация</a></div><div class="main"><div class="index"><h2><img src="../images/web/inform.png" alt="inform" class="down"/><a href="../info.php">Информация</a></h2>
<b>Personal CMS</b>(Content management system, система управления контентом) -- бесплатная, с открытым кодом, постоянные обновления и улучшения. Имеет хорошую гибкость и большой функционал. Очень удобна для разработчиков, поскольку имеет библиотеку функций, позволяющую сэкономить много времени и сил на написание своих.
<h3><img src="../images/web/news.png" alt="news" class="down"/><a href="../news">Новости</a></h3>
Это блок, с помощью которого администрация сайта публикует различные новости о сайте. Новость состоит из заголовка и текста новости. Администратор также вправе прикрепить к новости файл. Пользователи могут комментировать новости(если это не запрещено администрацией).Также можно ставить к новостям пометки "Мне нравится". Если есть новая новость, то она автоматически отображается на всех страницах для всех пользователей, но её можно скрыть, кликнув по красном крестике справа от заголовка новости. Если новость была скрыта, а потом появилась новая новость, то новость опять будет отображатся на всех страницах пока вы её не скроете. Также можно зделать автоматическое скрытие новостей в настройках. В данном случае новости никогда не будут отображатся.
<h3><img src="../images/web/guestbook.png" alt="guestbook" class="down"/><a href="../guestbook">Гостевая</a></h3>
Это блок, назначение которого связь пользователей с администрацией. В гостевой могут писать и гости, но только если это разрешено администрацией. Администратор может ответить на ваше сообщение либо новым сообщением, либо подписью под вашим сообщением, которая выделяется другим цветом.
<h3><img src="../images/web/chat.png" alt="chat" class="down"/><a href="../chat">Чат</a></h3>
Думаю здесь обьяснения не требуются
<h3><img src="../images/web/articles.png" alt="articles" class="down"/><a href="../articles">Статьи</a></h3>
В этом блоке администрация может выкладывать статьи различного характера.
За статьи можно голосовать и их можно комментировать.
Если кликнуть на иконку печати справа от заголовка, то вы увидите версию для печати статьи, в которой убрано всё лишнее, не относящееся к статье.
Если вы находитесь в какой-либо категории, вы можете выбрать режим сортировки(По дате(по умолчанию), по популярности и по имени).
Всего есть 3 режима отображения статей: все статьи, новые и самые читаемые.
<h3><img src="../images/web/profile.png" alt="profile" class="down"/><a href="../user/profile.php">Анкета</a></h3>
В анкете выводится информация о пользователе и его контактная информация. У каждого пользователя есть стена(личная гостевая) и его статистика. Для каждого пользователя ведётся история входов c IP, где можно посмотреть с какого IP и когда заходили под даным ником</div></div><div class="sidebar"><div class="zag">Авторизация</div><div class="menu"><form action="../login.php?" method="POST">
<label for="login">Логин:</label><br/>
<input type="text" name="login" id="login" maxwidth="15"/><br/>
<label for="password">Пароль:</label><br/>
<input type="password" name="pass" id="password" maxwidth="10"/><br/>
<a href="http://zcms/reg">Регистрация</a><br/>
<input type="submit" value="Войти"/>
</form></div></div></div><div class="foot">
<a href="http://zcms" class="left">Главная</a>
<a href="http://zcms/news">Новости</a>
<a href="http://zcms/guestbook">Гостевая</a>
<a href="http://zcms/chat">Чат</a>
<a href="http://zcms/articles">Статьи</a>
<a href="http://zcms/info">Информация</a>
<a href="http://zcms/change_ver.php">WAP</a>
</div></body></html>

Вот CSS:


body{max-width: 95%;}

b.big{font-size: 100%;}

textarea{width: 60%; height: 120px;}

.err{
-moz-border-top-left-radius: 10px; /*Firefox*/
-webkit-border-top-left-radius: 10px; /*Chrome, Netscape*/
border-top-left-radius: 10px; /*IE, Opera*/
bottom: 0;
right: 0;
position: fixed;
min-width: 200px;
}

.foot{
background-color: rgba(198,214,229,0.8);
bottom: 0;
left: 5%;
width: 90%;
position: fixed;
-moz-border-radius: 10px 10px 0 0;
-webkit-border-radius: 10px 10px 0 0;
border-radius: 10px 10px 0 0;
}

.foot a{
display: block;
height: 100%;
float: left;
min-width: 90px;
border-right: 1px solid #a8ccf1;
padding: 10px 5px;
text-align: center;
text-decoration: none;
font-size: large;
}

.foot a.left{
-moz-border-radius: 10px 0 0 0;
-webkit-border-radius: 10px 0 0 0;
border-radius: 10px 0 0 0;
}

.foot a:hover{background-color: #c3d6ea;}

.galarm{
background-color: #bff6ae;
-moz-border-top-right-radius: 10px; /*Firefox*/
-webkit-border-top-right-radius: 10px; /*Chrome, Netscape*/
border-top-right-radius: 10px; /*IE, Opera*/
bottom: 0;
left: 0;
position: fixed;
}

.header{
background-color: #6890ba;
-moz-border-radius: 0 0 10px 10px; /*Firefox*/
-webkit-border-radius: 0 0 10px 10px; /*Chrome, Netscape*/
border-radius: 0 0 10px 10px; /*IE, Opera*/
height: 25px;
padding-top: 0;
}

.header a{
background-color: #a2bfdc;
-moz-border-radius: 0 0 10px 10px; /*Firefox*/
-webkit-border-radius: 0 0 10px 10px; /*Chrome, Netscape*/
border-radius: 0 0 10px 10px; /*IE, Opera*/
cursor: pointer;
display: block;
float: right;
margin-right: 3px;
padding: 3px;
text-align: center;
text-decoration: none;
top: 0;
width: 80px;
}

.header a:hover{background-color: #b2cce7;}
.header a.red{background-color: rgba(255, 212, 212, 0.9); color: #9b0808;}
.header a.red:hover{background-color: rgb(255, 212, 212);}
.header div.text{display: inline-block; margin: 6px;}


.layout{
margin: auto;
position: relative;
width: 95%;
}

.layout div{position: absolute;}

.logo{
background: url('images/logo-bg.png') top left #a2bfdc;
padding: 20px 40px 20px 40px;
text-align: left;
}

.main{
border: 4px solid #5a7fa6;
border-top: 0px;
left: 20%;
right: 20%;
}

.main div{position: relative;}
.main img.down{margin: 0 10px -10px 0;}
.main .index{padding: 20px;}

.navigation{right: 0; width: 20%;}

.navigation a{
background-color: rgba(198,214,229,0.7);
display: block;
margin-bottom: 2px;
padding: 5px;
text-decoration: none;
}

.navigation a:hover{background-color: rgba(198,214,229,0.9);}

.sidebar{left: 0; width: 20%;}
.sidebar div{position: relative;}
.sidebar a.login{text-decoration: none; font-size: large;}
.sidebar .menu{background-color: #ebf3fb;}

.sidebar .menu a.block{
background-color: #dbe6f1;
display: block;
font-size: medium;
margin-top: 5px;
padding: 5px 0;
text-align: center;
text-decoration: none;
}

.sidebar .menu a.block:hover{background-color: #cddae7;}
.sidebar .menu input{width: 80%;}
.sidebar .menu input[type=submit]{width: 50%;}

.sidebar .zag{
background-color: #9ab3cd;
color: #eaf4ff;
display: block;
font-size: large;
padding: 7px;
text-decoration: none;
}

.sidebar input[type=text]{background: url('images/login_bg.png') no-repeat 3px center #e0ebf6; padding-left: 21px;}
.sidebar input[type=password]{background: url('images/pass_bg.png') no-repeat 3px center #e0ebf6; padding-left: 21px;}

.zag{
font-size: large;
padding: 5px;
}

buddah · July 3, 2011

А как ты хотел? У тебя же задано position: fixed;

Он всегда будет выше любых элементов и позиционируется относительно окна браузера.

В коде каша, разбирать её трудно и не хочется. Отформатируйте свой хтмл в удобоваримый вид.

Edited July 3, 2011 by buddah

Z3RO · July 3, 2011

А как ты хотел? У тебя же задано position: fixed;
Он всегда будет выше любых элементов и позиционируется относительно окна браузера.
В коде каша, разбирать её трудно и не хочется. Отформатируйте свой хтмл в удобоваримый вид.

Вот смотрите: подвал идёт сразу же после класса .layout вот как мне изменить стиль, чтобы подвал бчл не фиксированным и отображался сразу после лайаута? Перепробывал множество вариантов, но нужного результата так и не добился.

buddah · July 3, 2011

Убрать все свойства fixed и не задавать layout абсолют.

Я не шутил, когда сказал, что в коде каша. Почитай про position.

Z3RO · July 4, 2011

Убрать все свойства fixed и не задавать layout абсолют.
Я не шутил, когда сказал, что в коде каша. Почитай про position.

Можете помочь мне? Переписать код, чтобы всё выводилось правильно, потомучто я уже всё перепробывал.

Вот более читабельный код:


<div class="layout">
    <div class="navigation">
        Меню справа
    </div>
    <div class="main">
        Контент
    </div>
    <div class="sidebar">
        Меню слева
    </div>
    <div class="foot">
        Подвал
    </div>
</div>

Вот CSS код для этих класов


.foot{
background-color: rgba(198,214,229,0.8);
-moz-border-radius: 10px 10px 0 0;
-webkit-border-radius: 10px 10px 0 0;
border-radius: 10px 10px 0 0;
bottom: 0;
left: 5%;
margin-top: 40px;
position: relative;
width: 90%;
}

.layout{
margin: auto;
position: relative;
width: 95%;
}

.layout div{position: absolute;}

.main{
border: 4px solid #5a7fa6;
border-top: 0px;
left: 20%;
right: 20%;
}

.navigation{right: 0; width: 20%;}

.sidebar{left: 0; width: 20%;}

Пробывал зделать так, как вы говорите, но получилось вот что: Скриншот

Edited July 4, 2011 by Z3RO

buddah · July 4, 2011

http://jsfiddle.net/ZgxYB/

Размеры и названия поменяйте по своему вкусу.

Edited July 4, 2011 by buddah

Z3RO · July 4, 2011

http://jsfiddle.net/ZgxYB/
Размеры и названия поменяйте по своему вкусу.

Я уже успел сам зделать, но всё равно огромное спасибо. Правда тут появилась еще одна проблема: пропал фон у подвала.

Вот клас подвала:

.foot{

background-color: rgba(198,214,229,0.8);

border: 0;

-moz-border-radius: 10px 10px 0 0;

-webkit-border-radius: 10px 10px 0 0;

border-radius: 10px 10px 0 0;

margin: 0 -20%;

}

Скриншот

Знаю, уже задолбал, но прошу вас помочь. =)

buddah · July 4, 2011

background-color: - а почему не хекс?

http://www.color-hex.com/

Z3RO · July 4, 2011

background-color: - а почему не хекс?
http://www.color-hex.com/

16ричное представление цвета проблему не решает.

rookie · July 4, 2011

Приведите тогда уж все решение вместе с разметкой если она тоже изменилась.

Z3RO · July 4, 2011

Приведите тогда уж все решение вместе с разметкой если она тоже изменилась.

Вот http://jsfiddle.net/2ESGv/

rookie · July 4, 2011

Можно например задать цвет не для .foot, а для ссылок в нем.

Z3RO · July 4, 2011

Проблема решилась установлением overflow: hidden; для класа .foot. Всем спасибо за помощь. Тему #.

Sign In

Проблема с фиксированым подвалом

Question

Link to comment

Share on other sites

16 answers to this question

Recommended Posts

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Join the conversation

Обсуждения

Important Information