Category Archives: CSS

css whole menu color change on hover

i’m really new to html & css, & i thought having a project while working through tutorials would assist me stay motivated while learning a lot.

i’ve been playing around with this menu, & it’s almost there – yet now there seems to be this wall & i just don’t obtain how to obtain over it! i have searched for hours on several sites & am now ready to throw this thing outta the window…

here’s a jsfiddle: http://jsfiddle.net/64Grv/

so what i wanted to achieve is that on hover of one submenu the whole menu changes color (instead of the hovered link now). if i hover on “more stuff” for example, all of “menupoint2, stuff, more stuff, even more stuff….” should alter color.

how should i go with that? i’ve tried putting different classes, to no avail – i guess i put them at the wrong place. or is this possible with some kind of box?

i apologize for the messiness of my css (just a beginner messing around..), & i’d really appreciate it if somebody had concrete tips on how to do this 🙂

thank you very much!

CSS:

you need to set :hover on li :
http://jsfiddle.net/64Grv/1/

Change CSS to increase font-size inside li

I can’t work out how to increase my font-size in the ‘teaching points’ section of this WP post http://www.test.foamped.com/2013/07/abdo-pain/

I’d like it to be 15px like the rest yet it’s only 12px.

I can’t work out how to reference that section. Help!

Try

Thanks
Ab

Scrolling with jQuery when scrolling is disabled on CSS

I would like to scroll the page using a jQuery animation yet the scrolling is disabled in the CSS & it doesn’t allow the animation to take place:

Here’s the fiddle: http://jsfiddle.net/AKPHB/1/

If you set overflow:hidden, the scroll event doesn’t happen. So you can’t trigger it using the animation either. And really, what’s the point of animating a scroll if the user can’t scroll anyway :p

One solution is to wrap the content in another container & animate the container instead, like this:

Demo: http://jsfiddle.net/AKPHB/10/

CSS:

And the Javascript:

CSS3 collapse works with latency

I want to make an expandable block using css transitions.

Here’s working example: http://jsfiddle.net/qswgK/.

When I expand the block, it slides down well, yet when I want to collapse it, it occurs with some latency.
This is noticed in lastest versions Chrome, Firefox, Opera & IE.
Why does it happen & May I avoid this without using javascript animations?

P.S. If use height animation instead of max-height, collapse works well, yet I need collapse & expand block with unknown expanded height.

It looks that it happens because the collapsing animation starts to alter the max-height from the very large value & it takes to it some time to cross the actual height of the element, & the visible alter of the height starts only after that moment. The only workaround I see is to use separate animations for expansion & collapsing — a bit longer one with easing-in for the first & a bit shorter one that starts very sharply & eases out just before ending for the latter, like the following:

fiddle

Horizontal image align CSS

I’m having some trouble aligning a main image. It should be center-aligned horizontally, yet keeps going all over the place. The page can be found here http://0034.eu/propmanager/

That’s basically the CSS I have applied to the image, all the source code is on main index.html (no separate style sheet).

Thanks!

Add this to your CSS style.

EDIT

From the inputs of IlyaStreltsyn, I agree with the point of clearing the right with display:block for the image to be centered.

For Instance,

CSS alternating rowbased floating

Im not sure how exactly to call my problem, hence the cryptic title.

The situation I have is the following:

I let these widgets float left & right, based on the odd or even css:

Works like a charm on the first 2 ‘half’ ones, yet the 2 after that obtain screwed over by the 3rd ‘half’. The last 2 are in ‘reversed order’. What I need is some sort of reset or other solution that will put the divs in the right place, regardless of what is between them.

If there is no CSS answer for this I can fix it generating them in PHP, yet CSS has my preference since its a style-issue.

Thanks in advance

Unfortunately, you will not able to achieve this via css only.

This selector:

Will not look for 2n+1 occurrences of .widget.half children, yet instead will target only .widget.half elements that are children number 1, 3, 5, etc.

Create Gradient with CSS

Here is an example of creating gradient with CSS