I don't know how to explain what's happening, but I have a logo image on my site and when you hover over some of it, it works right, but if you hover over some of the other parts it doesn't act like a link. It acts on it randomly so it's not like half of the image is just not a link or something it's like hover over the letter "P" it works hover over "in" it doesn't work hover over "kT" it works again (the logo says "Pink Tangerine").
It's a png with a transparent background so I'm wondering if that has something to so with it, but that doesn't make any sense. I've never ran into a problem like this before, can you guys tell me what's wrong?
HTML5
<div id="main-banner">
<header>
<a id="image" href="index.html">
<img alt="Logo" src="Images/PT-logo.png">
</a>
<nav>
<ul>
<li>Home</li>
<li>About Us</li>
<li>Contact Us</li>
</ul>
</nav>
</header>
</div>
CSS3
I don't imagine most of my CSS should be relevant, but I included all the link description and main header/banner stuff just in case. The one class that deals with the image is at the bottom of the CSS and it only makes it so I don't get a weird border when I hover over the image.
/*Link Info */
a {
text-decoration: none;
color: #DB7093;
}
a:link, a:visited {
text-decoration: none;
color: #FFC0CB;
}
a:hover, a:active {
text-decoration: none;
background-color: #DB7093;
color: #F0F8FF;
}
/*Banner Navigation*/
#main-banner {
width: 100%;
height: 110px;
padding: 25px 0 0;
background-color: #FFC0CB;
}
#main-banner header {
width: 70%;
margin: auto;
}
#main-banner header img {
width: 300px;
height: 100px;
float: left;
margin-left: 10%;
}
#main-banner header nav {
position: relative;
height: 20px;
left: 105px;
top: 50px;
}
#main-banner header nav ul {
list-style: none;
margin: auto;
}
#main-banner header nav ul li {
float: left;
display: inline;
}
#main-banner header nav li a:hover {
background-color: #DB7093;
color: #F0F8FF;
text-shadow: none;
}
#main-banner header nav ul li a {
color: #DB7093;
display: block;
padding: 3px 15px;
height: 12px;
}
/*Image Links*/
a#image {
background-color: transparent;
}
So the issue is the nav tag and the left/top/height css style, because it's container is the same as the image link so there is overlap.
removing the left/top/height fixes it as seen here. It depends on what your ultimate goal is as far as looks go in order to fix it and still have the appearance you want.
#main-banner header nav {
position: relative;
}
EDIT:
I would think using some margin to move the element would get you what you want, just not sure where the placement is supposed to go.
Figured it out thanks to something Charles380 pointed out. I made the image absolute and just the nav relative so I could move it like I wanted. Thanks for your help guys.
Related
My website project has a navigation bar at the top of the page. I made it on the index/home page and then copied and pasted it onto the other three pages so that there would be no differences. It looks the same on all of the pages, except for one page, where it has less margin/padding. I'll insert the pictures, but I've been told that the difference isn't clear unless you see it in real life on my screen.
Correct margin/padding, incorrect margin/padding.
.navigation {
list-style-type: none;
margin: 5px;
padding: 1px;
text-align: center;
background-color:#bee7b8;
overflow: hidden;
}
.navigation img {
width: 250px;
float: left;
}
.navigation a {
display: block;
width: 10px;
color: #0c7c59;
font-family: Nunito;
font-size: 28px;
text-decoration: none;
padding-left: 100px;
}
.navigation li {
float: left;
padding-top: 32.5px;
width: 295px;
}
.navigation a:link {
color: #0c7c59;
}
.navigation a:visited {
color: #28c191;
}
.navigation a:hover {
color: #799b74;
}
.navigation a:active {
color: #4c2e05;
}
<header>
<ul class="navigation">
<img class="navigation" src="https://i.imgur.com/x4oWsIA.png">
<li>HOMEPAGE</li>
<li>PRODUCTS</li>
<li>REGISTER</li>
<li>FAQ</li>
</ul>
</header>
I'm wondering if it's like this because I've tried using an image slideshow from W3 schools (shown in this question of mine), but removing that has not helped.
EDIT: I found out that linking to the w3 stylesheet is what causes it! IDK how to fix this though...
have you reset your CSS code? If you haven't then try this on top of your CSS code:
* {
margin: none;
padding: none;
}
also, make sure you didn't miss anything when you copied the code.
My navbar gets chopped off from both sides whenever I resize the window, like in this picture.
Chop chop
I want the navbar to fit the entire screen, even when the window is resized, so that all the links and logo are visible.
I tried making the width 100vw but it has no visible effect.
Here is my HTML and CSS:
<header>
<nav>
<ul>
<li><div class="container"><img src="https://i.ibb.co/SP0TLzQ/broozeb.png" alt="logo" class="logo" border="0"><div class="overlay"><div class="text-test">米</div></div></div></li>
<li>ホーム</li>
<li>米さんについて</li>
<li>日本の文化</li>
<li>学習の情報</li>
<li>English Stuff</li>
</ul>
</nav>
</header>
nav {
background-color: blue;
border-bottom: solid #09316b;
white-space: nowrap;
}
nav ul {
margin: 0;
padding: 0;
display: flex;
justify-content: center;
}
nav ul li {
list-style-type: none;
margin-left: 5px;
}
nav ul li a {
color: white;
background-color: blue;
display: block;
line-height: 3em;
padding: 2em 4em;
text-decoration: none;
font-weight: bold;
}
nav ul li .logo {
background-color: white;
border-radius: 50%;
margin-left: 10px;
}
nav a:hover {
color: red;
background-color: white;
transition: all 0.3s ease 0s;
}
I'm really sorry to ask such basic questions, but this has been troubling me for a few weeks. I very very much appreciate your help!! My webpage can be found here: https://komesannonihongotabi.neocities.org/culture.html
This is being caused by the following CSS line:
nav ul li a {
padding: 2em 4em;
}
Your a tags have a padding on left and right of 4em. Since em is an absolute unit and not a relative one, it will stay the same on any screen size. That is, unless you change the font-size to be smaller but I don't think that would be a good solution here. Just try adding a relative unit like %, or use a breakpoint as follows:
nav ul li a {
padding: 2em 1em;
}
#media screen and (min-width: 900px) {
nav ul li a {
padding: 2em 4em;
}
}
Another, and maybe better solution to your problem would be to use a sidenav with hamburger icon. This may however be a bit complex for beginners.
What if you remove this line white-space: nowrap; from nav {}
Before
nav {
background-color: blue;
border-bottom: solid #09316b;
white-space: nowrap;
}
After:
nav {
background-color: blue;
border-bottom: solid #09316b; }
It starts to resize now. If you want more info about white space -> Click here -<
I am learning how to make nav bars with drop downs. This works well on Firefox and Chrome, but not in Edge. The problem is that once the drop down has been displayed after the mouse was hovering over it, when the mouse is moved and it's time for it to have display: none, you can still see a tiny amount of the bottom sticking out where the dropdown was. This is only when the ul is floated.
I've removed a lot of css to leave what mainly is essential, but included the whole html, in case anyone wants to just copy and paste into a file to see. I'm am wondering if this is something I've done wrong, or a bug in Edge, and if anyone can tell me how I can prevent this from happening.
<html>
<head>
<style>
.right {
float: right;
}
.nav {
background-color: #444;
}
.nav ul {
list-style: none;
margin: 0;
padding: 0;
}
.nav li {
font-size: 1.1em;
display: inline-block;
}
.nav .dropdown {
position: absolute;
display: none;
background-color: #444;
font-size: 0.9em;
}
.nav .dropdown li {
display: block;
}
.nav li:hover ul {
display: block;
}
.nav a {
text-decoration: none;
color: #fff;
display: block;
}
.nav a {
padding: 15px 25px 15px 25px;
}
</style>
</head>
<body>
<div class="nav">
<ul>
<li>Home</li>
<li class="right">Your...
<ul class="dropdown">
<li>Profile</li>
<li>Bookmarks</li>
<li>Songs</li>
</ul>
</li>
</ul>
</div>
</body>
</html>
I may have been hasty posting this question. I have figured out a way of hiding the problem by adding a border to the nav bar.
.nav {
background-color: #444;
border-bottom: solid #444 thin;
}
My AIM: is to make a navigation bar go across the whole screen, with a greyish colour (#839496). And have each link/button to have a border to the left and the right of it. Just like the navigation bar on:
http://www.theberrics.com/dailyops
However,
My Problem is: the link/button is only going across as far as is goes. I want each button to go across with the width of 150px (which works fine). BUT also have the grey bar continue through the whole screen horizontally (which isnt working and just displays nothing).
Here is my css:
nav {
background-color: #839496;
padding: 0.02px 0;
margin-bottom: 10px;
}
nav ul {
width: 100%; /*RIGHT HERE: i would like the whole unordered list to go across the screen. But it doesnt work*/
position: relative;
left:10%;
margin: 0;
padding-left: 100px;
}
nav li {
float: left;
}
nav li a{
display: block;
width: 150px;
background-color: #839496;
color: #fff;
text-align: center;
font-weight: bold;
text-transform: uppercase;
padding: 5px;
border-right: 1px solid;
border-left: 1px solid;
}
nav a:hover {
background-color: white;
color: #000;
text-decoration: underline;
}
And here is my html:
<nav>
<ul>
<li>Home<li>
<li>Top 10</li>
<li>Skaters</li>
<li>Submit</li>
</ul>
</nav>
Also: i dont want each button to be 25% of the page. Just 150px wide.
Sorry if my code or anything i said is confusing. Thank you for reading!
update your css like the below (i.e. include overflow: hidden; to nav
CSS
nav {
background-color: #839496;
margin-bottom: 10px;
overflow: hidden;
padding: 0.02px 0;
}
i have this menu:
<div class="nav">
<ul>
<li>HOME</li>
<li>AMORTECIMENTO</li>
</ul>
</div>
the normal apearance:
and this is the apearance when users hover the menu:
So, i dont know how to setup the css, assuming i have biggest names on menu like: "AMORTECIMENTO"
Any tips??
i have tried this, but on small names, the menu is cutting the background...
.nav ul li a{
display:block;
font-size:15px;
color:#000;
padding:5px 7px;
background:transparent;
text-decoration:none;
}
.nav ul li:hover{
background:url(../imagens/bola_fundo_menu.png) center no-repeat;
}
My intention is, when user hover the menu item, on the <li> background, apear the basketball, and on <a> tag, the background is going to #FFF but i have small and big names on menu, so i can't set width of <li> and <a> tags... i think
Here is a quick example using pseudo-elements: http://codepen.io/anon/pen/iwerJ
Using the exact HTML you originally posted, with CSS like this:
.nav {
background: #CCC;
font-family: Helvetica, Arial, sans-serif;
line-height: 48px;
margin: 50px auto 0;
width: 90%;
}
.nav ul:after {
clear: both;
content: '';
display: block;
}
.nav ul li {
float: left;
font-size: 14px;
list-style: none;
padding: 0 10px;
position: relative;
}
.nav ul li:hover:after {
/* Replace background with image */
background: #abc123;
/* Optionally remove radius */
border-radius: 30px;
content: '';
display: block;
position: absolute;
top: 50%; left: 50%;
margin-top: -30px;
margin-left: -30px;
height: 60px; width: 60px;
}
.nav a {
color: #333;
display: inline-block;
line-height: 180%;
padding: 0 4px;
position: relative;
text-decoration: none;
z-index: 1;
}
.nav li:hover a { background: #FFF; }
Just set a hover background. Eg:
div.nav li:hover{
background-image: url('basketball.jpg');
}
EDIT:
You've got a lot more issues than just a background image...
You need to vertically center your nav text set a min-width for the
nav cells so that the left and right of the ball aren't cut off
set a solid white background for the anchor tag so the text is actually visible on hover
set a z-index for the anchor tags that's greater
than the center image so that they are all clickable (right now you
can't click the link to the right of the center)
Good luck. I can't write all of that code out for you, but that should send you in the right direction.
on your nav class all you have to do is write your css like this:
.nav ul li:hover
{
background-image:url('yourimage.jpg');
}
To fix the cut-off images, you can simply put a min-width on your .nav li elements. Make sure the value is at least as wide as your background images.
You'll probably also want to add text-align: center.