Форум программистов, компьютерный форум, киберфорум
Наши страницы
HTML, CSS
Войти
Регистрация
Восстановить пароль
 
 
Рейтинг 4.57/7: Рейтинг темы: голосов - 7, средняя оценка - 4.57
wolf
2 / 2 / 10
Регистрация: 17.09.2012
Сообщений: 860
1

Резиновая верстка

22.02.2014, 22:16. Просмотров 1301. Ответов 25
Метки нет (Все метки)

как сделать чтоб блоки при увеличении и уменьшении экрана не убегали вниз и вверх, а оставались на одном месте?

CSS
1
2
3
4
5
6
7
8
9
10
.top_head_menu{float:right;height:50px; margin-right:-10px;overflow:hidden;position:relative;}
.top_head_menu a:hover{text-decoration:none}
.top_head_menu_div{text-align:center;font-size:11px;color:#fff;text-shadow: 0 0 3px rgba(0,0,0,.5); font-family:Arial;text-decoration:none;padding:6px 8px 6px 8px;float:left}
.top_head_menu_div:hover{background-color: rgba(0, 0, 0,.15)}
.headm_ic_mess{background:url("../images/icons/head_menu/mess.png") no-repeat ;width:35px;height:22px; margin-left:10px;}
.headm_ic_friend{background:url("../images/icons/head_menu/friends.png") no-repeat;width:35px;height:22px; margin-left:5px;}
.headm_ic_balance{background:url("../images/icons/head_menu/balance.png") no-repeat ;width:35px;height:22px; margin-left:5px;}
.headm_ic_logout{background:url("../images/icons/head_menu/logout.png") no-repeat;width:35px;height:22px; margin-left:4px;}
.newac_bg{position:fixed; margin-left:35px; margin-top:-5px;}
.newac{  padding:3px 5px; font-size:11px; background:#fa8815; border-radius:1px;box-shadow: 0 0 3px rgba(0,0,0,.5); text-shadow: 1px 0 2px rgba(0,0,0,.5); }

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
<div class="top_head_menu">
      <a href="/messages" onclick="Page.Go(this.href); return false;">
      <div class="top_head_menu_div">
        <div class="newac_bg" id="new_msg">{msg}</div>
        <img src="{theme}/images/spacer.gif" class="headm_ic_mess">
        <br>
        сообщение </div>
      </a>
      <a href="/friends" onclick="Page.Go(this.href); return false;" id="requests_link">
      <div class="top_head_menu_div">
        <div class="newac_bg" id="new_requests" style="margin-left:25px;">{demands}</div>
        <img src="{theme}/images/spacer.gif" class="headm_ic_friend"><br/>
        редактирование </div>
      </a>
0
Лучшие ответы (1)
Similar
Эксперт
41792 / 34177 / 6122
Регистрация: 12.04.2006
Сообщений: 57,940
22.02.2014, 22:16
Ответы с готовыми решениями:

резиновая верстка
как сделать чтобы на всех размерах экрана,блоки с картинками не съезжали друг на друга,а стояли на...

резиновая верстка
прилагаю дизайн страницы, в качестве примера конечно же. Хочется узнать ответы на такие вопросы:...

Резиновая верстка
Подскажите, какими средствами можно решить такое задание: На странице расположены блоки-ячейки...

Резиновая верстка
Такая вот проблема, есть 6 кнопок фиксированного размера.., как правильно их сверстать для разных...

Резиновая верстка
Подскажите пожалуйста, возможно ли средствами html, css и, возможно, javascript, сделать сайт,...

25
Miwa123
37 / 37 / 22
Регистрация: 16.04.2013
Сообщений: 319
Записей в блоге: 1
22.02.2014, 22:41 2
глянь. может поможет
по моему ты что-то там с position намутил
1
Вложения
Тип файла: rar index.rar (367 байт, 5 просмотров)
wolf
2 / 2 / 10
Регистрация: 17.09.2012
Сообщений: 860
22.02.2014, 23:01  [ТС] 3
я проверил верстка у меня летит из за вот этого

CSS
1
2
3
4
5
6
7
8
.logo {
  background: url("../images/logo.png") no-repeat;
  float: left;
  width: 190px;
  margin-left: 10px;
  height: 50px;
  cursor: pointer
}
а именно, когда height:50px все норм ну опускаются вниз значки, а когда ставлю больше 50 или меньше тогда логотип пропадает что может быть не так?

Добавлено через 10 минут
Miwa123 спасибо ваш код пригодится
0
Mun
7 / 7 / 7
Регистрация: 21.12.2012
Сообщений: 46
22.02.2014, 23:02 4
так в привиденном коде нет этой строчки
CSS
1
2
3
4
5
6
7
8
 .logo {
  background: url("../images/logo.png") no-repeat;
  float: left;
  width: 190px;
  margin-left: 10px;
  height: 50px;
  cursor: pointer
}
как же искать решение проблемы, если нет источника этой самой проблемы?
0
22.02.2014, 23:02
wolf
2 / 2 / 10
Регистрация: 17.09.2012
Сообщений: 860
22.02.2014, 23:16  [ТС] 5
Цитата Сообщение от Mun Посмотреть сообщение
так в привиденном коде нет этой строчки
html код или какой?
0
Mun
7 / 7 / 7
Регистрация: 21.12.2012
Сообщений: 46
22.02.2014, 23:17 6
и в том и в другом нет класса logo
0
wolf
2 / 2 / 10
Регистрация: 17.09.2012
Сообщений: 860
23.02.2014, 00:07  [ТС] 7
HTML5
1
2
3
4
5
    <a onclick="$('.logo_menu').fadeIn('slow');" class="logo"></a>
    <div class="logo_menu" style="display:none" >
      <div style="height:50px; padding:0px; width:190px; background:#39a90b">
        <a onclick="$('.logo_menu').fadeOut('slow');" class="logo" style="margin-left:0px;"></a>
      </div>
Добавлено через 40 минут
вот эта строчка отвечает за логотип

HTML5
1
<a onclick="$('.logo_menu').fadeIn('slow');" class="logo"></a>
а вот css
CSS
1
2
3
4
5
6
7
8
.logo{
background:url("../images/logo.png") no-repeat;
float:left;
width:190px;
margin-left:10px;
height:50px; 
cursor:pointer
}
0
Mun
7 / 7 / 7
Регистрация: 21.12.2012
Сообщений: 46
23.02.2014, 00:21 8
либо я не так делаю, или что, но у меня всё на месте при уменьшении, а при сильном увеличении меню смещается под лого, можно предоставить html/css код детальнее
0
wolf
2 / 2 / 10
Регистрация: 17.09.2012
Сообщений: 860
23.02.2014, 00:27  [ТС] 9
вот вот и у меня убегает вниз... щас скину детальнее
0
wolf
2 / 2 / 10
Регистрация: 17.09.2012
Сообщений: 860
23.02.2014, 00:32  [ТС] 10
index.rar
0
Mun
7 / 7 / 7
Регистрация: 21.12.2012
Сообщений: 46
23.02.2014, 00:50 11
Резиновая верстка

у меня получилось таким образом, и при увеличении и уменьшении ничего не изменяется
0
Mun
7 / 7 / 7
Регистрация: 21.12.2012
Сообщений: 46
23.02.2014, 01:05 12
кстати html код в архиве неполный был. у вас он полный???
0
wolf
2 / 2 / 10
Регистрация: 17.09.2012
Сообщений: 860
23.02.2014, 01:28  [ТС] 13
для панель он там полный, а вообще я её взял из сборки vii engine
0
wolf
2 / 2 / 10
Регистрация: 17.09.2012
Сообщений: 860
23.02.2014, 01:29  [ТС] 14
вот так у меня убегает

Резиновая верстка
0
Mun
7 / 7 / 7
Регистрация: 21.12.2012
Сообщений: 46
23.02.2014, 01:31 15
так и должно быть как на скриншоте, т.е. расположение элементов?
у меня при маштабировании не изменяется положение элементов.
только второе лого следует убрать, что по центру


всё, понятно.

надо разбираться в других элементах. скиньте весь код html в спойлере.
0
wolf
2 / 2 / 10
Регистрация: 17.09.2012
Сообщений: 860
23.02.2014, 01:34  [ТС] 16
должно быть так

Резиновая верстка
0
wolf
2 / 2 / 10
Регистрация: 17.09.2012
Сообщений: 860
23.02.2014, 01:37  [ТС] 17
вот сама сборка откуда взял я эту панельку http://workernet.ru/?p=757

а код щас скину чтоб наглядней было

HTML5
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
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
<div class="top_header">
  <div class="size"> 
    <a onclick="$('.logo_menu').fadeIn('slow');" class="logo"></a>
    <div class="logo_menu" style="display:none">
      <div style="height:50px; padding:0px; width:190px; background:#39a90b">
        <a onclick="$('.logo_menu').fadeOut('slow');" class="logo" style="margin-left:0px;"></a>
      </div>
      
      <a href="/u2">
      <div id="profile_ic">Моя страница</div>
      </a>
      <a href="/editmypage">
      <div id="edit_profile_ic">Редактировать профиль</div>
      </a>
      <a href="/settings">
      <div id="acc_settings_ic">Настройки профиля</div>
      </a>
      <a href="/balance?act=invite">
      <div id="invite_fr_ic">Пригласить друга</div>
      </a>
      <a href="/gifts2">
      <div id="gifts_ic">Подарки</div>
      </a>
      <a href="/docs">
      <div id="docs_ic">Документы</div>
      </a>
      <a href="/notes">
      <div id="notes_ic">Заметки</div>
      </a>
      <a href="/history">
      <div id="history_ic">Истории</div>
      </a>
      <a href="/support">
      <div id="support_ic">Тех. Поддержка</div>
      </a>
    </div>
    <div class="top_head_menu">
      <a href="/messages" onclick="Page.Go(this.href); return false;">
      <div class="top_head_menu_div">
        <div class="newac_bg" id="new_msg"></div>
        <img src="/templates/Default/images/spacer.gif" class="headm_ic_mess">
        <br>
        Сообщения </div>
      </a>
      <a href="/friends" onclick="Page.Go(this.href); return false;" id="requests_link">
      <div class="top_head_menu_div">
        <div class="newac_bg" id="new_requests" style="margin-left:25px;"></div>
        <img src="/templates/Default/images/spacer.gif" class="headm_ic_friend"><br>
        Друзья </div>
      </a>
      <a href="/albums/2" onclick="Page.Go(this.href); return false;" id="requests_link_new_photos">
      <div class="top_head_menu_div">
        <div id="new_photos"></div>
        <img src="/templates/Default/images/spacer.gif" class="headm_ic_photo">
        <br>
        Фотографии </div>
      </a>
      <a href="/videos" onclick="Page.Go(this.href); return false;">
      <div class="top_head_menu_div">
        <img src="/templates/Default/images/spacer.gif" class="headm_ic_videos">
        <br>
        Видео </div>
      </a>
      <a href="/audio" onclick="doLoad.js(0); player.open(); return false;">
      <div class="top_head_menu_div">
        <img src="/templates/Default/images/spacer.gif" class="headm_ic_music" id="fplayer_pos">
        <br>
        Музыка </div>
      </a>
      <a href="/groups" onclick="Page.Go(this.href); return false;">
      <div class="top_head_menu_div">
        <img src="/templates/Default/images/spacer.gif" class="headm_ic_groups">
        <br>
        Группы </div>
      </a>
      <a href="/news" onclick="Page.Go(this.href); return false;" id="news_link">
      <div class="top_head_menu_div">
        <div id="new_news"></div>
        <img src="/templates/Default/images/spacer.gif" class="headm_ic_news">
        <br>
        Новости </div>
      </a>
      <a href="/guests" onclick="Page.Go(this.href); return false;">
      <div class="top_head_menu_div">
        <img src="/templates/Default/images/spacer.gif" class="headm_ic_guests">
        <br>
        Гости </div>
      </a>
      <a href="/miss" onclick="Page.Go(this.href); return false;">
      <div class="top_head_menu_div">
        <img src="/templates/Default/images/spacer.gif" class="headm_ic_miss">
        <br>
        Мисс сайта </div>
      </a>
      <a href="/?go=search&amp;query=&amp;type=1&amp;user_photo=1" onclick="Page.Go(this.href); return false;" id="se_link">
      <div class="top_head_menu_div">
        <img src="/templates/Default/images/spacer.gif" class="headm_ic_se">
        <br>
        Поиск </div>
      </a>
      <a href="/balance" onclick="Page.Go(this.href); return false;" id="ubm_link">
      <div class="top_head_menu_div">
        <div id="new_ubm"></div>
        <img src="/templates/Default/images/spacer.gif" class="headm_ic_balance">
        <br>
        Баланс </div>
      </a>
      <a href="/?act=logout">
      <div class="top_head_menu_div">
        <img src="/templates/Default/images/spacer.gif" class="headm_ic_logout">
        <br>
        Выйти </div>
      </a>
    </div>
    
     </div>
</div>
0
Mun
7 / 7 / 7
Регистрация: 21.12.2012
Сообщений: 46
23.02.2014, 01:40 18
Цитата Сообщение от wolf Посмотреть сообщение
должно быть так
так и надо было начать со скриншотом
0
wolf
2 / 2 / 10
Регистрация: 17.09.2012
Сообщений: 860
23.02.2014, 01:42  [ТС] 19
Цитата Сообщение от Mun Посмотреть сообщение
так и надо было начать со скриншотом
да я просто устал весь день с дизайнами мучаюсь)
0
Mun
7 / 7 / 7
Регистрация: 21.12.2012
Сообщений: 46
23.02.2014, 01:55 20
а в полной сборке бегает эта панелька или стоит?
0
23.02.2014, 01:55
MoreAnswers
Эксперт
37091 / 29110 / 5898
Регистрация: 17.06.2006
Сообщений: 43,301
23.02.2014, 01:55

Резиновая верстка
Не могу понять одного. Как выставить &quot;резиновые&quot; параметры для страницы где много графики? ну...

Резиновая верстка
Добрый день! Нужно резиново спозиционировать div относительно wraper. Чтобы при уменьшении размера...

Резиновая верстка
Допустим есть блок: &lt;div class=&quot;content&quot;&gt; &lt;div&gt; И стиль: .content { height:450px;


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

Или воспользуйтесь поиском по форуму:
20
Ответ Создать тему
Опции темы

КиберФорум - форум программистов, компьютерный форум, программирование
Powered by vBulletin® Version 3.8.9
Copyright ©2000 - 2019, vBulletin Solutions, Inc.
Рейтинг@Mail.ru