+ 1
Need help related to Navigation bar in Html
Ayee ,so I was trying to make a navigation bar I added Everything correctly padding as well as margin but it looks like https://imgur.com/a/91Slpe3 & even I tried to add padding or margin to <ul></ul> tag but it just make the box + background more Bigger and bigger Link of css code:- 1] https://imgur.com/a/lQgNKDv 2] https://imgur.com/a/9SxFVaX Thanks in Advance đ„
8 Answers
+ 1
Try with paddding 0
And margin as desired.
By the can I see images in Imgur images even if I have not signed in there.you picture didn't open there.
+ 1
I have just added display:inline; to #navhar h1
And comment that h1 h2 h3{...}
as I saw no h2 and h3 here .
you can specify height of some tags for better result.
https://code.sololearn.com/WseQ35b7lb8d/?ref=app
+ 1
Line height set the baseline for text in line
If a text is bigger and other is smaller both will be same line.
Due to different size they will not vertically centers.
Ex-
X_____x
Both are of different size but base line is same for both.
0
Divya Mohan when I keep padding to 0; Home About Contact goes to the downside & if I Increased margin keeping padding to 0 ,the background colour as well as box size increases
& Imgur links can be seen without sign in.
0
I think you should share your code here if you can..
0
Html
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="Welcome to the sushi Blog">
<meta name="keywords" content="blog,best blog,writer">
<link rel="stylesheet" href="css/style.css">
<title>Sushi Blog | Best Blog</title>
</head>
<body>
<header>
<nav id="navbar">
<div class="container">
<h1><a href="index.html">Sushi</a></h1>
<ul>
<li><a class="current" href="index.html">Home</a></li>
<li><a href="about.html">About</a></li>
<li><a href="contact.html">Contact</a></li>
<li><a href="signup.html">Sign up</a></li>
<li><a href="login.html">Log in</a></li>
</ul>
</div>
</nav>
</header>
</body>
</html>
0
Css
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
/* Utlity */
.container {
margin: auto;
max-width: 1100px;
overflow: auto;
}
/* Main Style */
body {
font-family: monospace;
line-height: 1.7em;
}
#navbar {
background-color: #dab8f7;
overflow: auto;
}
h1 h2 h3 {
padding-bottom: 20px;
}
.navbar-logo {
float: left;
}
#navbar h1 {
margin-top:50px;
padding: 10px;
text-align: center;
font-size: 50px;
border: solid 5px lightcoral;
border-radius: 10px;
width:162px;
overflow: hidden;
}
#navbar a {
text-decoration: none;
color: crimson;
font-weight: bold;
}
#navbar ul {
list-style: none;
float: right;
}
#navbar ul li {
float: left;
font-size: 20px;
}
#navbar ul li a {
display: block;
padding:20px;
text-align: center;
}
#navbar ul li a:hover,
#navbar ul li a.current {
background: black;
color: white;
Divya Mohan
0
Thanks Divya Mohan đ€đ»
Often have questions like this?
Learn more efficiently, for free:
Hot today
Someone can help me
2 Votes
What's wrong with this?
2 Votes
X velocity
0 Votes
HTML community, HELP!!
2 Votes
Files not linking in C++
0 Votes
I am a super beginner
0 Votes
Web Dev
0 Votes
How this program executes?
0 Votes