I have a school project to build a website. I'm trying to make the navbar and the header background different colors but it doesn't seem to reach the end of the page. I attached a screenshot where you can see that my headers background color(white and gray) didn't reach the end and you can still see the blue background. attaching my code aswell:
<body>
<div class="Headers">
<h1 style="margin-bottom:0px;">
COMPUTER GAMES REVIEW BY ASAF DAMTI
</h1>
<h2 id="secondheader">
Welcome to my site
</h2>
</div>
<div class="Menu">
<ul>
<li>
Home
</li>
<li>
Details
</li>
<li>
On Me
</li>
<li>
<div class="dropdown">
<button class="dropbtn">Links</button>
<div class="dropdown-content">
Csgo
Roblox
Minecraft
Valorant
</div>
</div>
</li>
<li>
Contact me
</li>
</ul>
</div>
</body>
</html>
this is the html
css is:
body {
background-color: darkcyan;
font-family: Calibri;
}
.Headers{
background-color:white;
}
#secondheader{
margin-top:0px;
margin-bottom:1px;
opacity:50%;
}
.Menu{
background-color:gray;
}
.Menu a{
background-color:gray;
font-size:20px;
padding:4px;
padding-right:15px;
text-decoration:none;
color:black;
}
.Menu a:visited{
color:black;
}
.Menu a:hover{
background-color:white;
}
.Menu ul{
margin-top:0px;
padding-left:0px;
}
.Menu li{
display:inline;
padding:5px;
}
.dropbtn {
background-color: gray;
border: none;
font-size: 20px;
padding: 5px;
padding-right: 15px;
}
.dropdown {
position: relative;
display: inline-block;
}
.dropdown-content{
display:none;
position:absolute;
background-color:white;
min-width:160px;
z-index:-1;
}
.dropdown-content a{
color: black;
padding: 5px;
text-decoration: none;
display: block;
}
.dropdown-content a:hover {
background-color: #ddd;
}
.dropdown:hover .dropdown-content {
display: block;
}
.dropdown:hover .dropbtn {
background-color: white;
}
Picture of the website
In most major browsers, the default margin is 8px on all sides.
So it is needed to override that margin CSS attribute to remove the space on the header.
body {
margin: 0;
}
Also h1 tag has got default margin-top and margin-bottom so you need to override that styles too.
<h1 style="margin-bottom:0px;margin-top: 0;">
COMPUTER GAMES REVIEW BY ASAF DAMTI
</h1>
body {
background-color: darkcyan;
font-family: Calibri;
margin: 0;
}
.Headers {
background-color: white;
}
#secondheader {
margin-top: 0px;
margin-bottom: 1px;
opacity: 50%;
}
.Menu {
background-color: gray;
}
.Menu a {
background-color: gray;
font-size: 20px;
padding: 4px;
padding-right: 15px;
text-decoration: none;
color: black;
}
.Menu a:visited {
color: black;
}
.Menu a:hover {
background-color: white;
}
.Menu ul {
margin-top: 0px;
padding-left: 0px;
}
.Menu li {
display: inline;
padding: 5px;
}
.dropbtn {
background-color: gray;
border: none;
font-size: 20px;
padding: 5px;
padding-right: 15px;
}
.dropdown {
position: relative;
display: inline-block;
}
.dropdown-content {
display: none;
position: absolute;
background-color: white;
min-width: 160px;
z-index: -1;
}
.dropdown-content a {
color: black;
padding: 5px;
text-decoration: none;
display: block;
}
.dropdown-content a:hover {
background-color: #ddd;
}
.dropdown:hover .dropdown-content {
display: block;
}
.dropdown:hover .dropbtn {
background-color: white;
}
<body>
<div class="Headers">
<h1 style="margin-bottom:0px;margin-top: 0;">
COMPUTER GAMES REVIEW BY ASAF DAMTI
</h1>
<h2 id="secondheader">
Welcome to my site
</h2>
</div>
<div class="Menu">
<ul>
<li>
Home
</li>
<li>
Details
</li>
<li>
On Me
</li>
<li>
<div class="dropdown">
<button class="dropbtn">Links</button>
<div class="dropdown-content">
Csgo
Roblox
Minecraft
Valorant
</div>
</div>
</li>
<li>
Contact me
</li>
</ul>
</div>
</body>
Make sure you add this to your style:
*
{
padding: 0%;
margin: 0%;
}
If you have any more questions, be sure to ask!
Have a great day :)
Related
I'm trying to create a clone of the google homepage as one of my first html/css projects. This is the first time I've ever coded and I'm having trouble with setting the background colour for one of the navigation bars at the bottom of the screen. I was able to set the background colour of the upper navigation bar (the one with the country name on it) but when I try to set the background colour for the lower navigation bar (the one with the Advertising and Business links) it doesn't show and the bar remains white.
This is my html code for the lower navigation bars
<footer class="bottom_nav">
<div class="country_nav">
<ul>
<li>Canada</li>
</ul>
</div>
<div class="bottom_nav_l">
<ul>
<li>Advertising</li>
<li>Business</li>
<li>How Search Works</li>
<ul>
</div>
<div class="bottom_nav_r">
<ul>
<li>Settings</li>
<li>Terms</li>
<li>Privacy</li>
</ul>
</div>
</footer>
This is my CSS
.country_nav {
background-color: #f2f2f2;
color: rgba(0,0,0,0.54);
border-top: 1px solid #e4e4e4;
padding-top: 10px;
padding-bottom: 10px;
padding-left: 25px;
}
.country_nav li {
font-size: 14px;
font-family: arial, sans-serif;
}
.bottom_nav_l li {
float: left;
margin: 10px;
font-size: 14px;
}
.bottom_nav_r li {
float: right;
margin: 10px;
font-size: 14px;
}
.bottom_nav_l li a {
display: block;
text-decoration: none;
color: rgba(0,0,0,0.54);
}
.bottom_nav_r li a {
display: block;
text-decoration: none;
color: rgba(0,0,0,0.54);
}
.bottom_nav_l li a:hover {
text-decoration: underline;
}
.bottom_nav_r li a:hover {
text-decoration: underline;
}
.bottom_nav_l {
padding-left: 15px;
background-color: #f2f2f2;
}
.bottom_nav_r {
padding-right: 15px;
background-color: #f2f2f2;
}
.bottom_nav {
padding-top: 170px;
}
And this is what the page looks like for reference. I want the lowest bar to be grey as well.
google homepage clone
Can anyone help me out?
You do not need to use ul li. You can wrap your bottom link in to div and use display: flex and justfify-content:space-between to have space between your link.
Also i have modified the a links to match exactly as google footer by adding padding and text-decoration:none
Exact copy of google footer in demo.
Working Demo: https://jsfiddle.net/kx291hqm/
Run snippet below.
.country_nav {
background-color: #f2f2f2;
color: rgba(0,0,0,0.54);
border: 1px solid #e4e4e4;
padding-top: 10px;
padding-bottom: 10px;
padding-left: 27px;
}
.bottom_nav_l li a {
display: block;
text-decoration: none;
}
.bottom_nav_r li a {
display: block;
text-decoration: none;
color: rgba(0,0,0,0.54);
}
.bottom_nav_l li a:hover {
text-decoration: underline;
}
.bottom_nav_r li a:hover {
text-decoration: underline;
}
.bottom_nav_r {
padding-right: 27px;
}
.bottom_nav {
padding-top: 170px;
}
.bottom_link {
display: flex;
justify-content: space-between;
line-height: 40px;
background: #f2f2f2;
}
a {
text-decoration: none;
white-space: nowrap;
color: #5f6368;
padding-left: 27px;
}
<footer class="bottom_nav">
<div class="country_nav">
Canada
</div>
<div class="bottom_link">
<div class="bottom_nav_l">
Advertising
Business
How Search Works
</div>
<div class="bottom_nav_r">
Settings
Terms
Privacy
</div>
</div>
</footer>
Try with adding following css:
.bottom_nav{
background-color:blue;
}
I hope this will help you..
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.country_nav {
background-color: #f2f2f2;
color: rgba(0,0,0,0.54);
border-top: 1px solid #ededed;
padding-top: -1px;
padding-bottom: 1px;
padding-left: 25px;
}
.country_nav li {
font-size: 14px;
font-family: arial, sans-serif;
margin-left: -10px;
}
section{
background-color: #ebebeb;
}
.bottom_nav_l li {
float: left;
margin: 10px;
font-size: 14px;
}
.bottom_nav_r li {
float: right;
margin: 10px;
font-size: 14px;
list-style-type: none;
}
.bottom_nav_l li a {
display: block;
margin-left: -10px;
text-decoration: none;
color: rgba(0,0,0,0.54);
}
ul {
list-style-type: none;
}
.bottom_nav_r li a {
display: block;
text-decoration: none;
color: rgba(0,0,0,0.54);
}
.bottom_nav_l li a:hover {
text-decoration: underline;
}
.bottom_nav_r li a:hover {
text-decoration: underline;
}
.bottom_nav_l {
padding-left: 15px;
background-color: #f2f2f2;
}
.bottom_nav_r {
padding-right: 15px;
background-color: #d7d7d7;
}
.bottom_nav {
padding-top: 0px;
position: relative;
top: 460px;
}
</style>
</head>
<body>
<footer class="bottom_nav">
<div class="country_nav">
<ul>
<li>Canada</li>
</ul>
</div>
<section>
<div class="bottom_nav_l">
<ul>
<li>Advertising</li>
<li>Business</li>
<li>How Search Works</li>
<ul>
</div>
<div class="bottom_nav_r">
<ul>
<li>Settings</li>
<li>Terms</li>
<li>Privacy</li>
</ul>
</div>
</section>
</footer>
</body>
</html>
I'm a little new to HTML as my classes has recently started and etc. In our task we have to hand in a website that has different characteristics, one of them being a drop down menu.
I managed to almost get it all working, but when I tried to hover my mouse over one of the navigation menu tags, the drop down menu is a little bit to the left like it would be as a listing object?
Here is how it shows up
This is how it looks when I hover over About
I have no idea what I'm doing wrong! I tried to do some research where I ended up centering my navigation menu, but that was all I managed to do! What do I have to do to make it be aligned with the "About" tag?
p {
font-size: 44px;
color: white;
font-family: verdana;
background-color: #333;
text-align: center;
}
p2 {
font-size: 12px;
color: white;
font-family: verdana;
}
body {
background-image: url(background.jpg);
}
div {
margin-left: 400px;
margin-right: 400px;
margin-top: 30px;
border: solid white 3px;
background-color: #333;
}
div2 {
margin-left: auto;
margin-right: auto;
width: 6em;
}
#nav {
text-align:center;
}
#nav ul {
display:inline-block;
}
#nav a {
float:left;
text-decoration:none;
padding:0 30px;
}
ul {
background-color: #333;
font-family: verdana;
}
ul li {
display: inline;
background-color: #333;
font-size: 24px;
height: 47px;
width: 200px;
line-height: 47px;
text-align: center;
float: left;
list-style: none;
}
ul li a {
color: white;
text-decoration: none;
display: block;
}
ul li a:hover {
background-color: white;
}
ul li a:active{
background-color: #333;
color: #333
}
ul li ul li {
display: none;
}
ul li:hover ul li{
display: block;
}
.active {
background-color: white;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="stylesheet.css">
<title>Sleepless hub</title>
</head>
<body>
<div> <!-- Denne er med for å kun skape en fin designer strek ;) -->
</div>
<div>
<p>There is nothing like a good nut </p>
</div>
<div> <!-- Samme her. -->
</div>
<div id="nav">
<ul>
<li> Home</li>
<li> About
<ul>
<li> <a href="#">Wikipedia</li>
</ul>
</li>
<li> Projects</li>
<li> Contact me</li>
<li> Fun Room</li>
</div>
<div>
<p>Okay</p>
</div>
</body>
</html>
Issue is because of padding you have for the child ul and anchor tag. If you remove those it will align properly. Try to add the classes to the child elements, as this is not the proper way to write the css.
p {
font-size: 44px;
color: white;
font-family: verdana;
background-color: #333;
text-align: center;
}
p2 {
font-size: 12px;
color: white;
font-family: verdana;
}
body {
background-image: url(background.jpg);
}
div {
margin-left: 400px;
margin-right: 400px;
margin-top: 30px;
border: solid white 3px;
background-color: #333;
}
div2 {
margin-left: auto;
margin-right: auto;
width: 6em;
}
#nav {
text-align:center;
}
#nav ul {
display:inline-block;
}
#nav a {
float:left;
text-decoration:none;
padding:0 30px;
}
ul {
background-color: #333;
font-family: verdana;
}
ul li {
display: inline;
background-color: #333;
font-size: 24px;
height: 47px;
width: 200px;
line-height: 47px;
text-align: center;
float: left;
list-style: none;
}
ul li a {
color: white;
text-decoration: none;
display: block;
}
ul li a:hover {
border: 1px solid red;
}
ul li a:active{
background-color: #333;
color: #333
}
ul li ul li {
display: none;
}
ul li ul{
padding-left: 0;
}
ul li:hover ul li{
display: block;
}
.active {
background-color: white;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="stylesheet.css">
<title>Sleepless hub</title>
</head>
<body>
<div> <!-- Denne er med for å kun skape en fin designer strek ;) -->
</div>
<div>
<p>There is nothing like a good nut </p>
</div>
<div> <!-- Samme her. -->
</div>
<div id="nav">
<ul>
<li> Home</li>
<li> About
<ul>
<li> <a href="#">Wikipedia</li>
</ul>
</li>
<li> Projects</li>
<li> Contact me</li>
<li> Fun Room</li>
</div>
<div>
<p>Okay</p>
</div>
</body>
</html>
I made a dropdown menu in css and I can't add space between the elements in the dropdown. They collapse.
There is the code: jsfiddle
There is the CSS part. I tried different things to fix it.
*
{
margin:0px;
}
html,body
{
height:100%;
}
.wrapper
{
height:100%;
min-height:100%;
height:auto !important;
margin:0 auto -50px;
}
.footer,.push
{
height:50px;
}
.footer
{
background-color:lightblue;
}
.footer center
{
vertical-align:middle;
}
.header
{
margin-top:10px;
height:150px;
}
#meniu li
{
padding:5px;
border:1px solid black;
border-radius:10px;
display:inline;
}
#meniu
{
margin-top:5px;
background-color:lightblue;
width:100%;
height:50px;
}
#meniu a
{
text-decoration:none;
}
.dropdown-content {
display: none;
position: absolute;
width:100%;
margin:0px;
}
.dropdown-content ul
{
height:100%;
width:100%;
position:relative;
list-style-type:none;
margin-top:20px;
left:-25%;
}
.dropdown-content li
{
position:relative;
}
.dropdown {
position: relative;
display: inline-block;
}
.dropdown:hover .dropdown-content {
display: block;
}
There is the the HTML:
<body>
<div class="wrapper">
<div class="header">
<div id="meniu">
<ul>
<li>PRIMA PAGINA</li>
<div class="dropdown"><li>FISIERELE MELE<div class="dropdown-content">
<ul>
<li>MENIUL MEU</li>
<li>PLANETE NOI</li>
</ul>
</div>
</div></li>
<li>MENIUL MEU</li>
<li>PLANETE NOI</li>
</ul>
</div>
</div>
<div class="push"></div>
</div>
<div class="footer"><center>Olimpiada Nationala de Tehnologia Informatiei si Comunicarii Buzau 2015</center></div>
I made a dropdown menu in css and I can't add space between the elements in the dropdown. They collapse.
They collapse because you have made them as inline elements. I think you meant inline-block, otherwise padding/margin would not render properly.
The correct code should be:
#meniu li {
⋮
display: inline-block; /* make `li` as inline-blocks */
margin-bottom: 10px; /* add spacing */
}
You also have some HTML syntax errors (extra li), please run it through a validator. My final result is:
* { margin: 0px; }
html, body { height: 100%; }
.wrapper {
height: 100%;
min-height: 100%;
height: auto !important;
margin: 0 auto -50px;
}
.footer, .push { height: 50px; }
.footer { background-color: lightblue; text-align: center; }
.header { margin-top: 10px; height: 150px; }
#meniu li {
padding: 5px;
border: 1px solid black;
border-radius: 10px;
display: inline-block;
margin-bottom: 10px;
}
#meniu {
margin-top: 5px;
background-color: lightblue;
width: 100%;
height: 50px;
}
#meniu a {
text-decoration: none;
}
.dropdown-content {
display: none;
position: absolute;
width: 100%;
margin: 0px;
}
.dropdown-content ul {
height: 100%;
width: 100%;
position: relative;
list-style-type: none;
margin-top: 20px;
left: -25%;
}
.dropdown-content li {
position: relative;
}
.dropdown {
position: relative;
display: inline-block;
}
.dropdown:hover .dropdown-content {
display: block;
}
<div class="wrapper">
<div class="header">
<div id="meniu">
<ul>
<li>PRIMA PAGINA</li>
<div class="dropdown">
<li>FISIERELE MELE
<div class="dropdown-content">
<ul>
<li>MENIUL MEU</li>
<li>PLANETE NOI</li>
</ul>
</div>
</div>
<li>MENIUL MEU</li>
<li>PLANETE NOI</li>
</ul>
</div>
</div>
<div class="push"></div>
</div>
<div class="footer">
Olimpiada Nationala de Tehnologia Informatiei si Comunicarii Buzau 2015
</div>
jsFiddle: https://jsfiddle.net/azizn/snL1gwsm/
Hope i understood your question correctly...
i made some drop-down bar for you.
you can add elements as you wants, take a look on the html file and the css it will help you understand what is going on.
take a look :)
.dropbtn {
background-color: #4CAF50;
color: white;
padding: 16px;
font-size: 16px;
border: none;
cursor: pointer;
}
.dropdown {
position: relative;
display: inline-block;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #f9f9f9;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
}
.dropdown-content a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
}
.dropdown-content a:hover {background-color:lightblue}
.dropdown:hover .dropdown-content {
display: block;
}
.dropdown:hover .dropbtn {
background-color: #3e8e41;
}
<div class="dropdown">
<button class="dropbtn">Dropdown</button>
<div class="dropdown-content">
Link 1
Link 2
Link 3
</div>
</div>
You had an error in your html
<div class="wrapper">
<div class="header">
<div id="meniu">
<ul>
<li>PRIMA PAGINA</li>
<div class="dropdown">
<li>FISIERELE MELE
<div class="dropdown-content">
<ul>
<li>MENIUL MEU</li>
<li>PLANETE NOI</li>
</ul>
</div>
</div>
</li>
<li>MENIUL MEU</li>
<li>PLANETE NOI</li>
</ul>
</div>
</div>
<div class="push"></div>
</div>
<div class="footer"><center>Olimpiada Nationala de Tehnologia Informatiei si Comunicarii Buzau 2015</center></div>
https://jsfiddle.net/ggtpufuw/1/
After fixing the html you have to make your list display as inline-block and margin them as you like.
#meniu li
{
padding:5px;
border:1px solid black;
border-radius:10px;
display:inline-block;
margin-top:10px;
}
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?
This is my code
`
My Personal Website
<style>
html body{
margin:0;
padding:0;
}
.navbar-container {
position: absolute;
top:0;
width: 100%;
background-color: #283018;
}
.navigation-bar {
padding: 10px;
}
.nav-ul {
padding-top: 7px;
overflow:hidden;
padding-left: 540px;
list-style-type:none;
}
.nav-ul li {
color: white;
display: inline;
padding:50px;
text-align: center;
font-size: 1.1em;
float:left-inline;
}
.navbar-name h1 {
color: white;
float:left;
padding-left: 2px;
font-size: 1.5em;
}
.navbar-links a:link {
color: white;
text-decoration:none;
}
li a:link {
color:white;
}
.navbar-links li:hover, .navbar-links a:hover {
background-color: blue;
}
</style>
<body>
<nav class="navbar-container">
<div class="navigation-bar">
<div class="navbar-name">
<h1>Welcome to My Personal Site</h1>
</div>
<div class="navbar-links">
<ul class="nav-ul">
<li>Home</li>
<li>Profile</li>
<li>My Works</li>
</ul>
</div>
</div>
</nav>
</body>
</html>`
I can't change the link in the navbar.
this is the code that must change the link color but it can't
.navbar-links a:link {
color: white;
text-decoration:none;
}
I even tried to put
li a:link
but it does not work
The link color is unchangeable.
Sorry but I can't post screenshot
Try this
.navbar-links li a {
color: white;
text-decoration:none;
}