Форум программистов, компьютерный форум, киберфорум
HTML, CSS
Войти
Регистрация
Восстановить пароль
Блоги Сообщество Поиск Заказать работу  
 
Рейтинг 5.00/5: Рейтинг темы: голосов - 5, средняя оценка - 5.00
0 / 0 / 0
Регистрация: 27.06.2013
Сообщений: 37

css & htmll footer

15.08.2013, 13:25. Показов 1109. Ответов 18
Метки нет (Все метки)

Студворк — интернет-сервис помощи студентам
пожалуйста помогите мне Хочу создать footer но не могу

вот и картинка самом низу хочу создать https://www.cyberforum.ru/atta... 1376558576

CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
body{
background-image:url(images/1777.png);
}
 
 
 ul {
list-style: none;
}
 
 
#header{
height:205px;
width:920px;
border:2px solid #48A1E5;
margin:5px auto;
background-image:url(images/nkar.jpg);
 
}
 
#sidebarR {
float:right;
background-color:#e5e5e5;
background-image:url(images/bodybg.jpg);
background-repeat:repeat-x;
margin-right:370px;
margin-top:5px;
width:195px;
border:1px solid #000000;
 
}
 
#content{
background-color:#e5e5e5;
background-image:url(images/bodybg.jpg);
background-repeat:repeat-x;
width:720px;
margin:5px 160px 12px 371px;
border:1px solid #000000;
}
 
 
 
 
#logo {
text-align:center;
padding:70px;
font-size:35px;
font-family:Arial;
color:#3C70FF;
}
 
 
 
#nav{
width:960px;
height:55px;
outline:0px solid #B1C1E2;
margin:0 auto;
 
}
 
 
#nav li {
float:left;
outline:0px solid #B1C1E2;
height:55px;
width:184px;
text-align:center;
background-color:#31ADE2;
}
 
 
#nav li a {
outline:1px solid #B1C1E2;
display:block;
height:40px;
padding-top:15px;
font:17px Aria,sans-serif;
color:#ffffff;
text-decoration:none;
background-repeat:no-repeat;
background-position:0 -55px;
}
 
a:hover{
background-color:#8CD5FE;
}




HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<body>
 
<div id="header"><h2 id="logo"></div>
 
 
 
<ul id="nav">
  <li><a  href="index.html">Главная</a></li>
  <li><a href="about.html">О нас</a></li>
 <li><a href="projects.html">Проекты</a></li>
  <li><a href="contacts.html">Контакти</a></li>
 <li><a  href="services.html">Услуги</a></li>
 
 </ul>
 
<div id="sidebarR">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer auctor dui a elementum tempus. Donec suscipit vulputate est, eu sollicitudin massa consectetur nec. Pellentesque est nisl, molestie id semper sed, facilisis faucibus urna. Quisque euismod metus quis nunc pulvinar gravida nec et felis. Curabitur mauris ligula, fermentum ut quam porttitor, iaculis blandit ligula. Aenean tempus diam sed ligula dapibus malesuada. Mauris tincidunt urna vitae ipsum aliquam, sed ultricies mauris blandit. Morbi commodo dignissim convallis. Quisque iaculis velit eros, at rhoncus magna congue eget. Duis ut lectus eget felis rutrum malesuada nec ornare quam. Pellentesque ante sapien, vehicula at tellus sit amet, cursus molestie augue. Integer massa nibh, dignissim id est sit amet, congue hendrerit eros. </div>
<div id="content">uspendisse cursus dolor at dolor tristique accumsan. Maecenas sagittis neque eu sapien semper, ut rhoncus magna venenatis. Fusce ac tortor sed erat interdum sodales a malesuada mi. Proin sed felis aliquet, ornare risus sed, vestibulum nisi. Nullam nisi quam, aliquet a lectus eget, fermentum elementum arcu</div>
 
 
 
 </body>
Миниатюры
css & htmll footer  
0
IT_Exp
Эксперт
34794 / 4073 / 2104
Регистрация: 17.06.2006
Сообщений: 32,602
Блог
15.08.2013, 13:25
Ответы с готовыми решениями:

Footer & Padding
Доброго времени суток! Проблема следующая... У меня почему-то padding некорректно работает в подвале страницы. Только я его прописываю...

CSS, HTML Footer
Помогите закрепить футер внизу ,так чтоб он не сползал вверх. На других страницах он нормально, не сползает Код по footer .footer { ...

Неправильное отображение в footer. CSS
Доброго времени суток, верстаю сайт и столкнулся с проблемой, что ссылки на соц.сети отображаются некорректно. Скриншот 1 (миниатюры):...

18
23 / 23 / 1
Регистрация: 08.08.2013
Сообщений: 112
15.08.2013, 13:43
в код html в конец перед тегом </body> добавьте ещё один блок
HTML5
1
<div id="footer"> Footer </div>
в код css пропишите стиль для футера, как пример
CSS
1
2
3
4
5
6
7
#footer {
height: 100px;
width: 100%;
border: 1px solid #48A1E5;
margin: 5px auto;
background: green;
}
0
0 / 0 / 0
Регистрация: 27.06.2013
Сообщений: 37
15.08.2013, 14:09  [ТС]
не получается смотреть

https://www.cyberforum.ru/atta... 1376561346
Миниатюры
css & htmll footer  
0
0 / 0 / 0
Регистрация: 27.06.2013
Сообщений: 37
15.08.2013, 14:09  [ТС]
не получается смотреть
https://www.cyberforum.ru/atta... 1376561346
0
23 / 23 / 1
Регистрация: 08.08.2013
Сообщений: 112
15.08.2013, 14:14
Что не нравится? подробнее пишите, как Вы хотите чтобы выглядел футер?
0
0 / 0 / 0
Регистрация: 27.06.2013
Сообщений: 37
15.08.2013, 14:24  [ТС]
хочу что была как в этот картинке https://www.cyberforum.ru/atta... 1376562172 но у моего сайта чтобы была равном с content-a
0
23 / 23 / 1
Регистрация: 08.08.2013
Сообщений: 112
15.08.2013, 14:27
ссылка не работает, выложите скриншот.

CSS
1
2
3
4
5
6
7
#footer {
height: 100px;
width:720px;
border: 1px solid #48A1E5;
margin: 5px auto;
background: green;
}
изменяйте высоту, ширину и цвет..
0
0 / 0 / 0
Регистрация: 27.06.2013
Сообщений: 37
15.08.2013, 14:47  [ТС]
вот получилось так

Миниатюры
css & htmll footer  
0
23 / 23 / 1
Регистрация: 08.08.2013
Сообщений: 112
15.08.2013, 14:49
CSS
1
2
3
4
5
6
7
#footer {
height: 100px;
width:920px;
border: 1px solid #48A1E5;
margin: 0 auto;
background: gray;
}
0
0 / 0 / 0
Регистрация: 27.06.2013
Сообщений: 37
15.08.2013, 15:20  [ТС]
очень спасибо но новый проблем есть смотреть



Добавлено через 1 минуту
очень спасибо но новый проблем есть смотреть


Добавлено через 1 минуту
https://www.cyberforum.ru/atta... 1376563554

Добавлено через 30 секунд
очень спасибо но новый проблем есть смотреть

0
23 / 23 / 1
Регистрация: 08.08.2013
Сообщений: 112
15.08.2013, 15:42
Ничего не понял..
0
162 / 162 / 11
Регистрация: 07.09.2011
Сообщений: 995
16.08.2013, 09:34
я так понял ему обводка мешает, border... ну или отступы надо. Видно же что через переводчик пишет
0
23 / 23 / 1
Регистрация: 08.08.2013
Сообщений: 112
16.08.2013, 09:42
Скриншот он тот же самый выложил.
без border

CSS
1
2
3
4
5
6
#footer {
height: 100px;
width:920px;
margin: 0 auto;
background: gray;
}
0
2 / 2 / 0
Регистрация: 23.09.2012
Сообщений: 98
17.08.2013, 14:14
CSS
1
2
3
4
5
6
7
8
9
#footer {
    width: 900px;
    height: 40px;
    margin-left: auto;
    margin-right: auto;
    bottom: 0;
    background-color: #000;
    border: 1px solid #FF0;
}
HTML5
1
<div id="footer">Тут какой-нибудь текст, если нужно</div>
0
48 / 87 / 11
Регистрация: 12.08.2013
Сообщений: 474
17.08.2013, 15:45
а ничего, что свойство bottom работает только с позиционированными элементами? просто так оно не даст никакого эффекта
0
 Аватар для Darren_Clyde
1 / 1 / 0
Регистрация: 05.04.2013
Сообщений: 27
17.08.2013, 20:40
Justff, даст, если записать так:
CSS
1
bottom: 0px !important;
Любое свойство можно заставить работать, если приписать ему !important.
0
Почетный модератор
12274 / 5340 / 268
Регистрация: 05.04.2011
Сообщений: 14,086
Записей в блоге: 2
18.08.2013, 14:54
Использование !important - дурной вкус. Это как забивать дурной запах из подмышек духами.
0
2 / 2 / 0
Регистрация: 23.09.2012
Сообщений: 98
19.08.2013, 02:38
ну так указать позиционирование если надо, или через margin.
0
 Аватар для Darren_Clyde
1 / 1 / 0
Регистрация: 05.04.2013
Сообщений: 27
19.08.2013, 13:58
Taatshi, да его использование не желательно, но тем не менее оно бывает иногда полезным. Тут дело не во вкусе, а в необходимости.
0
Надоела реклама? Зарегистрируйтесь и она исчезнет полностью.
BasicMan
Эксперт
29316 / 5623 / 2384
Регистрация: 17.02.2009
Сообщений: 30,364
Блог
19.08.2013, 13:58
Помогаю со студенческими работами здесь

Прижать footer к низу CSS
Подскажите самый простой способ прижать footer к низу на чистом CSS без позиционирования

Как опустить/прижать footer-у меня это не footer к низу?
Доброго времени суток :coffee2: подскажите, как опустить/прижать footer-у меня это не footer, а серый блок к низу? на сайте: tend ....

Как средствами CSS поставить блок "Footer" в низ документа?
Всем доброго вечера. Я чайник, так что не удивляйтесь. Задача такая - прижать блок &quot;Footer&quot; к низу всего верхнего содержимого,...

Css & hyperlinks
Всем приветик Вопросик по поводу CSS, а именно значит на странице много ссылок, но я хочу что бы некоторые ссылки по другому...

Не работает простое подменю на HTML&CSS
Тренировался тут делать подменю на HTML&amp;CSS и появилась одна загвоздка, вот вообщем код ul{ list-style-type:none; padding:0; ...


Искать еще темы с ответами

Или воспользуйтесь поиском по форуму:
19
Ответ Создать тему
Новые блоги и статьи
Модульная разработка через nuget packages
DevAlt 07.03.2026
Сложившийся в . Net-среде способ разработки чаще всего предполагает монорепозиторий в котором находятся все исходники. При создании нового решения, мы просто добавляем нужные проекты и имеем. . .
Модульный подход на примере F#
DevAlt 06.03.2026
В блоге дяди Боба наткнулся на такое определение: В этой книге («Подход, основанный на вариантах использования») Ивар утверждает, что архитектура программного обеспечения — это структуры,. . .
Управление камерой с помощью скрипта OrbitControls.js на Three.js: Вращение, зум и панорамирование
8Observer8 05.03.2026
Содержание блога Финальная демка в браузере работает на Desktop и мобильных браузерах. Итоговый код: orbit-controls-threejs-js. zip. Сканируйте QR-код на мобильном. Вращайте камеру одним пальцем,. . .
SDL3 для Web (WebAssembly): Синхронизация спрайтов SDL3 и тел Box2D
8Observer8 04.03.2026
Содержание блога Финальная демка в браузере. Итоговый код: finish-sync-physics-sprites-sdl3-c. zip На первой гифке отладочные линии отключены, а на второй включены:. . .
SDL3 для Web (WebAssembly): Идентификация объектов на Box2D v3 - использование userData и событий коллизий
8Observer8 02.03.2026
Содержание блога Финальная демка в браузере. Итоговый код: finish-collision-events-sdl3-c. zip Сканируйте QR-код на мобильном и вы увидите, что появится джойстик для управления главным героем. . . .
Реалии
Hrethgir 01.03.2026
Нет, я не закончил до сих пор симулятор. Эта задача сложнее. Не получилось уйти в плавсостав, но оно и к лучшему, возможно. Точнее получалось - но сварщиком в палубную команду, а это значит, в моём. . .
Ритм жизни
kumehtar 27.02.2026
Иногда приходится жить в ритме, где дел становится всё больше, а вовлечения в происходящее — всё меньше. Плотный график не даёт вниманию закрепиться ни на одном событии. Утро начинается с быстрых,. . .
SDL3 для Web (WebAssembly): Сборка библиотек: SDL3, Box2D, FreeType, SDL3_ttf, SDL3_mixer и SDL3_image из исходников с помощью CMake и Emscripten
8Observer8 27.02.2026
Недавно вышла версия 3. 4. 2 библиотеки SDL3. На странице официальной релиза доступны исходники, готовые DLL (для x86, x64, arm64), а также библиотеки для разработки под Android, MinGW и Visual Studio. . . .
КиберФорум - форум программистов, компьютерный форум, программирование
Powered by vBulletin
Copyright ©2000 - 2026, CyberForum.ru