Ajax Loader
×

Untitled

HTML 
<html>
1
<html>
2
  <body>
3
 
4
<div class = "header">
5
  <div class = "content">
6
    <div class = "logo">
7
      IGDC
8
    </div>
9
      <a href="#" class = "button">Правила</a>
10
      <a href="#" class = "button">Конкурсы</a>
11
      <a href="#" class = "button">ТОП</a>
12
      <a href="#" class = "button">Форум</a>
13
      <a href="#" class = "button">Игры</a>
14
      <a href="#" class = "button">Призы</a>
15
      <a href="#" class = "button">RSS</a>
16
      <a href="#" class = "button">Стримы</a>
17
  </div>
18
  <div class = "user">
19
    <a class = "user_mailbox">
20
      <img src = "http://pelmenka.pe.hu/mail.png"/>
21
      <span class = "mailcount">
22
          1
23
      </span>
24
    </a>
25
    <a class = "user_togledown">
26
      <img src = "http://igdc.ru/images/avatars/ava%5B977%5D.png" class = "user_ava"/>
27
      <span>pelmenka</span>
28
    
29
      <ul id = "user_menu">
30
        <li><a href = "#">Настройки</a></li>
31
        <li><a href = "#">Стрим</a></li>
32
        <li><a href = "#">Выход</a></li>
33
        <li><hr></li>
34
        <li>Монетки</li>
35
      </ul>
36
    
37
    
38
    </a>
39
  </div>
40
</div>
41
  
42
<div class = "content">
43
   <table>
44
     <tr>
45
       <td style = "height: 1000px; color: #fff; width: 33%;">
46
         Форум и конкурсы
47
       </td>
48
       <td style = "height: 1000px; color: #fff; width: 33%;">
49
         Новости
50
       </td>
51
       <td style = "height: 1000px; color: #fff; width: 33%;">
52
         рандомные игры и чатик
53
       </td>
54
     </tr>
55
  </table>
56
</div>
57
  
58
  
59
  </body>
60
</html>
 
CSS 
body
1
body
2
{
3
  background: #000;
4
5
}
6
 
7
.content
8
{
9
  color: #f00;
10
  z-index: 90;
11
}
12
 
13
.header
14
{
15
  z-index: 1000;
16
  position: fixed;
17
  background: rgba(80, 80, 80, 1);
18
  width: 100%;
19
  height: 42px;
20
  vertical-align: middle;
21
  display: table;
22
  color: fff;
23
}
24
 
25
.header .content
26
{
27
  display: table;
28
  margin-left: auto;
29
  margin-right: auto;
30
  float: left;
31
  width: 800px;
32
  direction: ltr;
33
  height: 42;
34
  text-align: center;
35
36
}
37
 
38
.header .content .logo
39
{
40
  color: rgba(223, 113, 38, 1);
41
  font-weight: 700;
42
  font-size: 24pt;
43
  margin-left: 4px;
44
  display: table-cell;
45
  vertical-align: middle;
46
}
47
48
.header .content a.button
49
{
50
  display: table-cell;
51
  text-decoration: none;
52
  border-left: 0.5px solid rgba(255, 255, 255, 0.1);
53
  border-right: 0.5px solid rgba(255, 255, 255, 0.1);
54
  padding: 2px 2px 4px;
55
  color: fff;
56
  vertical-align: middle;
57
}
58
59
.header .content a.button:hover
60
{
61
  background: rgba(0, 0, 0, 0.1);
62
}
63
 
64
.header .user
65
{
66
  position: relative;
67
  display: table-cell;
68
  vertical-align: middle;
69
70
  height: 42px;
71
  padding-right: 7px;
72
  padding-left: 7px;
73
}
74
 
75
.header .user:hover
76
{
77
  background: rgba(0, 0, 0, 0.1);
78
}
79
 
80
.header .user .user_togledown .user_ava
81
{
82
  height: 29px;
83
  vertical-align: middle;
84
}
85
 
86
ul, li {
87
    margin:0;
88
    padding:0;
89
    list-style-type:none;
90
}
91
 
92
.user_mailbox
93
{
94
  vertical-align: middle;
95
}
96
 
97
.mailcount
98
{
99
  background: rgba(223, 113, 38, 1);
100
  position: relative;
101
  top: -9px;
102
  left: -27px;
103
  font-size: 11pt;
104
  border-radius: 50%;
105
}
106
 
107
.user > #user_menu
108
{
109
  display: none;
110
  position: relative;
111
  z-index: 1001;
112
  background-color: #eee;
113
  text-decoration: none;
114
  margin-top: 2px;
115
  width: 100%;
116
  color: rgba(223, 113, 38, 1);
117
  list-style-position: outside;
118
  position: absolute;
119
  right: 0px;
120
}
121
 
122
.user:hover > #user_menu
123
{
124
  display: block;
125
}
126
 
127
#user_menu a
128
{
129
  display: block;
130
  color: #000;
131
  text-decoration: none;
132
}
133
 
134
#user_menu a:hover
135
{
136
137
  background: rgba(0, 0, 0, 0.1);
138
}
 

Untitled

CSSDeck G+