Closed. This question is not reproducible or was caused by typos. It is not currently accepting answers.
This question was caused by a typo or a problem that can no longer be reproduced. While similar questions may be on-topic here, this one was resolved in a way less likely to help future readers.
Closed 4 years ago.
Improve this question
I'm having difficulty pinpointing whats preventing the following link from working.
I chose a random link (w3schools) to test it before I linked it to what its meant for.
I thought the problem may have to do with the CSS.
ul {
font-family: 'Montserrat';
font-size: 15px;
color: #994f00;
}
#innerNav {
/*adding a relative or absolute here will break sticky*/
background-color: black;
color: white;
left: 0px;
overflow: hidden;
height: 1300px;
width: 150px;
z-index: -1;
white-space: nowrap;
list-style-type: none;
}
<!DOCTYPE html> <!-- HTML 5 -->
<html lang="en">
<body>
<div class= 'wrapper'>
<div id = 'innerNav'>
<li>
<ul>The Door</ul>
<ul>Mr Pointy</ul>
<ul>Block Rain</ul>
</li>
</div>
</div>
</body>
</html>
But even when I comment out the last line of the innerNav, the link still doesn't work (clicking it doesn't open anything).
Any ideas?
also my git files for this is:
Portfolio
The problem has nothing to do with the link and everything to do with the fact that you have the z-index of your #innerNav set to -1. So you are covering your navigation up with the .wrapper. So just remove the z-index from the innerNav completely or just set it to 1.
PS the markup for this is invalid as well you may want to look up the correct markup for an unordered list it should be as follows:
<ul>
<li></li>
<li></li>
</ul>
For some reason you have it backwards with <ul> nested inside of <li> it should be the other way around.
Related
Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.
Closed 5 years ago.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
This question was caused by a typo or a problem that can no longer be reproduced. While similar questions may be on-topic here, this one was resolved in a way less likely to help future readers.
Improve this question
With the example HTML / CSS below, I cannot work out why this doesnt display the expected results in any browser (hosted in Visual Studio), however works perfectly when done as a JSFiddle. I'm probably missing something pretty obvious, but can anyone point out what that might be?
HTML:
<body>
<div class="wrapper">
<div class="navbar">
<p>Random white text which should appear in a grey banner at the top of the page.</p>
</div>
</div>
</body>
CSS:
body {
width: 100%;
margin: 0;
}
.wrapper {
display: table;
width: 100%;
}
.navbar {
width: 100%;
height: 200px;
background-color: #292929;
color: #ffffff;
text-align: center;
vertical-align: middle;
display: table-cell;
}
EDIT: I have tried this in various different browsers, including Firefox, Direfox Dev Edition, Edge, and IE, all with the same results (just plan black text on white screen).
Make sure to link your css file to your html file.
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="styles.css">
</head>
<body>
...
Closed. This question is not reproducible or was caused by typos. It is not currently accepting answers.
This question was caused by a typo or a problem that can no longer be reproduced. While similar questions may be on-topic here, this one was resolved in a way less likely to help future readers.
Closed 6 years ago.
Improve this question
I'm a newbie to html and CSS, and I've been trying to style my paragraph to have 5px of padding on each side of the text, but whenever I add "padding: 5px;" it gets rid of the background colour (of the paragraph), and the padding makes no effect. I've tried with just the padding and that doesn't work either. Thank you in advance!
HTML and CSS for reference:
body {
background-color: #000000;
font-family: arial;
color: white;
}
a {
color: orange;
}
p {
background-color: #393939
padding: 5px;
}
<!doctype html>
<html>
<head>
<title>spam</title>
</head>
<body>
<link rel = "stylesheet" href="main.css">
<img src = "">
<h1><strong>Website name</strong></h1>
<ul>
Home
News
</ul>
<p>
Man stabbed in ...
</p>
</body>
</html>
In CSS you need to end each property you add with a ; so simply change the code to:
p {
background-color: #393939;
padding: 5px;
}
Not having the ; to show that a property ended meant the browser read the CSS as one big property that doesn't exist, which is why it seemed like your CSS did nothing.
You are missing the ; after background-color: #393939
Closed. This question is not reproducible or was caused by typos. It is not currently accepting answers.
This question was caused by a typo or a problem that can no longer be reproduced. While similar questions may be on-topic here, this one was resolved in a way less likely to help future readers.
Closed 7 years ago.
Improve this question
Hi there I was wondering how I would make an image appear when I hover over another one.
I have some code but it just isn't working I think it should be something like this;
CSS-
a bikeq
{
display: none;
}
a:hover bikeq {
display: block;
}
HTML-
<section class="r_img">
<img src="img/bike.png" class="bike">
<img src="bikeq_3.png" class="bikeq">
</section>
I fell like I am doing something wrong with the html part but I don't know what else to do.
Any help will be great thanks,
Zack
Keeping the HTML you have provided is not possible, as the elements are sibling. You can "fake" this effect with the following code:
<section class="r_img">
<img src="img/bike.png" class="bike">
<img src="bikeq_3.png" class="bikeq">
</section>
.bikeq {
display: none;
}
.r_img:hover .bikeq
{
display: block;
}
When hovering the container of the two images, the image with .bikeq class will show up..
Try this:
html
<section class="r_img">
<a href="" class=”bike_img”></a>
</section>
css
a.bike_img { width: ?px; height: ?px; display: inline-block; background: url("img/bike.png"); }
a.bike_img:hover { background: url("img/bikeq_3.png"); }
Where ?px are the width and height of your image. You will also need to make sure that your image urls are corrrect, I just had a guess.
Closed. This question is not reproducible or was caused by typos. It is not currently accepting answers.
This question was caused by a typo or a problem that can no longer be reproduced. While similar questions may be on-topic here, this one was resolved in a way less likely to help future readers.
Closed 3 years ago.
Improve this question
I have a div that refuses to change background colors when I hover over it. It stays the same. Here's the code.
HTML:
<div id="login"></div>
CSS:
#login {
position: fixed;
float: left;
background-color: none;
margin-left: 1.5%;
top: 1em;
height: 1.25em;
width: 7em;
text-align: center;
border-radius: .3em;
opacity: .5;
padding-top: 1em;
border: .18em solid gray;
}
#login:hover {
background-color: gray;
}
I had a similar problem. What I suggest is making sure there are no invisible objects over the div. This tells the program that your cursor is hovering the invisible object rather than the div with the hover element.
Works fine for me - http://jsfiddle.net/Q8A6d/
Which browser are you using? You cannot apply a
:hover
pseudo class to any elements other than <a> in older versions of IE (6 and below).
Your code appears to work properly here, so a few things could be wrong:
You might have linked your stylesheet to your HTML file improperly.
Some other CSS in the context of your project may be overriding the piece that you've given here.
You might be running into browser compatibility issues with the :hover selector or something else in your code that is breaking the styling.
Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.
Closed 7 years ago.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
This question was caused by a typo or a problem that can no longer be reproduced. While similar questions may be on-topic here, this one was resolved in a way less likely to help future readers.
Improve this question
I'm total CSS/HTML noob.
I would really appreciate if you help me out.
I need to fix my button:
decrease activation field (hover) to the actual size of the button (without shadow)
when I hover cursor over button, how to get rid of 1st image left overs?
THANK YOU!
jsfiddle link:
http://jsfiddle.net/cRqhT/125/
HTML:
<html>
<body>
<div>
<a id="button" href="http://mysite.com"</a>
</div>
</body>
</html>
CSS:
div {
width: 820px;
height: 820px;
background: url('https://gator1174.hostgator.com/~mskparik/facebook/thx.jpg')
}
#button{
display: block;
width: 204px;
height: 116px;
background: url(https://gator1174.hostgator.com/~mskparik/facebook/111.png) no-repeat top left;
position: absolute;
top: 90%;
left:10%;
}
#button:hover {
background: url(https://gator1174.hostgator.com/~mskparik/facebook/222.png) no-repeat top;
}
I simply added a corner bracket where appropriate, and it seems to have fixed both problems. See JSFiddle here.
<html>
<body>
<div>
<a id="button" href="http://mysite.com"></a> <!--Notice extra corner bracket-->
</div>
</body>
</html>