How do I use the parent div (#warped) to move and contain, my rotated span elements (which are in fact 'curved words' that I want to keep in said position) in one movement?
I have used this link to help generate the curvature: http://csswarp.eleqtriq.com/
The <span> tags are placed within the #warped parent element in my HTML document, but despite this on the webpage itself they appear to be located outside of #warped div
I would like to, for example, move the entire curved word to the left of the page. How would I do this?
Here is the CSS:
#warped {
position: relative;
display: block;
}
#warped>span[class^=w]:nth-of-type(n+0) {
display: block;
position: absolute;
transform-origin: 50% 100%;
}
#warped span {
font-family: 'ABeeZee';
font-size: 38px;
font-weight: regular;
font-style: normal;
line-height: 0.65;
white-space: pre;
overflow: visible;
padding: 0px;
}
#warped .w0 {
transform: rotate(0.91rad);
width: 20px;
height: 24px;
left: 552.15px;
top: 152.55px;
}
#warped .w1 {
transform: rotate(1.06rad);
width: 23px;
height: 24px;
left: 565.17px;
top: 174.68px;
}
etc etc
Here is the HTML as well:
<div id='warped'>
<span class='w0'>F</span><span class='w1'>a</span><span class='w2'>n</span><span class='w3'>t</span><span class='w4'>a</span><span class='w5'>s</span><span class='w6'>t</span><span class='w7'>i</span><span class='w8'>c</span><span class='w9'>!</span><span class='w10'>!</span><span class='w11'>!</span><span class='w12'>!</span>
</div>
The issue is the position:absolute and display:block on the span elements. Change it to:
#warped>span[class^=w]:nth-of-type(n+0) {
display: inline-block;
transform-origin: 50% 100%;
}
As long as you don´t have a specified width on your #warped it will be 100% of the browser and the text will look like it's outside.
Try this: http://jsfiddle.net/54L30x1j/
Basically on their site: http://csswarp.eleqtriq.com/, you can re-size the window and make it small. Then your self you can further reduce the extra size. Put your text in top left corner as much as possible.
<div id='warped'> <span class='w0'>F</span><span class='w1'>a</span><span class='w2'>n</span><span class='w3'>t</span><span class='w4'>a</span><span class='w5'>s</span><span class='w6'>t</span><span class='w7'>i</span><span class='w8'>c</span>
</div>
<p>
<span>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptatum quasi ad ipsum cum ipsa repellendus recusandae in molestias fugiat placeat maiores aspernatur numquam neque id blanditiis. Iusto amet odio natus.</span>
<span>Ipsam quas incidunt deserunt molestias asperiores deleniti temporibus quisquam vel sapiente dolores aliquam eum optio minus cupiditate ipsum illo veritatis eligendi obcaecati porro ea rerum dolore repudiandae neque earum voluptatem.</span>
<span>Totam officiis saepe tenetur tempore voluptate cupiditate fugit exercitationem voluptatem illum possimus. Dicta similique dolore laboriosam ipsum modi minus saepe accusantium consectetur natus architecto harum commodi porro eius est nemo.</span>
<span>Officiis labore quibusdam modi autem velit neque reiciendis unde quaerat delectus expedita consectetur nemo nobis assumenda officia porro cum quos voluptates molestiae enim debitis commodi saepe id dolorum. Repudiandae repellat.</span>
<span>Aspernatur non nobis nesciunt deserunt possimus nulla repellat voluptatibus fuga asperiores error optio ipsa adipisci voluptate quidem esse commodi recusandae molestias dolores iure minima sapiente laborum molestiae dolor quisquam ratione.</span>
</p>
Related
I have a button in a sidebar div which I want to position so half of it sticks out of the container. The problem is because the sidebar needs its own scrollbar this makes the button get cut off. Example here: http://jsfiddle.net/z5dy7t4x/19/
Why does the button get cut off when adding overflow-y: scroll; to the container?
Is it possible to show the button without modifying the HTML?
Couldn't figure out a CSS only solution. Solved it by adding an inner container and putting the scroll on that. Working example: http://jsfiddle.net/37ow2pqy/2/
<div class="sidebar">
<button class="close">
CLOSE
</button>
<div class="sidebar-content">
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Voluptatum enim nulla incidunt illo, at consequuntur eaque distinctio, dolorem, nemo quam ipsum accusantium vitae! Nam rem, dolor quod quas nobis, dolorem veniam molestias laboriosam blanditiis autem sequi tenetur, dolore distinctio beatae voluptates doloremque excepturi officia ratione quisquam. Eveniet aperiam rerum iusto, odit excepturi saepe, ullam et quo sint, delectus vel velit repellat quibusdam aut earum architecto corrupti? Dignissimos ullam sit autem numquam nihil adipisci dicta non officiis, tenetur excepturi hic ex saepe corporis animi asperiores nesciunt quo, voluptate libero sapiente. Totam, modi quaerat! Exercitationem fuga autem magnam id repudiandae doloremque voluptatem?
</div>
</div>
.sidebar{
width: 300px;
border: 1px solid #000;
position: absolute;
right: 0;
}
.close {
position: absolute;
top: 20px;
left: -25px;
}
.sidebar-content {
overflow-y: scroll;
height: 300px;
}
You added position absolute for the button, that's why your button is hidden
#parent{
position: absolute;
right: 0;
}
#close {
background-color: red;
color: white;
position: absolute;
left: -50px;
}
#child{
border: solid 1px black;
width: 200px;
height: 200px;
overflow-y: scroll;
margin-left: auto;
margin-right: auto;
}
<div id=parent>
<button id=close>
abololute child
</button>
<div id=child>
This is the child
</div>
</div>
Error to be addressed first:
In your CSS, you have position: relative;, and also position: absolute;, the latter being the one I believe you are going for, you need to remove the position: relative;.
Your First Question
Why does the button get cut off when adding overflow-y: scroll; to the container?
Because, by default, overflow is set to overflow: visible;, so you are changing that (overflow-y of course, being part of overflow).
Your Second Question
Is it possible to show the button without modifying the HTML?
Well, if you want the button halfway outside the <div>'s box, I would guess that you don't want the button to scroll with the content. If this is the case, then you will need to put the <button>...</button> outside of the <div> that the content (Lorem ipsum, etc.) is in (and change its positioning).
(Another way is to just use position: fixed; instead, but I seriously doubt that that's what you want)
Here it is:
.box{
width: 300px;
border: 1px solid Black;
position: absolute;
right: 0;
}
#close {
position: absolute;
top: 20px;
left: -31px;
}
.content {
overflow-y: scroll;
height: 250px;
}
<div class="box">
<button id="close">
CLOSE
</button>
<div class="content">
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Voluptatum enim nulla incidunt illo, at consequuntur eaque distinctio, dolorem, nemo quam ipsum accusantium vitae! Nam rem, dolor quod quas nobis, dolorem veniam molestias laboriosam blanditiis autem sequi tenetur, dolore distinctio beatae voluptates doloremque excepturi officia ratione quisquam. Eveniet aperiam rerum iusto, odit excepturi saepe, ullam et quo sint, delectus vel velit repellat quibusdam aut earum architecto corrupti? Dignissimos ullam sit autem numquam nihil adipisci dicta non officiis, tenetur excepturi hic ex saepe corporis animi asperiores nesciunt quo, voluptate libero sapiente. Totam, modi quaerat! Exercitationem fuga autem magnam id repudiandae doloremque voluptatem?
</div>
</div>
Here is the picture, question is:
How can I add some space to the vertical intersection part of the paragraph and the picture and thus separate them? and how can I eliminate the horizontal space between the paragraph and the picture?
CSS CODE:
.resimdiv{
float:left;
width: 100px;
}
.resim{
float:left;
width: 100px;
}
.metin{
font-family: Verdana, Geneva, Tahoma, sans-serif;
font-size: 11px;
color: red;
}
h1{
font-family: Georgia, 'Times New Roman', Times, serif;
position: relative;
top:5px;
font-size: 20px;
}
p{
position: relative;
top:5px;
}
HTML CODE:
<article id="icerik">
<div class="resimdiv">
<img class="resim" src="../resimler1/BTKresimler2 (1).jpg" alt="coherentgames" title="Coherent Games">
</div>
<h1>BAŞLIK</h1>
<p class="metin">Lorem ipsum dolor sit amet consectetur adipisicing elit. Earum sit provident, cupiditate, reprehenderit dolore doloremque reiciendis ipsam quos hic, eum beatae sed quibusdam maiores repellendus dolor adipisci nostrum? Labore doloremque cupiditate ratione quibusdam, vel architecto ducimus officiis laborum tempora ipsa, qui omnis molestiae quia, quae voluptate facere accusantium excepturi? Soluta, est alias odit, qui fugiat quibusdam dolorem beatae omnis, ut similique repellat maxime eveniet doloribus nulla quas repellendus hic enim? Eveniet laboriosam praesentium pariatur repellendus placeat! Harum facilis fugit maiores! Culpa maiores repellendus corrupti. Nulla nesciunt dignissimos porro ratione dolorum eos natus illo molestiae aliquid distinctio facere sapiente, placeat perferendis mollitia assumenda voluptas, cumque qui architecto odit laborum alias. Eum, dolores. Odit, magnam quia. Cupiditate aut eius molestiae eaque eum assumenda aliquam sapiente voluptatum minus?</p>
</article>
You could use this one additional line...
.resim{
float:left;
width: 100px;
padding-right: 12px;
}
But don't forget that padding will also apply on all screen sizes unless you tell it otherwise in Media Queries.
It should also work best if you leave the horizontal space as it is but if you do ultimately want it gone I think the difference will be found in between the height of the image in pixels and the line-height of your text.
You have to be a bit careful with eliminating some of the space beneath the image as the float system will do calculations on the font size/line spacing to ensure there is enough space to put a line of text beneath without the tops of the characters getting cut off.
The same problem does not arise with the vertical space however so you can just use a margin-right for that.
It is possible to do a little fiddling around with the vertical placement of the picture to try to make things a little less gappy and a little more 'balanced' looking.
This snippet attempts this by making the image a background to its parent (since there seems no real reason to have it as an actual image in the flow of the text) and with some padding and a slight transform of the background downwards manages to close the gap on the devices I have tried while making sure the characters beneath are not overwritten a bit. Note: if the font size changes you'd have to think about the px values (or convert to ems) a bit more.
.resimdiv {
float: left;
margin: 5px 10px 0 0;
background-image: url(https://i.stack.imgur.com/cT6PN.jpg);
background-size: cover;
width: 100px;
height: 100px;
transform: translateY(8px);
}
.resim {
width: 100px;
height: 100px;
object-fit: contain;
}
.metin {
font-family: Verdana, Geneva, Tahoma, sans-serif;
font-size: 11px;
color: red;
}
h1 {
font-family: Georgia, 'Times New Roman', Times, serif;
position: relative;
top: 5px;
font-size: 20px;
}
p {
position: relative;
top: 5px;
}
<article id="icerik">
<div class="resimdiv"></div>
<h1>BAŞLIK</h1>
<p class="metin">Lorem ipsum dolor sit amet consectetur adipisicing elit. Earum sit provident, cupiditate, reprehenderit dolore doloremque reiciendis ipsam quos hic, eum beatae sed quibusdam maiores repellendus dolor adipisci nostrum? Labore doloremque cupiditate ratione
quibusdam, vel architecto ducimus officiis laborum tempora ipsa, qui omnis molestiae quia, quae voluptate facere accusantium excepturi? Soluta, est alias odit, qui fugiat quibusdam dolorem beatae omnis, ut similique repellat maxime eveniet doloribus
nulla quas repellendus hic enim? Eveniet laboriosam praesentium pariatur repellendus placeat! Harum facilis fugit maiores! Culpa maiores repellendus corrupti. Nulla nesciunt dignissimos porro ratione dolorum eos natus illo molestiae aliquid distinctio
facere sapiente, placeat perferendis mollitia assumenda voluptas, cumque qui architecto odit laborum alias. Eum, dolores. Odit, magnam quia. Cupiditate aut eius molestiae eaque eum assumenda aliquam sapiente voluptatum minus?</p>
</article>
I'm making a parallax website and at the top of the page I want the left to be text and the right to be an image. At this moment in time the image only shows up under the text div.
.section {
width: 100%;
text-align: center;
padding: 50px 80px;
}
.sub-section {
margin: 0;
padding: 0;
width: auto;
}
<section class="section section-light">
<div class="sub-section">
<h2>Section 1</h2>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Distinctio neque quam quis minima, rerum consequatur ex porro alias iure ducimus ipsam eligendi ullam mollitia delectus id magnam numquam, excepturi beatae laudantium voluptatibus accusantium quia?
Omnis quia harum ab provident, dolor earum itaque maiores quasi iusto soluta fugiat eos cumque dignissimos sint laudantium reprehenderit quod excepturi voluptate reiciendis ipsum laborum architecto vitae! Modi nobis ipsum laudantium fugit reiciendis
alias corrupti laboriosam quasi voluptates necessitatibus distinctio cum pariatur dolorum labore qui, ad sed saepe, nam porro sequi eaque officiis quod minus sint? Provident modi dolores recusandae laboriosam a cumque doloribus nisi repudiandae.
</p>
</div>
<img src="resources/img/scene1image.png" alt="scene1image.png">
</section>
If you want your text to be on the left and image on the right, you need to create one div containing the text and one div containing the image. Then you can put both of it into 1 div to contain both of them (nested divs) and set inline-block to both the inner divs.
You can then set both the inner divs to 50% , so they make up 100% of the width. But since you have a padding (left and right) of 80px, use calc(50%-80px) so that you create a width of 50% - 8px.
Try this:
* {
padding: 0;
margin: 0;
}
.section {
width: 100%;
text-align: center;
padding: 50px 0 50px 80px;
}
.sub-section {
margin: 0;
padding: 0;
width: auto;
display: inline-block;
width: calc(50% - 80px);
}
.sub-section-img {
display: inline-block;
width: calc(50% - 80px);
}
.sub-section-img img {
width: 100%;
height: 80vh;
}
<section class="section section-light">
<div class="sub-section">
<h2>Section 1</h2>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Distinctio neque quam quis minima, rerum consequatur ex porro alias iure ducimus ipsam eligendi ullam mollitia delectus id magnam numquam, excepturi beatae laudantium voluptatibus accusantium quia?
Omnis quia harum ab provident, dolor earum itaque maiores quasi iusto soluta fugiat eos cumque dignissimos sint laudantium reprehenderit quod excepturi voluptate reiciendis ipsum laborum architecto vitae! Modi nobis ipsum laudantium fugit reiciendis
alias corrupti laboriosam quasi voluptates necessitatibus distinctio cum pariatur dolorum labore qui, ad sed saepe, nam porro sequi eaque officiis quod minus sint? Provident modi dolores recusandae laboriosam a cumque doloribus nisi repudiandae.
</p>
</div>
<div class="sub-section-img">
<img src="http://lorempixel.com/200/200/" alt="scene1image.png">
</div>
</section>
Edit:
1) Added a new CSS rule with vh. Now, you can set the image height to the exact height. You got to do trial and error to suit your exact height desired, just increase / decrease the value in height: 80vh.
2) Removed the padding on the right since you want the image to the edge. Changed the values in .section css.
3) If you want absolutely no gap to right of the image, then add the CSS reset (removal of the default padding and margin).
* {
padding: 0;
margin: 0;
}
I have a div with a height of 100vh, and a width in percentage. When I add content to this div (in the example some lorem ipsum), the div moves downwards. When the div is empty of content, it stays at the top of the screen.
Inspecting this does not reveal anything unusual that I can find - no margins, position changes or anything.
How to I get the div with content to stay at the top of the page?
body {
font-size: 0;
}
.thin,
.wide {
height: 100vh;
display: inline-block;
font-size: 0;
}
.wide {
width: 61.80%;
background-color: red;
}
.thin {
width: 38.20%;
background-color: green;
}
.wide p {
margin: 0;
padding: 0;
font-size: 15px;
}
<div>
<div class="thin">
<div class="wide">
</div>
<div class="thin"></div>
</div>
<div class="wide">
<p><span>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusantium aliquam beatae corporis doloribus ea magnam minus molestiae veritatis. Beatae consectetur dicta doloribus eaque explicabo iure possimus quisquam sequi veritatis voluptas!</span><span>Accusamus dolor eius magnam officia qui. Ab at commodi consectetur distinctio ducimus earum et explicabo fuga illo ipsa iure laudantium natus nesciunt nisi ratione rerum sit tempore unde velit, vero.</span><span>Ab debitis earum error explicabo facilis fugit itaque, nobis officia optio pariatur perferendis quas quasi quibusdam quidem rerum similique voluptatem! Aliquam distinctio eos molestias natus nostrum ut voluptatem? Illo, quam!</span><span>Dolorem esse est impedit iusto maxime, neque officia voluptatum? Assumenda eos et facilis fugit incidunt inventore magni, maiores, minima modi mollitia nihil officiis quibusdam quisquam rem veniam vitae voluptatibus. Aut!</span>
</p>
</div>
</div>
Just add vertical-align: top to the CSS rule for the inline-block elements, namely, .thin and .wide.
By default, vertical-align is set to baseline. For an inline element with text, the base line corresponds to the bottom-most line of the text block, whereas for an empty element, the baseline is at the top where the text would start.
This leads to the top of the empty elements aligning with the bottom of the text in the filled element.
Setting vertical-align: top solves the problem.
body {
font-size: 0;
}
.thin,
.wide {
height: 100vh;
display: inline-block;
font-size: 0;
vertical-align: top;
}
.wide {
width: 61.80%;
background-color: red;
}
.thin {
width: 38.20%;
background-color: green;
}
.wide p {
margin: 0;
padding: 0;
font-size: 15px;
}
<div>
<div class="thin">
<div class="wide">
</div>
<div class="thin"></div>
</div>
<div class="wide">
<p><span>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusantium aliquam beatae corporis doloribus ea magnam minus molestiae veritatis. Beatae consectetur dicta doloribus eaque explicabo iure possimus quisquam sequi veritatis voluptas!</span><span>Accusamus dolor eius magnam officia qui. Ab at commodi consectetur distinctio ducimus earum et explicabo fuga illo ipsa iure laudantium natus nesciunt nisi ratione rerum sit tempore unde velit, vero.</span>
</p>
</div>
</div>
I want to wrap text in oval shape arround an image but the text keep overlapping over the image. I tried changind the border-radius, width and height properties etc. of the wraping element (i.e image) but it doesn't work. Below is my html and css code:
Html:
<div id="circular-shape">
<img src="blackberries-basket.jpg" class="curve">
<p>/*...text to wrap around circle side...*/
</p>
</div>
CSS:
#circular-shape {
font-family: Open Sans, sans-serif;
margin: 2rem;
}
#circular-shape p {
line-height: 1.8;
}
#circular-shape .curve {
width: 33%;
height: 33%;
min-width: 250px;
float: left;
border-radius: 50%;
-webkit-shape-outside:circle();
shape-outside:circle();
}
How can I stop the text from touching/overlapping the image at the left.Please help.
Just add margin:
img {
float: left;
margin: .5em;
border-radius: 50%;
-webkit-shape-outside: circle(50%);
shape-outside: circle(50%);
}
<div class="wrap">
<img src="http://www.fillmurray.com/g/100/100" alt="" />
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cupiditate ipsam harum enim omnis, iure laboriosam perferendis neque minima aspernatur culpa recusandae sunt quae minus, est quo ipsum ipsa laborum aperiam itaque facere sequi similique dignissimos
repellendus excepturi! Doloribus, voluptate! Voluptatibus facere nisi nesciunt aliquid maxime vitae soluta earum sint quis distinctio, molestias quod dicta deleniti debitis accusantium at fugiat illum voluptatum dignissimos dolore temporibus obcaecati
sunt non. Amet, et? Consequatur iusto nihil blanditiis amet placeat deleniti perspiciatis odit esse officia, dolor molestiae illum quo maiores quia nam delectus ut libero temporibus eveniet aperiam, nemo cupiditate, similique porro reprehenderit.
Molestiae, perspiciatis!</p>
</div>
Add this to your CSS
p {
position: relative;
left: 35px;
}
Increase the pixels if you want to.