I am writing a single-page app in React. All pages in this app have a header and some content. The header is fixed and the content is scrollable. To do this, I am setting the height to 100% starting from the <html> tag down to the <Page> component. The <Page> component itself is a flexbox with a fixed-height header and the content area is set up with flex: 1 and overflow: auto to allow for scrolling. Here's a simplified structure of the app using only HTML and CSS:
* {
box-sizing: border-box;
}
html {
height: 100%;
}
body {
height: 100%;
margin: 0;
font-family: Arial, Verdana, Helvetica, sans-serif;
}
.scrolling-page {
height: 100%;
display: flex;
flex-direction: column;
}
.header {
background-color: #eeeeee;
height: 50px;
font-size: 24px;
line-height: 34px;
padding: 8px;
}
.content {
flex: 1;
overflow: auto;
padding: 8px;
}
<div class="scrolling-page">
<header class="header">
Header
</header>
<div class="content">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aspernatur
mollitia maxime facere quae cumque perferendis cum atque quia
repellendus rerum eaque quod quibusdam incidunt blanditiis possimus
temporibus reiciendis deserunt sequi eveniet necessitatibus maiores quas
assumenda voluptate qui odio laboriosam totam repudiandae? Doloremque
dignissimos voluptatibus eveniet rem quasi minus ex cumque esse culpa
cupiditate cum architecto! Facilis deleniti unde suscipit minima
obcaecati vero ea soluta odio cupiditate placeat vitae nesciunt quis
alias dolorum nemo sint facere. Deleniti itaque incidunt eligendi qui
nemo corporis ducimus beatae consequatur est iusto dolorum consequuntur
vero debitis saepe voluptatem impedit sint ea numquam quia voluptate
alias dolorum nemo sint facere. Deleniti itaque incidunt eligendi qui
nemo corporis ducimus beatae consequatur est iusto dolorum consequuntur
vero debitis saepe voluptatem impedit sint ea numquam quia voluptate
</div>
</div>
I would like to now create a version of the same page that does not scroll and occupies only the height needed by the page, not 100% of the page. This requires the removal of 100% heights starting from the <html> tag down. However since this is a single-page app, I can't have it both ways. There is only one instance of <html>, <body> etc. Do you see any way around this?
I'm not sure if I'm following what you intend to do.. If it's just displaying the "fluid" height version when content is not enough to overflow the viewport and a fixed 100% of the viewport version with scroll bars when content is larger, then max-height 100vh and overflow auto would do the trick
Related
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;
}
Making a Reactjs app. Referring to the code, I would like to make the height of the colorTab div, equal and responsive to that of the content div. The height of content must be dynamic given that I would like it to be defined by the amount of text in tile + description, which is variable, and the width of the window.
Currently, when I omit min-height from colorTab's CSS and simply have height: 100%; defining colorTab's height, colorTab disappears. Adding the min-height gives it that height but then it becomes unresponsive to the height of content which is the goal. How do I solve this issue?
JSX:
<div className="wrapper">
<div className="colorTab" style={color}>
</div>
<div className="content">
<tr>
<td className="title">
<a href={link}>{title}</a>
</td>
</tr>
<tr>
<td className="description">
{description}
</td>
</tr>
</div>
</div>
CSS:
.wrapper {
min-height: 48px;
overflow: hidden;
}
.colorTab {
float: left;
position: relative;
width: 5px;
min-height: 48px;
height: 100%;
border-radius: 5px;
margin-left: 15px;
}
.title {
padding-top: 0 !important;
padding-bottom: 0 !important;
}
.description {
padding-top: 0 !important;
padding-bottom: 0 !important;
}
Flexbox will offer the functionality you need.
Put display: flex on your container class. And flex: 1 on your content div. No matter how much content you place in the content div the colorTab div will match its height.
Example in pure HTML/CSS (no React):
.wrapper {
overflow: hidden;
display: flex;
}
.colorTab {
position: relative;
width: 5px;
border-radius: 5px;
background: red;
}
.content {
flex: 1;
}
<div class="wrapper">
<div class="colorTab">
</div>
<div class="content">
<div class="title">
<a>Your Title</a>
</div>
<div class="description">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Rem nam perspiciatis aperiam mollitia obcaecati molestiae, consequuntur saepe repellendus cumque aliquid. Ullam reiciendis praesentium repellendus ipsam, qui illum. At, aliquid quidem. Reprehenderit eligendi voluptatem maiores deleniti id nulla, pariatur ipsa ducimus accusantium! Unde ea nostrum eligendi suscipit impedit, laborum adipisci accusamus ducimus temporibus eius inventore optio officia reiciendis porro eos assumenda numquam velit obcaecati. Perferendis, ipsum! Facilis fuga dolorum nobis nihil illo nam, voluptate suscipit excepturi sunt non. Modi perferendis ex illum eaque pariatur laudantium saepe accusantium vel, blanditiis, aperiam odit! Suscipit ullam, necessitatibus est distinctio obcaecati, odio ipsa blanditiis consequatur.
</div>
</div>
Now, I would absolutely recommend the flexbox mentioned in the other answer but...
but for some other outdated browsers which do not support it (cough
cough looking at you, grandpa, using that same old version of IE)... it
might be good idea to provide extra version support.
So, for answer's completion sake:
The other option is to utilize the tables.
.wrapper {
display: table;
}
.description {
display: table-cell;
}
.colorTab {
display: table-cell;
width: 5px;
border-radius: 5px;
background: red;
}
// not necessary, but for esthetic reasons
.content {
position: relative;
left: 10px;
}
<div class="wrapper">
<div class="colorTab">
</div>
<div class="content">
<div class="title">
<a>Your Title</a>
</div>
<div class="description">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Rem nam perspiciatis aperiam mollitia obcaecati molestiae, consequuntur saepe repellendus cumque aliquid. Ullam reiciendis praesentium repellendus ipsam, qui illum. At, aliquid quidem. Reprehenderit eligendi voluptatem maiores deleniti id nulla, pariatur ipsa ducimus accusantium! Unde ea nostrum eligendi suscipit impedit, laborum adipisci accusamus ducimus temporibus eius inventore optio officia reiciendis porro eos assumenda numquam velit obcaecati. Perferendis, ipsum! Facilis fuga dolorum nobis nihil illo nam, voluptate suscipit excepturi sunt non. Modi perferendis ex illum eaque pariatur laudantium saepe accusantium vel, blanditiis, aperiam odit! Suscipit ullam, necessitatibus est distinctio obcaecati, odio ipsa blanditiis consequatur.
</div>
</div>
Using HTML and CSS, I'm attempting to achieve a seemingly simply layout with three components : a stickied header, a stickied footer, and a middle area that is 100% of whatever space is left in the browser window. I'd also like my entire site to be centered horizontally.
I've searched for and applied various answers from this forum, but nothing seems to work once I start to apply new characteristics to the page.
I'd like to also absolute center what will be a horizontal table in the above-mentioned content area, as well as position elements in the header and footer -- But I can't seem to get the basics down. What am I doing wrong?
#site {
max-width: 1024px;
margin-left: auto;
margin-right: auto;
}
#header {
width: 1024px;
height: 120px;
display: table-cell;
vertical-align: middle;
background-color: aqua;
}
#content {
width: 1024px;
height: 100%;
vertical-align: middle;
background-color: red;
}
#footer {
width: 1024px;
height: 120px;
display: table-cell;
vertical-align: middle;
background-color: aqua;
}
.logo {
display: inline-block;
vertical-align: middle;
}
.item {
display: table-cell;
}
.copy {
font-size: 12pt;
font-family: Arial;
display: inline-block;
vertical-align: middle;
}
.l1nk {
display: inline-block;
vertical-align: middle;
}
.l2nk {
display: inline-block;
vertical-align: middle;
}
<div id="site">
<div id="header">
<img class="logo" src="Images/logo.png" alt="logo" height="60" width="195" />
</div>
<div id="content">
<img class="item" src="Images/item.png" alt="logo" height="150" width="150" />
</div>
<div id="footer">
<div class="copy">xoxo © xoxo </div>
<div class="l1nk">
<img src="Images/insta100.png" alt="instagram" height="25" width="25" />
</div>
<div class="l2nk">
<img src="Images/twttr100.png" alt="twitter" height="25" width="25" />
</div>
</div>
I'm new to this forum, and a novice programmer, so I'll roll with the punches. But I'd like a stronger foundation so that I can move forward with my code. Thanks so much
Personal I would use flexbox to accomplish this but an easy way to do it as well with out having to learn flexbox looks a little something like this
https://jsfiddle.net/kriscoulson/2fqu03b2/
this one has content in the content block
https://jsfiddle.net/kriscoulson/2fqu03b2/1/
HTML
html, body {
height: 100%;
padding: 0;
margin: 0;
}
.container {
width: 1024px;
height: 100%;
position: relative;
}
.header {
background-color: cyan;
height: 120px;
}
.content {
background-color: red;
height: calc(100% - 240px);
overflow: auto;
}
.footer {
width: 100%;
height: 120px;
background-color: cyan;
position: absolute;
bottom: 0;
}
<div class="container">
<div class="header"> header </div>
<div class="content"> content </div>
<div class="footer"> footer </div>
</div>
You can use the calc function in css to help determine the height since you know that the header is 120px and the footer is 120px we know that is 240px total that the content will not take up.
// EDIT
This is with the use of flexbox if you are trying to learn flexbox to do it
https://jsfiddle.net/kriscoulson/2fqu03b2/2/
html, body {
height: 100%;
padding: 0;
margin: 0;
}
.container {
width: 1024px;
height: 100%;
display: flex;
flex-direction: column;
}
.header {
background-color: cyan;
height: 120px;
}
.content {
background-color: red;
overflow: auto;
flex: 1;
}
.footer {
width: 100%;
height: 120px;
background-color: cyan;
justify-content: flex-end;
}
<div class="container">
<div class="header"> header </div>
<div class="content"> <div>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Natus fugit atque magni quis at, voluptate consectetur voluptates laboriosam distinctio beatae quos sunt architecto? Quis nihil optio incidunt a, ad iure!</div>
<div>Obcaecati expedita maiores ab. Tempora alias culpa, error quasi, quia delectus. Ratione, sapiente, at repellendus aspernatur debitis nesciunt eum fuga quibusdam in, suscipit omnis minima vero error perspiciatis, eaque corrupti?</div>
<div>Ullam praesentium doloremque inventore! Similique dolor delectus, consequatur at doloremque quibusdam sed ullam officiis molestias dignissimos doloribus in obcaecati explicabo ipsum ducimus et error, atque. Itaque consequatur perspiciatis dignissimos eligendi!</div>
<div>Maxime natus asperiores autem nobis in dicta necessitatibus consequuntur et expedita architecto molestias veniam, voluptate adipisci corporis qui sed modi sunt saepe sapiente vel voluptatem placeat facere nihil repudiandae. Cumque?</div>
<div>Rerum quod asperiores reprehenderit itaque sunt repellat natus nostrum, modi exercitationem impedit odit adipisci voluptates, facilis eligendi eum ex accusamus tenetur omnis fugiat iste provident ipsa earum. Optio, culpa, repudiandae.</div>
<div>Quo amet ex obcaecati natus, nesciunt accusamus eius laudantium magni id. Dolorum mollitia ab nam saepe excepturi, sapiente quisquam ducimus, perspiciatis obcaecati modi qui, sit laborum vero vitae cumque sequi!</div>
<div>Repudiandae laborum ducimus totam! Neque aliquam alias necessitatibus praesentium numquam fuga totam inventore quis ab tempore aliquid dolore, similique voluptatem ipsam nisi earum ea quidem dolor, optio quibusdam? Sed, corrupti.</div>
<div>Culpa a quos, explicabo adipisci pariatur impedit obcaecati consectetur aut maxime architecto eos facere ex voluptate provident iste blanditiis sed laboriosam magni aspernatur esse corrupti quasi quod! Officiis corrupti, voluptatibus.</div>
<div>Optio sunt ipsam, et esse libero consequatur maiores illum nihil ad asperiores sed rem soluta sapiente quia nobis voluptatem, velit pariatur sint non aperiam, nostrum. Dolorum officiis, amet tenetur odio?</div>
<div>Culpa dicta in soluta, cum, sapiente natus atque, vitae, laudantium ipsam dolorem obcaecati ad quibusdam. Accusantium consequatur sit odit minima, omnis nihil unde pariatur. Distinctio doloremque earum, deserunt doloribus culpa.</div>
<div>Doloribus nobis, minima animi. Rerum magni hic dicta iste, laborum similique, sed corrupti accusamus ad quam assumenda ab consectetur suscipit nostrum. Sapiente aliquid, voluptatibus eius optio modi tenetur, unde iure.</div>
<div>Impedit, dicta, atque nesciunt quos laboriosam facilis, nihil assumenda officiis omnis reiciendis iste quisquam asperiores eveniet ad corrupti error voluptatum consectetur velit neque. Minima distinctio, corporis expedita eius sapiente cumque?</div>
<div>Repellendus tempora rem corporis ullam soluta est veritatis, itaque! Quo fugit dicta minus obcaecati minima repellendus numquam, ipsam non eligendi porro exercitationem nesciunt vel similique nemo necessitatibus dolorem dolorum id?</div>
<div>Ad obcaecati voluptas nobis veniam explicabo ut atque eaque itaque, magni sed, veritatis totam ea, repellendus in quia iure soluta suscipit aliquam? Adipisci fugit ipsum delectus nisi vitae, veritatis ducimus.</div>
<div>Dolorem inventore facere doloremque quod excepturi. Quo nostrum non quaerat pariatur. Pariatur necessitatibus deleniti ea dolores ut sequi saepe sint nulla. Minima harum explicabo voluptate sunt, adipisci quisquam delectus distinctio.</div>
<div>Neque, numquam libero tempora harum accusantium tempore veniam reprehenderit ea ratione, delectus alias molestias reiciendis eos cumque labore nulla quasi aliquam qui eaque accusamus dolor iste sed veritatis? Maxime, cum!</div>
<div>Reiciendis veritatis recusandae aliquid eos laudantium culpa, consectetur aspernatur voluptate expedita? Explicabo, quisquam! Alias mollitia velit nesciunt, tempore ipsum distinctio, iusto, quidem dolor odio consequatur, ipsa iste. Repellendus veritatis, quas?</div>
<div>Quos omnis repudiandae, corrupti consequuntur culpa. Magnam aperiam, ad accusantium consequuntur. Nemo iure ab temporibus molestias et nesciunt eum excepturi magni, ipsum quae, molestiae eaque reprehenderit voluptatem! Fugit, praesentium, beatae!</div>
<div>Sit officia, quasi veritatis sint inventore odit consequatur iusto et ex sequi nihil quisquam praesentium, quos neque eum. Atque recusandae dolorum illum iusto consectetur dolores maiores blanditiis! Libero, explicabo officiis?</div>
<div>Ratione repudiandae ad officia quas nemo eos molestias quasi, perferendis facere, aspernatur. Aliquid nobis est dolor natus soluta harum veniam enim deserunt sint. Unde corrupti magni nobis, non a, necessitatibus.</div> </div>
<div class="footer"> footer </div>
</div>
I'll go with the flex option while i was waiting for a feed back about it. ...
header,
footer {
background: tomato;
min-height: 15vh;/* any height is fine actually, mind some room for main if small window ... header& footer should not be covering the entire window */
display: flex;/* to dispatch children */
flex-direction: column;/* not in a row ! */
}
main {
background: turquoise;
flex: 1;/* fill up entire space */
overflow: auto;/* if space too small, let me scroll */
display: flex;/* to easy center content */
flex-direction: column;/* lets behave as block container */
}
div {
margin: auto;/* flex children will center on both axis , an easy one !*/
}
body {
max-width: 1024px;/* so it can shrink beloww , else remove the max- prefix */
height: 100vh;/* window's height */
margin: 0 auto;
display: flex;
flex-direction: column;
}
main:hover div:after {
display: block;
content: 'test';
height: 200vh;
}
<header>
<div>
<h1>header</h1>
</div>
</header>
<main>
<div>main, hover me to make me taller and scroll</div>
</main>
<footer>
<div>footer </div>
</footer>
for the display table-layout, you should start from body :
html, body {
height:100%;
margin:0;
}
body {
width:1024px;
margin:auto;
display:table;
}
header,footer,main {
display:table-row;
}
header>div,main>div,footer>div {
display:table-cell;
vertical-align:middle;
}
main {
height:100%;
background:turquoise;
}
footer,header {
height:120px;
background:tomato;
}
<header>
<div>
<h1>header</h1>
</div>
</header>
<main>
<div>main content, i will not scroll, i will push the footer</div>
</main>
<footer>
<div>footer </div>
</footer>
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>