Форум программистов, компьютерный форум, киберфорум
Наши страницы
HTML, CSS
Войти
Регистрация
Восстановить пароль
 
Рейтинг: Рейтинг темы: голосов - 12, средняя оценка - 4.92
renkoman
7 / 7 / 1
Регистрация: 15.11.2012
Сообщений: 99
#1

Прыгает div по ширине - HTML, CSS

15.11.2012, 21:57. Просмотров 1718. Ответов 7
Метки нет (Все метки)

Добрый день форумчанам!!я тут новенький
у меня вот какой вопрос, по поводу вёрстки...
я сверстал макет, но при отдалении в браузере сайта, прыгает менюшка по ширине
никто не подскажет как быть?буду очень признателен
п.с. я только учусь, так что сильно не бейте )
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
<!-- HEADER -->
        <div id="header">
            <div id="logo">
            </div>
            <div id="menu">
                <ul>
                    <li id="nav1"><a href="#">Home</a></li>
                    <li><a href="#">About</a></li>
                    <li><a href="#">Portfolio</a></li>
                    <li><a href="#">Blog</a></li>
                    <li><a href="#">Features</a></li>
                    <li id="nav6"><a href="#">Contact</a></li>
                </ul>
            </div>
            <div id="bigpic">
                <div id="blackbg">
                    <div id="dot">
                        <ul>
                            <li><a href="#"></a></li>
                            <li><a href="#"></a></li>
                            <li><a href="#"></a></li>
                            <li><a href="#"></a></li>
                            <li><a href="#"></a></li>
                            <li><a href="#"></a></li>
                        </ul>
                    </div>
                    <div id="sc2">
                        <div id="trailer">
                            <a href="#">See Starcraft 2 trailers now!</a>
                        </div>
                        <div id="blue">
                            <p><a href="#">Learn more</a></p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
и CSS

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
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
#header{
    width:100%;
    height:429px;
    background-image:url(images/bg_header.jpg);
}
#logo {
    width:166px;
    height:34px;
    background:url(images/logo_here.jpg);
    position:relative;
    left:300px;
    top:20px;
    border:none;
    padding:0;
}
#menu{
    width:600px;
    height:35px;
    position:absolute;
    left:675px;
    top:20px;
}
#menu ul {
    list-style-image:url(images/poloska.png);
    list-style-position:inside;
}
#menu li {
    float:left;
    background:url(images/bg-menu.jpg) repeat-x;
    padding-top:5px;
    padding-right:15px;
    padding-left:15px;
    padding-bottom:5px;
}
#nav1{
    border-radius:5px 0 0 5px;
}
#nav6{
    border-radius:0 5px 5px 0;
}
#menu a{
    text-decoration:none;
    color:#fff;
    padding-left:5px;
}
#menu a:hover{
    color:#f0922e;
}
#bigpic {
    width:938px;
    height:303px;
    background:url(images/bigpic.jpg);
    margin:30px auto;
}
#blackbg{
    width:920px;
    height:59px;
    background:url(images/blackbg.jpg);
    opacity:0.9;
    position:relative;
    top:234px;
    left:10px;
}
#dot{
    width:170px;
    height:20px;
    padding-top:20px;
    padding-left:20px;
}
#dot ul{
    list-style-image:url(images/dot2.jpg);
    list-style-position:inside;
}
#dot li{
    float:left;
    padding-left:6px;
    cursor:pointer;
}
#sc2 {
    width:290px;
    height:30px;
    position:absolute;
    left:600px;
    top:10px;
}
#trailer {
    width:190px;
    height:28px;
    color:#fff;
    background:url(images/bg_sc2.jpg);
    border-radius:7px;
    float:left;
    padding-top:5px;
}
#trailer a{
    text-decoration:none;
    color:#fff;
}
#blue{
    width:93px;
    height:28px;
    background:#359dd4;
    float:right;
    border-radius:5px;
    font-weight:bold;
    font-family:arial,sans-serif;
    text-align:center;
}
#blue a{
    text-decoration:none;
    color:#fff;
}
#blue  p{
    padding-top:5px;
}

http://www.cyberforum.ru/html/thread740197.html
0
Миниатюры
Прыгает div по ширине   Прыгает div по ширине  
Надоела реклама? Зарегистрируйтесь и она исчезнет полностью.
Similar
Эксперт
41792 / 34177 / 6122
Регистрация: 12.04.2006
Сообщений: 57,940
15.11.2012, 21:57
Я подобрал для вас темы с готовыми решениями и ответами на вопрос Прыгает div по ширине (HTML, CSS):

Резиновый div по ширине
Всем привет! Подскажите как можно сделать следующее: есть див, в который нужно...

Выравнивание div по ширине в 718px
Доброго времени суток, скажите, пожалуйста, каким еще образом, кроме...

Прировнять div к input(text) по ширине
input во всех браузерах выглядит по-разному, а у меня ниже его абсолютом прижат...

Вывести div равномерно по ширине, Bootsrap
Есть список тегов в виде &lt;div&gt;&lt;p&gt;Тег&lt;/p&gt;&lt;/div&gt; Как можно равномерно по...

Растянуть inline-div по ширине родителя
Добрый вечер. Возникла проблемка с inline блоками. Есть код: &lt;html&gt; ...

7
StopSmell
290 / 167 / 28
Регистрация: 16.09.2012
Сообщений: 369
15.11.2012, 22:44 #2
Ну так оно и должно прыгать, он абсолютно спозиционирован относительно левого края окна браузера.
HTML5
1
2
3
4
5
6
7
<div id="header">
    <div class="header_wrap">
        <div id="menu"></div>
        <div id="logo"></div>       
        <div id="bigpic"></div>
    </div>
</div>
CSS
1
2
3
4
5
6
7
8
9
10
11
#header {
    width: 100%;
}
    .header_wrap {
        width: 988px;
        margin: 0 auto;
    }
        #menu {
            float: right;
        }
        ...
1
renkoman
7 / 7 / 1
Регистрация: 15.11.2012
Сообщений: 99
15.11.2012, 22:46  [ТС] #3
Цитата Сообщение от StopSmell Посмотреть сообщение
Ну так оно и должно прыгать, он абсолютно спозиционирован относительно левого края окна браузера
следовательно,его нужно через relative попробовать сделать?
0
StopSmell
290 / 167 / 28
Регистрация: 16.09.2012
Сообщений: 369
15.11.2012, 22:47 #4
Отсутствие position в моем коде говорит о том что элемент имеет позицию static (это значение по умолчанию)
1
renkoman
7 / 7 / 1
Регистрация: 15.11.2012
Сообщений: 99
16.11.2012, 00:39  [ТС] #5
Цитата Сообщение от StopSmell Посмотреть сообщение
Отсутствие position в моем коде говорит о том что элемент имеет позицию static (это значение по умолчанию)
а, т.е. вы обернули в header_wrap эти блоки и задали ему width: 988px; margin: 0 auto; и menu при float:right; должно будет как раз упереться в край header_wrap
0
StopSmell
290 / 167 / 28
Регистрация: 16.09.2012
Сообщений: 369
16.11.2012, 00:42 #6
Цитата Сообщение от renkoman Посмотреть сообщение
а, т.е. вы обернули в header_wrap эти блоки и задали ему width: 988px; margin: 0 auto; и menu при float:right; должно будет как раз упереться в край header_wrap
Прально)
0
renkoman
7 / 7 / 1
Регистрация: 15.11.2012
Сообщений: 99
16.11.2012, 10:26  [ТС] #7
Спасибо огромное,всё заработало, теперь без дрыганий всяких...

Добавлено через 9 часов 40 минут

Добавлено через 54 секунды
блин, теперь почему-то у меня не открываются картинки ни в одном из ИЕ от ие 6 до 10....чё за ерунда?!
0
Taatshi
Администратор
11535 / 5032 / 256
Регистрация: 05.04.2011
Сообщений: 13,766
Записей в блоге: 2
16.11.2012, 10:44 #8
renkoman, одна тема - один вопрос. Пожалуйста, создайте новую.
1
16.11.2012, 10:44
MoreAnswers
Эксперт
37091 / 29110 / 5898
Регистрация: 17.06.2006
Сообщений: 43,301
16.11.2012, 10:44
Привет! Вот еще темы с решениями:

Выравнивание img в блоке div по ширине экрана
Так есть блок в нём три картинки и необходимо что бы они располагались на...

Как отцентрировать img по высоте и ширине в div?
как отцентрировать img по высоте и ширине в div со статическими размерами, если...

Ширина div по ширине дочернего, который absolute
&lt;div class=&quot;parent&quot; style=&quot;position: relative;&quot;&gt; &lt;div class=&quot;child&quot;...

Автоматическое выравнивание <div> по ширине не зная его ширины
Привет, Есть проблема с выравниванием &lt;div&gt;. Размер &lt;div&gt; нельзя задать...


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

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

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