Форум программистов, компьютерный форум, киберфорум
Наши страницы

HTML, CSS

Войти
Регистрация
Восстановить пароль
 
broboa
0 / 0 / 0
Регистрация: 30.09.2012
Сообщений: 25
#1

Смещаются объекты на экране - HTML, CSS

12.11.2012, 04:56. Просмотров 530. Ответов 1
Метки нет (Все метки)

Здраствуйте, делаю сайт. В первый раз. Пока что сделал мало чего, но вот код. У меня появились две проблемы. Первая заключается в том, что когда я делаю окно браузера меньше, то все кнопки съезжают друг к другу. Мне говорили, что чтобы такое избежать, нужно задавать все параметры в процентах. Но я вроде все задал в процентах. Или я ошибаюсь?
Следующая проблема заключается в том, что мои кнопки facebook_button, twitter_button и myspace_button я хотел наложить поверх header. Я их разместил в то место, где хочу. Но они все равно находятся под ним. Как это исправить? И опять же та же проблема что и с первой, что когда уменьшаю или расширяю окно браузера, то эти кнопки тоже смещаются.
Помогите пожалуйста с этими двумя проблемами пожалуйста. Заранее благодарю.


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
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
 
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<link href="style.css" rel="stylesheet" type="text/css" />
</head>
 
<body>
            <div id="twitter_button"><a href="http://twitter.com"><img src="/images/design/twitter_button.png" alt="twitter button" /></a></div>
            <div id="myspace_button"><a href="http://uk.myspace.com/"><img src="/images/design/myspace_button.png" alt="myspace button" /></a></div>
            <div id="facebook_button"><a href="http://facebook.com"><img src="/images/design/facebook_button.png" alt="facebook button" /></a></div>
        <div id="header"><img src="/images/design/header.png" alt="header" /></div>
        <div id="menu">
        <img src="/images/design/main_menu/main_menu_parts_01.png" alt="home" /><img src="/images/design/main_menu/main_menu_parts_02.png" alt="puns" width="99" height="68" /><img src="/images/design/main_menu/main_menu_parts_03.png" alt="long ones" width="177" height="68" /><img src="/images/design/main_menu/main_menu_parts_04.png" alt="pictures" width="150" height="68" /><img src="/images/design/main_menu/main_menu_parts_05.png" alt="knock knock" width="210" height="68" /><img src="/images/design/main_menu/main_menu_parts_06.png" alt="random" width="137" height="68" /><img src="/images/design/main_menu/main_menu_parts_07.png" alt="other pages" width="220" height="68" /></div>
        <div id="content">
        <table width="80%" border="1" align="center">
  <tr>
    <td rowspan="2" valign="top">
        <div id="picture_week"><img src="/images/design/picture_week.png" alt="picture week" width="376" height="422" /></div>
    </td>
    <td>
    <div id="pun_week"><img src="/images/design/pun_week.png" alt="pun week" />
    </td>
    <td rowspan="2"><div id="long_one_week"><img src="/images/design/long_one_week.png" alt="long one week" /></div></td>
  </tr>
  <tr>
    <td><div id=""knock_knock_week"><img src="/images/design/knock_knock_week.png" alt="knock knock week" /></div></td>
    </tr>
</table>
        </div>
<div id="footer"><img src="/images/design/footer.png" alt="footer" /></div>
       
            
    
</body>
</html>




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
@charset "utf-8";
.sss {
 
}
 
body {
    background-image:url(images/design/header.png);
    font-family:Georgia, "Times New Roman", Times, serif;
    background-image:url(images/design/bg_small.png);
}
 
#header {
    position: relative;
    height: 100%;
    width: 100%;
    text-align:center;
}
 
#menu {
    position: static;
    height: 100%;
    width: 100%;
    top: 40%;
    white-space: nowrap;
    text-align:center;
}
      
#content[/URL]  {
    height: 100%;
    width: 100%;
    position: static;
    text-align:center;      
}
 
#picture_week {
    position: static;
    vertical-align: top;        
}
 
#pun_week {
 
}
 
#long_one_week {
 
}
 
#footer  {
    position: static;
    width:100%;
    top: 95%;
    text-align:center;
}
 
#twitter_button {
    position: absolute;
    float: left;
    left: 66%;
    
}
 
#myspace_button {
    position: absolute;
    float: left;
    left: 58.5%;
}
 
#facebook_button {
    position: absolute;
    float: left;
    left: 51%;
}
0
Надоела реклама? Зарегистрируйтесь и она исчезнет полностью.
Similar
Эксперт
41792 / 34177 / 6122
Регистрация: 12.04.2006
Сообщений: 57,940
12.11.2012, 04:56
Здравствуйте! Я подобрал для вас темы с ответами на вопрос Смещаются объекты на экране (HTML, CSS):

Изображения смещаются с места - HTML, CSS
В одном блоке div находится 5 картинок. Хочу сделать, что бы при наведении на одну из картинок, она увеличивалась в размерах. Ну это...

Почему смещаются блоки - HTML, CSS
Подскажите пожалуйста, почему у меня при вводе закомментированных тегов смещаются блоки? &lt;!doctype&gt; &lt;html&gt; &lt;head&gt; &lt;meta...

Смещаются элементы при уменьшении ширины окна - HTML, CSS
Первый раз верстаю сайт, который стараюсь сделать адаптивным. У меня экран достаточно большой, но вот если сайт открыть на экране примерно...

При увеличении картинки смещаются остальные изображения - HTML, CSS
Добрый день! я на jquery прописал скрипт увеличения фото, но у меня разъезжаются картинки когда происходит увеличение соседней. Подскажите,...

Блоки смещаются при изменении окна браузера - HTML, CSS
Здравствуйте. Решил самостоятельно обучаться HTML, но вот вопрос сразу же возник при создании каркаса. Мне хотелось бы, чтоб в блоке...

Кнопки при масштабировании на 75 проц смещаются вниз - HTML, CSS
&lt;div class=&quot;header_buttons&quot;&gt; &lt;ul&gt; &lt;li&gt;&lt;a href=&quot;#&quot;&gt;Правила на сайте&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a href=&quot;#&quot;&gt;Добавить...

1
svoy_man
16 / 16 / 1
Регистрация: 01.11.2012
Сообщений: 55
12.11.2012, 15:07 #2
Скинь проект с картинками помогу, просто без картинок не видно полной картины
0
MoreAnswers
Эксперт
37091 / 29110 / 5898
Регистрация: 17.06.2006
Сообщений: 43,301
12.11.2012, 15:07
Привет! Вот еще темы с ответами:

Смещаются элементы сайта при изменении размеров окна - HTML, CSS
Здравствуйте. Появилась проблема, при уменьшении окна в оконном режиме съезжает дизайн. Вот скрины: Что можно сделать?

Почему смещаются элементы с фикс.размерами при уменьш.масштаба - HTML, CSS
Простенький код &lt;body&gt; &lt;div class=&quot;steps&quot;&gt; &lt;div&gt; &lt;div class=&quot;stepUrl&quot;&gt; A &lt;/div&gt; ...

При наведении не активные пункты меню смещаются, и не применяются изменения фона при наведении - HTML, CSS
У меня возникла проблема, при наведении не активные пункты меню смещаются, и не применяются изменения фона при наведении.&lt;!DOCTYPE html&gt; ...

От слайда к слайду самопроизвольно смещаются объекты на несколько мм - MS Powerpoint
Добрый день! Помогите, пожалуйста, в Powerpoint создано несколько слайдов, при этом заголовок каждого находится строго на одном и том же...


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

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

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