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

Шапка сайта растягивается только в одну сторону

10.01.2015, 19:42. Показов 1997. Ответов 18
Метки нет (Все метки)

Студворк — интернет-сервис помощи студентам
При изменении размера шапки, размер увеличивается только в правую сторону. Помогите, пожалуйста

CSS
1
2
3
4
5
6
7
8
9
10
11
/* HEADER */
#header {
    width: 970px;
    background: url([url]http://pryschei-net.ru/wp-content/uploads/2015/01/Bez-imeni-1ts.png[/url]) no-repeat;
    height: 115px;
    padding:6px 0;
}
 
.logoimg {
    margin: 30px 0 0 0px;
}
0
cpp_developer
Эксперт
20123 / 5690 / 1417
Регистрация: 09.04.2010
Сообщений: 22,546
Блог
10.01.2015, 19:42
Ответы с готовыми решениями:

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

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

Шапка сайта
Помогите пожалуйста! Какой код должен быть у шапки этого сайта! Не получается сделать вот что: 1) Такую шапку, где картинка была бы...

18
6 / 6 / 2
Регистрация: 08.10.2014
Сообщений: 86
11.01.2015, 14:55
Цитата Сообщение от Aastronaut Посмотреть сообщение
CSS
1
2
3
4
5
6
7
/* HEADER */
#header {
  width: 970px;
  background: url([url]http://pryschei-net.ru/wp-content/uploads/2015/01/Bez-imeni-1ts.png[/url]) no-repeat;
  height: 115px;
  padding:6px 0;
}
удалите атрибут
CSS
1
padding:6px 0;
1
 Аватар для Вовчек
33 / 33 / 28
Регистрация: 04.04.2011
Сообщений: 333
11.01.2015, 15:30
а куда он должен увеличиваться? отсчет координат идет слева на право, все верно.

Добавлено через 7 минут
Хотелось бы понять как есть сейчас и как должно быть.
0
0 / 0 / 0
Регистрация: 10.01.2015
Сообщений: 6
11.01.2015, 18:41  [ТС]
Цитата Сообщение от yakymiv Посмотреть сообщение
удалите атрибут
CSS
1
padding:6px 0;
Не помогает

Добавлено через 1 минуту
Цитата Сообщение от Вовчек Посмотреть сообщение
а куда он должен увеличиваться? отсчет координат идет слева на право, все верно.

Добавлено через 7 минут
Хотелось бы понять как есть сейчас и как должно быть.
только в правую сторону увеличивается, из-за этого шапка не симметричная поучается
0
267 / 170 / 40
Регистрация: 25.08.2014
Сообщений: 1,087
Записей в блоге: 1
11.01.2015, 18:49
Открой в лисе страничку, жми F12 и смотри какие по блочной модели почему он у тебя наперекосяк.
0
6 / 6 / 2
Регистрация: 08.10.2014
Сообщений: 86
11.01.2015, 20:58
Aastronaut, ссылку на сайт можно? Или выложите полный css.
Нужно смотреть в:
CSS
1
body
1
0 / 0 / 0
Регистрация: 10.01.2015
Сообщений: 6
11.01.2015, 22:08  [ТС]
http://pryschei-net.ru/

Кликните здесь для просмотра всего текста
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
/* LAYOUT */
 
body {
    background:#fef7be url([url]http://acne-blog.ru/wp-content/uploads/2013/11/IMG_14112013_2046222.png[/url]) center top no-repeat;
    }
 
#wrapper {
    background: url() center 170px no-repeat;
    }
 
#container {
    }
 
#contentwrap {
    background: #FFFFFF url(images/contentwrap.png) 635px top repeat-y;
    border-top: 1px dashed #FCE9A0;
    }
 
a {
    color: #000000;
    text-decoration: none;
    }
 
a:hover {
    color: #168DA8;
    text-decoration: underline;
    }
 
 
/* HEADER */
 
#header {
        float: none;
        
        width: 990px;
    background: url([url]http://pryschei-net.ru/wp-content/uploads/2015/01/Bez-imeni-1ts.png[/url]) no-repeat;
        height: 115px;
        
    }
 
#header h1 {
    margin-bottom: 0px !important;
    padding: 45px 0 0 0;
    font-weight: normal;
    font-family: Arial, Helvetica, Sans-serif;
    font-weight: bold;
    font-size: 48px;
    }
 
#header h1 a, #header h1 a:visited {
    color: #EEECEC;
    text-decoration: none;
    }
 
 
#header h2 {
    color: #EEECEC;
    font-size: 14px;
    font-family: Arial, Helvetica, Sans-serif;
    }
    
.logoimg {
    margin: 30px 0 0 0px;
    }
0
12.01.2015, 04:23

Не по теме:

Сайт - оскорбление линуксоидов!

0
 Аватар для Вовчек
33 / 33 / 28
Регистрация: 04.04.2011
Сообщений: 333
12.01.2015, 21:48
что Вы подразумеваете под симметричностью? в смысле отступ слева и справа должны быть одинаковы?
Если так, то у Вас шапка шириной 990px, а сама картинка на ней 970px, поэтому кажется, что справа отступ больше!
0
0 / 0 / 0
Регистрация: 10.01.2015
Сообщений: 6
12.01.2015, 22:21  [ТС]
Цитата Сообщение от Вовчек Посмотреть сообщение
что Вы подразумеваете под симметричностью? в смысле отступ слева и справа должны быть одинаковы?
Если так, то у Вас шапка шириной 990px, а сама картинка на ней 970px, поэтому кажется, что справа отступ больше!
не в этом дело. нажмите "просмотр кода элемента" и посмотрите, как подсветится шапка
0
 Аватар для Вовчек
33 / 33 / 28
Регистрация: 04.04.2011
Сообщений: 333
12.01.2015, 22:38
ну нажал, навел и что?
0
 Аватар для k-x
46 / 46 / 27
Регистрация: 19.05.2014
Сообщений: 117
12.01.2015, 22:43
не в этом дело. нажмите "просмотр кода элемента" и посмотрите, как подсветится шапка
картинка меньше блока с id="header", как уже говорилось выше - сделай его равным картинке и всё.
0
 Аватар для Вовчек
33 / 33 / 28
Регистрация: 04.04.2011
Сообщений: 333
12.01.2015, 22:50
ну я же написал у вас картинка по ширине 970px, а ширина Вашего блока 990px. Сделайте header шириной 970px.
0
0 / 0 / 0
Регистрация: 10.01.2015
Сообщений: 6
15.01.2015, 02:12  [ТС]
Цитата Сообщение от Вовчек Посмотреть сообщение
ну я же написал у вас картинка по ширине 970px, а ширина Вашего блока 990px. Сделайте header шириной 970px.
да не в этом дело. если при просмотре кода элемента навести на блок то видно, что вытянут только в правую сторону. картинка просто обрезается. можете сейчас посмотреть
0
 Аватар для Вовчек
33 / 33 / 28
Регистрация: 04.04.2011
Сообщений: 333
15.01.2015, 22:03
у Вас есть блок с id="conteiner". Я так понимаю header нужно сделать таким, чтоб он был по ширине блока conteiner, чтоб было все по сетке, а сейчас по сетке только левая часть. И надо чтоб картинка не урезалась, растягивалась пропорционально. тогда дописываем в header
CSS
1
2
width:100%; 
background-size:100%;
Добавлено через 6 минут
ну а если вам не надо чтоб картинка сжималась пропорционально, тогда вытаскиваете header из conteiner, и ставите его выше. Задаете ему
CSS
1
2
width:978px;/*у Вас такая ширина картинки*/
margin:0 auto;
1
0 / 0 / 0
Регистрация: 10.01.2015
Сообщений: 6
16.01.2015, 00:06  [ТС]
нет, не помогает, но все равно спасибо за помощь
0
57 / 57 / 14
Регистрация: 24.06.2013
Сообщений: 265
16.01.2015, 19:56
CSS
1
2
background-size:100%;
margin-left:-20px;
А вообще делать такой хедер картинкой - неправильно.
0
 Аватар для Вовчек
33 / 33 / 28
Регистрация: 04.04.2011
Сообщений: 333
16.01.2015, 21:13
как это не помогает, разве не так должно получиться?
0
 Аватар для Вовчек
33 / 33 / 28
Регистрация: 04.04.2011
Сообщений: 333
16.01.2015, 21:23
0
Надоела реклама? Зарегистрируйтесь и она исчезнет полностью.
raxper
Эксперт
30234 / 6612 / 1498
Регистрация: 28.12.2010
Сообщений: 21,154
Блог
16.01.2015, 21:23
Помогаю со студенческими работами здесь

Шапка сайта
Народ подскажиет как сделать неподвижную шапку сайта как например на сайте спрашивай ру то есть я прокручиваю страницу а меню всегда в...

Шапка сайта
Давно не занимался версткой и что-то забыл... Шапка сайта (картинка), а на этой картинке расположены другие картинки. Выравнивание главной...

Шапка сайта
Здравствуйте! Кто может подсказать как сделать шапку с занавесом как здесь http://dkmsk.ru/sitemap на сайте html/css?

Шапка сайта
как реализовать в СSS что б шапка сайта полностью отображалась при любом разрешении экрана без белых полос или вылезания за край ?

шапка сайта
Не могли бы Вы подсказать как сделать такую шапку сайту? Особенно интересует сделать то что выделено красным. шапку надо разбивать...


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

Или воспользуйтесь поиском по форуму:
19
Ответ Создать тему
Новые блоги и статьи
Символьное дифференцирование
igorrr37 13.02.2026
/ * Программа принимает математическое выражение в виде строки и выдаёт его производную в виде строки и вычисляет значение производной при заданном х Логарифм записывается как: (x-2)log(x^2+2) -. . .
Камера Toupcam IUA500KMA
Eddy_Em 12.02.2026
Т. к. у всяких "хикроботов" слишком уж мелкий пиксель, для подсмотра в ESPriF они вообще плохо годятся: уже 14 величину можно рассмотреть еле-еле лишь на экспозициях под 3 секунды (а то и больше),. . .
И ясному Солнцу
zbw 12.02.2026
И ясному Солнцу, и светлой Луне. В мире покоя нет и люди не могут жить в тишине. А жить им немного лет.
«Знание-Сила»
zbw 12.02.2026
«Знание-Сила» «Время-Деньги» «Деньги -Пуля»
SDL3 для Web (WebAssembly): Подключение Box2D v3, физика и отрисовка коллайдеров
8Observer8 12.02.2026
Содержание блога Box2D - это библиотека для 2D физики для анимаций и игр. С её помощью можно определять были ли коллизии между конкретными объектами и вызывать обработчики событий столкновения. . . .
SDL3 для Web (WebAssembly): Загрузка PNG с прозрачным фоном с помощью SDL_LoadPNG (без SDL3_image)
8Observer8 11.02.2026
Содержание блога Библиотека SDL3 содержит встроенные инструменты для базовой работы с изображениями - без использования библиотеки SDL3_image. Пошагово создадим проект для загрузки изображения. . .
SDL3 для Web (WebAssembly): Загрузка PNG с прозрачным фоном с помощью SDL3_image
8Observer8 10.02.2026
Содержание блога Библиотека SDL3_image содержит инструменты для расширенной работы с изображениями. Пошагово создадим проект для загрузки изображения формата PNG с альфа-каналом (с прозрачным. . .
Установка Qt-версии Lazarus IDE в Debian Trixie Xfce
volvo 10.02.2026
В общем, достали меня глюки IDE Лазаруса, собранной с использованием набора виджетов Gtk2 (конкретно: если набирать текст в редакторе и вызвать подсказку через Ctrl+Space, то после закрытия окошка. . .
КиберФорум - форум программистов, компьютерный форум, программирование
Powered by vBulletin
Copyright ©2000 - 2026, CyberForum.ru