This question already has answers here:
How wide is the default `<body>` margin?
(4 answers)
Does UL have default margin or padding [duplicate]
(2 answers)
Closed 1 year ago.
I am trying to create a Portfolio, I am new to HTML and CSS. I am trying to get the top navigation bar, to be all black. But around the navigation bar, it shows the html's tag background color.
Image:
As you can see, well it's a little hard to see here, but around the navigation bar, it shows the background color, how do I turn it black? (Click on the image to see it better)
Code:
<!DOCTYPE html>
<html style="background-color: #111;">
<head>
<title>My Portfolio</title>
<style type="text/css">
h6 {
font-weight: light;
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: black;
position: sticky;
}
ul li img {
width: 2vw;
height: 2vw;
}
li {
float: left;
}
li a {
display: block;
color: grey;
text-align: center;
padding: .4vw .5vw;
text-decoration: none;
}
li a:hover {
background-color: #111;
}
#navigation-bar {
background-color: black;
color: grey;
font-weight: bold;
font-family: monospace;
font-size: 1.2vw;
}
#main-page {
background-color: #111;
color: white;
}
.header {
background-color: #111;
color: white;
text-align: center;
font-weight: bold;
font-family: cursive;
font-size: 2.5vw;
}
.sub-header {
background-color: #111;
color: white;
text-align: center;
font-weight: normal;
font-family: cursive;
font-size: 1.7vw;
}
.sub-header th{
padding-left: 1vw;
padding-right: 1vw;
}
.sub-header-two {
background-color: #111;
color: white;
text-align: center;
font-weight: normal;
font-family: cursive;
font-size: 1.1vw;
}
#copyright {
background-color: #111;
color: white;
text-align: left;
position: absolute;
bottom: .5vw;
font-weight: light;
font-family: sans;
font-size: .7vw;
}
</style>
</head>
<body>
<div id="navigation-bar">
<ul>
<li><img src="https://cdn.discordapp.com/avatars/471009727602491405/1205d2f887ec380308940bb54b593d60.webp?size=128" height="50px" width="50px"></li>
<li>Home</li>
<li>About Me</li>
<li>Languages</li>
<li>Previous Work</li>
<li style="float: right;">An Amazing Website </li>
</ul>
</div>
<div id="main-page">
<h1 class="header">Welcome to my Portfolio</h1>
<table align="center" >
<tr class="sub-header">
<th>What can I do here?</th>
<th>How can I get in contact?</th>
<th>Where can I support?</th>
</tr>
<tr class="sub-header-two">
<td><br><br>Here you can look around, or learn<br>about me! You can find info like<br>what languages I know, my previous<br>work, etc.</td>
<td>You can get in contact with me on<br>discord # killrebeest#4357</td>
<td>Just Support by supporting me, like<br>a supporter</td>
</tr>
</table>
</div>
<div id="copyright">
(C)Copyright 2022 All Rights Reserved
</div>
</body>
</html>
Add this styling
body, li {
margin: 0;
}
Explanation: It has a margin on body on top. Because of this, your nav bar is a little bit near to bottom. When you do this, you remove a default margin from top.
Also I added li because, It has also default margin on it.
Related
I want to create a navbar with a drop-down menu but my drop-down menu is overlapping main menu. I want to put dropdown menu under main menu. How can i move drop-down with div tag slight down side to match with ending of main menu.
later i'll hide it and make it available only when hover on main menu option.
<!DOCTYPE html>
<html>
<head>
<title>GTU Students-Care</title>
<meta name="viewport" content="width= device-width, initial-scale=1.0">
<link href="https://fonts.googleapis.com/css?
family=Assistant|Barlow|Dosis|Gothic+A1|Monoton|Open+Sans|Roboto" rel="stylesheet">
<style type="text/css">
header {
background-color: #5495ff;
color: white;
padding: 35px;
}
#gtu-header-home {
text-align: center;
font-weight: lighter;
font-size: 3.5em;
font-family:'Barlow', sans-serif;
text-shadow: -1px 0px blue, 0px 1px blue, 1px 0px blue, 0px -1px blue;
}
#gtu-header-detail {
text-align: center;
font-family: 'Roboto', sans-serif;
font-size: 25px;
}
#footer-copyright {
text-align: center;
font-size: 20px;
font-family: 'Barlow', sans-serif;
}
footer {
background-color: #9baac4;
padding: 25px;
}
ul.navbar {
list-style-type: none;
margin: 0px;
padding: 0px;
background-color: gray;
}
.navbar a{
text-decoration: none;
display: block;
color: white;
padding: 10px;
}
.navbar li{
font-size: 26px;
font-family: 'Barlow', sans-serif;
display: inline-block;
padding: 10px;
}
#innerlist-1, #innerlist-2 {
background-color: white;
position: absolute;
min-width: 3cm;
}
.innerlist a{
color: gray;
padding: 0px;
}
</style>
</head>
<body>
<header>
<h1 id="gtu-header-home">GTU Students Care</h1>
<p id="gtu-header-detail">Tutorials | Question papers | Solution</p>
</header>
<ul class="navbar">
<li>Semester
<div id="innerlist-1" class="innerlist">
First
Second
Third
</div>
</li>
<li>Branch
<div id="innerlist-2" class="innerlist">
Computer
Electronics
Civil
</div>
</li>
</ul>
<footer>
<div>
<p id="footer-copyright">Copyright# GTU Students Care</p>
</div>
</footer>
</body>
</html>
I fixed your code and dropdown show on hover. I think this will help you
header {
background-color: #5495ff;
color: white;
padding: 35px;
}
#gtu-header-home {
text-align: center;
font-weight: lighter;
font-size: 3.5em;
font-family:'Barlow', sans-serif;
text-shadow: -1px 0px blue, 0px 1px blue, 1px 0px blue, 0px -1px blue;
}
#gtu-header-detail {
text-align: center;
font-family: 'Roboto', sans-serif;
font-size: 25px;
}
#footer-copyright {
text-align: center;
font-size: 20px;
font-family: 'Barlow', sans-serif;
}
footer {
background-color: #9baac4;
padding: 25px;
}
ul.navbar {
list-style-type: none;
margin: 0px;
padding: 0px;
background-color: gray;
}
.navbar a{
text-decoration: none;
display: block;
color: white;
padding: 20px;
}
.navbar li{
font-size: 26px;
font-family: 'Barlow', sans-serif;
display: inline-block;
}
#innerlist-1, #innerlist-2 {
background-color: white;
position: absolute;
min-width: 3cm;
}
.innerlist{
display:none;
}
.navbar > li:hover .innerlist{
display:block;
}
.innerlist a{
color: gray;
padding: 0px;
}
<header>
<h1 id="gtu-header-home">GTU Students Care</h1>
<p id="gtu-header-detail">Tutorials | Question papers | Solution</p>
</header>
<ul class="navbar">
<li>Semester
<div id="innerlist-1" class="innerlist">
First
Second
Third
</div>
</li>
<li>Branch
<div id="innerlist-2" class="innerlist">
Computer
Electronics
Civil
</div>
</li>
</ul>
<footer>
<div>
<p id="footer-copyright">Copyright# GTU Students Care</p>
</div>
</footer>
I am trying to center my H1 and nav by using text-align: center; although when I do this my nav is not reaching the center and is not under my h1 as I want it to be. Currently my nav does not reach under my H1 and is too far to the left, what do I need to add to my nav to be able to center it correctly under my H1.
* {
padding: 0px;
margin: 0px;
}
body {
background-color: #ededed;
font-family: sans-serif;
}
.main-h1 {
font-weight: 900;
text-align: center;
font-size: 70px;
padding-top: 20px;
}
.mobile-nav>ul {
list-style: none;
text-align: center;
}
.mobile-nav>ul>li {
display: inline-block;
font-size: 45px;
padding: 20px;
}
.mobile-nav>ul>li>a {
text-decoration: none;
color: black;
font-weight: lighter;
}
.mobile-nav>ul>li>a:hover {
opacity: .5;
transition: .3s;
}
<h1 class="main-h1">Main</h1>
<nav class="mobile-nav">
<ul>
<li>Home</li>
<li>About</li>
<li>Contact</li>
</ul>
</nav>
problem is that your h1 and nav are correctly centred in the page.
Your design are not, so if you want the same result as your design, you gonna need to add a margin, for example :
.mobile-nav>ul>li:first-child {
margin-left: 22px;
}
but i don't really recommend it
I recommend you to set width for the li elements
.mobile-nav>ul>li {
display: inline-block;
font-size: 45px;
padding: 20px;
**width: 100px;**
}
so text-align: center is inherited from ul
here is the code
http://plnkr.co/edit/88Dy8v9AzB5uMSpiiVfR?p=preview
I'm having another issue. I can't figure where the issue is. I had added a border around my menu items. Everything was working fine until I added a logo. I believe the issue is with my .Main-Nav li a:hover. in my CSS. I'll post everything and see if you guys can figure it out. I would also like to know if I need to make a different file for every page on my website
* {
margin: 0PX;
padding: 0PX;
}
header {
background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url(https://static.pexels.com/photos/371794/pexels-photo-371794.jpeg);
height: 100vh;
background-size: cover;
background-position: center;
}
.main-nav {
float: right;
list-style: none;
margin-top: 30px;
}
.main-nav li {
display: inline-block;
}
.main-nav li a {
color: white;
text-decoration: none;
padding: 5px 20px;
font-family: "roboto", sans-serif;
font-size: 15px;
}
.main-nav li.active a {
border: 1px solid white;
}
.main-nav li a:hover {
border: 1px solid white;
}
.logo img {
width: 200px;
height: auto;
float: left;
}
body {
font-family: monospace;
}
.row {
max-width: 1200px;
margin: auto;
}
.hello {
position: absolute;
width: 1200px;
margin-left: 0px;
margin-top: 0px;
}
h1 {
color: white;
text-text-transform: uppercase;
font-size: 70px;
text-align: center;
margin-top: 275px;
}
.button {
margin-top: 30px;
margin-left: 440px;
}
.btn {
border: 1px solid white;
padding: 10px 30px;
color: white;
text-decoration: none;
margin-right: 5px;
font-size: 13px;
text-transform: uppercase;
}
.btn-one {
background-color: darkorange;
font-family: "roboto", sans-serif;
}
.btn-two {
font-family: "roboto", sans-serif;
}
.btn-two:hover {
background-color: darkorange;
transition: all 0.5s ease-in;
}
<HTML>
<Head>
<title> Drew's Blog</title>
<link href="style.css" rel="stylesheet" type "text/css" </head>
<body>
<header>
<div class="row">
<div class="logo">
<img src="https://upload.wikimedia.org/wikipedia/commons/3/3a/Oh-deer.png">
</div>
<ul class="main-nav">
<li class="active"> HOME </li>
<li> ABOUT </li>
<li> GALLERY </li>
<li> NEWS </li>
<li> CONTACT </li>
<li> LESSONS </li>
</ul>
</div>
<div class="Hello">
<h1> Lets Get Started</h1>
<div class="button">
Get to Know Me
Check out my lessons
</div>
</header>
</body>
</html>
`
In
.main-nav li a {
color: white;
text-decoration: none;
padding: 5px 20px;
font-family: "roboto", sans-serif;
font-size: 15px;
}
Add a:
border: 2px solid white;
This will put a border around your menu items that are put in the <li> tag
Look in the active class for the border:
.main-nav li.active a {
border: 2px solid white;
}
That's for the HOME button, because it's class is active (class="active">) and it already had a border
I changed the pixels so I can see the results, but the problem is exactly that: The pixels. If your hover pixels and li pixels are the same, you won't see any change
This should add a border to your menu items and change when you hover over them with the mouse.
Also, the
.main-nav li a:hover
does the exact opposite. When you define a border here and you HOVER OVER A MENU ITEM, a border will APPEAR, so basically try to balance the pixels out.
And I'm trying to figure out what exactly you want. Do you want borders to always be there and when you hover over them you want them to disappear or do you want borders to appear when you hover over them.
I was just continuing with making this website and all of a sudden some of my navbar padding goes 'missing' and I can't seem to pinpoint the mistake. I've already played the detective game and commented out some of the stuff I thought was interfering. Luckily I have an original picture before the screw-up and one after. Some of the 'paragraph text' will be 'placeheld' for personal reasons and I think it's irrelevant, unless it's needed in order to fix the problem.
-Thanks.
Before and after picture: http://imgur.com/a/ts1FS
Code:
CSS:
body {
background-color: #1a1a1a;
color: #ccad00;
line-height: 1.9;
font-size: 19px;
}
p.desc{
text-indent: 50px;
}
h1 {
font-family: courier;
color: #ccad00;
}
h2 {
font-family: courier;
color: #ccad00;
text-align: center;
}
#divtitle {
width: 50%;
margin:auto;
padding-top: 50px;
text-align: center;
}
h2
{
font-family:courier;
color: #99cc00;
}
p {
line-height: 1.9
text-size: 19px;
}
#nav {
list-style: none;
font-weight: bold;
margin-bottom: 10px;
width: 100%;
text-align: center;
background-color: #ccad00;
height:40px;
}
#nav ul {
list-style-type: none;
margin: 0px;
padding: 0;
}
#nav li {
margin: 0px;
}
#nav li a {
padding: 10px;
text-decoration: none;
font-weight: bold;
color: #f2f2f2;
background-color: #ccad00;
float: left
}
#nav li a:hover {
color: #0d0d0d;
background-color: #35af3b;
}
.button {
background-color: #ffa600;
border: none;
color: #998200;
padding: 15px 32px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 40px;
font-family: courier;
margin: 4px 2px;
-webkit-transition-duration: 0.4s; /* Safari */
transition-duration: 0.4s;
cursor: pointer;
}
.button:hover {
background-color: white;
color: #998200;
}
div#containerbttn {
width: 800px;
height: 100px;
margin: auto;
background-color: green;
}
ul.square{
list-style-type: square;
}
.center {
text-align: center;
}
html:
<div id="nav">
<ul>
<li>Home
</li>
<li>Center
</li>
<li>Rules
</li>
<li>References
</li>
<li>Rankings
</ul>
</div>
<div>
<div id="divtitle" >
<h1> text </h1>
</div> -->
<div id="containerbttn">
<button class="button">GET STARTED!</button>
<button class="button">FAQ</button>
<button class="button">RANKINGS</button>
</div>
<h2> Synopsis: </h2>
<div class="center">
<p class="desc"> Welcome to ***!. This is a free...
<ul class="square">
<li> some text </li>
<li> some text </li>
</ul>
<p class="desc" > text </p>
</div>
</html>
Your problem exists because you have set the height of the #nav element to 40 px. When you add the padding to your a element, you make it larger than the ul element. This can be solved easily by updating two lines of code.
First, remove from css:
#nav{ height:40px; }
Then, add to html after ul but before closing the nav div:
<div style="clear:both;"></div>
Here is a jsfiddle of your working page: https://jsfiddle.net/8o279n5r/
And here is a great answer on what the clear property does: What does the CSS rule clear: both do?
I'm trying to have some links align at the bottom of their containing element. I added vertical-align text-bottom to the containing element. I get nothing.
Here is the contents in the main html file.
<div class="mainHeader">
<li><a class="mainHeaderLink" href="book.html">BOOK A ROOM</a></li>
<li><a class="mainHeaderLink" href="promotions.html">PROMOTIONS</a></li>
<li><a class="mainHeaderLink" href="meetings.html">MEETINGS & EVENTS</a></li>
<li><a class="mainHeaderLink" href="about.html">ABOUT STIL</a></li>
</div>
Here is my css file. (the css works, just not the align property)
#charset "UTF-8";
/* CSS Document */
body
{
margin-left: 0px;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
}
div.mainHeader
{
background-color: #006;
background: solid;
height:100px;
text-align: center;
vertical-align: text-bottom;
}
a.mainHeaderLink:link
{
text-decoration: none;
font-weight: bold;
color: #FFF;
font-size: 16px;
font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
}
a.mainHeaderLink:visited
{
text-decoration: none;
font-weight: bold;
color: #FFF;
font-size: 16px;
}
a.mainHeaderLink: active
{
text-decoration: none;
font-weight: bold;
color: #CCC;
font-size: 16px;
}
a.mainHeaderLink:hover
{
text-decoration: none;
font-weight: bold;
color: #CCC;
font-size: 16px;
}
li
{
display:inline;
margin-left: 50px;
}
It's not valid to have <li> without a <ul> parent. Fix that.
Additionally, I would just add a couple of simple styles to get it to "align" to the bottom rather than mess around with vertical-align, which I believe to be cursed.
.mainHeader {
position: relative;
}
.mainHeader ul {
position: absolute;
bottom: 0;
}
http://jsfiddle.net/d3SFz/
As others have said, put your <li> items inside a <ul> tag. Given the css above you can 'center' your menu items with this change to your css:
li
{
display:inline-block;
margin-left: 50px;
margin-top:37px;
}
check it out here