Can anyone provide any good examples of how to use inline-block versus just regular display inline? I'm having trouble grasping the concept, if anyone can do a little demo on jsfiddle why you would use one over the other, that'd be much appreciated.
I Hope Below link should be more helpful for you.
http://dustwell.com/div-span-inline-block.html
A couple of differences:
inline-block elements don't wrap onto new lines
inline-block elements can have padding and margin applied with expected results.
Related
I'm aware of this hack for inline-block property, but as it really is a hack for the poor browser support, I was wondering if there is a more elegant solution to use CSS sprites without the necessary line-break of block elements.
To illustrate the idea: in the footer of this website the icons which are inside the footer-text paragraph at the very right bottom of the page should get a nice rollover image. The most elegant technique I know for this is CSS sprites, but that would of course add a line break before the images.
Am I missing something?
Any insight is much appreciated!
Best, Alex
Personally I inline-block hack stuff all over the place, but if you're looking for an alternative, the answer is right on the page you use for an example, in the other social icons list nearer to the top of the page.
Just use display: block and float the links.
Here you can see what I'm trying to do: http://jsfiddle.net/smogg/QFa4J/2/embedded/result/
I was trying to achieve this look so hard, and right now this code may be really confusing. If you have some tips which may clarify that, please tell me. It is all made by trial and error.
Anyway, this looks good. The only problem is my text inside .article is not selectable. Borders inside .article:before cause this problem. How can I solve this? Or maybe I should take some different steps to achieve this look (right now, with my solution I have to define height of articles which is problematic).
#edit:
I forgot about this. I can't use z-index cause my #mainhas shadow on it (which is not included in jsFiddle to clarify code) and then shadow shows on top of border. If I use borders without :before then my #main gets wider, which is not what I want.
There are cleaner and easier ways to do this. Enjoy!
http://www.css3d.net/ribbon-generator/
http://www.pvmgarage.com/2010/01/how-to-create-depth-and-nice-3d-ribbons-only-using-css3/
http://www.webresourcesdepot.com/creating-nice-3d-ribbons-with-pure-css3/
I have created a web page layout using CSS. The CSS and HTML can be found here: http://pastebin.com/Gn25nM8G
I had to use what seems like some funky tricks to get the layout proper. Specifically, to get two of my content blocks in the right place I had to use this CSS:
position: relative;
top: -351px;
I'm wondering if there's a better way to accomplish this layout?
I'm also not sure why there's a big gap at the end of my page? If you create a page from my code you'll see what I'm talking about. Any help would be greatly appreciated.
What if you just try rearranging your elements? Putting everything into two columns and floating each of those?
Here is a quick fiddle to illustrate what I mean:
http://jsfiddle.net/qh75H/3/
Here's my approach. jsFiddle
I have tried to maintain your code and layout as far as possible.
That may or may not be the best approach.
position: relative means you are moving the div, but the the space taken up by the div originally is still occupied.
If you want to move the div's, but make room for other content, position: absolute may work better.
the position: relative could also be causing the whitespace because the boxes you "moved" may still be taking up space, causing the page to run long.
I do not know how common this problem is for other users, but for me, it's pretty common and I have no real idea why it is happening.
But let me explain the symptoms. :)
When ever I do a layout using css and divs I many times end up with some place where margin just stops working as it should. It could be that it adds space to the left and right but usually not top and down.
Other times a margin on top of a div results in an unwanted space further down on the page.
Anyone with experience of this problem? And what am I probably doing wrong?
All divs are of course properly closed, so it isn't that obvious. And I know, I know, it's super hard to answer width no real example. I'm just throwing out a rope gere and hoping for a savior. Thanks!
I think the problem is with float and margin together. margin will not apply for example if you have a div with float:right and another div without float after it ! no margin between these two elements will be applied. unless you set a float for second element too !
but remember in these situations, margin applied for contents of both elements. not for borders. content will align correctly but borders not!
this is a common problem that we can call it as a BROWSER BUG!
If you have eny specific problem let us to know.
if u can post some code..it will be helpful. see these sites and try to see where ur going wrong..
http://www.w3.org/TR/CSS21/box.html
http://www.w3schools.com/css/css_boxmodel.asp
I have been looking around and seem to find lots about aligning a div vertically however not with a dynamic height div surrounding it.. i have a moch up of what i require, built from all sorts of different templates i have found.. i just cant get it to do what I want maybey i am totally wrong?.. i thought it would be simple however has turned south.. i am hoping somone on here can understand what i mean and fix it easily as I am lost... tried so many different things however just end up back to square one..
I have checked out "vertically-center-content-with-css" at vdotmedia and this is exactly what i need the div to do however i can't get it working in the template i have come up with.. i do want it to be cross browser and ie6 would be nice but at least ie7..
Thanks in advanced!
The code was a bit long for here so see the link for what i am after..
http://www.mmageardirect.com.au/tmp/index.htm
Not so easy but check this out: http://blog.themeforest.net/tutorials/vertical-centering-with-css/
Try using vertical-align: middle and a set of divs with display:table, table-row, table-cell.