I'm trying to vertically centre my introWrap container using the :after pseudo-element method (as described at the end of this article). I've always applied this method without any problems, but I can't for my life seem to understand why it doesn't work in this case (http://jsfiddle.net/4yfru/2/).
Right now the introWrap div is at the top, whilst it should really be in the center on the vertical axis. I tried replacing the :after pseudo-element with a span, and it worked perfectly. Something's fishy is going on here and I don't know what.
Could any kind soul please help me out here?
You have the wrong element with the :after applied. You need to apply it to the "wrapping" element, so like this:
#intro:after{
content: "";
display: inline-block;
vertical-align: middle;
height: 100%;
}
Related
I want to display some background images along with some text. Everything should be divided by a | (pipe) to separate the elements.
The pipe is included with an :before selector with the pipe as content.
However it seems that this breaks the layout as the background images are now not longer on the same line as the text. If I remove the content completely it works as expected.
What is the reason for this and how can I fix it?
I've created a small Fiddle as example.
Your layout uses float: left so :before should follow the same rule. For example:
.list-piped:before {
display: block; /* fix */
float: left; /* fix */
content: "|"; /* This breaks the layout */
}
https://jsfiddle.net/infous/1cbeyn84/4/
BTW, Manoj Kumar below has described the real problem. My answer is a possible solution because float: left as well as position: absolute has its own flow.
Why does this happen?
Check out this Image. Technically ::before is part of li(.list-piped) and takes up the whole width, pushing the child items(icons) to bottom.
How to fix?
Apply ::before to child elements or use position: absolute to the current code.
Updated JSfiddle
The Issue...
Once again I am searching for a cool CSS trick to help me to achieve an effect whilst preventing the use of untidy HTML...
The following image shows what I am trying to achieve, notice the top and bottom borders only stretching around 70% of the width...
A Starting Point
As a starting point I have created the above using what I would call 'untidy HTML' to add these dividers to the list.
Here is my jsFiddle: http://jsfiddle.net/E93UE/
You will see I have <li class="divider><!-- Divider --></li>, this is what I want to get rid of if possible
My Question
So, if the above has not explained well enough, I would like to apply a border to a block element, but only show the border for a specific width of the whole element.
Obviously this cannot be achieved using just border:XXX, it is likely to need some :before and :after selectors...
Possible Solutions...
I have had two thoughts of how this could be achieved, one is not too practical, and the other I am not too sure how to implement (these are just ideas):
Set the width of the list element and give it overflow:visible, all elements within have position:absolute and then just apply margins to bring the elements out of the list box... (not a good fix, prefer my original)
The other solution, which I am not too sure how to implement, may be the way to go. By apply two :before elements with position:absolute you could overlay the edges of each border (I think)
Give a border to :after pseudo-element (demo):
.separated:after {
content: "";
display: block;
width: 70%;
margin: 1em auto 0;
border-bottom: solid;
}
I recreated your divider using :before/:after pseudo-elements:
http://jsfiddle.net/thirtydot/E93UE/1/
#staff_list li:first-child:before, #staff_list li:after {
content: '';
display: block;
margin: auto;
position: relative;
bottom: -26px;
width: 500px;
height: 2px;
background: #b9b7b6;
}
#staff_list li:first-child:before {
top: -14px;
bottom: auto;
}
The numbers need tweaking, and you need to test it when you have more text, but it's probably close enough. I made other changes to help this solution work, compare your original demo to mine.
I created a fiddle that exemplifies the problem:
http://jsfiddle.net/vZtBb/
This is working exactly as I want it, but the problem is that in IE7 the absolutely positioned span (hover-tooltip-container) starts at the top of the line instead of at the bottom like it does in the other browsers. If you add a border to hover-tooltip-container, you can see this.
This is a problem because I want the tooltip to go up, but the anchor to still be exposed. You should be able to mouse over the tooltip as well, but the gap in IE7 makes this impossible.
If there is any way to get the hover-tooltip-container span to start in the same place on the line in IE7, IE8, and FFX, that would be perfect.
Javascript is not a solution.
The most simple thing you could do with the code you already have, is add a star hack to adjust the bottom rule within .hover-tooltip, for IE7.
.hover-tooltip {
display: block;
padding: 15px;
position: absolute;
margin: 0 auto;
bottom: 1em;
*bottom: 0;
width: 100%;
border: 2px outset #c0c0c0;
background-color: #f0f0f0;
text-align: center;
}
However, the double, nested absolute positions of .hover-tooltip-container and .hover-tooltip seem unnecessary.
I did something quite different (also renamed your classes, to much of a hassle to play with those looooooooooong name).
http://jsfiddle.net/vZtBb/16/
I removed the nested absolute positionning : They are the one causing the issue, since element in absolute position are taken out of context. So, 2 solo, nested absolute positionned element means that one element is in nothing (glitchy and really not wanted).
Instead of that, I placed your tooltip box in absolute, but made it start higher than the anchor by use of a negative position (top:-70px). It's sketchy a bit, but you should get my point.
Trying putting this after the .hover-tooltip div:
<div class="clear fix"></div>
and this css:
.clearfix:after {content: ".";display: block;clear: both;visibility: hidden;line-height: 0;height: 0;}
.clearfix {display: inline-block; }
html[xmlns] .clearfix {display: block; }* html .clearfix {height: 1%; }
I was able to solve the problem by having the "container" element float left and have relative position. This achieves the appearance of breaking out of containers but still provides a reference for the tooltip to go up from.
I'm trying to add a content rotator to a site I'm building. The rotator works fine. In fact, it works out better than I had hoped. I need to tweak some styling things, but that's besides the point.
For some reason, the rotator (which is relatively positioned and inside my container/wrapper div) pulls my wrapper and menu down with it when I add a margin to the top of it (margin:65px auto 0; or something like that). Any words of advice?
Page here:
http://technoheads.org/test/ice/index.htm
This sounds like a classic case of collapsing margins.
You can fix this by giving the container a border-top, margin-top, padding-top, or an overflow other than visible. (jsFiddle)
you can probably accomplish what you want by giving #wrapper top padding instead giving #slideshow top margin.
I run into this problem a lot when I put elements inside of inline elements. You should be able to fix it by doing one of the following:
Set the element you're having trouble with to display: block; (Usually a good enough fix)
Use top-padding like already suggested (nothing wrong with using band-aids if it works...)
Set the element to float: left; (Not really recommended, can cause some problems down the line, but will definitely allow you to add top and bottom margins)
How about this?
#menu {
position: relative;
width: auto;
height: 100px;
left: 383px;
top: 0px;
}
In the following HTML, I'd like the frame around the image to be snug -- not to stretch out and take up all the available width in the parent container. I know there are a couple of ways to do this (including horrible things like manually setting its width to a particular number of pixels), but what is the right way?
Edit: One answer suggests I turn off "display:block" -- but this causes the rendering to look malformed in every browser I've tested it in. Is there a way to get a nice-looking rendering with "display:block" off?
Edit: If I add "float: left" to the pictureframe and "clear:both" to the P tag, it looks great. But I don't always want these frames floated to the left. Is there a more direct way to accomplish whatever "float" is doing?
.pictureframe {
display: block;
margin: 5px;
padding: 5px;
border: solid brown 2px;
background-color: #ffeecc;
}
#foo {
border: solid blue 2px;
float: left;
}
img {
display: block;
}
<div id="foo">
<span class="pictureframe">
<img alt=''
src="http://stackoverflow.com/favicon.ico" />
</span>
<p>
Why is the beige rectangle so wide?
</p>
</div>
The right way is to use:
.pictureframe {
display: inline-block;
}
Edit: Floating the element also produces the same effect, this is because floating elements use the same shrink-to-fit algorithm for determining the width.
The beige rectangle is so wide because you have display: block on the span, turning an inline element into a block element. A block element is supposed to take up all available width, an inline element does not. Try removing the display: block from the css.
Adding "float:left" to the span.pictureFrame selector fixes the problem as that's what "float:left" does :) Apart from everything else floating an element to the left will make it occupy only the space required by its contents. Any following block elements (the "p" for example) will float around the "floated" element. If you "clear" the float of the "p" it would follow the normal document flow thus going below span.pictureFrame. In fact you need "clear:left" as the element has been "float:left"-ed.
For a more formal explanation you can check the CSS spec although it is beyond most people's comprehension.
Yes
display:inline-block is your friend.
Also have a look at: display:-moz-inline-block and display:-moz-inline-box.
The only way I've been able to do picture frames reliably across browsers is to set the width dynamically. Here is an example using jQuery:
$(window).load(function(){
$('img').wrap('<div class="pictureFrame"></div>');
$('div.pictureFrame').each(function(i) {
$(this).width($('*:first', this).width());
});
});
This will work even if you don't know the image dimensions ahead of time, because it waits for the images to load (note we're using $(window).load rather than the more common $(document).ready) before adding the picture frame. It's a bit ugly, but it works.
Here is the pictureFrame CSS for this example:
.pictureFrame {
background-color:#FFFFFF;
border:1px solid #CCCCCC;
line-height:0;
padding:5px;
}
I'd love to see a reliable, cross-browser, CSS-only solution to this problem. This solution is something I came up with for a past project after much frustration trying to get it working with only CSS and HTML.