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

@wolf · Регистрация: 17.09.2012

Студворк — интернет-сервис помощи студентам

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

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>

@Miwa123 · 22.02.2014, 22:41

глянь. может поможет
по моему ты что-то там с position намутил

@wolf · 22.02.2014, 23:01 **[ТС]**

я проверил верстка у меня летит из за вот этого

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 спасибо ваш код пригодится

@Mun · 22.02.2014, 23:02

так в привиденном коде нет этой строчки

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
}

как же искать решение проблемы, если нет источника этой самой проблемы?

@wolf · 22.02.2014, 23:16 **[ТС]**

Сообщение от Mun

так в привиденном коде нет этой строчки

html код или какой?

@Mun · 22.02.2014, 23:17

и в том и в другом нет класса logo

@wolf · 23.02.2014, 00:07 **[ТС]**

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
}

@Mun · 23.02.2014, 00:21

либо я не так делаю, или что, но у меня всё на месте при уменьшении, а при сильном увеличении меню смещается под лого, можно предоставить html/css код детальнее

@wolf · 23.02.2014, 00:27 **[ТС]**

вот вот и у меня убегает вниз... щас скину детальнее

@wolf · 23.02.2014, 00:32 **[ТС]**

index.rar

@Mun · 23.02.2014, 00:50

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

@Mun · 23.02.2014, 01:05

кстати html код в архиве неполный был. у вас он полный???

@wolf · 23.02.2014, 01:28 **[ТС]**

для панель он там полный, а вообще я её взял из сборки vii engine

@wolf · 23.02.2014, 01:29 **[ТС]**

вот так у меня убегает

@Mun · 23.02.2014, 01:31

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

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

надо разбираться в других элементах. скиньте весь код html в спойлере.

@wolf · 23.02.2014, 01:34 **[ТС]**

должно быть так

@wolf · 23.02.2014, 01:37 **[ТС]**

вот сама сборка откуда взял я эту панельку 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>

@Mun · 23.02.2014, 01:40

Сообщение от wolf

должно быть так

так и надо было начать

со скриншотом

@wolf · 23.02.2014, 01:42 **[ТС]**

Сообщение от Mun

так и надо было начать со скриншотом

да я просто устал весь день с дизайнами мучаюсь)

@Mun · 23.02.2014, 01:55

а в полной сборке бегает эта панелька или стоит?

Новые блоги и статьи Все статьи Все блоги /
ПЛИС zxcha1ka_ 27.01.2026 AHDL Разработать программы для синтеза следующих устройств: 1. Параллельного регистра 4-х разрядного с синхронной загрузкой и асинхронным сбросом (обнулением); Пoмoгитe пoжaлyйстa	Загрузка PNG-файла с альфа-каналом с помощью библиотеки SDL3_image на Android 8Observer8 27.01.2026 Содержание блога SDL3_image - это библиотека для загрузки и работы с изображениями. Эта пошаговая инструкция покажет, как загрузить и вывести на экран смартфона картинку с альфа-каналом, то есть с. . .	влияние грибов на сукцессию anaschu 26.01.2026 Бифуркационные изменения массы гриба происходят тогда, когда мы уменьшаем массу компоста в 10 раз, а скорость прироста биомассы уменьшаем в три раза. Скорость прироста биомассы может уменьшаться за. . .	Воспроизведение звукового файла с помощью SDL3_mixer при касании экрана Android 8Observer8 26.01.2026 Содержание блога SDL3_mixer - это библиотека я для воспроизведения аудио. В отличие от инструкции по добавлению текста код по проигрыванию звука уже содержится в шаблоне примера. Нужно только. . .
Установка Android SDK, NDK, JDK, CMake и т.д. 8Observer8 25.01.2026 Содержание блога Перейдите по ссылке: https:/ / developer. android. com/ studio и в самом низу страницы кликните по архиву "commandlinetools-win-xxxxxx_latest. zip" Извлеките архив и вы увидите. . .	Вывод текста со шрифтом TTF на Android с помощью библиотеки SDL3_ttf 8Observer8 25.01.2026 Содержание блога Если у вас не установлены Android SDK, NDK, JDK, и т. д. то сделайте это по следующей инструкции: Установка Android SDK, NDK, JDK, CMake и т. д. Сборка примера Скачайте. . .	Использование SDL3-callbacks вместо функции main() на Android, Desktop и WebAssembly 8Observer8 24.01.2026 Содержание блога Если вы откроете примеры для начинающих на официальном репозитории SDL3 в папке: examples, то вы увидите, что все примеры используют следующие четыре обязательные функции, а. . .	моя боль iceja 24.01.2026 Выложила интерполяцию кубическими сплайнами www. iceja. net REST сервисы временно не работают, только через Web. Написала за 56 рабочих часов этот сайт с нуля. При помощи perplexity. ai PRO , при. . .

@Mun 7 / 7 / 7 Регистрация: 21.12.2012 Сообщений: 46
	22.02.2014, 23:17
	и в том и в другом нет класса logo 0

@Mun 7 / 7 / 7 Регистрация: 21.12.2012 Сообщений: 46
	23.02.2014, 00:21
	либо я не так делаю, или что, но у меня всё на месте при уменьшении, а при сильном увеличении меню смещается под лого, можно предоставить html/css код детальнее 0

@wolf 2 / 2 / 10 Регистрация: 17.09.2012 Сообщений: 860
	23.02.2014, 00:27 [ТС]
	вот вот и у меня убегает вниз... щас скину детальнее 0

@wolf 2 / 2 / 10 Регистрация: 17.09.2012 Сообщений: 860
	23.02.2014, 00:32 [ТС]
	index.rar 0

@Mun 7 / 7 / 7 Регистрация: 21.12.2012 Сообщений: 46
	23.02.2014, 00:50
	у меня получилось таким образом, и при увеличении и уменьшении ничего не изменяется 0

@Mun 7 / 7 / 7 Регистрация: 21.12.2012 Сообщений: 46
	23.02.2014, 01:05
	кстати html код в архиве неполный был. у вас он полный??? 0

@wolf 2 / 2 / 10 Регистрация: 17.09.2012 Сообщений: 860
	23.02.2014, 01:28 [ТС]
	для панель он там полный, а вообще я её взял из сборки vii engine 0

@wolf 2 / 2 / 10 Регистрация: 17.09.2012 Сообщений: 860
	23.02.2014, 01:29 [ТС]
	вот так у меня убегает 0

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

@wolf 2 / 2 / 10 Регистрация: 17.09.2012 Сообщений: 860
	23.02.2014, 01:34 [ТС]
	должно быть так 0

@Mun 7 / 7 / 7 Регистрация: 21.12.2012 Сообщений: 46
	23.02.2014, 01:55
	а в полной сборке бегает эта панелька или стоит? 0