I'm trying to create a block quote that has huge quotation marks on it's sides. The text content of the block quote is dynamic and so the marks should align according to it's size.
I've used an inline-block element so it will shrink-to-fit and contain it's text, and I'm 90% there, but my only problem is that an inline-block element becomes a block element when it has multiple lines.
To illustrate why this is a problem, I've made jsfiddle snippet:
http://jsfiddle.net/kTQqC/1/
As you can see, most of the blocks look right:
Single line - no problem. The closing mark attaches itself to the
last word.
Multiple lines - The blockquote takes full available
width. Still, not much of a problem.
Same as 2, just shorter words.
Here is where it get's tricky. Since the inline-block element
becomes a block element - it takes full available width and ruins the effect by putting the closing mark really far.
I have no control on the content's length of words. Sometimes example 4 will occur.
Does anyone have an idea how to solve this?
I am also willing to throw away all of this code if you have a completely different approach to get the same effect.
Thanks!
If you are willing to use a bit of scripting, you could do the following:
Put your text in a span with a class, like so...
<span class="words">1. Hello</span>
Then get the width of each span and dynamically adjust the max-width
$('span.words').each(function(){
var a = $(this).width();
$(this).parent().css('max-width', a + 'px');
});
http://jsfiddle.net/jasongennaro/kTQqC/15/
Sorted:
http://jsfiddle.net/kTQqC/14/
A span element will automatically be inline displayed, so your closing quote should automatically have been right beside your last word. I took your relative positioning off your blockquote element, and quote element. This left the spans sitting just a little up from the first/last words (as in too high) so I pushed them down using relative positioning on them individually, 10px for the opening, leaving it just above the first word, and 18px for the closing quote leaving it hanging below the last word. This is how these are when you see them in magazines.
Related
I was trying to make an element not occupying any space but still visible. I don't want any possible layout-changing side-effects, which means the elements should look exactly the same after making it not taking up space.
Almost all methods provided by Google, or related answers in StackOverflow, use absolute positioning. The problem is setting position: absolute to an inline element actually changes its layout behavior.
Take this really simple layout for example:
A simple paragraph layout
My intention is to make the blue text <span> not occupying space. I set it to position: absolute:
After absolute positioning
We can see from the image that the second line of the <span> doesn't position from the start of the line anymore. It's lined up to the start position of the first line, which I assume, was to make sure the whole <span> remains a rectangular shape. But no matter what, the layout was modified after absolute positioning.
Some suggest wrapping a relative layout container around the <span>, but that won't work - as long as one absolute container is showing up, the layout breaks.
By the way, my intention on this was to emphasize a few words in a paragraph by inverting their color and background-color, and I had to make two perfect overlapping copies and style them separately in order to do so. I can't directly style one <span> because the background of multiple lines of text always overlap on the previous lines, cutting off the descenders of those letters when line-height is small, but that's another problem.
I have HTML page that contain multiple div element each div is card that display as inline-block the number of generated div depends on row data comes from server, until here every things going as i need but theres whitespace between each card div that make an inappropriate display on phone and i think the problem from whitespace i'll attach screenshot for inspector?enter image description here
display:inline-block seems to leave very small spaces between elements.
Either use flexbox (display:flex on parent element) or a little trick of adding margin-left:-1px to each element (or however much space is being created between each element).
Inline elements are treated as text. (I'm making this overly simplified.) Notice that text has spaces between words. Images have spacing between them for the same reason. Therefore, inline elements will have spaces between elements.
The way around this is to trick the browser into thinking elements are letters
<div>content</div><div>content</div>
Now there is no spacing or elements between content.
There are other ways to do the same thing, such as:
<div>content</div
><div>content</div>
I'm trying to design a 2 column layout for getting a feel for HTML again.
I want to avoid using floats because I want to keep the natural document flow. Every other question on Stack Overflow I browsed through incorporate floats or worse tables. I tried layouting it with flex as well but I couldn't figure out how to make both the columns stay the same size on the other pages with different amounts of content in the first column.
Here's what I got so far: http://jsfiddle.net/wykenakw/
I figured out through trial and error that I can use a negative margin to line up the sidebar to the main content but it feels awkward, quirky and hacky. I inspected every element inside my columns but I couldn't find any potential child elements with margins that could cause this 4px gap. It's driving me nuts.
Am I missing something? Am I doing something wrong?
float is ideal because it will essentially cut out the "white space" for you. You can try and use: white-space-collapse:discard on parent elements (in this case #wrapper), but I rarely have success using it.
White space is just a "natural" occurrence created by the browser rendering. In order to avoid this (without using float), you need to simply remove the white space between your elements. This isn't ideal because of the flow and indentation of the elements, but without using float it's what has to be done.
Additionally, in my opinion there is nothing wrong with using float as a "natural document flow". You can always clear the elements.
So instead of:
</main>
<aside id="col_2">
You'd have:
</main><aside id="col_2">
Hope this helps!
http://jsfiddle.net/wykenakw/1/
Change your <main> into a <div> or use css to turn it into a block element:
main {
display: block;
}
As mentioned in the other answer actual spaces between the two elements is causing the unwanted whitespace. However spaces between two block elements is always ignored.
This is a very basic html-css query that I often encounter. Most times, I find the solution some way or the other, but am interested to know the reason of this unexpected behavior(as per me) of UI.
Please have a look at this fiddle: http://jsfiddle.net/2yaRU/
<div > //float left
Sometext <span> text<.span>//float:right
<div>
the right floated text moves to the next line though there is a lot of width available in my line. Ideally as per me, the text should appear side by side with float:left as left side, and float:right at right side within the div.
This cant be a complex issue, so is there something very common I do not get here?
Put the floated item first. The floats are nested inside of each-other, so they won't affect each-other. Floating an element automatically changes it display:block;
I think there's a couple things going on. Since the wrap is float:left, it switches to a block formatting context. It looks like the issue is that the whitespace that comes after the text (just before the nested float) is considered to be trailing since there is nothing is in the flow after it. So the width of the parent does not take into account the space, even though it does take up space when the layout is rendered as you can see in the html.
Removing the trailing space brings the X back onto the same line as the text.
http://jsfiddle.net/2yaRU/8/
If you want a space after the text, you should add a non-breaking space ( ) to the html instead.
http://jsfiddle.net/2yaRU/9/
I have a <a> element as inline block with a fixed width. I would like to show the <a> boxes next to each other, two boxes per row (exactly like in the first example). BUT if each box element is in a new line in the source code (second example), the boxes gain an invisible margin, which you can see if you have a look at the example with e.g. the Chrome dev tools. The width and padding of the parent wrapper, and the margin of each box is exactly calculated, so that the added invisible margin pushes the second box down into the next row.
I could just use the code of the first example (all the elements without line breaks directly behind each other), but I would like to know how can I remove this invisible margin so that the two boxes again fit next to each other in the wrapper div (like in the first example), even if each <a> element is in a new line in the source code.
Examples:
1.) Without line break in code (the layout I want to have): http://jsfiddle.net/mLa93/2/
2.) With line break in code (added line breaks after <a> element changes layout): http://jsfiddle.net/mLa93/3/
As fcalderan suggested white-space:nowrap on the parent should work. See http://jsfiddle.net/kkpKg/ for an example. If it doesn't, then you must be doing something different or wrong.
Ok, now I get it :-)
The best solution is to leave out the line breaks, however if you don't want that, the next best would be to comment them out:
<div id="wrap">
box 1<!--
-->box 2<!--
-->box 3
</div>
If that isn't a possibility the only thing that I can think of (and is supported by current browsers) is to set the line-height font-size in #wrap to zero and back to original size in the links:
#wrap {
font-size: 0;
}
#wrap a {
font-size: 14px;
}
Chris Coyier posted a good article about this problem:
http://css-tricks.com/fighting-the-space-between-inline-block-elements/
I didn't realize this question was from a year ago!
Since you've spent so long trying to figure this out, I did some researching and found a similar question. I've adjusted your code here
solution
and it should work now.I placed 5 blocks because of the float case you mentioned before
EDIT: the problem was your margins. You have a 10px padding and 10px margins. If you had made your div 230px (3x10px + 2x100px) you would have gotten the same effect as the first fiddle.
try to use white-space:nowrap on parent element (the container of your links) and probably white-space: normal on links