Jump to content
  • 0

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


Z3RO
 Share

Question

Здравствуйте. Есть такая проблема: у меня есть фиксированый подвал, но он накрывает контент(Скриншот). Как мне зделать, чтобы контент поднялся выше подвала, если контент и боковые панели находятся в класе .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;

}

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

Link to comment
Share on other sites

16 answers to this question

Recommended Posts

  • 0

delete

Всмысле?

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

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

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

Link to comment
Share on other sites

  • 0

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


<?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;
}

Link to comment
Share on other sites

  • 0

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

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

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

Edited by buddah
Link to comment
Share on other sites

  • 0

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

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

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

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

Link to comment
Share on other sites

  • 0

Убрать все свойства 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 by Z3RO
Link to comment
Share on other sites

  • 0

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%;

}

Скриншот

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

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

×
×
  • 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