I'm using flex property for my custom blockquotes, here's demo:
http://jsfiddle.net/buda9/pumZH/3/
Everything works fine when I use plain text in it. But when I add or layout isn't so nice :) I made a temporary fix by using display: block but then my icon in :before pseudo element isn't vertically aligned and I need this icon to be in the middle
blockquote {
display:flex;
}
Trying to fix this for the last 2 days
Your demo is little confusing, but I can tell you that this is not a good use case for Flexbox layout. It is not intended for things like this one. Better use old methods for this like floats, absolute positioning,etc. You need to wrap your content inside a blockqoute in some block-level box to trigger correct behavior of flexbox layout.
HERO IS UPDATED DEMO: http://jsfiddle.net/pumZH/4/
Is this what you want ?
Related
I have HTML like below and all is displaying grand, the problem is that due to a problem with Sharepoint 2013's editor your unable to edit the link text but as soon as I remove display: block I can edit the link text, the same happens using float.
My question is there a way to emulate the affect of display: block where it will span the whole width that is available to it without using display or float?
<div class="button">
Link Text
</div>
There is one option to make an inline element to be like a block by using position:absolute without using display or float.
But I hope absolute positioning doesn't fit your want. Thus, the final conclusion is that you must use display or float property to render it correctly.
If you even use absolute then don't forget to keep position:relative to your parent element from which you want to be the element as absolute.
You could try display: inline-block; width: 100%;. You might need to alter the width to take into account any padding or border you've set.
(In the past I've used an edit mode panel and other tricks, so these hacky styles only apply when the page is being edited.)
SharePoint 2013's editor is so utterly awesome isn't it? :-(
Is there any downside to converting img from inline-block elements into block objects with the display: block CSS property?
Most of the time, I want them to be block elements. Any useful inline aspects that I am losing? (Perhaps I am not seeing some as useful?)
Should all images be converted into block elements by default? Why are they inline-block elements according to spec?
P.S. I am asking this with considerations for layout via positioning & floats, and surrounding elements.
Well considering that a block will force anything after to line break, there is only one scenario where it would be bad:
If you plan to have another inline element (text, another image, span, etc) beside it
There is one downside :
If you plan to horizontally center an image applying "text-align:center" to the parent element, you cannot display the image as block or inline-block.
Put img { display: block; } in your CSS and forget about it. In the extremely rare instance that you need something different write an exception.
One hack found for block display:"block".
I had this image and the wavesurfer audio wave which I wanted as inline.
But, the display:"block"; in the js of wavesurfer was not allowing it.
What I did was, saved this cdn file locally and changed the display to inline and position to absolute which solved my issue. The change is supposed to be done where the wave element is created.
Hope this helps someone. Thanku wavesurfer creators for such an amazing js.
Link to my jsbin
I am having a bit of unexpected trouble. I would like to vertically center the "Thing2" text. However the css property vertical-algin: middle doesn't seem to be working.
So I'd like to know 2 things:
Why isn't it working?
Is the way I'm doing it (by adding a main class to each then a styling class) the easiest way to do this?
Note
This is just a proof of concept of an overall idea that I have. So obviously class names and ids will change.
You can't vertically align text in that way, see http://www.w3.org/wiki/CSS/Properties/vertical-align
Try instead setting a line height on your container div equal to the height of the div if you just want to vertically align a single line of text.
e.g.
.metroSmall {
line-height: 87.5px;
}
This is a nice post detailing a few different ways of vertically aligning html elements: http://blog.themeforest.net/tutorials/vertical-centering-with-css/
If you are only supporting the latest browsers you can also use the new table, and table-cell display styles, which support vertical alignment in the same way that tables do.
e.g.
.metroSmall {
display: table-cell;
vertical-align: middle;
}
Bear in mind this won't work on earlier browsers such as internet explorer 6 though.
The way i vertically center things is to set the line-height to the height of the container
try adding line-height: 87.5px to .about
Try Using This http://jsfiddle.net/YUruZ/
Use CSS style display property table and table-cell
I have a set width and the height is set to auto.
Each row is a div, inside is a div for each column. and there is a <p> tag inside the column divs where text should be.
The CSS involved is very basic, just some padding and set width/heights...
and float left.
Something I'm missing?
It's actually expected behavior for your code. You have a single "word" in your "cell", with no spaces in it. So browser doesn't know where to wrap and automatically extends the box. You should add word-wrap: break-word CSS rule to .orderHistoryTable selector (or to orderHistoryTable div.row1 if you want this behavior only on this cell)
http://jsfiddle.net/d2Amf/
Did you try setting the CSS overflow property?
http://www.quirksmode.org/css/overflow.html
I live and breath by the Clearfix method. It will solve many of your layout problems w/ divs. It might solve this issue you're having, or might not, but overall it's great to use when doing div heavy layouts. I use Jeff Starr's method from Perishable Press: http://perishablepress.com/press/2009/12/06/new-clearfix-hack/
I need help to align CSS buttons. I tried many different variations and I just cannot center my button the way I want.
Firstly, have a look at this url: http://www.front-end-developer.net/cssbuttons/example.htm
I'm using 2 images to form a button (this could be done on 1 image, but in this case we've got two). Everything works as expected as long as we apply float:left or float:right to the parent div element, to 'limit' width of the div and close it as soon as the content of the div ends. You can remove float:left from the button to see what I mean.
But what about center positioned buttons? I cannot add float:left/right because I want align it in the middle.
In theory, I could set
{
width:XXpx;
margin:0 auto;
}
And I will get what you can see on this picture:
(source: front-end-developer.net)
But I don't know the length of the text inside. Having different translations my button can be very short, or 5 times that long.
I also tried to use <span> instead of <div>, but unfortunately nested inline elements don't respect their padding correctly...
And yes, I must use <a> inside, so buttons can be accessed by web crawlers.
I'm really stuck on this one.
.button {display:inline-block;}
Seems to do the trick.
inline-block browser-support: http://www.quirksmode.org/css/display.html
More about how to work around the browser issues related to inline-block:
http://foohack.com/2007/11/cross-browser-support-for-inline-block-styling/