I'm really new to html and css. I have an assignment to create a portfolio website. I've coded the header using display: inline;, as well as display: inline-block;. I've used percentage values for sizing margins, as well as widths. I have an issue with the resizing of the window. When I shrink the window, the navbar and header reposition themselves.
Here are the html and css code:
* {
box-sizing: border-box;
}
body {
margin: 0;
background-color: black;
font-family: "Lucida Sans", "Lucida Sans Regular", "Lucida Grande", "Lucida Sans Unicode", Geneva, Verdana, sans-serif;
font-weight: 100;
position: center;
}
h1,
p {
color: white;
word-wrap: break-word;
}
/*---------------------------------------HEADER STYLE BELOW---------------------------*/
header {
width: 100%;
height: 4%;
}
.container-header {
width: 100%;
margin: 1% 1% 1% 1%;
height: 50%;
padding: 0.1%;
}
.name-strap {
display: inline-block;
vertical-align: center;
margin-left: 1% 1% 1% 1%;
}
a:link {
color: white;
}
a:visited {
color: white;
}
a:hover {
color: white;
border-bottom: white 1px solid;
}
a:active {
color: white;
}
nav {
display: inline-block;
vertical-align: center;
width: 30%;
margin: 0.5% 0.5% 0.5% 50%;
height: 20%;
justify-content: right;
}
ul {
width: 80%;
text-align: right;
margin-left: 15%;
}
li {
list-style: none;
display: inline;
word-spacing: 50%;
}
ul a {
text-decoration: none;
}
/*---------------------------------------PAGE CONTENT STYLE BELOW---------------------------*/
.wrapper {
margin: 10% 10% 10% 10%;
width: 1200px;
}
.index-section {
margin: 10% 10% 10% 40%;
width: 40%;
padding: 20px;
}
.contact-section {
margin: 200px 0 0 50px;
}
.about-section {
margin: 200px 0 0 50px;
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>MY NAME Portfolio</title>
<link href="style.css" rel="stylesheet" type="text/css" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/normalize/8.0.1/normalize.min.css" rel="stylesheet" type="text/css" />
</head>
<body>
<header>
<div >
<h1 >MY NAME</h1>
<nav>
<ul>
<li><a href="index.html">Home</a> </li>
<li><a href="about.html">About</a></li>
<li><a href="contact.html">Contact</a></li>
</ul>
</nav>
</div>
</header>
<main >
<section >
<h1>
Hello! I'm MY NAME.
</h1>
<article>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla id neque feugiat lectus pulvinar varius et eget lorem. Suspendisse potenti. Nulla facilisi. Etiam nec dolor sit amet sem tempus ultrices. Vestibulum feugiat magna tellus, a vulputate quam
lobortis non. Vivamus ut massa in velit aliquet ultrices. Fusce vel massa id nunc euismod dignissim. Nunc ipsum diam, placerat sed ligula et, sodales convallis diam. Maecenas sit amet convallis lacus, eget venenatis ligula. Nulla facilisi. Vivamus
vitae tempus lorem. Praesent finibus, elit imperdiet volutpat elementum, erat nulla mattis velit, tincidunt porttitor tortor felis vel nisl. Mauris quam ex, sollicitudin ut dolor et, dignissim accumsan elit. Aliquam dignissim lacus enim, non
imperdiet purus efficitur non.
</p>
</article>
</section>
</main>
<script src="script.js"></script>
</body>
</html>CodePudding user response：
There are better ways to layout than using block and inline-block. You can use flexbox. For your units instead of using percentage if you want your elements to resize in according to screen size then you can use vw which is relative to 1% of the width of the viewport. See the snippet below:
* {
box-sizing: border-box;
padding: 0;
margin: 0;
}
body {
margin: 0;
background-color: black;
font-family: "Lucida Sans", "Lucida Sans Regular", "Lucida Grande", "Lucida Sans Unicode", Geneva, Verdana, sans-serif;
font-weight: 100;
position: center;
width: 100vw;
}
h1,
p {
color: white;
word-wrap: break-word;
}
/*---------------------------------------HEADER STYLE BELOW---------------------------*/
header {
width: 100vw;
height: 4%;
}
.container-header {
display: flex;
align-items: center;
justify-content: space-around;
width: 100vw;
height: 50%;
}
a:link {
color: white;
}
a:visited {
color: white;
}
a:hover {
color: white;
border-bottom: white 1px solid;
}
a:active {
color: white;
}
nav {
display: flex;
justify-content: right;
}
nav ul {
display: flex;
gap: 1rem;
}
ul a {
text-decoration: none;
}
/*---------------------------------------PAGE CONTENT STYLE BELOW---------------------------*/
.wrapper {
width: 100vw;
display: flex;
justify-content: center;
align-items: center;
}
.index-section {
width: 40vw;
padding: 20px;
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>MY NAME Portfolio</title>
<link href="style.css" rel="stylesheet" type="text/css" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/normalize/8.0.1/normalize.min.css" rel="stylesheet" type="text/css" />
</head>
<body>
<header>
<div >
<h1 >MY NAME</h1>
<nav>
<ul>
<li><a href="index.html">Home</a> </li>
<li><a href="about.html">About</a></li>
<li><a href="contact.html">Contact</a></li>
</ul>
</nav>
</div>
</header>
<main >
<section >
<h1>
Hello! I'm MY NAME.
</h1>
<article>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla id neque feugiat lectus pulvinar varius et eget lorem. Suspendisse potenti. Nulla facilisi. Etiam nec dolor sit amet sem tempus ultrices. Vestibulum feugiat magna tellus, a vulputate quam
lobortis non. Vivamus ut massa in velit aliquet ultrices. Fusce vel massa id nunc euismod dignissim. Nunc ipsum diam, placerat sed ligula et, sodales convallis diam. Maecenas sit amet convallis lacus, eget venenatis ligula. Nulla facilisi. Vivamus
vitae tempus lorem. Praesent finibus, elit imperdiet volutpat elementum, erat nulla mattis velit, tincidunt porttitor tortor felis vel nisl. Mauris quam ex, sollicitudin ut dolor et, dignissim accumsan elit. Aliquam dignissim lacus enim, non
imperdiet purus efficitur non.
</p>
</article>
</section>
</main>
<script src="script.js"></script>
</body>
</html>