Hi all I am working on a project and am trying to do this all by hand for a learning exercise. I am not looking for the code that does the job but just an explanation of how this should be done.
the page I am working on is http://dev.davydsoft.com/playing.html
What I would like is to have a dropdown "menu" image when you hover over the pics up top. This is inspired and by the twitter bar. When you click on your user name on the twitter bar you get that dropdown.
I have played with alot of examples and for some reason it just wont click for me.
Any pointers would be great.
welcome to the stack overflow! I would recommend that you take a look at the first tutorial on this page:
http://webdesignerwall.com/tutorials/jquery-tutorials-for-designers
It explains how to use jquery (javascript) to show and hide hidden html elements.
If you are looking for a css only solution, you might search for "css suckerfish menu".
You need javascript for the hover event css for styling and html
Have a look at: http://net.tutsplus.com/tutorials/html-css-techniques/how-to-build-a-kick-butt-css3-mega-drop-down-menu/
Basically, if you only want guidance, then start looking into how to style with :hover selectors.
Related
I’m designing a wordpress website however I have no experience with html and CSS so when I need to fix bits and bobs of my website, I copy and paste CSS code that I manage to find online and it has been working so far.
The problem I have at the moment is I’m using a forum plugin called wpforo and I would like to edit how the reply / create new topic box looks. It looks very cluttered and unattractive (https://prnt.sc/paccv8).
What CSS could I add such that I could hide a few buttons? Here are some screenshots of how the answer box is laid out on my website. (divs and classes)
https://prnt.sc/pacddi
https://prnt.sc/pacdki
https://prnt.sc/pacea4
https://prnt.sc/paceha
https://prnt.sc/pacf09
Hiding some buttons would be the quick fix, if possible – what CSS could I add such that I could reveal the hidden buttons with an ‘advanced’ button then unreveal it with a ‘basic button’, here are two screenshots to demonstrate what I mean.
https://prnt.sc/pac5fm
https://prnt.sc/pac5py
Thank you.
I think the default you have is fine to be honest. If you want some space between elements, then you can use margin-top, margin-bottom, margin-left, margin-right for an element. For example #div-name{margin-bottom: 1rem}. Also, if you want the same amount everywhere then insetad of specifying all top,bottom,left, right, you can just use margin: 1rem which will do it for all.
If you want the background colour to change like in one the examples then background-color: blue on the title div would work.
As for the basic and advance button options, you wont be able to do this with CSS. It would require Javascript/jQuery. There will be many tutorials online for how to hide/show elements using jquery, but I think (I haven't used Wordpress enough to know if this is true) you will need to create some javascript file and then attach it to the page somehow. It's a lot of new stuff for a beginner to learn. I would just stick with what you have.
I would also suggest W3Schools as a quick way to learn some basic CSS, which might give you enough to get what you want.
Remember, CSS is for styling, Javascript is for functionality.
I've been trying to follow all the advice I found here, but I just can't seem to style the Facebook like button. Here's the website: http://www.threespringsranch.com/
At this point I'm just trying to stop the comment box from coming up as the easiest solution to the problem. I've tried the obvious of adding .fb_edge_comment_widget {display: none !important;} to my css, but it just won't read it. What am I doing wrong?
Thanks,
Brian
the short answer is that it's not possible to style the FB like button. It's in an iframe and you have no real access to the style in there.
More than that, Facebook policy forbid you from modifying their widget look and feel.
d. You must not obscure or cover elements of our social plugins, such
as the Like button or Like box plugin.
From Facebook policy
And, if you don't care about the warning, well you can "hide" the comment pop-up of the like button by wrapping it into an element (div or span), setting size on this wrapper and add the overflow: hidden CSS prop. This will somewhat work, but it's going to be unmaintainable if you have to manage internationalization as like button will change size.
So, the best, don't modify it, else, you have a little hack.
I'm looking for the CSS code to create a multi level vertical menu with no Jquery or javascript just pure CSS.
I have the HTML part done and ready to go!
You should follow this guide until step 3.
In case that site ever goes down essentially what you are going to need to investigate is using the :hover selector to show and hide various parts of the menu at any given time.
The flyout menu from www.cssmenus.co.uk might be worth looking at?
I really like what History has done with their show pages. Anyone know where I can find resources (or a name so I can google it) like what they have?
Example: http://www.history.com/shows/american-pickers where it says Full Episodes, History Pop Shop, etc.
You just need to make the image be visibility:hidden (with css) so that it maintains its space, and make it visibility:visible on hover of the container.
demo code: http://jsfiddle.net/gaby/hj4gH/2
You can put the detail popup inside the hover trigger, hide it, and show it in a CSS rule targeting a.Trigger:hover div.DetailPopup.
Can someone tell me why the CSS dropdown menu (rollover "Software Solutions") works here :
http://deltaassocc.web704.discountasp.net/temp/page-works.html
but not here:
http://deltaassocc.web704.discountasp.net/temp/page.html
This has been driving me crazy! I'm using Firefox 3.0.10. Please help..
There is an awful lot of knowledge built into a CSS menu to cover different browser versions and so on. My advice is don't do this yourself. Get a prebuilt one like suckerfish (or one of the many variants).
Alternatively you can use a Javascript based solution like superfish as suggested here.
Note: if you need to support IE6 then you'll be using Javascript for that browser anyway as it doesn't support the :hover pseudo-element on anything other than anchors.
Because you are loosing focus on the parent element. On the second one, there are more elements below and when the dropdown extends it goes under the content container - you move your mouse down and it's over the text content container, not over the menu container no more.
Install web developer toolbar and outline box elements, you will see that.
Google for jquery dropdown menu or other javascript-framework based solutions, they'll work fine and cross-browser, unless you're doing it just for self-education.
The pages look the same in IE8 and Firefox. The menu drops down but doesn't look at that great. If your using JQUERY SuperFish is a really good cs-menu.