sorry for the odd wording but anyways, I've created a Navigation bar that works fine but it is slightly to the right even though I have it set to be all the way to the left.
< html>
<header>
<h1>Floor 3 </h1>
</header>
<head>
<link rel="stylesheet" href="css/bootstrap.css">
<title> Locker Map</title>
</head>
<style>
.navbar a {
float: left;
color: #f2f2f2;
text-align: center;
padding: 14px 16px;
text-decoration: none;
font-size: 17px;
}
.navbar {
background-color: #000;
overflow: hidden;
}
.navbar a.active {
background-color: #000000;
color: white;
}
.navbar a:hover {
background-color: #ddd;
color: black;
}
</style>
<body>
<div>
<ul>
<div class= "navbar">
<a class="active" href="AtomWTHSlockerMAP.html">Home</a>
Floor 1
Floor 2
Floor 3
</div>
</ul>
<p> </p>
</body>
</html>
Try to have width set to 100%, and margin to 0 for body.
.body {
width: 100%;
margin: 0;
}
I deleted the ul and it fixed it, thanks anyways
Related
I want to change horizontal navigation bar go through a line to other edge in the same color.
Expected:
What I got:
To make it happen, I tried entirely different ways like：
adding more buttons
using horizontal line with same color
All attempts failed.
Can anyone help me to make it happen?
This is my code:
.ul {
list-style-type: none;
margin: 0px;
padding: 0px;
background-color: #333;
}
.li {
float: left;
}
.li a {
display: block;
color: blue;
background-color: #333;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
.li a:hover {
background-color: #9900cc;
}
<!doctype html>
<html lang="EN">
<head>
<link rel="stylesheet" href="src/styles/styles.css">
<title>My shopping cart</title>
</head>
<body>
<ul class="ul">
<li class="li">Home</li>
<li class="li">News</li>
<li class="li">Contact</li>
<li class="li">About</li>
</ul>
</body>
</html>
Use a <nav> to enclose the <ul>.
nav {
background: #333;
overflow: auto;
}
.ul {
list-style-type: none;
margin: 0px;
padding: 0px;
background-color: #333;
}
.li {
float: left;
}
.li a {
display: block;
color: blue;
background-color: #333;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
.li a:hover {
background-color: #9900cc;
}
<!doctype html>
<html lang="EN">
<head>
<link rel="stylesheet" href="src/styles/styles.css">
<title>My shopping cart</title>
</head>
<body>
<nav>
<ul class="ul">
<li class="li">Home</li>
<li class="li">News</li>
<li class="li">Contact</li>
<li class="li">About</li>
</ul>
</nav>
</body>
</html>
I have one problem with my border. The problem is that I have 2 different borders: one that is on the "DUCO" button (my name) and one that creates itself when you hover over the text. The problem is that that the borders aren't the same size. can anyone help? (you cant see the background but that is no big deal)
Thanks
*
{
margin: 0;
padding: 0;
font-family: sans-serif;
}
header
{
background-image:linear-gradient(rgba(0,0,0,0.5),rgba(0,0,0,0.5)), url(straat.jpg);
height: 100vh;
background-size: cover;
background-position: center;
}
.hoofd-nav
{
float: right;
list-style: none;
margin-top: 30px;
}
.hoofd-nav li
{
display: inline-block;
}
.hoofd-nav li a
{
color: white;
text-decoration: none;
padding: 5px 20px;
font-family: "Roboto", sans-serif;
font-size: 15px;
}
.hoofd-nav li.actief
{
border: 3px solid white;
}
.hoofd-nav li a:hover
{
border: 3px solid white;
}
<!DOCTYPE html>
<html>
<head>
<title> Duco's Blog </title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<header>
<div class="rij">
<ul class="hoofd-nav">
<li class="actief"> Duco </li>
<li> Hobbys </li>
<li> Dromen </li>
</ul>
</div>
</header>
</body>
</html>
It would be easier to set the .active class on the a tag.Then you can also set a transparent border to remove the wobble.
The problem is comming from the mixing of both a and li tags. So the example is for the a tag but might as well be the li tag.
*
{
margin: 0;
padding: 0;
font-family: sans-serif;
}
header
{
background-image:linear-gradient(rgba(0,0,0,0.5),rgba(0,0,0,0.5)), url(straat.jpg);
height: 100vh;
background-size: cover;
background-position: center;
}
.hoofd-nav
{
float: right;
list-style: none;
margin-top: 30px;
}
.hoofd-nav li
{
display: inline-block;
}
.hoofd-nav li a
{
color: white;
text-decoration: none;
padding: 5px 20px;
font-family: "Roboto", sans-serif;
font-size: 15px;
border: 3px solid transparent; /* Remove wobble */
}
.hoofd-nav li a.actief
{
border: 3px solid white;
}
.hoofd-nav li a:hover
{
border: 3px solid white;
}
<!DOCTYPE html>
<html>
<head>
<title> Duco's Blog </title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<header>
<div class="rij">
<ul class="hoofd-nav">
<li> Duco </li>
<li> Hobbys </li>
<li> Dromen </li>
</ul>
</div>
</header>
</body>
</html>
It seems that your static border (the one on "DUCO") and the other border (the one that appears when hovering over "DUCO") are not borders of the same element!
The static one is a border for the li while the other one is applied on the a tag inside the li.
Try making both border properties applied on the same element, and it should work fine.
I am trying to make a horizontal menu
but these empty blocks are between my menu items (aprox 50px x 50px)
I used chrome inspect tool and these random blank anchors are there with nothing inside and ==$0 at the end
.navbar{
overflow: hidden;
position: fixed;
top: 0;
left: 0;
width: 100%;
background-color: red;
}
.navbar a{
float: left;
display: block;
text-align: center;
padding: 30px 25px;
border: none;
margin: none;
text-decoration: none;
font-size: 20px;
}
.navbar a:hover {
background: #54d5f2;
color: black;
}
<html>
<head>
<title>I Want Flowers</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div class="navbar">
<a href="./homepage.html">Home Page<a/>
<a href="./products.html">Products<a/>
Store Locations
Contact Us
</div>
</body>
</html>
Its because you close your <a> like this: <a/> instead of </a> here:
<a href="./homepage.html">Home Page<a/>
<a href="./products.html">Products<a/>
I think you make mistake while closing the anchor tags
<a href="./homepage.html">Home Page<a/>
to
Home Page
Replace you HTML by this HTML
<div class="navbar">
Home Page
Products
Store Locations
Contact Us
</div>
That was the after effects of not closing the anchor tag as it should have been.
Just change <a/> to </a> and you're good to go.. :)
.navbar{
overflow: hidden;
position: fixed;
top: 0;
left: 0;
width: 100%;
background-color: red;
}
.navbar a{
float: left;
display: block;
text-align: center;
padding: 30px 25px;
border: none;
margin: none;
text-decoration: none;
font-size: 20px;
}
.navbar a:hover {
background: #54d5f2;
color: black;
}
<html>
<head>
<title>I Want Flowers</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div class="navbar">
Home Page
Products
Store Locations
Contact Us
</div>
</body>
</html>
Somehow there is this fixed white space between the name "Larry Rosenburg" and the picture below it. No matter how I change the margin, it doesn't affect the distance. Here is a screen shot screenshot!
How can i shorten the white space?
here is my html:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title> Larry Rosenburg Official Website </title>
<link rel="stylesheet" href="style.css">
<link href="https://fonts.googleapis.com/css?family=Anton|Crimson+Text:400,700,700i|Rakkas" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Cherry+Swash|Cinzel|Gentium+Basic|Muli" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Arsenal" rel="stylesheet">
</head>
<body>
<header>
<div id="logo">
<img src ="lincoln.jpg" width ="27%" alt="Lincoln logo" id="logo_picture">
<nav>
<ul>
<li> Home </li>
<li> Lincoln </li>
<li> About </li>
<li> Contact </li>
</ul>
</nav>
</div>
</header>
<div class="clearfix"> </div>
<div id="title">
<p>Larry Rosenburg </p>
</div>
<div id="profile">
<img src="picture.jpg" width="25%" alt="" id="profile-pic" >
</div>
</body>
<footer>
</footer>
</html>
And here is the css:
body{
width: 100%;
}
#logo_picture{
margin-left: 80px;
}
#logo img, #logo nav{
float: left;
}
#logo nav{
line-height: 120px;
margin-left: 250px;
}
nav ul{
list-style: none;
margin: 0 10px;
padding: 0;
}
nav li{
display: inline;
}
nav a{
color: black;
font-size: 20px;
font-family:'Arsenal', 'sans-serif';
font-weight: 300;
padding: 2px 38px;
text-decoration:none;
}
nav a, nav a:visited {
color: black;
}
nav a.selected, nav a:hover{
color: grey;
}
#title{
font-size: 70px;
margin-top: 70px;
margin-bottom: 0;
text-align: center;
font-family: 'Anton','sans-serif';
}
#profile-pic{
border-radius: 30px;
background: url('picture.jpg');
margin: 30px auto;
display: block;
padding: 0;
border-top: 0;
}
.clearfix {
clear: both;
}
Your CSS margin: 30px auto; of #profile-pic sets the top and bottom margin as 30px. That is the white space you are seeing. Either set the margin individually or set it all at once. Don't use the current style.
Before posting questions like this, please try to inspect the html element using any Web Browser. All web browsers shows the layout and margins of elements. It would help you in solving issues faster.
I have edited this. now you may try this because it works fine in my device.
#profile-pic {
background: rgba(0, 0, 0, 0) url("picture.jpg") repeat scroll 0 0;
border-radius: 30px;
border-top: 0 none;
display: block;
margin: -60px auto;
padding: 0;
}
[here the screenshot][checked]
Try this.
<p style="margin-bottom:0px">Larry Rosenburg </p>
There might be some margin-top on the image as well.
as you can observe in this page http://arielnavarro.esy.es/ , which I use to train, have a slight issue I dont like. As you can see the nav bar is bigger than the buttons and that only happened when I added the facebook logo, and the linkedin logo. I've tried to play with the height of both images but I end up with the saize of the nav bar changing as well.
below are the codes from css and html
#charset "utf-8";
.navbar {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
border: 1px solid #e7e7e7;
background-color: #f3f3f3;
}
li {
float: left;
}
li a {
display: block;
color: #666;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
li a:hover:not(.active) {
background-color: #ddd;
}
li a.active {
color: white;
background-color: #4CAF50;
}
#fb {
float:right;
margin: 0 auto;
z-index: 2;
padding-right:15px;
}
#linkedin {
float:right;
z-index:2;
}
<!DOCTYPE html>
<head>
<title>Documento sin título</title>
<link rel="stylesheet" type="text/css" href="style.css"/>
</head>
<body>
<div>
<ul class="navbar">
<li id="home"><a class="active" href="#home">Home</a></li>
<li id="quienes_soy">quienes soy</li>
<li id="contacto">Contacto</li>
<li id="about">acerca de</li>
<a id="linkedin" target="_blank" href="https://www.linkedin.com/in/ariel-navarro-297062129/"><img src= "http://i.imgur.com/15FuoKO.png" height="45"></a>
<a id="fb" target="_blank" href="https://www.facebook.com/ariel.navarro.9655"><img src= "http://i.imgur.com/w3S3D0o.png" ></a>
</ul>
</div>
</body>
</html>
thank you all :)
Try giving your 'navbar' a fixed height. That should get you moving in the right direction.