1
В настоящее время я кодирую сайт для своей дизайнерской бумаги в uni. Я почти закончил, но у меня проблемы с выравниванием по центру панели навигации.Навигационная панель не центрирована
Он не совпадает с центром страницы, как это делает текст и изображение, оно слишком далеко вправо. Как показано ниже:
Может кто-нибудь помочь мне решить эту проблему?
EDIT: Если кто-то может также помочь мне создать якорь для иконной части навигационной панели, которая была бы удивительным - я не знаю, что использовать <a name=#home> часть на
Вот HTML:
<!DOCTYPE html>
<html>
<head>
<title>S Gard</title>
<link rel="stylesheet" type="text/css" href="stylesheet2.css" />
<link rel="icon" type="image/png" href="favicon.ico" />
</head>
<body style="position:absolute; height:100%;">
<br />
<header>
<nav>
<ul>
<li><a href="#about"><h2>ABOUT ME</h2></a></li>
<li><a href="#home"><img src="ICON.jpg" width="60%" height="60%"></a></li>
<li><a href="#portfolio"><h2>PORTFOLIO</h2></a></li>
</ul>
</nav>
</header>
<br /><br /><br /><br /><br /> <br />
<div class="section1">
<div class="center">
<a name="#home"><img src="mainImage2.jpg" width="55%" height="55%" ></a>
<br /><br />
<div class="scroll">
<a href="#about"><img src="scrollArrow.png" width="5%" height="5%"></a>
</div>
</div>
</div>
<br />
<div class="about">
<a name="about"><br /><br /><br /><br /><br /><br /><br /></a>
<h2>ABOUT ME</h2>
<p class="para">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris et nibh vel erat efficitur egestas. Nullam ac urna id arcu posuere egestas. Praesent est magna, fringilla nec bibendum et, pellentesque eu mi. Nulla quis volutpat nisi, bibendum vulputate nisl. Donec porta odio eget velit dignissim vulputate. Nulla vitae sodales quam. Phasellus vulputate purus eu purus lobortis commodo.
Nulla pulvinar arcu a tempus maximus. Vestibulum eleifend, augue vel iaculis interdum, nisi ante lacinia tortor, ac porttitor nunc turpis eu ante. Aliquam et nisl et ex rhoncus vulputate sit amet eu dolor. Nunc risus elit, pulvinar nec sapien id, tincidunt dictum diam. Vestibulum gravida a metus non vehicula. Pellentesque in euismod dui, id consectetur nulla. Nunc libero ligula, pretium id orci et, pellentesque vestibulum dolor.
</p>
<div class="scroll">
<a href="#portfolio"><img src="scrollArrow.png" width="5%" height="5%"></a>
</div>
</div>
<div class="portfolio">
<a name="portfolio"><br /><br /><br /><br /><br /><br /><br /></a>
<h2>PORTFOLIO</h2>
<p class="para">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris et nibh vel erat efficitur egestas. Nullam ac urna id arcu posuere egestas. Praesent est magna, fringilla nec bibendum et, pellentesque eu mi. Nulla quis volutpat nisi, bibendum vulputate nisl. Donec porta odio eget velit dignissim vulputate. Nulla vitae sodales quam. Phasellus vulputate purus eu purus lobortis commodo.
Nulla pulvinar arcu a tempus maximus. Vestibulum eleifend, augue vel iaculis interdum, nisi ante lacinia tortor, ac porttitor nunc turpis eu ante. Aliquam et nisl et ex rhoncus vulputate sit amet eu dolor. Nunc risus elit, pulvinar nec sapien id, tincidunt dictum diam. Vestibulum gravida a metus non vehicula. Pellentesque in euismod dui, id consectetur nulla. Nunc libero ligula, pretium id orci et, pellentesque vestibulum dolor.
</p>
</div>
</body>
</html>
И CSS:
html{
background-color: white;
}
h1 {
color: black;
/*opacity: 0.7;*/
font-weight: 300;
font-family: 'Lato', sans-serif;
}
h2 {
color: black;
/*opacity: 0.7;*/
font-weight: 300;
font-family: 'Lato', sans-serif;
}
header{
position: fixed;
width: 100%;
top: 0;
z-index: 999;
text-align: center;
}
header nav ul {
background-color: rgb(255, 255, 255);
text-align: center;
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
}
header nav ul li {
display: inline-block;
text-align: center;
}
header nav a:link, a:visited {
display: block;
width: 200px;
font-weight: bold;
color: #FFFFFF;
text-align: center;
padding: 4px;
text-decoration: none;
text-transform: uppercase;
}
header img{
vertical-align: middle;
}
header nav a:hover, a:active {
opacity: 0.4;
}
.section1{
width: 100%;
height: 100%;
position:relative;
}
.center{
text-align: center;
}
.scroll a:hover, a:active {
opacity: 0.4;
}
div.about{
position:relative;
text-align: center;
width: 100%;
height: 100%;
}
p.para{
text-align: center;
width:100%;
font-family: 'Lato', sans-serif;
font-weight: 300;
}
div.portfolio{
position: relative;
text-align: center;
width: 100%;
height: 100%;
}
вы можете повторить ваш проект в jsfiddle? проще для разработчиков решить вашу проблему – coderVishal
уверенная вещь, изображения не отображаются, хотя https://jsfiddle.net/mnvs75ks/ – gardsa
что это не центрируется? – coderVishal