На разных разрешениях едет

@stardel · Регистрация: 08.11.2009

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

Делаю сайтик ,cовсем простой, вроде всё ок,толко при смене разрешения на мониторе ссылки начинают сьезжать влево...у меня было позоционирование в px,сейчас поменял на %,стало по лучше но всё равно не то...подскажите плизз как можно решить эту порблему? Вот сайт http://batikgallery.ru/
Вот код:

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
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Батик|Главная</title>
    <style type="text/css"><!--
        body{
            margin:0;
            background:#130e0a url(images/Gallery.jpg) no-repeat 50% 0;
            font:18px "Comic Sans MS", Verdana, Arial, Helvetica, sans-serif;
            color:#fff;
        }
        #wrapper{
            width:200px;
            margin:380px 200px 220px;
            min-height:100px;
        }
        * html #wrapper{
            height:350px;
        }
        a{
            text-decoration:none;
            color:#fff;
        }
        a:hover{
            color:#483223;
        }
        #wrapper{
            //width:200px;
           //margin:380px 200px;
           // min-height:100px;}
         html #wrapper{
            //height:350px;}    
        
        
    --></style>
</head>
<body>
<div id="wrapper">
    <ul>
        <li>Главная</li>
 
        <li><a href="http://batikgallery.ru/gallery/main.php">Галерея</a></li>
        <li><a href="http://batikgallery.ru/Contacts.html">Контакты</a></li>
    </ul>
</div>
</body>
</html>

@Fake · 08.01.2010, 13:22

Все таки вправо уезжает сейчас проверял ну вплане при снижении вправо при при повышении влево видать))

HTML5
1
margin:380px 200px 220px;

вот тут поставь в процентах отступы)) сам расчитаешь надеюсь что именно и сколько А так стоят отступы в пикселях потому и ползет при смене разрешения Так как количество пикселей то на экране увеличивается уменьшается

@Skvor_91 · 08.01.2010, 15:21

Я бы сделал так:

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
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Батик|Главная</title>
    <style type="text/css"><!--
        body{
            margin:0;
            background:#130e0a url(images/Gallery.jpg) no-repeat 50% 0;
            font:18px "Comic Sans MS", Verdana, Arial, Helvetica, sans-serif;
            color:#fff;
        }
        #wrapper{
            width:200px;
            margin: 0 auto;
            min-height:100px;
            position: relative;
            top: 380px;
            right: 425px;
        }
        * html #wrapper{
            height:350px;
        }
        a{
            text-decoration:none;
            color:#fff;
        }
        a:hover{
            color:#483223;
        }
                #wrapper{
            //width:200px;
           //margin:380px 200px;
           // min-height:100px;}
                 html #wrapper{
            //height:350px;}    
                
                
    --></style>
</head>
<body>
<div id="wrapper">
    <ul>
        <li>Главная</li>
 
        <li><a href="http://batikgallery.ru/gallery/main.php">Галерея</a></li>
        <li><a href="http://batikgallery.ru/Contacts.html">Контакты</a></li>
    </ul>
</div>
</body>
</html>

Вот что я поменял:

HTML5
1
2
3
4
5
6
7
8
#wrapper{
            width:200px;
            margin: 0 auto;
            min-height:100px;
            position: relative;
            top: 380px;
            right: 425px;
        }

@stardel · 08.01.2010, 15:30 **[ТС]**

CПС! помогло,вот только теперь не пойму как прописать отступ картинки бэкграунда внизу.просто получилось что на 1280 там от низа до картинки пикселей 50,а если на 1024 то наоборот не видно этих 50 px....

@Skvor_91 · 08.01.2010, 15:38

HTML5
1
2
3
4
5
6
html, body {
            margin:0;
            background:#130e0a url(images/Gallery.jpg) no-repeat 50% 0;
            font:18px "Comic Sans MS", Verdana, Arial, Helvetica, sans-serif;
            color:#fff; height: ВЫСОТА КАРТИНКИ В ПИКСЕЛЯХ!;
        }

И теперь всегда картинку можно будет увидеть...

Добавлено через 1 минуту
Мне кажется я не догнал суть проблемы...

@stardel · 08.01.2010, 15:50 **[ТС]**

не получается....он эти 700 px(высота картинки) приплюсовывает после неё,и получается под картинкой эти 700 px...действительно ты что то перепутал,может из за Врапперов у меня такое?
Вот такой код у меня счас:

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
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Батик|Главная</title>
[css]
    <style type="text/css"><!--
        body{
            margin:0;
            background:#130e0a url(images/Gallery.jpg) no-repeat 50% 0;
            font:18px "Comic Sans MS", Verdana, Arial, Helvetica, sans-serif;
            color:#fff; height:700px;
        }
        #wrapper{
            width:200px;
            margin:30% 30% 20%;
            min-height:100%;
        }
        * html #wrapper{
            height:100%;
        }
        a{
            text-decoration:none;
            color:#fff;
        }
        a:hover{
            color:#483223;
        }
                #wrapper{
            //width:200px;
           //margin:30% 30%;
           // min-height:100px;}
                 html #wrapper{
            //height:390px;}    
                
                
    --></style>
[/css]
</head>
<body>
<div id="wrapper">
    <ul>
        <li>Главная</li>
 
        <li><a href="http://batikgallery.ru/gallery/main.php">Галерея</a></li>
        <li><a href="http://batikgallery.ru/Contacts.html">Контакты</a></li>
    </ul>
</div>
</body>
</html>

@Skvor_91 · 08.01.2010, 15:59

Я так понял что тебе требуется что бы при малом разрешении картинка все равно была видна и внизу не обрезалась?

@Vanstorm · 08.01.2010, 16:17

У вас задан для боди высота 700 пикселей вот он и едет. задайте например 223px пикселя и увидите что отступ под картинкой пропадёт

@stardel · 08.01.2010, 16:52 **[ТС]**

Skvor_91 да.поставил высоту,но всё равно на 1024 нормально,а на 1280-внизу под картинкой пусто,а в Опере вообще на 1024 внизу обрезает...
ставлю margin-bottom: 20 px; не работает....что такое....?

Добавлено через 7 минут
Vanstorm не подогнать никак....разрешение то разное...

@Vanstorm · 08.01.2010, 16:55

Так у меня 1280х800 в файрфоксе всё нормально

@stardel · 08.01.2010, 16:59 **[ТС]**

Vanstorm через 5 минут посмотри-я перезалью страницу )
Вот,пожалуйста: в IE и Лисице одинаково(на 1280 внизу большой отступ)в Опере тоже.Но на 1024 в Опере внизу обрезана страница....подумываю для неё прописать отдельный стиль,но как правильно не знаю...

@Vanstorm · 08.01.2010, 17:48

Я не вижу отступа я вижу темноту, и сьехавшее меню

@stardel · 08.01.2010, 17:56 **[ТС]**

Vanstorm да это из за того что у меня монитор wide...у меня счас всё нормально...есть какая нибудь прога чтобы сделать из моего wide'a обыкновенный моник?

@Skvor_91 · 08.01.2010, 18:37

Из-за wrappera твоего. Перед этим вариант нормальный был. И почему не мой вариант врапера вставил? Ты мудришь и косячишь подряд...

@stardel · 08.01.2010, 18:54 **[ТС]**

Skvor_91
Твой вариант не подходит,уже не помню из за чего...а какой враппер по твоему не подходит?

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
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Батик|Главная</title>
    <style type="text/css"><!--
        body{
            margin:0;
            background:#130e0a url(images/Gallery.jpg) no-repeat 50% 0;
            font:18px "Comic Sans MS", Verdana, Arial, Helvetica, sans-serif;
            color:#fff; height:200px;
            
        }
        #wrapper{
            width:200px;
            margin:30% 30% 20%;
            min-height:100%;
        }
        * html #wrapper{
            height:100%;
        }
        a{
            text-decoration:none;
            color:#fff;
        }
        a:hover{
            color:#483223;
        }
                #wrapper{
            //width:200px;       /*для IE*/
           //margin:30% 30%;
           // min-height:100px;}
                 html #wrapper{
            //height:390px;} 
            
        html:first-child #wrapper{     /*для Оперы*/
            width:200px;
            margin:30% 30% 20%;
            min-height:100%;
        }
        * html #wrapper{
            height:100%;
        }     
                
                
    --></style>
</head>
<body>
<div id="wrapper">
    <ul>
        <li>Главная</li>
 
        <li><a href="http://batikgallery.ru/gallery/main.php">Галерея</a></li>
        <li><a href="http://batikgallery.ru/Contacts.html">Контакты</a></li>
    </ul>
</div>
</body>
</html>

@Skvor_91 · 08.01.2010, 22:34

HTML5
1
2
margin:30% 30% 20%;
            min-height:100%;

Ну ты сам подумай че пишешь!!! высота у него 100% да и плюсь маргины сверху и снизу в сумме 50% В итоге у теб и получается 150% из-за этого и прокрутка!

Добавлено через 1 минуту
А и чем вариант не подошел? Только не говори что он не в том месте встал!

@stardel · 08.01.2010, 22:43 **[ТС]**

Skvor_91 я уже проще переделал,но с проблемой одинакового отображения так и не решил...вот обьясни мне плизз как сделать чтобы и на 1024 и на 1280 было одинаково ведь количество пикселей разное...

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
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Батик|Главная</title>
    <style type="text/css"><!--
        body{
    background:#130E0A;
    margin:0;
    font:18px "Comic Sans MS",Verdana,Arial,Helvetica,sans-serif;
}
#wrapper{
    width:766px;
    margin:0 auto;
    background:url(images/Gallery.jpg) no-repeat;
    min-height:700px;
    position:relative;
}
* html #wrapper{
    height:700px;
    overflow:visible;
}
 
#navigation{
    margin:0;
    padding:0;
    list-style:none;
    position:absolute;
    top:400px;
    left:300px;
}
 
        a{
            text-decoration:none;
            color:#fff;
        }
        a:hover{
            color:#483223;
        }
               
                         
    --></style>
</head>
<body>
<div id="wrapper">  </div>
   <div id="navigation"> 
        <li>Главная</li>
 
        <li><a href="http://batikgallery.ru/gallery/main.php">Галерея</a></li>
        <li><a href="http://batikgallery.ru/Contacts.html">Контакты</a></li>
    
</div>
</body>
</html>

@Skvor_91 · 08.01.2010, 22:49

Не по теме:

А че мое сообщение удалили? Я там что-то не правильного сказал?

Новые блоги и статьи Все статьи Все блоги /
Подключение Box2D v3 к SDL3 для Android: физика и отрисовка коллайдеров 8Observer8 29.01.2026 Содержание блога Box2D - это библиотека для 2D физики для анимаций и игр. С её помощью можно определять были ли коллизии между конкретными объектами. Версия v3 была полностью переписана на Си, в. . .	Инструменты COM: Сохранение данный из VARIANT в файл и загрузка из файла в VARIANT bedvit 28.01.2026 Сохранение базовых типов COM и массивов (одномерных или двухмерных) любой вложенности (деревья) в файл, с возможностью выбора алгоритмов сжатия и шифрования. Часть библиотеки BedvitCOM Использованы. . .	Загрузка PNG с альфа-каналом на SDL3 для Android: с помощью SDL_LoadPNG (без SDL3_image) 8Observer8 28.01.2026 Содержание блога SDL3 имеет собственные средства для загрузки и отображения PNG-файлов с альфа-каналом и базовой работы с ними. В этой инструкции используется функция SDL_LoadPNG(), которая. . .	Загрузка PNG с альфа-каналом на SDL3 для Android: с помощью SDL3_image 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 и т. д. Сборка примера Скачайте. . .

@stardel 0 / 0 / 0 Регистрация: 08.11.2009 Сообщений: 11
	08.01.2010, 15:30 [ТС]
	CПС! помогло,вот только теперь не пойму как прописать отступ картинки бэкграунда внизу.просто получилось что на 1280 там от низа до картинки пикселей 50,а если на 1024 то наоборот не видно этих 50 px.... 0

@Skvor_91 12 / 12 / 0 Регистрация: 07.01.2010 Сообщений: 36
	08.01.2010, 15:59
	Я так понял что тебе требуется что бы при малом разрешении картинка все равно была видна и внизу не обрезалась? 1

@Vanstorm 2773 / 341 / 22 Регистрация: 15.01.2008 Сообщений: 2,614
	08.01.2010, 16:17
	У вас задан для боди высота 700 пикселей вот он и едет. задайте например 223px пикселя и увидите что отступ под картинкой пропадёт 1

@stardel 0 / 0 / 0 Регистрация: 08.11.2009 Сообщений: 11
	08.01.2010, 16:52 [ТС]
	Skvor_91 да.поставил высоту,но всё равно на 1024 нормально,а на 1280-внизу под картинкой пусто,а в Опере вообще на 1024 внизу обрезает... ставлю margin-bottom: 20 px; не работает....что такое....? Добавлено через 7 минут Vanstorm не подогнать никак....разрешение то разное... 0

@Vanstorm 2773 / 341 / 22 Регистрация: 15.01.2008 Сообщений: 2,614
	08.01.2010, 16:55
	Так у меня 1280х800 в файрфоксе всё нормально 1

@stardel 0 / 0 / 0 Регистрация: 08.11.2009 Сообщений: 11
	08.01.2010, 16:59 [ТС]
	Vanstorm через 5 минут посмотри-я перезалью страницу ) Вот,пожалуйста: в IE и Лисице одинаково(на 1280 внизу большой отступ)в Опере тоже.Но на 1024 в Опере внизу обрезана страница....подумываю для неё прописать отдельный стиль,но как правильно не знаю... 0

@Vanstorm 2773 / 341 / 22 Регистрация: 15.01.2008 Сообщений: 2,614
	08.01.2010, 17:48
	Я не вижу отступа я вижу темноту, и сьехавшее меню Миниатюры 1

@stardel 0 / 0 / 0 Регистрация: 08.11.2009 Сообщений: 11
	08.01.2010, 17:56 [ТС]
	Vanstorm да это из за того что у меня монитор wide...у меня счас всё нормально...есть какая нибудь прога чтобы сделать из моего wide'a обыкновенный моник? 0

@Skvor_91 12 / 12 / 0 Регистрация: 07.01.2010 Сообщений: 36
	08.01.2010, 18:37
	Из-за wrappera твоего. Перед этим вариант нормальный был. И почему не мой вариант врапера вставил? Ты мудришь и косячишь подряд... 1

@Skvor_91
	08.01.2010, 22:49
	Не по теме: А че мое сообщение удалили? Я там что-то не правильного сказал? 1