I'm developing a horizontal scrollable section with multiple listed items. Each listed item contains a tooltip that should display above said listed item on hover. Since the parent div is a scrollable section, I need the tooltip to be positioned relative to the listed items but this causes the tooltip to disappear due to the "overflow-x:scroll" set on the parent. I'm really stumped now. Any suggestions would be much appreciated.
HTML
<div class="scroller">
<div class="scrollable-item">
<span> Static Text</span>
<span> Static Text</span>
<div class="scrollable-item-tooltip">
</div>
</div>
<div class="scrollable-item">
<span> Static Text</span>
<span> Static Text</span>
<div class="scrollable-item-tooltip">
</div>
</div>
<div class="scrollable-item">
<span> Static Text</span>
<span> Static Text</span>
<div class="scrollable-item-tooltip">
</div>
</div>
</div>
CSS
.scroller {
overflow-x:scroll;
white-space:nowrap;
}
.scrollable-item {
position:relative;
width:160px;
display:inline-block;
}
.scrollable-item-tooltip {
position:absolute;
bottom:100%;
}
I tried creating a fiddle but it looks like there's something preventing me from breaking the layout so the code actually works fine on the link below without an overflow. I'll leave the link here anyway.
https://jsfiddle.net/xjrkt2fe/3/
Yes, content outside of your scrolling div will be hidden/clipped by the boundaries of the div.
Your options are to: 1) increase the size of the div to accommodate the tooltips (mostly likely not an option). or 2) add the tooltips somewhere outside the div and manually position them next to the items in the div on hover. This likely also includes handling collision with screen edges, handling updating the position as the div is scrolled, etc. You might be able to dodge that last issue if the tooltip can just hide on scroll.
Depending on what framework/library/etc. you're using, you might have something available to do some of that for you. If not, something like jQuery UI's .position() method or Tether http://github.hubspot.com/tether/ would be very handy for that.
Related
I have two divs (the left one is an image) inside a wrapper that are meant to be next to each other, the div on the right being positioned absolute with right:0 and bottom:0 so it positions to the bottom of the div image on its left. The issue is, when the screen gets small enough the position absolute one overlaps the image. I have added a div that just occupies space in the wrapper and I've avoided the overlap, but now when you make the screen smaller the div goes under the image but it doesn't reposition itself right underneath; it shifts to the right. Here is an example on JSfiddle:
http://jsfiddle.net/xbdsq7zj/
Here is the html:
<div class='ideaside'>
<div class='ideaphoto'>
<img src='http://www.devsourcecodex.com/images/advertisingexamples/200x200.png'></img>
</div>
<div style="float:left; width:150px; height: 120px;"> </div>
<div class='ideainfo'>
<p clas='glyphicon glyphicon-star unclickable'></p>
<span>Followers</span></p>
<p><strong>
Phase 1
</strong></p>
<p>By <%= render #idea.user %></p>
<i>2 hours ago </i>
</div>
</div>
<br>
<p class='doc'>
<b>Brief:</b>
t's not fallacious at all because HTML was designed intentionally. Misuse of an element might not be completely out of question (after all, new idioms have developed in other languages, as well) but possible negative implications have to be counterbalanced. Additionally, even if there were no arguments against misusing the <table> element today, there might be tomorrow because of the way browser vendors apply special treatment to the element. After all, they know that “<table> elements are for tabular data only” and might use this fact to improve the rendering engine, in the process subtly changing how <table>s behave, and thus breaking cases where it was previously misused.
</p>
Here is the css:
.ideaphoto {
float:left;
}
.ideainfo {
position:absolute;
bottom:0;
right:0;
}
.ideaside {
position:relative;
overflow:hidden;
}
I'd like it to go to reposition so that it is directly under the image rather than next to some whitespace under the image. Is that possible without using Jquery collision detection?
Thanks.
Edit: I am using Bootstrap, and this is all taking place in col-md-4. The image is always 200px, but the text div's width is sort of variable depending on the user's name.
I think bootstrap's function, (assuming your using bootstrap for this because of the glyphicon) will be of use to you. You don't have to use float anymore because bootstrap will do it for you.
<div class="row">
<div class="col-md-6 col-sm-12 ideaphoto"> <!--If viewport is regular it will take up half of the page. But if viewport is smaller it will consume a row, thus repositioning the .ideainfo below it.-->
<!--Enter your Image code here.-->
</div>
<div class="col-md-6 col-sm-12 ideainfo">
<!--Enter your IdeaInfo here.-->
</div>
</div>
I am trying to make a shopping cart layout and am having a hard time getting the checkboxes to appear at the right spot. The code here:
http://jsfiddle.net/35Hkj/1/
renders wrong on jsfiddle itself and internet explorer/firefox... It looks right in expression web 4 and chromium. Should be a checkbox beside each color.
If I position one check box with absolute in a relative container it works on all browsers perfectly but loses the flow meaning it doesn't expand the div container dynamically.
Is there a way to position absolute (relative to the parent) without losing the flow??
I'm guessing slicing up the image with css and positioning a checkbox beside each sliced part wouldn't be correct or easy.
Position absolute will allways "lose the flow".
However, you can position the divs absolutely, if they are in the same container as the image. Just change the left value accordingly. The container will be strechted to image's height as the image will remain in the flow.
Wrap the texts beside checkboxes in a label. More semantic + container divs will have enough height to not lose the flow so that you can absolutely position the checkboxes within.
An element with position:absolute is always taken out of the regular flow of relative elements.
What you could do is use a sprite for the background image. Place your checkboxes and your image in float:left and float:right divs or float both of them left and keep a margin between them and modify the background position of the sprite. If you wanted to, you could also use images, though I feel that using a sprite would be faster. For eg.
<div>
<div class='item'>
<div class='image'>
<img alt="" src="http://www.ahornblume.ch/images/img1.jpg" />
</div>
<div class='checkbox'>
<input name="product1[]" type="checkbox" value="skin" />skin
</div>
</div>
<div class='item'>
<div class='image'>
<img alt="" src="http://www.ahornblume.ch/images/img2.jpg" />
</div>
<div class='checkbox'>
<input name="product1[]" type="checkbox" value="face" />face
</div>
</div>
</div>
.item{
float:left;
width:auto;
}
.image{
float:left;
width:auto;
}
.checkbox{
float:right;
width:auto;
}
If you wanted to use sprites, you could give each div an id and define a background position, depending on the image-checkbox pairing.
http://jsfiddle.net/nicktheandroid/SsfpG/
I don't understand why these inline elements are causing the paragraph to stop wrapping, or, to not finish placing text before the inline element, in other words: something is causing a line-break just before the DIV set to display:inline-block, even if i just set it to display:inline. If I change the DIV's to SPAN's, then it works, but if i've set the DIV to display:inline or display:inline-block then it should work just like a SPAN.. This should be incredibly simple! ARGH!
CSS
p {
position:relative;
}
.trigger {
display:inline-block;
position:relative;
}
.toolTip {
display:none;
position:absolute;
top:0;
left:0;
}
.triangle {
display:inline;
position:absolute;
top:0;
left:0;
}
HTML
<p>
Hello this is an example paragraph and I love to talk about typography
here on somewhere in between the this and now when I see all of the
dogs running around the streets I'm like oh my goodness puppy what are
you doing to the cats when
<div class="trigger">TRIGGER TRIGGER
<div class="toolTip">
This part is hidden right now, this will be the tooltip, for testing
purposes it is hidden.
<div class="triangle"></div>
</div>
</div>
in that one movie and i'm
like oh wow this is insane i dont know what to even think when I see
all of the cats gone, okay i'm gonna stop now mr person there. I'm like
oh my goodness puppy what are
you doing to the cats when you see them, now they're all vanished
since you came to town puppy
</p>
You can't put block level elements inside paragraphs. Since divs are block level elements, the browser acts as if you had written this instead:
<p>foo bar</p>
<div class="trigger">....
This is slightly different from when people discuss inline vs block when talking about CSS. The end of the paragraph element is determined while the browser is reading the HTML, before CSS is applied.
On the other hand, spans are inline elements, so that works.
Replacing your divs with inline elements will work :
<span class="trigger">TRIGGER TRIGGER
<span class="toolTip">
This part is hidden right now, this will be the tooltip, for testing
purposes it is hidden.
<span class="triangle"></span>
</span>
</span>
Issue
As far as I know clearing floats mostly works on parent items. But there is one issue in my template after the post thumbnail, where the clear: both acts on the whole content wrapper. Without clearing the float, the thin line will stick to the text right to the thumbnail.
What I want to do is to have the line 45px below either the thumbnail or the text (depending on what height is higher).
Preview
Please have a look at this sample.
Any help would be highly appreciated!
Just use the overflow: hidden; hack to end floats.
Add the CSS overflow: hidden to the parent element.
EDIT
As a bonus. If you want to use some fancy CSS3 stuff (like dropshadows) the above hack will fail.
There is a new hack: http://fordinteractive.com/2009/12/goodbye-overflow-clearing-hack/
Although this hack also has some issues.
And it would take some time before you can make some serious use of fancy CSS3 stuff.
You could use it, but the browser support will be poor for a long time :)
I would recommend using a .clear class that could be used anywhere to clear floats, it would look like this:
.clear { height:0; overflow:hidden; clear:both; }
Insert it under your floated elements to clear them, it
Float the thumbnail div left and the text div left as well. after them, set a div
<div style="clear:both"><!-- --></div>
The div that contains all 3 of these will take the length of the heighest div.
Basically:
<div class="container">
<div class="thumbnail" style="float:left; width: 50%;"><img src="whatever.png" /></div>
<div class="text" style="float:left; width: 50%">My text</div>
<div style="clear:both;"><!-- --></div>
</div>
This is what I want my page to look like:
Mockup http://img64.imageshack.us/img64/5974/pagedh.jpg
I'm not quite there yet. Here's where I'm at:
http://labs.pieterdedecker.be/test/test.htm
I'm quite new to using <div>s (as opposed to <table>s) to create the layout of my pages. How do I get the job done?
You can fix the menu by just adding 2 CSS style rules:
.menu { overflow: hidden; }
.menu ul { margin: 0; }
The overflow will leave a taller menu because of the browser default <ul> margin, just clean this up with the second style, which will knock the margin out.
try including clear:both in the body div.
<div id="body" style="clear: both">
<p>This is my body</p>
</div>
good luck! ;-)
Simply add the below code:
<div style="clear:both; margin-left:20px;">
after the line:
<div id="body">
That is:
<div id="body">
<div style="clear:both;">
More info about the clear property.
Also, have a look at good tutorial:
Div based layout with CSS
the problem i'm seeing now is that your blue 'item' boxes don't look right. i think the reason for that is that the div containing the 'item' boxes should be contained inside the main 'body' box. it is in fact the very first thing inside the 'body' div.
to make this easier on yourself, you should create a div inside the 'body' div, with width: 100% and background: blue (or whatever color that is). then, inside that div you can create your list of items.
the obvious way to put the "items" inside the "item bar" would be to float:left all the items inside their own divs. you would then need to set a static height for the "item bar" itself (like height: 2em), because a div containing only floating elements has no height.