everyone. I'm trying to give a text link a background image but I'm not having any luck, I've got no image appearing. I was wondering if someone one could tell me if my code is wrong and what I can do to correct it. Thanks for any help in advance.
Here's my css code, hlink and home are ids, and home is my positioning of my link text
#hlink:link{
background-image: url("../media/taboff.gif");
color:#000000;
text-decoration:none;
}
#hlink:visited{
color:#000000;
text-decoration:none;
}
#hlink:hover{
/*background-image:url("../media/tab2.gif");*/
text-decoration:underline;
color:#EF504B;
}
#hlink:active{
text-decoration:underline;
color:#EF504B;
}
#home{
position:absolute;
font-size:2em;
top:270px;
left:300px;
text-align:center;
and here is my html code
<div id="home">
<a id="hlink" href="midterm.html">Home</a>
</div>
Edit: I just want to say thank you all so much for helping me, every single one of you have saved my life, I don't know if edits notify everyone who has answered, but again, thanks so much. Aside from some missing code, my biggest problem was with the image itself that I was using so that's my next issue to correct. I tested out a different image and it worked 100% so thanks for that everyone. I'm also relatively new to this, I'm a freshman in college and have only been doing this for a few weeks(I also have a terrible professor but that's another story for another time) but I'm glad to have found such a helpful community, hopefully one day I'll be able to contribute myself.
Works for me: http://jsfiddle.net/GTHyU/
My guess is that perhaps you have made your url() relative to your HTML page instead of your CSS file? Try it with an absolute URL first and see if it starts working, then figure out the appropriate relative path you need based on the location of the CSS file.
Try it like this
#hlink{
background:transparent url(../media/taboff.gif) repeat-x 0 0;
color:#000000;
text-decoration:none;
}
Check working example at http://jsfiddle.net/nh7nY/
Add these styles to each link:
display: block;
width:100px;
height:100px;
That should make the background-image appear. You can change the height and width to fit your requirements.
Try this:
#hlink:link {background:url(images/media_library.png) no-repeat top left}
Related
Umm...hi!
I'm new here and am a self-taught amateur (read:google-searching-experiment-dude).
I created a fairly basic webpage but when I scroll down, the content overlaps the header. I don't really know how to explain this,so I'll link everything:
https://youtu.be/R05oISKKaXE
Oh, another thing:I'm sure I have a lot of redundant stuff.
Thanks.
Hello and welcome to stackoverflow!
When posting questions related to html/css/javascript you can use a tool like jsfiddle to create a demo of the problem and post it here, so it is easier for others to help you!
You could try removing the relative position in your .body class and the fixed position on your .header class, that alone might solve your problem.
You have to change the z-index of your elements to make them display on top of each other in a defined order.
Considering a piece of HTML that looks like this,
<div id="header"></div>
<div id="content"></div>
You can set the z-index of each element like so:
#header {
position:fixed;
z-index:1;
}
#content {
position:relative;
z-index:2;
}
I can't figure out how to make a div move when another div is clicked.
Here is a jsfiddle demo: https://jsfiddle.net/vufosn18/ (make sure you make it fullscreen so the image doesn't overlap with the text)
I have been googling around for a bit and can't find anything, so I tried:
#feas:focus #construct{
margin-top: 300px;
position: absolute;
}
When I click on feasibility it gives construction management a margin-top of 300px.
Any help is appreciated, if your answer could be in JavaScript/CSS that would be great.
It would be hard to fix all your issues in one answer. But I'll try to get you going:
Everything is absolute, I think this is not recommended for your case. Read more
You are using ID's everywhere, causing lots of duplicate styles. Try changing this to classes. This will be much easier to manage small changes.
I recommend checking that you are working html strict, this may prevent having rare situations in different browsers. (FYI)
To answer your question:
There are a lot of plugins out there that are easy to use. I suggest you to use one of them instead:
https://jqueryui.com/accordion/
A step by step example (just googled it)
..
For what you want to show in each tab you can have independent html/css. By default is img and p relative. So they won't overlap then.
here is a simple animation
Click on hello and the div with the word world will move down
function click(){
document.getElementById('bottom').style.top="50px"
}
document.getElementById('top').addEventListener('click',click,false)
#top{
width: 50px;
height:50px;
border:solid;
}
#bottom{
position:relative;
top:0px;
width: 50px;
height:50px;
border:solid;
transition-property:top;
transition-duration:3s;
}
<div id="top">
hello
</div>
<div id="bottom">
world
</div>
I'm having a problem with the menu I just coded: https://jsfiddle.net/nL124rLq/1/
I am using a general selector (~) on my css and I think this might be a mistake, because it might be the origin of my problem:
#nav #link1:hover ~ #flydown {
left:0;
display:block;
}
#nav #link2:hover ~ #flydown {
left:-100%;
display:block;
}
... and so on.
As you can see, everything works fine but when I stop hovering on the anchors, the sliding menu under the links disappears. I understand my code is not made for this to work correctly, but I can't figure out a way of making it work.
I am going to add content (sub-menus) to the coloured areas that form the slider, so they must be clickable and must remain visible when the user hovers over them.
If it's any help, I got the idea from this site: http://www.tiffany.es/
Thank you guys very much in advance and excuse the relatively vague question!
Okay, so I found the solution, more or less. #Michael_B 's help was awesome! The resulting code looks horrible though. Oh well, it works!
Basically I added this to every single link that I have on the nav (link1, link2... etc.):
$("#link1").on("mouseover", function () {
$(".flydown").addClass('permahover1');
});
$(".flydown").mouseleave(function () {
$(".flydown").removeClass('permahover1');
});
...and added the following CSS once for every element in my menu (permahover1, permahover2 etc.) to specify their different positions with left:0%, left:-100%, etc:
.flydown.permahover1 {
left:0%;
display:block;
}
It got really dirty in no time. But I don't know a better solution. Here's a working JSFiddle:
https://jsfiddle.net/nL124rLq/4/
As always, thank you guys very much for your help!
I'm having trouble isolating the problem I'm having, some stray CSS. Here's my website: http://www.derekbeck.com/1775/info/july2012mag/
Can anyone tell me what CSS is causing the Share button, when you mouseover it, to pop up off on the right side instead of directly next to the share button?
Thanks,
Derek
You need to remove position:relative under #addthis in your CSS file:
#addthis
{
position:relative;
top:-2px;
left:2px;
}
Should be:
#addthis
{
top:-2px;
left:2px;
}
Edit:
BTW, I'd suggest you put all your CSS code into a single, separate file.
Soooo... I was working on this page using jsFiddle and it doesn't work the same on the actual page!
http://jsfiddle.net/8Hpmj/8/
http://ktaadn.me/about/
The ktaadn.me example isn't left-justified and filling the width below the logo.
What did I do wrong?
If you need inspiration this is my seductive, unhelpful cat.
http://4.bp.blogspot.com/-NVtngGt43Rs/Tcmmw6RR-zI/AAAAAAAABOI/UPYJJHpAlk8/s640/IMG_9728.jpg
Thanks!
add padding:0; to .nav1
and width:100% to the anchor tags odd.a and such
that should fix it.
tip: do not use these css grid frameworks if you are not very solid at it.
good luck man.