For some reason the image won't appear in the navbar, if I add borders to the css or any styling it appears but not the image. If I add the image explicitly in the html using the <img/> tag it appears but the hover over won't work..
CSS
<style>
nav{
background-color: #FFFFFF;
height:35px;
text-align:center;
border-top:1px solid #464140;
border-bottom:1px solid #464140;
padding-top:3px;
}
.img1{
border-radius:4px;
width:100%;
height:100%;
background-image: url('https://encrypted-tbn3.gstatic.com/images?q=tbn:ANd9GcR_a-PcgaUqYBJgn0JywzAQot-30Hl4tyODvxTj4F91pTbWE7fZ');
}
.img1:hover{
border-radius:4px;
background-image:url('https://encrypted-tbn3.gstatic.com/images?q=tbn:ANd9GcTbV-LxTpyrvTdSdHF5ulyzUJoe12f6nQr8Gn3hM3TjUfZNiEc');
}
</style>
HTML
<body>
<nav>
</nav>
</body>
Add display: block to the a tag - this happens as the a is display: inline by default and goes to zero width and zero height if there is no content inside:
nav {
background-color: #FFFFFF;
height: 35px;
text-align: center;
border-top: 1px solid #464140;
border-bottom: 1px solid #464140;
padding-top: 3px;
}
.img1 {
border-radius: 4px;
width: 100%;
height: 100%;
display: block;
}
.img1:hover {
border-radius: 4px;
background-image: url('http://placehold.it/200x200');
}
<body>
<nav>
</nav>
</body>
It's beacuse following tag is empty:
Add display:block; to your img1 class
DEMO:
http://plnkr.co/edit/UGuTJdmvDMCgLSmJ5PfZ?p=preview
For multiple images menu:
http://plnkr.co/edit/IFuiYBVcGkERgMSOfsZO?p=preview
Add display:block property to the anchor tag. Anchor tags are inline elements by default and thus have no width and height.
nav{
background-color: #FFFFFF;
height:35px;
text-align:center;
border-top:1px solid #464140;
border-bottom:1px solid #464140;
padding-top:3px;
}
.img1{
border-radius:4px;
width:100%;
height:100%;
background-image: url('https://encrypted-tbn3.gstatic.com/images?q=tbn:ANd9GcR_a-PcgaUqYBJgn0JywzAQot-30Hl4tyODvxTj4F91pTbWE7fZ');
display: block;
}
.img1:hover{
border-radius:4px;
background-image:url('https://encrypted-tbn3.gstatic.com/images?q=tbn:ANd9GcTbV-LxTpyrvTdSdHF5ulyzUJoe12f6nQr8Gn3hM3TjUfZNiEc');
}
<!-- begin snippet: js hide: false console: true babel: false -->
<nav>
</nav>
Related
This question already has answers here:
div get shrinked when using postion: fixed
(3 answers)
Closed 5 years ago.
I'm new to HTML and CSS. I'm trying to do a website, and I'm starting by the navbar, but whenever I try to do position:fixed; my navbar shrinks.
HTML
<!DOCTYPE html>
<html>
<head>
<title>Webhosting</title>
<link rel="stylesheet" type="text/css" href="cssone.css"/>
</head>
<body>
<div class="body_div">
<!--NAVBAR-->
<div class="navbardiv">
<ul class="navbar_ul">
<li class="navbar_li_Contact">Contact</li>
<li class="navbar_li_WebHosting"><a class="active" href="#index.html">Webhosting</a></li>
<li class="navbar_li_About">About</li>
</ul>
</div>
<div>
</body>
</html>
CSS
body{
background-image:url(imgs/background3.jpg);
background-repeat: no-repeat;
background-attachment:fixed;
background-size: cover;
}
.navbardiv{
font-family:Rockwell;
font-size: 30px;
}
.navbar_ul{
list-style-type:none;
margin:0;
padding:0;
overflow:hidden;
background-color:#333;
border-radius:5px;
border-left:2px solid white;
border-right:2px solid white;
border-top:2px solid white;
border-bottom:2px solid white;
margin: -8px;
width: auto;
min-width:416px;
height:80px;
display: flex;
justify-content: space-between;
/*position:fixed;*/
}
li {
float:left;
padding:15px 100px;
}
li a{
display:block;
color:white;
text-align:center;
padding:8px 16px;
text-decoration: none;
border:2px solid white;
/*border-bottom:2px solid white;*/
border-radius:5px;
}
li a:hover{
background-color:gray;
}
try width: 100%; in .navbar_ul in css... that'll work.. ;)
You can use width: 100% or left: 0; right: 0;, depending on which works better for you.
body{
background-image:url(imgs/background3.jpg);
background-repeat: no-repeat;
background-attachment:fixed;
background-size: cover;
}
.navbardiv{
font-family:Rockwell;
font-size: 30px;
}
.navbar_ul{
list-style-type:none;
margin:0;
padding:0;
overflow:hidden;
background-color:#333;
border-radius:5px;
border-left:2px solid white;
border-right:2px solid white;
border-top:2px solid white;
border-bottom:2px solid white;
margin: -8px;
left: 0; right: 0;
min-width:416px;
height:80px;
display: flex;
justify-content: space-between;
position:fixed;
}
li {
float:left;
padding:15px 100px;
}
li a{
display:block;
color:white;
text-align:center;
padding:8px 16px;
text-decoration: none;
border:2px solid white;
/*border-bottom:2px solid white;*/
border-radius:5px;
}
li a:hover{
background-color:gray;
}
<!DOCTYPE html>
<html>
<head>
<title>Webhosting</title>
<link rel="stylesheet" type="text/css" href="cssone.css"/>
</head>
<body>
<div class="body_div">
<!--NAVBAR-->
<div class="navbardiv">
<ul class="navbar_ul">
<li class="navbar_li_Contact">Contact</li>
<li class="navbar_li_WebHosting"><a class="active" href="#index.html">Webhosting</a></li>
<li class="navbar_li_About">About</li>
</ul>
</div>
<div>
</body>
</html>
Just add this css to your #navbardiv
.navbardiv{
position: fixed;
top: 0;
}
It should work
Can someone please tell me , why i can't add margin-top/bottom or padding-top/bottom to this "a" tag.
I need to ceter "Konoha" in the Header box
html{
background-color: white
}
body{
width: 88.5%;
height: 1200px;
margin: 0 auto;
border: 2px solid black;
background-color: #161e2c;
}
.top-box{
margin:0 auto;
width: 99.5%;
height: 153px;
background-color: #314e59;
border:1px solid rgb(211, 41, 97);
box-shadow: 0px 10px 7.4px 2.6px rgba(0, 0, 0, 0.74);
}
a{
display: inline-block;
margin: 23px 0 0 5px;
padding: 5px 5px;
max-width: 400px;
color: white;
text-decoration: none;
font-size: 500%;
background-color:pink;
border:2px solid black;
}
.right{
margin-top:13;
display: inline-block;
width: 600px;
background-color: pink;
border:2px solid black;
float: right;
text-align:center;
color:white
}
ul{
display: inline-block;
list-style-type: none;
font-size:35px;
width:100%;
padding-left:0;
}
li{
display:inline-block;
padding:7px;
}
<body>
<header class = "top-box">
Konoha
<div class = "right">
<ul>
<li>Text</li>
<li>Text</li>
<li>Text</li>
<li>Text</li>
<li>Text</li>
</ul>
</div>
</header>
</body>
Thanks all this problem was solved , but now i have a new problem.
Why cant i just use margin-top:50% and margin:bottom:50% on the classes .logo and .right
According to what i've read margin:bottom:50% and margin-top:50% should automatically center vertically both.right and .logoin their container header but rather they come to some random middle place of the page
2.If i use margin-top:x% then when i resize the window to small the LOGO shifts from being in middle of headerto top.
Because margin-top/bottom or padding-top/bottom only apply for block element
But <a></a> is a inline element.
You can read about Block formatting contexts
You can try:
HTML code
<body>
<header class = "top-box">
<div id = 'link'>Konoha</div>
</header>
</body>
CSS code:
#link{
color: white;
text-decoration: none;
font-size: 100px;
margin-top: 50%;
margin-bottom: 50%;
}
anchor is a inline element if you want to use padding-top/bottom,
you should using add display:block for anchor tag
a{
color: white;
text-decoration: none;
font-size: 100px;
display:block
}
readmore
Try to make a tag as block element. Add this
display:block
in a tag's CSS properties.
Or put a tag inside a block element
made a menu like this:
nav
{
margin: 20px;
background-color:pink;
border: 2px solid black;
}
nav a
{
margin:10px;
text-decoration:none;
font-weight:bold;
background-color:red;
border: solid 1px;
background-color:black;
color:Yellow;
padding:10px 30px;
border-radius: 15px;
display:inline-block;
}
<nav >
HTML
CSS
JavaScript
jQuery
</nav>
The problem is no matter what I set the nav height, still it will display very narrow like 50px so menu items display outside of nav.
I am using google Chrome.
Final verdict: OK I got a working solution but no idea why display:inline-block for anchors fixed it.
Looks like setting margin for inline anchors did not have any effects.
Your CSS is broken:
border: 2px solid black /* you forgot the closing ; here */
height:150px;
Therefore the height rule on the next line is not being parsed, causing it to size to its inline content elements.
add display:inline-block; to the nav a selector:
also, the height and width of the nav or unnecessary, as they are set automatically by its content
nav
{
margin: 20px;
background-color:pink;
border: 2px solid black;
}
nav a
{
margin:10px;
text-decoration:none;
font-weight:bold
background-color:red;
border: solid 1px;
background-color:black;
color:Yellow;
padding:10px 30px;
border-radius: 15px;
display:inline-block;
}
<nav >
HTML
CSS
JavaScript
jQuery
</nav>
I am just a beginner and I am learning. So I would like to know the correct way of achieving this.I have created three buttons and added it to the header. I want equal spaces between them. What is the best way or correct way to do it? Is margin a good way to do it?
My CSS Style
.MainHeader{
height:100px;
width:688px;
padding:inherit;
border:1px solid blue;
background-color:black;
}
.BodyContainer{
height:788px;
width:688px;
padding:inherit;
border: 1px solid blue;
background-color:white;
}
.MainFooter{
height: 100px;
width: 688px;
padding:inherit;
border: 1px solid blue;
background-color:black;
}
.Button{
display:block;
height:30px;
width:150px;
padding :0px 5px;
background:darkorange;
border:1px solid black;
color:white;
text-align:center;
font:bold 14px/30px arial;
background: linear-gradient(white, blue);
border-radius: 5px;
}
a.Button{
text-decoration: none;
}
a.Button:hover{
background: grey;
}
ul{
padding: 0;
}
li{
list-style:none;
display:inline-block;
margin-right: 8.6px;
margin-left: 8.6px;
}
My HTML code
<div class="MainHeader">
<div>
<div>
<ul>
<li><a class="Button" href="http://www.google.com">Homepage</a></li>
<li><a class="Button" href="http://www.google.com">Search</a></li>
<li><a class="Button" href="http://www.google.com">Contact Us</a></li>
</ul>
</div>
</div>
</div>
there is many ways to do that.
one is - making some margin:
li{
list-style:none;
display:inline-block;
margin-right:10px;
}
there is no such thing like "correct way" of doing such thing - but usual way is setting a margin
I have the following code for my nav bar and can't seem to center it on the website. What am I doing wrong? Removing float: left does nothing for positioning.
Thanks.
css
ul#list-nav {
list-style: none;
margin: 20px auto;
padding: 0px;
width: 800px;
}
ul#list-nav li {
display: inline;
}
ul#list-nav li a {
text-decoration: none;
padding: 5px 0;
width: 100px;
float: left;
background: #485e49;
color: #eee;
text-align: center;
border-left: 1px solid #fff;
}
ul#list-nav li a:hover {
background: #a2b3a1;
color: #000
}
html
</head>
<body>
<div id="as">
<ul id="list-nav">
<li>Home</li>
<li>About Us</li>
</ul>
</div>
</body>
It is already centered, it's just that you are using explicit width for your menu so consider decreasing your menu width
Demo
CSS
ul#list-nav {
list-style:none;
margin:20px auto;
padding:0px;
width:800px;
border: 1px solid #ff0000;
overflow: hidden;
}
Currently I've made it 205px
CSS
ul#list-nav {
list-style:none;
margin:20px auto;
padding:0px;
width:205px;
border: 1px solid #ff0000;
overflow: hidden;
}
Fixed demo
You will need to add display: block;
You need to wrap your nav bar in a wrapper div and then set the margin of that div to auto like so:
<style>
#wrapper {
margin: auto;
}
</style>
<div id="wrapper">
<!-- (your nav bar code here) -->
</div>
I believe following should do the trick;
<div id="as" align="center">