i have a question about html and css.
How can i make a sidebar like the one in Google FAQ page?
I mean, the sidebar that when you put the cursor over, an arrow appears and if you move the cursor, the arrow moves with it.
I hope you can help me, thanks!
From the looks of it, they are listening for an event (in this case when div#gd-collapsible is hovered over) and the class "hover" is added to it.
So you have that #gd-collapsible is about 3 pixels wide and and on hover, the class "hover" is added which has 1px border solid on left and right, and that's about it really.
You can do this via jQuery, just make sure you style the div#gd-collapsible in a way that it's height equals the one from the right side bar.
Related
How to set up the css/html code if the A needs to be at the corner of the bottom right- where the red rectangle pointed
two things:
*responsive page
*background is overlay. the white rectangle is a popup.
Was coming here to say the same thing as #RBCunhaDesign , that would seem like the way to go to me, as well.
I'm having trouble with my code with my CSS stylesheet and HTML index coding. I only have one problem and that is my CSS stylesheet isn't letting me place a div class into it. I'm using the free Brackets software which includes syntax highlighting and it's coming up red which is an error. Here is a picture of it:
http://i58.tinypic.com/ju97cl.png
As you can see in that picture, I've boxed around the place where it's disallowing me to place the div class into the stylsheet in white. I've given a working example with the blue box so I'm confused to why it's doing this.
My main question for you today is how do I create buttons directly in the center on the side of my page with CSS or however possible and how to edit these buttons like adding hover animations, visual looks etc? (I'm new to this by the way) Also, I want to lock the scrolling of my page in a certain area like in the picture described:
http://i62.tinypic.com/wmbyw.png
Lastly, I wish to ask how to make my content on the white area transition by sliding to the side for when I click a button to go onto the next page. However possible I would really appreciate if somebody gives me the time for this. Sadly I can't give another image because I don't have 10 reputation. so I hope you can make out what I'm trying to say.
I will be so grateful to anyone who helps me with this.
First off you need to close your .right-menu class with a }.
For effects and animations check out w3schools:
http://www.w3schools.com/css/css3_transitions.asp - transistion property
http://www.w3schools.com/css/css3_animations.asp - animations
Centering in CSS can be done with text-align: center or margin-left:auto; margin-right: auto.
To prevent scrolling of the body do body {overflow:hidden}
For sliding page content refer to my links above or checkout jQuery
http://www.w3schools.com/jquery/jquery_slide.asp
I have a chat box that is resizable. It has
resize:both;overflow:auto
in the CSS. So at the bottom right of the div, there is a little arrow thing that you can click on and resize the div.
Is there another way to style this? I'd much rather be able to put the mouse on any corner of the div and resize it, or at least have that arrow be on the top right or top left of the div. I'd also like to be able to change what the arrow looks like, to make it more obvious what it does.
Also, is it possible to have the cursor change when the mouse is over the arrow?
Short answer: this is not possible.
However using javascript and CSS a custom solution can be made. You can place a little div in a corner using absolute positioning. Then have javascript resize the textbox on dragging the little div.
I have a css menu, pretty standard functionality. I have implemented it within a Netsuite site im working on.
The menu is visible here:
http://www.gardensandhomesdirect.co.uk
Its the one just under the header.
Ive been trying to get the only part of the menu with dropdowns to come left instead of right when hovered so that it is not being 'hidden' underneath the wrapper.
What is the best way to get this menu showing correctly? I there a way i can get it hover over the top of everything else instead of underneath like now?
Any help appreciated.
-Wayne
You need to have overflow: visible on #outerwrapper if you want to show anything outside that div.
Alin
Please check this page first http://balipremiermanagement.com/
in that page, there is a slide show and a Logo at Top Left Corner. how to make jQuery Event when if the images/101130/logo_big.jpg Element CSS display:block then the logo (at top left corner) element CSS will change to display:none
or more simple, what i want to achieve is, when the slide show, show the Logo. the the logo at top left corner will dissapear.
How to do that with jQuery?
Thank you very much.
I'm not sure this question is relevant any longer as the website seems to have changed, but...
Apply .hide() to the element, or for an animation,
.hide( [duration] [, easing] [, callback] )
See the jQuery Documentation for Hide for details.