I have begun writing a CSS and HTML collapsing menu system (AKA an accordion). I followed the tutorial posted here, however, I had to change it slightly. Instead of using <a> and <p> tags, I had to use <div> tags because I will be adding images to both 'sections' at a later stage. After I change the <a> and <p> tags to <div> tags, the slide-out content does not display when the mouse is hovering over the box. It is only when the mouse is moved away does the content briefly display before the 'drawer' retracts. I have posted my code bellow and any help would be very much appreciated.
Link to my CSS: http://cl.ly/Cuoe
Link to my HTML: http://cl.ly/Cuhf
Many Thanks.
I think the problem is that your #accordion div:hover CSS rule is now catching both the item div AND the itemTitle and itemContent divs inside the item.
In your CSS file, try replacing both instances of #accordion div:hover with #accordion div.item:hover. This will cause the rule to only apply to divs with class item.
Edit: You could also just change it to #accordion .item:hover
Check this fiddle: http://jsfiddle.net/ufPrF/
The problem was that you were setting a height property on #accordion div:hover which affected all <div>s inside the accordion (including title, content etc..). You should have either done #accordion > div:hover OR #accordion .item:hover (like in the fiddle)
Related
I am trying to link a image, this is the ID in html:
<div id="testimage">
As you can see my id is "testimage" in css I have added a background image.
How do I make this image as a link. currently its not working,.
Put the link around the image, you should make sure the anchor is displayed as a block, because prior to HTML5, a block element wrapped inside an in-line element is invalid:
HTML
<div id="testimage"></div>
CSS
a{ display:block; }
JSFiddle
I am trying to understand html/css menu bar and my problem is at the display property,
I do know about this property very well, but if you take a look at this Link,
just a simple menubar, but the problem is that i dont understand why does the li tag and the a tag at the css style include display property inside them when the float do the job and you can delete them and the menu looks the same, i know that there is a resone for thoes display properies to be there at thoes both tags styles but i dont get it, if can some one please help me understand why the display property with the value of inline at the li css style, and with value of block at the li a at the css style, and again its not that i dont know about this property it just i dont understand why its there, thank you all and have a nice day.
display:inline used in li's is to make li aligned Horizontal or side by side.
display:block is used in li a so the a should take the complete with of the li so that if you click anywhere inside li the <a> tag will work & will not only work on clicking on the text.
I've made some links within an <ul> <li>. I made images clickable, linking to a new HTML file. I've got four of those, and I wanted to put two beside each other so I used float:left;.
However, when I create a new <h2> after those images, this <h2> becomes clickable and linking to the HTML file used in the last picture.
I've already used clear:both; but that doesn't work. Any idea about what may be happening here?
Put float: left; on H2 aswell or overflow: hidden; on li elements.
I've made this html box, that is supposed to have a title and some buttons on right,
http://jsfiddle.net/vqpmt/17/
Everything seems fine except that the edit button as you can see is a little bit below the title, that shouldn't be the case they should both be at the same exact level.
How do I achieve that, and is my code a mess? Is there a better way of doing something like this?
I moved h1 and the edit link tag inside a div container. Check my version of your code here
To be on the exact same level, the html elements has to be either inside a container (as in my fiddle) or should use 2 inline html elements.
Try reading w3schools on html and css which has lot of information that you can learn in short time.
w3schools HTML reference here
w3schools CSS reference here
Edit: h1 is a block element which means it will add a new line. So I added a new css style .inline and changed the block property to inline.
.inline { display: inline }
Your H1 element extends the width of the page and is pushing your edit link down. I've provided an alternative solution here.
Fiddle: http://jsfiddle.net/GvGoldmedal/vqpmt/32/
I've got menu items that look like this
<ul>
<li>Item1<span class="context-trigger"></span></li>
<li>Item2<span class="context-trigger"></span></li>
<li>Item3<span class="context-trigger"></span></li>
</ul>
with CSS that turns the above into a horizontal menu, and JS that turns the [spans] into buttons that bring up contextual menus. Vaguely like this:
Item1^ Item2^ Item3^
If the menu gets too wide for the browser width, it wraps, which is what I want. The problem is that sometimes it's putting in line-breaks before the [spans]. I only want it to break between [li]s. Any ideas?
try using
white-space: nowrap;
in the css definition of your context-trigger class.
Edit: I think patmortech is correct though, putting nowrap on the span does not work, because there is no "white space" content. It might also be that sticking the style on the LI element does not work either, because the browser might breakup the parts because the span is a nested element in li. You might reconsider your code, drop the SPAN element and use css on the LI elements.
You need to put the following to keep your list item from wrapping (putting it in the context-trigger class would just keep the span contents from wrapping):
li { white-space:nowrap; }
If you float the <li> elements, you should get the effect you want.