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>
Related
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.
I'd like to position two DIVs in another container so that the first is against the parent's left edge and the second is against the parent's right edge. Here's the markup I have so far:
<div class="parent">
<p class="flushleft">
This paragraph should be aligned left.
</p>
<p class="flushright">
This one should be aligned right.
</p>
</div>
How can this be done without using floats? I'd like to keep everything in the normal flow, if possible. Thanks!
Use display: inline-block in your css code.
Using your HTML, here's the CSS:
.flushleft{
width:50%;
display:inline-block;
}
.flushright{
width:50%;
display:inline-block;
}
Or since they're both identical - if you don't intend to style them further - you can use one class.
on the left side of my page I have a logo and a list of links then on the right side I have a blog link. When I make the browser smaller the blog link bleeds into the links on the left. How can I get the blog link to stop moving at a certain point?
link to my problem
below is the code for the problem I'm having.
html
<div id='logo'>
<img src="MAIN_IMAGES/logo.png" width="255" height="71"></div>
<div id='nav'>
<a class="ex4" href="#">FOOTWEAR</a>
PROJECTS
CLIENTS
ABOUT
CONTACT
</div>
<div id='blog'>
BLOG
</div>
<div id='blogM'>
<img src="MAIN_IMAGES/date_2.png" width="60" height="19">
</div>
CSS
#logo {top:17px;
clear:both;
float:left;
position:absolute;
left:45px;}
#nav {position:absolute;
top:14px;
left: 385px;
min-width:800px;
white-space:nowrap;
color:silver;}
#blog {position:absolute;
top:14px;right:113px;
list-style:none;
font-family:"Gill Sans Light";
font-style:normal;
font-weight:400;
text-decoration:none;
#blogM {position:absolute;
top:13px;
right:43px;}
So the problem is in the way you are positioning the elements, you're placing them like its a pixel based coordinate grid instead of an html document. And while you CAN do it this way, it will be a major pain. You gotta remember html was made by dinosaurs without pixels and grids and has since evolved to accomodate this but not replace.
Have a look at this tutorial. Your div elements are all absolutely positioned from the dimensions of the body element. Theoretically the elements will always overlap this way. However if you positioned them relatively to each other they should work together regardless of how the browser is dimensioned. The concept is a bit difficult to understand, so you kind of have to think like a dinosaur. Nested elements work much like typing letters next to each other while unnested elements are like paragraphs where a return gets put between em, making them totally independent of whats around them.
My advice to you is to get rid of that whole CSS structure and start over. Try remodeling your DOM something like
<body>
<div id='logo'>
</div>
<div id='nav'>
<div id='blog'>
<div id='bloglinks'>
</div>
</div>
</div>
</body>
This should put them in a line, and then offset them using 'left' and so on to place them where you want. Here is also a pretty good way to see how it works. It's all pretty out of date, you really have to think about designing in a certain way that is counter intuitive to modular thinking.
I have a div container with a series of p tags. Each p tag will float to the left. I want two p tags per line, so think field/value.
Title: Some Title
Author: Some Author
<div id="container">
<p class="field">Title</p><p>Some Title</p>
<p class="field">Author</p><p>Some Author</p>
</div>
If I set the "field" class to clear: both, I get the desired functionality in most browsers except IE 7 (not worried < 7). However, in IE 7 if the containing div is wide enough, the clear: both seems to be ignored and I'll get something like this:
Title: Some title Author:
Some Author
A couple of thoughts:
I can monitor the width of the containing div so that only two p tags can sit on one line but that seems very brittle.
I can muddy up the markup by placing clearing divs after every two p tags. It would work but makes me feel dirty inside.
How can I overcome this issue?
Use this pattern (span is optional - for additional styling if needed). Lists make more semantic sense than re-purposing the wrong tags. This is a list. :)
<ul>
<li><label>Title</label><span>Some Title</span></li>
...
</ul>
CSS:
ul, li {
padding:0;
margin:0;
list-style-type:none
}
li {
clear:both
}
label {
float:left;
width:150px;
}
http://jsfiddle.net/QUL9v/1/
Using the p tags....
<div id="container">
<p class="field">Title</p><p class="field">Some Title</p><div class="clear"></div>
<p class="field">Author</p><p class="field">Some Author</p><div class="clear"></div>
</div>
with css:
.field {
float: left;
}
.clear {
clear: both;
}
This is just sticking to the use of the p tag. Personally, this is how I would accomplish it (http://jsfiddle.net/QUL9v/3/):
<div id="container">
<div class="field">Title</div>
<div class="field">Some Title</div>
<div class="clear"></div>
</div>
<div id="container">
<div class="field">Author</div>
<div class="field">Some Author</div>
<div class="clear"></div>
</div>
The only reason I'm recommending this is because since this is more of a layout issue, it feels more natural to me to use the div as opposed to p element. Also, it will ensure the position of the text, regardless of what you put inside the divs (anchors, forms, tables, etc).
Another thing you should pay attention to is I'm using the clear as the last sibling instead of the first (as in your examples). If you're clearing the front; then its possible that since your trailing elements are floated and inline, you're going to potentially run into errors down the road, especially with IE7. A lot of the times, the floating rule will get passed on to elements you never intended or thought it would be passed to. Clearing at the end ensures that this doesn't happen.
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>