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/"
Related
I have 9 boxes in my Wordpress website and I built them with svg images (Link). Even texts are not actual texts. I want to rebuild the boxes and use actual texts in each box. Obviously, I want to place the text in a way that doesn't change in any screen size, Using custom CSS.
I only could build the blue rectangular button with actual text and couldn't build the text part and discount label with actual texts (see the link above).
Generally speaking, I want to know how can I position something depend on another element. In this case the texts' positions would be depended on other parts of the box. The texts should preserve their position and shape in every screen size.
First add these styles to your div.ServicesPageBox
display: flex;
justify-content: center;
Then wrap the svg inside that div.ServicesPageBox with another div and set these styles to that div
position: relative;
Next put your text inside that div and make them
position: absolute;
Then control the position of text with top and left. The position of text is now relative to the svg.
You can also add z-index: 10; to your text to make sure that's on top of svg
Seeing your code would help diagnose the issue... one thought I have is using z-indices (give the text a z-index of 10 and the images a z-index of 0, then % or em or fr spacing options to align them accordingly.
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.
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.
Having problems with CSS, and I think what I want is possible without javascript, but I'm not sure.
I have an article of text that I want to display with 0-3 images(The number is dynamic for each article). I want to display the 3 images all on the right-hand side of the page, with about 200-300px between them. This much I have achieved just by floating the images, using clear, and margins.
The part I haven't been able to do is allow the text to flow between the images in that 200-300px worth of space. I've tried relative positioning to push the images down to the part of the page I want them at, but the blank space reserved for them in the text by floating them stays where it is (i.e. the image ends up on top of text).
Is this even possible without js? The text is also completely dynamic, so I can't use any element in the text as an anchor.
EDIT: Here's some code to explain a little:
The tags:
<div>
<img class="floater" src="get_file.asp?image=1"/>
<img class="floater" src="get_file.asp?image=2"/>
<img class="floater" src="get_file.asp?image=3"/>
<p>lots and lots of text and paragraphs go here....</p>
</div>
The CSS:
.floater
{
float:right;
height:250px;
clear:both;
margin-top:200px;//This creates space between the images, but the text doesn't flow between them
}
You can achieve it only by using extra helper elements.
Look at this fiddle: http://jsfiddle.net/kizu/BwySX/
You just add helper elements with zero width, so they are pushing your floaters with their height, but as they have zero width, the text flows near them almost perfectly.
Not sure that's possible. A margin always pushes everything to the sides.
I'd divide the text into paragraphs, and have only one image per paragraph. Then the image could float inside it.
I am trying to have one one layer, and center images within. I.E., if I have 3 images and want 3 links beneath them, is there a way to do this without using a separate div tag for each link and image? To automatically make the links be centered under the images, and the images to be spaced evenly within a layer?
I was also wondering how I would make the div show behind standard html if that is possible. I.E. if I have some text and a div over the text, the div will default show over the text, when I would like it to be behind. Is this only possible by using another layer?
Yes, you'll have to put a container element, such as a div, around each image and its caption to keep them together.
<div class="pictureBox">
<div>
<img />
caption caption
</div>
<div>
<img />
more caption
</div>
</div>
--------
.pictureBox div {
text-align: center;
/* whatever width/height/positioning you want */
}
for the second part of the question, regarding putting it behind the other text, take a look at CSS z-index, though I think that only applies to absolutely positioned elements.
nickf is right, z-index only applies to absolutely positioned elements.
You could make the containing element position:relative, then give both the image and link position:absolute to affect their stacking order.