I want to rotate entire body 90 degree counterclockwise. Here is what I did:
body, html {
position: relative;
padding: 0;
margin: 0;
height: 100%;
min-height: 100%;
max-height: 100%;
background: black;
}
.msg {
color: white;
font-size: 350%;
text-shadow: 4px 4px 15px gray;
margin: 10px 10px 10px 10px;
z-index: 1;
bottom: 0;
direction: ltr; /* lang */
position: absolute;
text-align: center;
width: 100%
}
.wrapper{
transform: rotate(-90deg);
transform-origin:bottom right;
position:absolute;
top:-100vw;
height:100vw;
width:100vh;
background-color:#000;
color:#fff;
overflow:auto;
}
<body id="body">
<div class='wrapper'>
<div id="caption" class="msg"> Heloooooo</div>
</div>
</body>
However the result is like the image below and the contents are off located towards the left by almost 50%. What am I missing?
You are missing right 0:
.rotate90counterclockwise{
transform: rotate(-90deg);
transform-origin:bottom right;
position:absolute;
top:-100vw;
right:0;
height:100vw;
width:100vh;
}
body, html {
position: relative;
padding: 0;
margin: 0;
height: 100%;
min-height: 100%;
max-height: 100%;
background: black;
}
.msg {
color: white;
font-size: 350%;
text-shadow: 4px 4px 15px gray;
margin: 10px 10px 10px 10px;
z-index: 1;
bottom: 0;
direction: ltr; /* lang */
position: absolute;
text-align: center;
width: 100%
}
<body id="body">
<div class='rotate90counterclockwise'>
<div id="caption" class="msg"> Heloooooo</div>
</div>
</body>
It's difficult what you are trying to do. I think you want to make some all page rotation effect for that. You want to rotate the body to be more easy to control. But it's tricky what you are trying to make. It's more safe to rotate individual elements because, if you rotate the body, it will not be like an image. We talk about coding and you need to change all the page code. Width is ok to control but the height is the tricky one because height is the whole web page.
This is what works for me but maybe just for one text message. When you have more complex things, it will be hard to control it. This is my point.
<!DOCTYPE html>
<html>
<head>
<title>Test page</title>
<style>
body {
transform: rotate(-90deg);
transform-origin: bottom right;
position: absolute;
top: -75vmax;
left: -50vmax;
height: 100vh;
width: 100vw;
background-color: black;
overflow: auto;
}
h1.red {
text-align: center;
color: red;
}
</style>
</head>
<!-- BODY -->
<body>
<h1 class="red">TEST TXT!</h1>
</body>
</html>
SS of how is look on my screen
You rotated the body 90 degrees, anything in the body will also be rotated 90 degrees.
What are you trying to do? Why not just rotate the elements in the body 90 degrees.
Thanks for the help. I will look for more clear questions in the future.
Anyways, got it to work on code pen using the method I mentioned above. Code and link below.
HTML:
<body id="body">
<div class='wrapper'>
<div id="caption" class="msg">
<p>Site Banner</p>
</div>
</div>
<main></main>
</body>
CSS:
body, html {
padding: 0;
margin: 0;
height: 100%;
background-color: #000;
font-family:Lucida Console;
}
.msg {
float: right;
}
.msg > p {
margin: 0px;
padding: 0px;
overflow: visible;
transform: rotate(-90deg) translate(-120px, 120px);
color: white;
font-size: 60px;
text-shadow: 4px 4px 15px gray;
margin: 10px 10px 10px 10px;
direction: ltr; /* lang */
text-align: right;
}
.wrapper{
display: block;
background-color: #000;
width: 100%;
height: 100vh;
overflow: hidden;
}
main{
display: block;
height: 600px;
width: 100%;
background-color: #222222;
}
CodePen: Site Banner Upper Right
Related
I am making website in html and css and I have a problem. In my css file I made id "full" which set wooden background after sidebar and it should continue on all page. In my class "picture" I made 80% width white panel - so there should be 80% white background in the middle and 10% edges should be wooden. It works correctly untill my article section, where I added some images of pizzeria. Immediately there is no wooden edges, only white. I don´t understand because my "full" id and "picture" class continue untill end of the body. Could somebody see where is error please?
Image showing error
* {
padding: 0;
margin: 0;
border: 0;
}
.container {
margin: auto;
overflow: hidden;
width: 100%;
}
#full {
background-image: url("http://newallpaper.com/wp-content/uploads/2014/01/Dark-Wood-620x387.jpg");
}
.picture {
margin: auto;
width: 80%;
background: white;
}
#pizzaObrazok {
background-image: url("img/pizzaCompleted.png");
width: 100%;
height: 210px;
margin: 0px;
}
nav {
float: left;
margin-left: 2px;
width: 100%;
height: 32px;
}
ul {
float: left
}
li {
display: inline;
border: 4px solid black;
font-size: 24px;
padding: 10px 64px;
background-color: #990000;
color: #ffffff;
}
li a {
color: #ffffff;
text-decoration: none;
padding-top: 8px;
padding-bottom: 5px;
vertical-align: middle;
}
#imgPizza {
width: 59%;
height: 270px;
padding-left: 190px;
padding-top: 30px;
padding-bottom: 30px;
}
article p {
font-size: 120%;
font-family: fantasy;
text-align: center;
margin-right: 160px;
}
#imgPizza2 {
width: 30%;
height: 270px;
position: absolute;
transform: rotate(345deg);
margin-top: 100px;
margin-left: 50px;
border: 6px solid red;
}
#imgPizza3 {
width: 30%;
height: 270px;
position: absolute;
margin-left: 390px;
margin-top: 100px;
transform: rotate(15deg);
border: 6px solid red;
}
#phone {
border: 2px solid black;
margin-top: 150px;
margin-right: 180px;
padding: 5px;
position: absolute;
display: inline;
text-align: center;
background: #ff4d4d;
}
<header>
<div id="pizzaObrazok">
</div>
</header>
<div id="full">
<section id="navigation">
<div class="container">
<nav>
<ul>
<li>ÚVOD</li>
<li>FOTO</li>
<li>JEDÁLNY LÍSTOK</li>
<li>KDE NÁS NÁJDETE</li>
<li>NÁZORY</li>
</ul>
</nav>
</div>
 
</section>
<div class="picture">
<img id="imgPizza" src="img/pizzacheese.jpg">
<aside id="phone">
<h2>Telefónne číslo:</h2>
<h2> 0905 741 963</h2>
</aside>
</div>
 
<div class="picture">
<article>
<p>U nás dostanete najchutnejšiu pizzu z výlučne kvalitných surovín</p>
<img id="imgPizza2" src="https://cdn.vox-cdn.com/uploads/chorus_image/image/50289897/pizzeria_otto.0.0.jpg">
<img id="imgPizza3" src="https://media-cdn.tripadvisor.com/media/photo-s/09/bc/74/79/pizzeria-du-drugstore.jpg">
</article>
</div>
</div>
You have your elements "#imgPizza2" and "#imgPizza3" whit position absolute outside your "#full" wrapper. You can do various things to achive the effect you are looking for but depends of many others things.
I think the simpliest way is to put your background image in to the body and not in the warpper "#full" or change the postion of your images among others.
body {
background-image: url("http://newallpaper.com/wp-content/uploads/2014/01/Dark-Wood-620x387.jpg");
}
It looks like the wood background is 620 x 387, so my first thought is that it is big enough to cover the first section but not the articles. Maybe add background-repeat: repeat-y; to your #full class and see if the wood border spreads further down the page.
The following code is part of a custom 404 page I am planning on using on a website of mine. However there is a major problem when I add the line of code overflow-y: auto;
The code below has the output which I expected it to. However when it the code inside the div reaches more than 75vh the overflow is not visible.
* {
margin: 0;
padding: 0;
}
.main {
min-height: 100vh;
font-size: 1em;
overflow-Y: hidden;
}
.center {
float: left;
position: relative;
left: 50%;
}
.wrap {
width: 100%;
float: left;
position: relative;
left: -50%;
}
.load_extra {
display: block;
position: fixed;
z-index: 11;
bottom: 15px;
}
.prep {
align: center;
background: #00eaff;
outline: none;
padding: 8px;
color: white;
border-color: white;
border-style: dotted;
border-width: 3px;
border-radius:50%;
font-size: 1.375em;
}
.extra {
display: block;
position: fixed;
bottom: 10px;
max-height: 75vh;
width: 80vw;
z-index: 10;
}
pre {
font-family: monospace, monospace;
font-size: 0.85em;
display: block;
overflow-y: auto;
word-break: break-all;
white-space:normal;
padding: 10px;
margin: 0 0 10px;
line-height: 1.42857143;
color: #333;
word-break: break-all;
word-wrap: break-word;
background-color: #f5f5f5;
border: 1px solid #ccc;
border-radius: 4px;
max-height: 50vh;
}
<body class="main">
<div class="center load_extra">
<div class="wrap">
<button id="extra" class="prep">Button</button>
</div>
</div>
<div id="infoCont" class="center extra">
<div class="wrap">
<h1>Extra Information</h1>
<pre>Some URL</pre>
<p>The requested URL shown above could not be found on the server</p>
<hr>
</div>
</div>
</body>
In order to fix this problem I added the line overflow-y: auto; in .extra class. This is what caused a problem. When you run the code below half of the output is "missing". I am unsure of why this is occuring.
* {
margin: 0;
padding: 0;
}
.main {
min-height: 100vh;
font-size: 1em;
overflow-Y: hidden;
}
.center {
float: left;
position: relative;
left: 50%;
}
.wrap {
width: 100%;
float: left;
position: relative;
left: -50%;
}
.load_extra {
display: block;
position: fixed;
z-index: 11;
bottom: 15px;
}
.prep {
align: center;
background: #00eaff;
outline: none;
padding: 8px;
color: white;
border-color: white;
border-style: dotted;
border-width: 3px;
border-radius:50%;
font-size: 1.375em;
}
.extra {
display: block;
position: fixed;
bottom: 10px;
max-height: 75vh;
width: 80vw;
z-index: 10;
overflow-y: auto;
}
pre {
font-family: monospace, monospace;
font-size: 0.85em;
display: block;
overflow-y: auto;
word-break: break-all;
white-space:normal;
padding: 10px;
margin: 0 0 10px;
line-height: 1.42857143;
color: #333;
word-break: break-all;
word-wrap: break-word;
background-color: #f5f5f5;
border: 1px solid #ccc;
border-radius: 4px;
max-height: 50vh;
}
<body class="main">
<div class="center load_extra">
<div class="wrap">
<button id="extra" class="prep">Button</button>
</div>
</div>
<div id="infoCont" class="center extra">
<div class="wrap">
<h1>Extra Information</h1>
<pre>Some URL</pre>
<p>The requested URL shown above could not be found on the server</p>
<hr>
</div>
</div>
</body>
I would appreciate any help in fixing this problem.
Half of the output goes "missing" due to the left positions defined in center and wrap classes.
center class will position your container starting from 50% and then, the inner container (wrap) gets repositioned again with -50%. Since the overflow is applied on the parent div, half of the content is no longer visible.
One solution might be to move overflow-y: auto; to wrap class.
Another is to choose another way to center infoCont div.
<div id="infoCont" class="extra">
<h1>Extra Information</h1>
<pre>Some URL</pre>
<p>The requested URL shown above could not be found on the server</p>
<hr>
</div>
.extra {
display: block;
position: fixed;
bottom: 10px;
max-height: 75vh;
width: 80vw;
z-index: 10;
overflow-y: auto;
margin: 0 auto; /* set margin to auto */
left: 0; /* set also left and right because position is fixed */
right: 0;
}
See working example.
I have an Image on the page. I have put a Div on footer with a heading and a paragraph inside the Div. I have made the Div's background transparent like this way , background-color: rgba(0,0,0,.6);.
But I need to implement this like this way , background-color:black; opacity:0.6".
The problem is, if I am doing it using opacity then the heading and paragraph is also getting blur with the Div's colour. How can I solve it?
Below is my full code.
CSS
<style type="text/css">
.div1 {
max-width: 100%;
height: auto;
text-align: center;
display: block;
border: none;
}
.feature-text-overlay {
background-color: rgba(0,0,0,.3);
bottom: 0;
padding: .6em 0 .8em;
position: absolute;
text-align: center;
width: 100%;
}
.feature-title {
font-size: .875em;
margin: 0;
text-transform: uppercase;
color:white;
}
.feature-description {
line-height: 1.2;
margin: 0 2em;
color:white;
}
</style>
Html
<div class="div1">
<img src="~/Content/Image/rendering-graphics-in-resolution-222734.jpg" />
<div class="feature-text-overlay" style="height:52.599999277954px; min-height:1px;">
<h4 class="feature-title">Enterprise Mobility Suite</h4>
<p class="feature-description">Manages Users, Devices and Data</p>
</div>
</div>
css
.feature-text-overlay {
bottom: 0;
padding: .6em 0 .8em;
position: absolute;
text-align: center;
width: 100%;
position:relative; /* add this to specify position */
}
/* create pseudo css element */
.feature-text-overlay:before {
content:"";
background-color: #000;
opacity:0.3;
bottom: 0;
top:0;
right:0;
left:0;
position: absolute;
}
Demo
edit as per comment demo 2
tl;dr - How can I center the blue div found in the third image in the white space, not the page?
I've been experiencing quite the headache recently. I've created a website with two distinct columns, but, is achieved with only one div element. This can be seen below.
It's pretty obvious from the picture that the first column is to be regarded as a sidebar, and hence, has the class .sidebar. .sidebar has a fixed width property of 400px. The rest of the page is simply the rest of the div with the class .container, which extends to 100% on both its width and height
properties. As I would image this is hard to image from just reading this text, I've found a way to illustrate how the page is setup.
Gray is the html element.
White is the body element.
The aqua on white is the div with the class .container.
The following aqua is the div with the class .sidebar.
Let's now insert the div that's giving me issues.
As you can see, a single blue div has been added. This has the class .test, and which simply sets the width, height, and margin properties. As you can now see, when the margin is set to 0 auto, the div is centered to the window and not the white space. Obviously this is the expected action.
The issue I'm facing is that I have no idea how I can center the blue div in the white space. I'm not sure how I would create anything the exact width of the white space, and hence, don't know how margin: 0 auto would be any use. How would I center my test element in the white space? Can this be achieved through CSS and HTML?
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Welcome.</title>
<link href='https://fonts.googleapis.com/css?family=Open+Sans:300|Raleway' rel='stylesheet' type='text/css'>
<link href="https://www.codekaufman.com/assets/css/core.css" rel="stylesheet" type="text/css" />
<link href="https://www.codekaufman.com/assets/css/alerts.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div class="banner-alert">Please excuse the mess. I'm currently working to improve the site. Thanks.
</div>
<div class="container">
<div class="side-bar">
<div class="temp-logo"></div>
<ul class="nav">
<li class="nav-button-disabled">About</li>
<li class="nav-button-disabled">GitHub</li>
<li class="nav-button-disabled">Contact</li>
</ul>
<div class="emphasis-button-disabled">Support</div>
<div class="legal">Copyright © 2015 Jeffrey Kaufman. All Rights Reserved.</div>
</div>
<div class="test"></div>
</div>
</body>
</html>
#charset "utf-8";
* {
margin: 0;
padding: 0;
font-family: "Raleway", sans-serif;
color: #000;
}
html, body {
width: 100%;
height: 100%;
}
a {
text-decoration: none;
color: inherit;
}
.container {
height: 100%;
}
.side-bar {
position: fixed;
top: 0;
left: 0;
width: 400px;
height: 100%;
background: #EEE;
}
.temp-logo {
width: 200px;
height: 200px;
margin: 0 auto;
margin-top: 150px;
background: #000;
}
.nav {
width: 200px;
margin: 0 auto;
margin-top: 75px;
list-style-type: none;
}
.nav-button {
margin-top: 20px;
margin-bottom: 20px;
font-size: 1.6em;
cursor: pointer;
transition: 0.5s;
}
.nav-button:hover {
margin-left: 20px;
}
.nav-button-disabled {
margin-top: 20px;
margin-bottom: 20px;
font-size: 1.6em;
cursor: default;
color: #AAA;
}
.nav-category {
margin-top: 40px;
margin-bottom: 20px;
font-size: 2em;
cursor: default;
border-bottom: 1px #000 solid;
}
.emphasis-button {
text-align: center;
position: absolute;
width: 120px;
height: 45px;
left: 138px;
line-height: 45px;
bottom: 70px;
border-radius: 5px;
border: 1px solid #C30;
color: #C30;
transition: 0.4s;
cursor: pointer;
}
.emphasis-button-enabled {
text-align: center;
position: absolute;
width: 120px;
height: 45px;
left: 138px;
line-height: 45px;
bottom: 70px;
border-radius: 5px;
border: 1px solid #C30;
transition: 0.4s;
cursor: pointer;
color: #EEE;
background: #C30;
}
.emphasis-button-disabled {
text-align: center;
position: absolute;
width: 120px;
height: 45px;
line-height: 45px;
left: 138px;
bottom: 70px;
border-radius: 5px;
border: 1px solid #AAA;
color: #AAA;
cursor: default;
}
.emphasis-button:hover {
color: #EEE;
background: #C30;
}
.legal {
font-family: 'Open Sans', sans-serif;
position: absolute;
font-size: 0.85em;
text-align: center;
width: 400px;
height: 20px;
left: 0;
bottom: 20px;
}
.test {
width: 600px;
height: 200%;
background: blue;
margin: 0 auto;
}
Wrap it in another element with position=absolute, a right, top and bottom value of 0 and a left value of 400px:
<div style="position:absolute;right:0;top:0;bottom:0;left:400px;">
<div class="test"></div>
</div>
Your side bar already have position fixed, so please add padding left to your container it will work
.container {
height: 100%;
padding-left: 400px; /*width of your .sidebar*/
}
try changing the width for a percentage and adding a new div that covers the rest of the white space so you can center the blue element on that new div.
.side-bar {
position: fixed;
top: 0;
left: 0;
width: 20%;
height: 100%;
background: #EEE;
}
.new-div{width:80%;float:left;}
Set the test inside the new div
<div class="new-div"><div class="test"></div></div>
http://samnorris.co.nz/backup/test/
In the section with the Pythagoras quote "There is geometry in the humming of the strings,
there is music in the spacing of the spheres" is a little experiment from Codepen I've tweaked a bit and have been playing around with (the rotating animated circles)
...not sure if my mind is just working a bit slow tonight or what but I'm having a great amount of difficulty positioning and centering the div that contains these elements underneath the div's that contain the quote and without overlaying the background...
any help would be appreciated :)
edit: updated code, I figured out why it was being pushed down (padding on the wrapper was causing it, so I've changed the background div to fixed height instead) now I just need to figure out why I am having to use left: 32% (roughly) to try and center it. Margin: 0 auto is failing me, and setting #spheres-block to width 100% messes up the bg.
Relevant CSS:
.spacesuit-bg {
background: transparent url("../img/spacesuit-bg.jpg") no-repeat 0 0;
color: #fff;
padding: 15% 0;
text-align: center;
text-transform: uppercase;
-webkit-transform: translate3d(0,0,0);
}
.quote-wrapper {
width: 100%;
display: block;
padding-top: 300px;
}
.quote-one {
font: 18px/1em "proxima_nova_rgbold", sans-serif;
font-weight: 700;
text-shadow: 0px 3px 3px rgba(0,0,0,0.3);
letter-spacing: 1px;
word-spacing: .06em;
width: 100%;
line-height: 1.25em;
}
.quote-two {
font: 36px/1em "proxima_nova_rgbold", sans-serif;
font-weight: 700;
text-shadow: 0px 3px 3px rgba(0,0,0,0.3);
letter-spacing: 1px;
word-spacing: .06em;
width: 90%;
line-height: 1.25em;
padding-top: 25px;
margin: 0 auto;
}
.spacesuit-wrapper:before, .missiongo, .golaunch {
display: inline-block;
vertical-align: middle;
}
#spheres-block {
overflow: hidden;
position: absolute;
display: block;
width: 600px;
height: 600px;
left: 32%;
}
.spheres {
width: 600px;
height: 600px;
margin: 0 auto;
position:absolute;
}
.rings {
border-radius: 50%;
border: 2px solid rgba(255,255,255, .5);
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
margin: auto;
opacity: 0.6
}
Relevant HTML:
<div id="spacesuit-bg" class="section spacesuit-bg">
<div id="spheres-block">
<div class="spheres">
<div class="rings"></div>
<div class="rings"></div>
<div class="rings"></div>
<div class="rings"></div>
<div class="rings"></div>
<div class="rings"></div>
</div>
</div>
<div class="quote-wrapper">
<div class="quote-one wow flipInX">"There is geometry in the humming of the strings,</div>
<div class="quote-two wow flipInX">there is music in the spacing of the spheres."</div>
</div>
</div>
I am not a CSS expert (trying to learn, that's why I spend time here :)), so I may have missed other issues with my suggestion, but anyway I was able to achieve the desired effect by positioning the speres-block relatively, and positioning the quote-wrapper absolutely with a top offset of 0:
#spheres-block {
position: relative;
width: 650px;
height: 650px;
margin: 0 auto;
margin-top: 15px;
}
.quote-wrapper {
width: 100%;
display: block;
padding-top: 300px;
position: absolute;
top: 0px;
}
I hope I understood correctly.