/    Sign up×
Community /Pin to ProfileBookmark

Rollover padding – equal length

Copy linkTweet thisAlerts:
Apr 14.2008

I’ve created a rollover which uses a background and padding for a menu. In this case when you rollover the links it pads out to the right with a white background. I’ve set the padding to 100% within a width defined div, but the background seems to be a different length depending upon the amount of characters in the link.

An example is below.

I was just wondering how i can make the rollover so its all the same length..?

Example: [URL=”http://www.backwildcatback.net/rolloverpadding/”]http://www.backwildcatback.net/rolloverpadding/[/URL]

to post a comment
CSS

7 Comments(s) ↴

Copy linkTweet thisAlerts:
@CentauriApr 14.2008 — Remove the padding and add display:block to the style of the <a> - this will automatically make the <a> extend the full width of the container.

I also note that 5 divs here can be replaced with one <ul>, which also makes more sense semantically.
Copy linkTweet thisAlerts:
@adam_fakeauthorApr 15.2008 — yeah - i'd normally use the <ul> and <li> tags but was just experimenting with this padding/rollover tag - i'll give it a go, thanks!
Copy linkTweet thisAlerts:
@adam_fakeauthorJun 19.2008 — This works perfect but what if i want it to change the whole of the container background colour when hovering? At the moment it will change the BG color of the line to the edge of the DIV/Container but not the rest of the DIV, such as the height below/above.

Thanks
Copy linkTweet thisAlerts:
@CentauriJun 19.2008 — 404 not found error on your example link.
Copy linkTweet thisAlerts:
@adam_fakeauthorJun 23.2008 — yeah sorry - i remived that a while ago and just got round to trying the new way i described above. I'll create an example or find one.
Copy linkTweet thisAlerts:
@adam_fakeauthorJun 23.2008 — here's an example i created. Is it possible to fill the whole DIV instead of just the remainder of the line on hover...

http://www.backwildcatback.net/hover/
Copy linkTweet thisAlerts:
@CentauriJun 23.2008 — The <a>s need to be block level and their size set :[CODE]body {
font-family: Geneva, Arial, Helvetica, sans-serif;
font-size: 10px;
background-color: #CCCCCC;
}

.menubtn a {
text-decoration: none;
display: block;
height: 40px;
line-height: 40px;
text-align: center;
}

.menubtn a:hover {
background-color: #666666;
color: #FFF;
}

.menubtn {
margin-top: 10px;
background-color: #FFFFFF;
}

#menu {
width: 100px;
float: left;
}
[/CODE]
×

Success!

Help @adam_fake spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 — BETA 5.2,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @Yussuf4331,
tipped: article
amount: 1000 SATS,

tipper: @darkwebsites540,
tipped: article
amount: 10 SATS,

tipper: @Samric24,
tipped: article
amount: 1000 SATS,
)...