Welcome to WebmasterWorld Guest from 100.24.209.47

Forum Moderators: not2easy

Message Too Old, No Replies

Ribbon and hover movement

     
1:57 pm on Oct 24, 2016 (gmt 0)

Senior Member

WebmasterWorld Senior Member 10+ Year Member Top Contributors Of The Month

joined:Oct 25, 2006
posts:1103
votes: 1


I tried to move background but it will move only my link:

.tothetop1{
position: relative;
float: left;
width: 100%;
min-height: 1px;
padding-left: 0 0;
text-align: center;
}
.tothetop1 a {
padding-top: 26px;
}
.tothetop1 a:focus, .tothetop1 a:hover {
padding-top: 23px;
}
.tothetop1 a {
font-family: Arial;
background: rgba(0, 0, 0, 0) url("../images/icons/toUphouse1.png") no-repeat scroll center 75% / 110px calc();
display: inline-block;
width: 110px;
height: 72px;
}
.tothetop1 a:focus, .tothetop1 a:hover {
background-position: center 75.14%;
}

and HTML code:

<div class="tothetop">
<a href="#"><span>To the Top link</span></a>
</div>

How to move also background as it seems not working. I have left out calc() as this should working when it is placed.
3:44 pm on Oct 24, 2016 (gmt 0)

Administrator from US 

WebmasterWorld Administrator not2easy is a WebmasterWorld Top Contributor of All Time 10+ Year Member Top Contributors Of The Month

joined:Dec 27, 2006
posts:4404
votes: 316


Especially when there is an image to manage it is easier to position the container than the hover property. There are a few minor errors in the css such as where you have
padding-left: 0 0;
try
padding-left: 0;

When an element has a width of 100%, float does nothing, that can go away. The calculations in size are managed better by using the container (<div> ) than by the <a element.

Is the <div class="tothetop"> supposed to move to the top or is the anchor at the top supposed to change appearance when hovered/clicked? Sorry if I'm missing something here.
9:02 am on Oct 26, 2016 (gmt 0)

Senior Member

WebmasterWorld Senior Member 10+ Year Member Top Contributors Of The Month

joined:Oct 25, 2006
posts: 1103
votes: 1


Please post whole CSS to test. padding-left: 0; does not relate to the above function. There is missing code as testing:
The calculations in size are managed better by using the container (<div> ) than by the <a element.
Sorry
3:11 pm on Oct 26, 2016 (gmt 0)

Administrator from US 

WebmasterWorld Administrator not2easy is a WebmasterWorld Top Contributor of All Time 10+ Year Member Top Contributors Of The Month

joined:Dec 27, 2006
posts:4404
votes: 316


Sorry but I did not make the changes, I offered suggestions on what you should change. Given that I can only see what you have posted I can't replicate and test it all.

The first selector in your css is for the container div and it has the padding-left set to 0 0;
.tothetop1{
position: relative;
float: left;
width: 100%;
min-height: 1px;
padding-left: 0 0;
text-align: center;
}
while the property "padding-left" is only one number, there can't be two numbers (0 0) or it will be ignored.

Set the size controls to the div that contains the background image, not to the link (a element) as it is shown:
.tothetop1 a {
font-family: Arial;
background: rgba(0, 0, 0, 0) url("../images/icons/toUphouse1.png") no-repeat scroll center 75% / 110px calc();
display: inline-block;
width: 110px;
height: 72px;

}
I did not rewrite the css because I do not know what the intent of some of it (ex. "75% / 110px calc();") is. I can not see the purpose of relative positioning or "float: left;" used with "width: 100%;" so I did not attempt to rewrite your code, I only made suggestions. If you move the size controls shown for the "a" element to the container <div> you would have conflicting variables ("float: left;" vs "display: inline-block;" and "width: 100%;" vs "width: 110px;" for example) so those choices are up to you.