Так что это сайт с сеткой изображений, h1 переходит в центр, когда я перехожу в полноэкранный режим, а сетка нет. Другими словами, это не отзывчиво. Как сделать так, чтобы сетка фотографий оставалась в центре при переходе в полноэкранный режим? Благодарю.
Вот мой код
<!DOCTYPE HTML>
<html>
<head>
<title>*****club</title>
<link rel="stylesheet" type="text/css" href="main.css">
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div id="banner" align="center" height="50">
<h1>*****CLUB<span>.urmom</span></h1>
</div>
<div id="nav" align="left" width="100">
<p><a href="About">About</a></p>
<p><a href="Contact">Contact</a></p>
<p><a href="Next Party">Next Party</a></p>
</div>
<ul id="pics" align="center" width="750" class="opacity" cellspacing="0">
<li><a href="1"><img src="natasha.png" height="250" width="250" class="opacity"></a></li>
<li><a href="1"><img src="eve.png" height="250" width="250" class="opacity"></a></li>
<li><a href="1"><img src="natasha.png" height="250" width="250" class="opacity"></a></li>
<li><a href="2"><img src="natasha.png" height="250" width="250" class="opacity"></a></li>
<li><a href="2"><img src="eve.png" height="250" width="250" class="opacity"></a></li>
<li><a href="2"><img src="natasha.png" height="250" width="250" class="opacity"></a></li>
<li><a href="3"><img src="natasha.png" height="250" width="250" class="opacity"></a></li>
<li><a href="3"><img src="eve.png" height="250" width="250" class="opacity"></a></li>
<li><a href="3"><img src="natasha.png" height="250" width="250" class="opacity"></a></li>
<li><a href="4"><img src="natasha.png" height="250" width="250" class="opacity"></a></li>
<li><a href="4"><img src="eve.png" height="250" width="250" class="opacity"></a></li>
<li><a href="4"><img src="natasha.png" height="250" width="250" class="opacity"></a></li>
</ul>
</table>
</body>
</html>
/***********
Banner
**********/
@font-face {
font-family: blackout;
src: url('BlackoutMidnight.ttf')
}
h1 {
color: white;
font-family: blackout;
font-size: 7em;
position: relative;
top: -40px;
letter-spacing: 0.06em;
}
h1:hover {
color: yellow;
}
h1 span {
font-size: 0.2em;
}
/**********
Grid Template
***********/
ul {
width: 750px;
position: relative;
left: 200px;
list-style: none;
}
/**********
Pics Position
***********/
li {
float: left;
padding: 0px;
margin: 0px;
display: block;
}
img {
display: block;
float: left;
}
/*********
Hover Effects
*********/
img.opacity {
opacity: 0.65;
filter: alpha(opacity=65);
}
img.opacity:hover {
opacity: 1;
filter: alpha(opacity=100);
}
/********
Sidebar style
********/
a {
text-decoration: none;
color: white;
font-family: blackout;
font-size: 1.3em;
}
p {
position: absolute;
left: 30px;
top: 245px;
letter-spacing: 0.1em;
}
p:nth-child(2) {
position: absolute;
left: 30px;
top: 360px;
}
p:nth-child(3) {
position: absolute;
let:30px;
top: 465px;
}
p a:hover {
color: yellow;
font-size: 2em;
}