Issue
index.html
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="/main_page.css">
</head>
<body>
<nav>
<ul class="navbar-container center">
<a id="home-menu-block" href="" class="navbar-logo">
<img src="resources/images/logo2.png" alt="hi-site.kr" id="navbar-logo-image">
</a>
<div class="center">
<li id="school-info-menu-block" class="navbar-block"><a href= "school-info" class="navbar-content">School Info</a></li>
<li id="community-menu-block" class="navbar-block"><a href="/community" class="navbar-content">Community</a></li>
<li id="school-notice-menu-block" class="navbar-block"><a href="/school-notice" class="navbar-content">School notice</a></li>
</div>
<div class="right">
<li id="account-menu-block" class="navbar-block"><a href="/account" class="navbar-content">Account</a></li>
</div>
</ul>
</nav>
<section>
</section>
<footer>
</footer>
</body>
</html>
main_page.css
ul.navbar-container{
width:70%;
display:block;
list-style-type: none;
padding:0;
border-bottom:#111;
margin-top: 50px;
}
.center{
margin-top:50px;
position: absolute;
left: 50%;
transform: translate(-50%, -50%);
}
.right{
margin-top:50px;
position: absolute;
right:0%;
transform: translate(-50%, -50%);
}
.navbar-logo{
float:left;
}
#navbar-logo-image{
width:100px;
height:100px;
-webkit-user-select: none;
user-select: none;
}
li.navbar-block {
float: left;
border:0px;
}
.navbar-content{
padding: 10px 12px;
display: inline-block;
text-align: center;
color: black;
text-decoration: none;
-webkit-user-select: none;
user-select: none;
}
.navbar-content:hover, .navbar-content-activated {
background-color: yellow;
}
#account-menu-block{
border:2px solid black;
}
If I put something into section, that is placed in top of screen, because the nav's height is zero. But the only child of nav element, ul's height is not zero and its display is block. Why nav doesn't expand?
Solution
Here is your layout reworked without absolute positioning. As far as we can tell, you don’t need it to achieve the layout you are after.
body {
margin: 1em;
}
header {
margin: 0 15vw;
display: flex;
gap: 1em;
justify-content: space-between;
align-items: center;
border-bottom: 1px solid #888;
padding-bottom: 1em;
}
.logo img {
display: inline-block;
width: 100px;
height: 100px;
object-fit: contain;
}
nav a, header>*:last-child {
padding: 10px 12px;
display: inline-block;
color: inherit;
text-decoration: none;
}
nav a:hover, header>*:last-child:hover {
background-color: yellow;
}
header>*:last-child {
border: 2px solid black;
}<header>
<a href="/" class="logo">
<img src="http://picsum.photos/100">
</a>
<nav>
<a href= "school-info">School Info</a>
<a href="/community">Community</a>
<a href="/school-notice">School notice</a>
</nav>
<a href="/account">Account</a>
</header>
<section>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas tempor nunc mauris, sit amet placerat tortor lobortis dapibus. Nam lectus eros, maximus ac magna vel, congue consequat eros. Fusce id pretium diam. Cras sit amet pharetra ante. Sed quis commodo quam, vel facilisis ipsum. Vestibulum sodales iaculis arcu, et fringilla nisi ullamcorper sed. Donec interdum sit amet est non accumsan. Donec non augue feugiat, fermentum nunc non, convallis est. Cras vel ligula nec odio faucibus ultricies. Sed vulputate tortor eget pretium convallis. Cras interdum elit eget mi porta suscipit. Morbi ut velit diam. Etiam finibus eros et efficitur rutrum. Quisque viverra metus ac eleifend imperdiet. Quisque pretium ut purus vitae tempus. Duis varius risus congue velit faucibus, sed interdum purus consectetur.</p>
</section>Answered By - Brett Donald
0 comments:
Post a Comment
Note: Only a member of this blog may post a comment.