|
02.07.2013, 15:16
#38317264
Ссылка:
Ссылка на сообщение:
Ссылка с названием темы:
|
|
|
|
Сверстал сайт по картинке которую прикрепляю, но в при изменении размера экрана весь дизайн ломается помогите. Заранее спасибо
Код сайта:
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.
118.
119.
120.
121.
122.
123.
124.
125.
126.
127.
128.
129.
130.
131.
132.
133.
134.
135.
136.
137.
138.
139.
140.
141.
142.
143.
144.
145.
146.
147.
148.
149.
150.
151.
152.
153.
154.
155.
156.
157.
158.
159.
160.
161.
162.
163.
164.
165.
166.
167.
168.
169.
170.
171.
172.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Владимир Жирнов.Профессиональная Фотография</title>
<style type="text/css">
*{
margin:0;
padding: 0;
}
body {
margin:0 auto;
background: url(image/bggg.jpg) repeat #282828;
color:#FFFFFF;
}
#content-main{
margin:200px auto 0;
height: 310px; /* Высота блока */
width: 60%; /* Ширина блока */
}
.content{
background: url(image/bgg.jpg) repeat #282828;
height: 310px; /* Высота блока */
}
h1{
font-family: Verdana, Arial, Helvetica, sans-serif;
font-weight: bolder ;
}
.img{
float:left;
}
.hg{
font-family: Verdana, Arial, Helvetica, sans-serif;
font-style: italic ;
font-weight: normal;
color:#FECA00;
}
.right{
font-family: Verdana, Arial, Helvetica, sans-serif;
float:right;
}
.text{
font-family: Verdana, Arial, Helvetica, sans-serif;
width: 260px;
float: left;
}
.hh{
font-family: Verdana, Arial, Helvetica, sans-serif;
font-style: italic ;
font-weight: normal;
color:#FECA00;
float:right;
}
.layer2 {
position: absolute; /* Абсолютное позиционирование */
top: 175px; /* Положение от нижнего края */
right: 225px; /* Положение от правого края */
}
.contact {
position: absolute; /* Абсолютное позиционирование */
top: 215px; /* Положение от нижнего края */
right: 150px; /* Положение от правого края */
}
a:link {
color: #FFDD00; /* Цвет ссылок */
}
a:visited {
color: #FFDD00; /* Цвет посещенных ссылок */
}
a:active {
color: #FFDD00; /* Цвет активной ссылки */
}
a {
text-decoration: none; /* Убираем подчеркивание у ссылок */
}
a:hover {
text-decoration: underline; /* Добавляем подчеркивание
при наведении курсора мыши на ссылку */
}
.portfolio-item {float: left; padding-right: 8px; padding-bottom: 35px; text-align: center;}
.portfolio-item img {display: block; padding-bottom: 1px;}
#footer{
margin:0px auto ;
height: 310px; /* Высота блока */
width: 60%; /* Ширина блока */
overflow: hidden;
position: relative;
clear:both;
padding: 20px 0;
}
.gallery{ padding-top: 128px;}
</style>
</head>
<body>
<header id="header">
</header>
<img class="layer2" src="image/znak.png">
<h3><a href="contact.html" class="contact">Контакты</a></h3>
<section id="section">
<div id="content-main"><h1>Vladimir Jirnov <span class="hg">Photography</span></h1>
<div class="content">
<img class="img" src="image/gerl.png"><!-- Gallery -->
<div class="gallery">
<div class="portfolio-item">
<a href="#"><img src="image/BC-collage.jpg" alt="" /></a>
<a href="#" class="menu">АРТ</a>
</div>
<div class="portfolio-item">
<a href="#"><img src="image/tc001.jpg" alt="" /></a>
<a href="#"class="menu">Коммерческая<br>фотография</a>
</div>
<div class="portfolio-item">
<a href="#"><img src="image/Bukhara-1.jpg" alt="" /></a>
<a href="#"class="menu">ПРОЕКТЫ</a>
</div>
<div class="portfolio-item last">
<a href="#"><img src="image/Certificate-022.jpg" alt="" /></a>
<a href="#"class="menu">Сертификаты<br>дипломы</a>
</div>
<div class="cl"> </div>
</div>
<!-- End Gallery -->
</div>
</div>
</section>
<footer id="footer"><div class="text">Владимир Жирнов.Профессиональная Фотография.Владимир Жирнов.Профессиональная Фотография.Владимир Жирнов. Профессиональная Фотография. Владимир Жирнов.Профессиональная Фотография.Владимир Жирнов.Профессиональная Фотография.Владимир Жирнов.Профессиональная Фотография.Владимир Жирнов. Профессиональная Фотография.Владимир Жирнов.Профессиональная Фотография.Владимир Жирнов.Профессиональная Фотография.</div>
<div class="right"><h3>Владимир Жирнов<span class="hh"> Профессиональная Фотография</span></h3></div>
</footer>
</body>
</html>
|
|
|
