I would like to have a <div> located in the middle of its parent element, and have the text flow around it (similar to "wrap text" mode in Microsoft Word).
The following image shows what I am trying to achieve:
The image is placed somewhere in the middle of a paragraph and the text flows around it.
How can this be achieved with HTML/CSS?
Would any of the CSS properties display:flex, display:grid or clip-path: circle(),shape-outside: circle() solve this?
To formulate the question another way. It is possible to reposition an element in a way that affects the layout boxing (beside using margin)?
Because using position:relative just moves the visual rendering and doesn't affect the layout of another element and its content.
Hey I think what you need is shape-outside: circle();
This will make the text go around your shape.
Related
Trying to create a Mailchimp template I am struggling with vertically centering the next inside a predefined layout element.
Screenshot here
Using a table it is possible to center the text in a way that I want but only given the height of the image in pixels which define the height of that row. Setting the table height to 100% has no effect.
Is there any way to - using HTML inside the editor - center this text without requiring any hard coded height?
I am hoping to find a solution without coding the entire element because I doubt I would end up with the same amount of responsivity.
I'm trying to created a staircase effect with text on my page. I've wrapped a <p> element inside a <section>. The section has the following styling:
section{
transform:rotate(-37.6deg);
-ms-transform:rotate(-37.6deg);
-moz-transform:rotate(-37.6deg);
-webkit-transform:rotate(-37.6deg);
width: 200px;
}
I'd like the text in my <p> to be constrained to the rotated box I've created, and then be able to rotate the text so that each line is horizontal, stepping down along the line of the <section> box.
This is the link to the page, so you can have a better idea what I'm trying to accomplish.
You can't achieve your goal with this approach because CSS Transformations are rendered by GPU after DOM rendering, and for this reason (for example) transformed elements don't affect others elements positions and sizes.
To achieve your goal you should use a jQuery solution, like this "http://www.csstextwrap.com/"
I've just started playing with html and css and basically I've been learning everything from all the posts here but right now I'm stuck with something I cant seem to figure out how to do through research and decided to post a question for help.
I'm customising a simple portfolio style theme on tumblr, my question is regarding the text caption on the right of the picture
http://www.alvaserigrafia.pt/post/34608701054
I can only get the 3 text lines to display on a single block and I want each one of the lines to have its own block with proportional width. Can this be done with just html and css?
Thanks in advance!
This is where Firebug (Firefox extension), or the developer tools of your favorite browser, will come in handy. If you inspect the text element in question, you'll see that they're each wrapped within <p> tags.
The <p> tag is a block level element, which means it will automatically take up the full width of its parent. It's also what's recommended for...well...paragraphs of text.
Each line is wrapped in a p element. Block level elements usually fill the whole width of the parent container; that's why they are "block" elements.
To get something that shrinks with the content, wrap the text in a span:
<p><span>text</span></p>
The span will only be as large as the text inside.
so what I'm trying to do basically is have the HTML document extend vertically as I add more text, and at the moment it's just giving me some really weird problems, such as:
The body won't extend downward as I add more text
The footer isn't displaying at all at this point
There are some weird symbols being inserted into the document
The only way I know how to position things is absolute, and I don't know if this is causing some problems (such as getting text under the "Home" image?)
Here's the jFiddle: http://jsfiddle.net/9nYgb/
Any help is appreciated greatly, thank you!
Absolute positioning does tend to cause problems like that. Relative positioning is simple ... instead of using the top-left corner of the document as the origin for reference, the top-left corner of where the element was supposed to be is used as a reference. So <div style="position:relative;top:10px;"> will result in the element being 10px below where it would have been had no style information been provided.
When you position elements absolutely, you take them out of the document flow. This means that other elements will act as if they aren't there. It's good for placing a modal popup div on top of a page, but it's not good for laying out a whole page.
In general, when it comes to laying out a page, I try to stick to a series of divs with height and width set. You can use margin and padding to adjust layout, and float to make items stack up horizontally to one side or the other. Sometimes I also need to set a div's display to inline or inline-block to get them to appear next to one another and act like inline elements. You can also place divs within divs to group elements together and treat them as one by manipulating the outer container(s).
In general I don't find much need for absolute positioning in a page layout.
I'm pretty well versed with HTML and CSS, but I'd like your opinion on this one!
I need to center the text in the arrow, but place a check box next to the centered text. Because of this, I can't user text-align on all of the contents of the arrow, like I normally would. If I include the check in the centering, the anchor point shifts off of the text to include the check, and the text isn't truly centered.
Thanks!
Make the check an absolutely positioned span, set as display:block, positioned relative to the text. Check out this jsFiddle for a basic idea. Your HTML may be set up differently:
http://jsfiddle.net/cGG3W/1/
Without seeing the code, you could
use text-align:center; on the text in the div.
place the checkmark in another div and position it where necessary. You may need to adjust the stack.