I want to display every thing in the page rotated consistently and dependently 90 degree, I tried to do it but the result was inaccurate and each element rotated independently.
So that was fun. Fiddle
body{
margin:0;
overflow:hidden;
}
.wrapper{
transform: rotate(90deg);
transform-origin:bottom left;
position:absolute;
top: -100vw;
left: 0;
height:100vw;
width:100vh;
background-color:#000;
color:#fff;
overflow:auto;
}
<body>
<div class='wrapper'>
test<br />
<hr />
<div><hr /></div>
<div><div><hr /></div></div>
<div>ing</div>
</div>
</body>
Had to wrap the content in a wrapper div, set body overflow to hidden, and slide the thing up by its width.... but hey, it works.
If you're curious, yes, I did set height to screen-width and width to screen-height. Makes it scale itself cleanly.
writing-mode: vertical-rl; also performs a rotation by 90 deg and could be applied to body.
body {
margin: 0;
overflow: hidden;
transform-origin: right;
transform: translate(-100vw, 0) rotate(180deg);
writing-mode: vertical-rl;
}
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus eget vestibulum lectus, eget sollicitudin quam. Etiam tempus mollis orci, et fermentum enim maximus sed.
<br/>
<hr/>
https://jsfiddle.net/f2hmwgkz
Related
Good Afternoon Experts,
I'm having an issue with getting image to scale on hover. I've checked other thread and nothing seems to work for me. From what I've learned from other thread is that images scaling don't work on inline elements. Thus, I've tried including display:inline-block into my .banner-left-img class and .left class. However, it didn't work out for me.
I've tried transform with contrast, filter, and etc .. no issue but with scaling it becomes a problem.
What am I not understanding?
.banner .left {
flex: 1;
height: 100%;
padding-right: 10%;
background: var(--primary2-color);
z-index: 2;
}
.banner .left .banner-left-img {
position: relative;
top: 50%;
left: -150%;
transform: translateY(-50%);
width: 145%;
animation: 0.75s ease-in forwards imgSlideFromLeft;
}
#keyframes imgSlideFromLeft {
100% {
top: 50%;
left: 7%;
transform: translateY(-50%);
}
}
.banner-left-img:hover {
transform: scale(1.5);
}
<section class="banner">
<div class="left">
<img class ="banner-left-img" src="/img/banner/banner.png" alt="Mercedes AMG GT R Car Img">
<img class ="social instagram" src="/img/social-media/instagram.svg" alt="Instagram icon">
<img class ="social youtube" src="/img/social-media/youtube.svg" alt="Youtube Icon">
</div>
<div class="right">
<div class="content">
<h1>the all new 2020<br>mercedes amg GT R</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nibh nisi tempor ipsum, mattis cursus
gravida aenean dolor. Fermentum pharetra et habitasse netus gravida nibh. Est velit elementum nisl,
tortor at elementum nulla. Egestas cras purus hendrerit aenean fermentum. </p>
<button type="button">test drive now</button>
</div>
</div>
</section>
I've managed to work my transform. The problem with it was with the selector where by hover was misplaced.
instead of .banner-left-img:hover { transform: scale(1.5); }
it should be .banner .left:hover .banner-left-img { transform: translateY(-50%) scale(1.05); }
I'll like to thank jQueryHtmlCSS for sharing other thread which helped me solved my problem.
Try
width:100px;
height: auto;
OR
height: auto;
width: auto;
max-width: 100px;
max-height: 100px;
I am trying to make the text appear below the image but it is not budging at all. My goal is it make the text appear below the image in the container
.left-col p {
text-align: justify;
width: 300px;
}
.left-col img {
margin: 0 auto;
left: 5%;
width: 300px;
height: 130px;
position: absolute;
text-align: center;
}
</head>
<body>
<div class="header">
<h1>The 3 Column Layout</h1>
</div>
<div class="container">
<div class="left-col">
<img src="Cyber.jpg" width="200" height=150"/>
<p>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec iaculis neque nec luctus maximus. Donec eu eleifend libero, nec scelerisque metus. Morbi volutpat turpis pretium
</p>
Instead of using position absolute, remove it. Reason is that the element is positioned relative to its first positioned (not static) ancestor element. So, you could of course mess with top, right and left values to make it work but it would not be responsive at all.
Read more about it here: MDN Position CSS
The default value of position is static, this way the elements renders in a specific order(its what you want, render img and p after).
This is the pen if you need:
<div class="header">
<h1>The 3 Column Layout</h1>
</div>
<div class="container">
<div class="left-col">
<img src="https://via.placeholder.com/200x150" width="200" height="150" />
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec iaculis neque nec luctus maximus. Donec eu eleifend libero, nec scelerisque metus. Morbi volutpat turpis pretium </p>
</div>
</div>
.left-col p{
text-align: justify;
width:300px;
}
.left-col img{
width:300px;
height: 130px;
}
Also, instead of setting width 300px to paragraph and img, you could set only one time to your .left-col div. I have also removed other properties that you were not using.
another note is that you forgot the " on height attribute.
In css there is use [ position absolute ] For the image and is not used in the text You must set the position in the image and the text or leave it to the default setting I deleted it from the image properties in css
.left-col p{
text-align: justify;
width:300px;
}
.left-col img{
margin: 0 auto;
left: 5%;
width:300px;
height: 130px;
text-align:center;
}
<body>
<div class="header">
<h1>The 3 Column Layout</h1>
</div>
<div class="container">
<div class="left-col">
<img src="Cyber.jpg" width="200" height=150"/>
<p><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec iaculis neque nec luctus maximus. Donec eu eleifend libero, nec scelerisque metus. Morbi volutpat turpis pretium </p>
</body>
Remove the line 'position: absolute;' from CSS. Complete (close) the DIV and P tags. You may introduce '.container{...}' where you may position (or whatever) the image-and-text together. You may wish to use 'margin: 0;' to glue the text to the image. Good luck!
I added a ribbon effect to my h3 that looks like it's wrapped around my div. I just added a little triangle on the side and ordered it to be below the div and h3. I set the width of my h3 to 270px and the ribbon looks great is my h3 is a one-liner, but when the words occupy 2 or 3 lines, the h3 expands in height and blocks the triangle.
Is there a way to make the triangle move along with the height of the h3?
Fiddle: enter link description here
<div class="gray-bg">
<h3>Lorem ipsum dolor sit amet, consectetur adipiscing elit</h3>
<div class="triangle-l"></div>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer sit amet velit euismod, imperdiet purus a, semper eros. Aliquam lacinia tellus nec justo condimentum euismod non et dolor. Ut sit amet eleifend turpis. Pellentesque in adipiscing risus. Vivamus non accumsan nisl. Nulla accumsan velit ipsum, at aliquam arcu consectetur in. Integer vestibulum nunc a odio accumsan vehicula. Nunc at metus ullamcorper justo bibendum hendrerit. Aenean sit amet porttitor urna. Sed bibendum velit sed est eleifend, non cursus arcu hendrerit.
</p>
</div>
Also my z-index is acting weird. The triangle has a z-index of 1, the div has 50, and the h3 has 100... but the triangle is still on top of the div when it should be on the bottom.
*Not sure what the best approach is - CSS or jquery - so I'm tagging both.
I think I'd take a different approach, and create a pseudo element of the <h3> to create the triangle. Also, you can make a triangle the exact shape you want, meaning there's no need for z-index to hide the top half, and you can position it top: 100% meaning it's always correct irrespective of the content within the <h3>.
HTML:
<div class="gray-bg">
<h3>Lorem ipsum</h3>
<p>...<p>
</div>
CSS:
.gray-bg h3:after {
content:'';
display: block;
border-color: transparent #4678A1 transparent transparent;
border-style:solid;
border-width: 0 15px 15px 0;
height:0;
width:0;
position: absolute;
top: 100%;
left: 0;
}
Demo
Make position relative and adjust top and left
Fiddle : http://jsfiddle.net/feZbL/
.gray-bg .triangle-l{
border-color: transparent #4678A1 transparent transparent;
border-style:solid;
border-width:15px;
height:0;
width:0;
position: relative;
top: -48px;
left: -49px;
z-index: 1;
}
Move the triangle into the h3, and position it relative to the bottom rather than the top.
http://jsfiddle.net/4pnXp/
Note that this requires you to change the z-index of the triangle to -1 to position it behind the h3.
For bonus points, you can also do away with the .triangle-l element altogether, and use :after pseudo element to make the triagle!
http://jsfiddle.net/kE27U/
My solution was to wrap h3 and the triangle in a div then position it relative
http://jsfiddle.net/MKMs6/8/
<div class="wrap">
<h3>Lorem ipsum</h3>
<div class="triangle-l"></div>
</div>
check your solution Demo jsFiddle
Update .gray-bg .triangle-l class
.gray-bg .triangle-l{
border-color: transparent #4678A1 transparent transparent;
border-style:solid;
border-width:15px;
height:0;
width:0;
position: absolute;
bottom: -15px;
left: -15px;
z-index: -1;
}
I'm making myself a website but I'm a little stuck on an issue I am having.
Inside a div I have a block of text with variable height.
At the right side of the text I want to position an image width a variable width & height. It has to be aligned to the bottom
Above the image may not come any text.
It needs to be like this: https://www.dropbox.com/s/pqpttrvefrvci52/example.jpg
Here is the code I'm currently having:
HTML:
<div id="section">
<div id="image">
<img src="example.jpg" alt="image"/>
</div>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam congue, nisl et facilisis commodo, sem tortor suscipit massa, nec rutrum eros nunc et orci.
Maecenas nibh erat, pulvinar sed aliquam at, malesuada nec nibh.Curabitur fringilla justo odio. Aenean tristique consequat lorem vel tincidunt.
</p>
</div>
CSS
#section {
position: relative;
}
#image {
float: right;
margin-left: 20px;
position: absolute;
bottom: o;
right: 0;
}
With this code the image is aligned to the bottom right corner of the div, but the height of the div is lower then the height of the image.
Also the text just goes through the image.
you need a couple of things to fix this.
1) add padding-right to the section so it does not overlap with the image.
#section {
position: relative;
padding-right:<at least image width so the text doesn't overlap>
}
2) when you add a div and float in it, the float remove the image from the flow of the document so you need to add another internal div with the same height or make the height of the div the same height as your image or just add a floater div..
<div id="image">
<img src="example.jpg" alt="image"/>
</div>
<div style="clear:both"></div>
</div>
Here is a working solution: http://jsfiddle.net/zV3wm/
I can think of a way with variable image widths and text amounts, but it requires some duplication in the markup.
The gist is that you right-float a hidden version of the image, and then use overflow:hidden so that the paragraph against the float doesn't flow under it. Then, we use absolute positioning to place the non-hidden version of the image at the bottom of the container.
I have prepared a mockup at http://jsfiddle.net/UmGNZ/ (I have given the hidden image partial opacity, so you can see where it's being added to the document), but for a pseudo-HTML example:
<container with position:relative>
<right-float>
<hidden img tag with opacity: 0 />
<actual img tag with absolute positioning, bottom: 0, right: 0 />
</right-float>
<p with overflow:hidden (or auto) />
</container>
You could also try a pure CSS solution using CSS tables if you don't have to support IE7, but otherwise this should work down to IE6 if you use visibility:hidden in favour of opacity, and add a zoom:1 to the paragraph style.
This idea which allows a flexible image size: http://jsfiddle.net/David_Knowles/F3zZU/4/
.cell {display:table-cell;}
#section {
position: relative;
width:300px;
}
#image {
vertical-align: bottom;
}
<div id="section">
<div class="cell">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam congue, nisl et facilisis commodo, sem tortor suscipit massa, nec rutrum eros nunc et orci.Maecenas nibh erat, pulvinar sed aliquam at, malesuada nec nibh.Curabitur fringilla justo odio. Aenean tristique consequat lorem vel tincidunt.</p>
</div>
<div id="image" class="cell">
<img src="http://placeimg.com/120/80/any" alt="image"/>
</div>
</div>
I dont thing I am correct but you can achieve that by float right and margin-top.
#img {
float: right;
margin-top: -140px;
}
Check this out: http://jsfiddle.net/wrujx/
I think best solution is to use a little bit of jQuery (JavaScript) and let each part do its job keeping it as simple as possible. Here's what you'd have:
HTML
<div id="wrapper">
<p>yourtexthere</p>
<img src="whatever.jpg"/>
</div>
CSS
#wrapper{
width:600px;
border:1px solid #000000;
}
p{
display:inline-block;
margin-right:20px;
}
img{
vertical-align:bottom;
}
jQuery
var parentWidth = $('#wrapper').width()
var imgWidth = $('img').width()
$('p').width((parentWidth - imgWidth) - 20)
And there you go plain and simple without extra tags and messy positioning.
I'm trying to align a <div> with a <h2> inside it at the bottom of a parent div. The best way to show you is through code so here's the JSFiddle example: http://jsfiddle.net/3GGa7/
As you can see, the project-title div (and the <h2> inside it) is aligned to the top of the project-header div. I would like it to sink to the bottom of that div, to look like this:
However if I apply a margin-top to project-title it pushes everything down rather than just that div, and if I apply a padding the black background will cover the image.
What's the most elegant way to accomplish this?
Since the .project-title must be contained within the .project-header, give the .project-header a position:relative; and the .project-title a position:absolute;
.project-header {
height: 100px;
position:relative;;
}
.project-title {
background: black;
opacity: 0.75;
position:absolute;
bottom:0px;
left:0px;
right:0px;
}
Check it out http://jsfiddle.net/gXyEU/
This way, whether you use a bigger image, or change its position or margin, you'll never have to worry about the title, it will always be positioned where it should be.
If your picture size is steady. You can try the css below:
.project {
width: 335px;
float: left;
border: 1px solid #ccc;
border-radius: 6px;
}
.project-header {
height: 100px;
}
.project-title {
background: black;
opacity: 0.75;
float:left;
width:100%;
margin-top:25%;
}
.project-title h2 {
color: #fff;
margin-bottom:0px;
float:left;
}
just close your project-header div before start of project-title div like as
<div class="project">
<div class="project-header" style="background-image:url('http://placekitten.com/200/300');" ></div>
<div class="project-title">
<h2>Project title</h2>
</div>
<div class="project-description">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam ornare felis id enim dignissim dapibus. Maecenas dui mi, ullamcorper eget semper non, varius quis orci. Suspendisse lobortis nibh sed nisi luctus dictum. Sed vel arcu eros. Etiam id varius neque. Cras ac sapien in est fringilla tempor vitae et est.</p>
</div>
</div>
FIDDLE is here
If you don't mind setting the width of .project-header
.project-header {
width: 335px;
height: 100px;
display: table-cell;
vertical-align: bottom;
}
Modified JSFiddle