- This topic is empty.
-
AuthorPosts
-
July 8, 2013 at 11:52 pm #46222MickeyMember
I’m not a CSS or Javascript guru but I thought this would be simple. Maybe I’m missing something but I can’t find an example of this anywhere either.
I have an small image and when the cursor hovers over it I simply want a dropdown information textbox/menu (with embedded hrefs). The gotcha seems to be that the contents of the textbox can vary in width from a single word to a lengthy paragraph so I want the text box to vary in width according to its contents. Width should be width of the single word upto ‘max-width’ then the text wraps. I’ve tried so many different options using UL/LI’s, DIV’s, SPAN’s, jQuery I’m not sure what to give as an example.
Any help appreciated or a pointer to the example I can’t seem to find.
July 9, 2013 at 1:23 am #141976vasanthMemberHi mikey, I’m not able to understand the correct thing. Post your site link.
July 9, 2013 at 2:13 am #141978MickeyMemberHi vasanth, here’s my most recent piece of code which does not allow any text further than the width of the image above it.
Text that should go to 300px then wrap but only goes the width of the image above.
July 9, 2013 at 2:35 am #141981georgearnallParticipantIf you want us to help you it would be easier for us to see this in [CodePen](http://codepen.io/pen “codepen”). Or you could post a link to your project.
Thanks :)
July 9, 2013 at 3:06 am #141983MickeyMemberSorry I’m new to this forum and just getting to grips with it.
Try this – http://codepen.io/Mickey/pen/xjflw
July 9, 2013 at 3:40 am #141984dgrieselParticipantHave a look at [this](http://codepen.io/anon/pen/IHBEp “”)
First of all, you don’t need to duplicate the styles for #d2 in #d2:hover, because they are still applied.
Second, you don’t need JS at all. This CSS#d1:hover #d2
is your friend.In order to solve your original problem, I added a container div for the dropdown and set its width to 300px (or set it to whatever you want, as long as it is wider than your dropdown content’s maximum width.
Inside this container div, the dropdown can resize with the text.Oh btw: I wouldn’t use IDs as selectors. Use classes!
July 10, 2013 at 3:50 am #142076MickeyMemberExcellent, thanks. Yes I had tried a few things so what I posted was messy.
Simple when you know how!
Thanks again.
-
AuthorPosts
- The forum ‘CSS’ is closed to new topics and replies.