footer

morda77 · October 9, 2012

Привет всем, кто может мне помочь.

Проблема в следующем. Есть заготовка сайта. Ни как не могу соединить, как надо футер, мидл, и правый сайдбар.

Вот так он сейчас выглядит:

http://itmages.ru/image/view/707658/9035670d

http://itmages.ru/image/view/707659/461c3f77

Вот коды:

index.html:

<!DOCTYPE html>

<head>

<title>Святогор-Риэлти</title>

<body>

<strong>Привет Header:</strong> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras tortor. Praesent dictum, libero ut tempus dictum, neque eros elementum mauris, quis mollis arcu velit ac diam. Etiam neque. Quisque nec turpis. Aliquam arcu nulla, dictum et, lacinia a, mollis in, ante. Sed eu felis in elit tempor venenatis. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Ut ultricies porttitor purus. Proin non tellus at ligula fringilla tristique. Fusce vehicula quam. Curabitur vel tortor vitae pede imperdiet ultrices. Sed tortor.

</header>

<strong>Content:</strong> Sed placerat accumsan ligula. Aliquam felis magna, congue quis, tempus eu, aliquam vitae, ante. Cras neque justo, ultrices at, rhoncus a, facilisis eget, nisl. Quisque vitae pede. Nam et augue. Sed a elit. Ut vel massa. Suspendisse nibh pede, ultrices vitae, ultrices nec, mollis non, nibh. In sit amet pede quis leo vulputate hendrerit. Cras laoreet leo et justo auctor condimentum. Integer id enim. Suspendisse egestas, dui ac egestas mollis, libero orci hendrerit lacus, et malesuada lorem neque ac libero. Morbi tempor pulvinar pede. Donec vel elit.

</div>

</div>

<strong>Right Sidebar:</strong> Integer velit. Vestibulum nisi nunc, accumsan ut, vehicula sit amet, porta a, mi. Nam nisl tellus, placerat eget, posuere eget, egestas eget, dui. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. In elementum urna a eros. Integer iaculis. Maecenas vel elit.

</aside>

</section>

</div>

<strong>Footer:</strong> Mus elit Morbi mus enim lacus at quis Nam eget morbi. Et semper urna urna non at cursus dolor vestibulum neque enim. Tellus interdum at laoreet laoreet lacinia lacinia sed Quisque justo quis. Hendrerit scelerisque lorem elit orci tempor tincidunt enim Phasellus dignissim tincidunt. Nunc vel et Sed nisl Vestibulum odio montes Aliquam volutpat pellentesque. Ut pede sagittis et quis nunc gravida porttitor ligula.

</footer>

</body>

</html>

style.css:

* {

margin: 0;

padding: 0;

}

html {

height: 100%;

}

header, nav, section, article, aside, footer {

display: block;

}

body {

font: 12px/18px Arial, Tahoma, Verdana, sans-serif;

width: 100%;

height: 100%;

background-color:#c0c0c0;

}

a {

color: blue;

outline: none;

text-decoration: underline;

}

a:hover {

text-decoration: none;

}

p {

margin: 0 0 18px

}

img {

border: none;

}

input {

vertical-align: middle;

}

#wrapper {

width: 1260px;

margin: 0 auto;

min-height: 100%;

height: auto !important;

height: 100%;

background-color:#FFFFFF;

background-image:url(img/headerr.gif);

background-repeat:no-repeat;

border:1px solid black;

z-index:2;

}

/* Header

—————————————————————————--*/

#header {

height: 150px;

}

/* Middle

—————————————————————————--*/

#middle {

width: 100%;

padding: 0 0 0px;

height: 1%;

position: relative;

border:1px solid black;

background-image:url(img/middle.gif);

background-repeat:no-repeat;

margin:220px auto;

}

#middle:after {

content: '.';

display: block;

clear: both;

visibility: hidden;

height: 0;

}

#container {

width: 100%;

float: left;

overflow: hidden;

padding: 0 0 155px;

}

#content {

padding: 0 270px 0 0;

}

/* Sidebar Right

—————————————————————————--*/

#sideRight {

float: left;

margin-right: -3px;

width: 250px;

margin-left: -250px;

position: relative;

background: #FFACAA;

height: 500px;

padding: 270px 0 0;

z-index:1

}

/* Footer

—————————————————————————--*/

#footer {

width: 1260px;

margin: -269px auto 0;

height: 269px;

position: relative;

background-image:url(img/footer.gif);

border:1px solid black;

background-repeat:no-repeat;

}

Заранее благодарю.

Bryant-24 · October 9, 2012

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

morda77 · October 9, 2012

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

А не посоветуете тестовый хостинг?

Спасибо.

Bryant-24 · October 9, 2012

Я думаю просмотр в поисковике Google Вам даст результаты)

morda77 · October 9, 2012

Я думаю просмотр в поисковике Google Вам даст результаты)

Тестовые хостинги все бесплатны в среднем до 5 дней. Я же не знаю сколько времени уйдет на ожидание ответов и решение данной проблемы.

Bryant-24 · October 10, 2012

Написал в коммент профиля

Bryant-24 · October 10, 2012

Так, а теперь подробнее о проблеме - что не так?

И сразу вопрос по верстке - почему стоят отступы сверху и снизу у контейнера "middle"?

morda77 · October 10, 2012

Так, а теперь подробнее о проблеме - что не так?
И сразу вопрос по верстке - почему стоят отступы сверху и снизу у контейнера "middle"?

Нужно, что бы футер был соединен с лежащим выше блоком, но левая часть рисунка на футере, на этот лежащий выше блок, наезжала. И что бы правый сайдбар касался футера.

Вы про какие отступы?

Если Вы про padding: 0 0 0px;

то да, наверное это у меня лишнее.

Edited October 10, 2012 by morda77

Bryant-24 · October 10, 2012

Вы про какие отступы?

У контейнера "middle" стоят отступы:

margin: 220px auto;

Для чего они?

morda77 · October 10, 2012

Вы про какие отступы?
У контейнера "middle" стоят отступы:
margin: 220px auto;
Для чего они?

Это я мидл подогнал под хеадер по вертикали и горизонтали под рисунок.

Edited October 10, 2012 by morda77

Bryant-24 · October 10, 2012

Что то очень странное Вы пытаетесь сделать. А почему просто не дать header-у вместо 150px высоты - 370px, и тогда отступ можно убрать.

А вообще, у меня складывается ощущение, что Вы рано взялись за верстку такого макета. Почему именно он?

morda77 · October 10, 2012

Что то очень странное Вы пытаетесь сделать. А почему просто не дать header-у вместо 150px высоты - 370px, и тогда отступ можно убрать.
А вообще, у меня складывается ощущение, что Вы рано взялись за верстку такого макета. Почему именно он?

Ок. поменял.

Я решил попробовать на практике реальных ТЗ от заказчиков. Но это,все равно, мой тренировочный сайт.

Но Вы правы, я пока новичок в этом деле.

Edited October 10, 2012 by morda77

Bryant-24 · October 10, 2012

Тогда я еще раз повторюсь - Вам еще слишком рано верстать такие макеты.

Посмотрите здесь, там есть макеты на порядок легче а то провисите долго, т.к. начали спотыкаться толком не начав. В разделе для некоторых макетов присутствуют и ТЗ

morda77 · October 10, 2012

Тогда я еще раз повторюсь - Вам еще слишком рано верстать такие макеты.
Посмотрите здесь, там есть макеты на порядок легче а то провисите долго, т.к. начали спотыкаться толком не начав. В разделе для некоторых макетов присутствуют и ТЗ

Там все линейно. А я специально выбрал макет посложнее, т.к. это интереснее. Я бы все равно уперся бы в эту проблему.

Так, что скажете по футеру?

Bryant-24 · October 10, 2012

Не знаю что Вы подразумеваете под словом "линейно", но кидаться сразу в огонь, не зная основ - бред.

Если Вы так хотите увидеть, как будет сверстан этот макет - наймите кого-нибудь, кто сделает Вам его.

Потому как эти простейшие детали ничто по сравнению с тем, что будет на самом сайте (макет я видел в портфолио у одной из веб студий, что настораживает, т. к. этот сайт сейчас недоступен, и приходит мысль, что Вы его пытаетесь восстановить, не зная при этом почти что ничего)

morda77 · October 10, 2012

Не знаю что Вы подразумеваете под словом "линейно", но кидаться сразу в огонь, не зная основ - бред.
Если Вы так хотите увидеть, как будет сверстан этот макет - наймите кого-нибудь, кто сделает Вам его.
Потому как эти простейшие детали ничто по сравнению с тем, что будет на самом сайте (макет я видел в портфолио у одной из веб студий, что настораживает, т. к. этот сайт сейчас недоступен, и приходит мысль, что Вы его пытаетесь восстановить, не зная при этом почти что ничего)

Мне этот макет выслал потенциальный работодатель в качестве т.з., примерно 2 мес. назад. Вот решил теперь попробовать его, в качестве наглядной практической работы для себя. Уперся только в футер. Решив данную проблему, продолжу его верстку.

Мне не макет этот нужен, а принцип построения подобных сложных дизайнов на его примере. Просто я с ним уже повозился изрядно и теперь бросать его, как то не с руки.

Так, что, поможете с футером?

P.S.

Мне не нужно, что бы кто то сделал. Мне понять нужно, где моя ошибка. Я здесь, что бы учиться, а не для того, что бы кого то нанимать.)

Edited October 10, 2012 by morda77

Sign In

footer

Question

Link to comment

Share on other sites

15 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

Join the conversation

Обсуждения

Important Information