How can I make the white box (container) extend fully to the bottom of the page?
CSS:
#import url(http://fonts.googleapis.com/css?family=Raleway);
html,body
{
height: 100%;
font-family: 'Raleway', sans-serif;
}
body.app
{
background: #8e44ad;
}
div.container
{
margin: 25px 25px 0px 25px;
border-top-left-radius: 8px;
border-top-right-radius: 8px;
min-height: 96vh;
background: #fff;
}
HTML:
<body class="app">
<div class="container">
<header></header>
</div>
</body>
http://jsfiddle.net/0aa9xtpz/
Remove the height: 100%; from html and give body margin: 0;.
Related
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
I'm trying to add a h1 tag into my header div tag, but a background color keeps appearing when I did not set it in the css and I cannot figure out why and how to remove it.
<div id="header_top">
<h1>Some Text</h1>
</div>
<div id="navbar_top"></div>
<div id="wrapper">
<div id="main_content"></div>
<div id="side_bar"></div>
<div id="footer"></div>
</div>
* {
margin: 0px;
padding: 0px;
background-color: #0F1012;
}
#wrapper {
margin-left: auto;
margin-right: auto;
width: 1000px;
height: 700px;
padding-top: 0px;
padding-bottom: 0px;
border: 2px solid red;
}
#header_top {
background-color: #222325;
height: 60px;
border-bottom:1px solid #0F1012;
}
#header_top h1 {
color: white;
}
#navbar_top {
background-color: #222325;
height: 55px;
border-bottom: 1px solid green;
}
Fiddle
You have this code :
* {
margin: 0px;
padding: 0px;
background-color: #0F1012;
}
That basically sets the background to each element on the page. Including your h1 tag.
Remove the background-color and you should be fine.
I'm not quite sure what do you mean. But probably you have to switch this:
* {
margin: 0px;
padding: 0px;
background-color: #0F1012;
}
to this:
body {
margin: 0px;
padding: 0px;
background-color: #0F1012;
}
Here is the jsfiddle link.
I need help, I have this code:
html:
<section id="about" class="grid_4">
<header id="headerabout">The header</header>
<img id="imgabout" src="../images/software.svg"/>
<p>Bla bla bla</p>
<div class="hidden">This should be displayed</div>
</section>
css:
*{
font-family: 'Roboto', sans-serif;
font-size: 16px;
margin-top: 0px;
padding: 0px;
color: white;
margin: auto;
list-style-type: none;
text-decoration: none;
}
section {
height: auto;
z-index:15;
overflow: auto;
}
p {
padding: 2px;
}
#headerabout {
height: 24px;
width: 296px;
margin-top: 2px;
}
#about {
height: 380px;
background-color: green;
}
height: auto;
background-color: #b01f1c;
float: left;
margin-bottom: 5px;
text-align: center;
and I want to make it so that wherever you click on the section, it fades the screen to black, opacity 0.8 (I already know how to do that) and displays a div in the center of the screen with extra information, which can be closed and you can return to the page. Any ideas?
Just use jQuery:
$("section").click(function(){
$(".overlay").fadeIn();
});
$(".close-btn").click(function(){
$(".overlay").fadeOut();
});
See: http://jsfiddle.net/XbNC8/
Here is the problem http://jpswebsites.com/rebound/recovery/recovery-education/134-2/
My website content background area stops at 1000px. The min-height property is set to 1000px. Why doesn't it flow to the bottom where it meets the footer like it's suppose to?
The HTML:
<html>
<body>
<div id="swoosh">
<div id="wrapper">
<div id="container">
<div id="int-content">
<div id="main">
CONTENT IS HERE
</div>
</div>
</div>
</div>
</div>
</body>
</html>
The CSS
body{
background: white url(images/tiny_grid.png)repeat;
font: 13px Muli, Arial, Helvetica, sans-serif;
color: #525153;
min-width: 980px;
}
#swoosh {
background: url(images/swoosh.png);
background-repeat: no-repeat;
}
#container {
margin: 10px 16px 0 16px;
background-image: url(images/container_bg.jpg);
min-height: 1000px;
}
#wrapper {
width: 980px;
margin: 0 auto;
background: url(images/cbg.png) no-repeat 0 0;
padding: 0 14px;
}
#int-content {
margin: -5px 2px 15px 30px;
}
#main {
float: left;
width: 484px;
padding: 34px 0 0 20px;
}
I tried putting a height 100% on every item from through as tutorials suggested. This really threw things out of whack.
Thanks in advance all!
I have a two column layout which has stopped working while tweaking to get rid of the double scroll bars on body. Now I have one scroll bar on wrap which is what I wanted but the contents somehow overlap by the width of the scroll bar.
html, body {
margin:0;
padding:0;
font: 12px Geneva, Verdana, sans-serif;
color: #1e1f21;
vertical-align: top;
height: 100%
}
body {
background: #fff url(../esimages/cubes.png) no-repeat left bottom fixed;
}
#wrap {
background: #f5f5f5;
margin: 0 auto;
width: 960px;
height: 100%;
}
#logo {
height: 75px;
width: 100%;
background: #1e1f21;
padding: 10px 0px 5px 0px;
}
#header {
height: 30px;
width: 100%;
background: #1e1f21;
margin:0px;
padding: 0px;
}
#container {
overflow: hidden;
height: auto;
background: #f5f5f5;
width: 100%;
margin: 0px;
padding: 0px;
text-align: left;
}
#content1 {
min-height: 100%;
background: #f5f5f5;
padding: 20px 20px 20px 40px;
margin: 0
}
#content2 {
float: right;
width: 290px;
min-height: 100%;
background: #f5f5f5;
padding: 20px 0px 20px 10px;
margin: 0
}
#footer {
clear: both;
padding: 10px;
background: #1e1f21;
text-align: center;
line-height: 200%;
font-size: 10px;
}
The two content boxes don't fit in the container side by side as they should. I have tried with different reduced fixed widths for content1 but it makes no difference at all and the column width stays the same no matter what. I am tearing my hair out because it's just not logical!
<body>
<div id="wrap">
<div id="logo"></div>
<div id="header"></div>
<div id="container">
<div id="content2">
<div class="box0">
<ul>
<li></li>
</ul>
</div>
</div>
<div id="content1">
<p></p>
</div>
</div>
<div id="footer" align="center"></div>
You need to put a width and float: left on content1. Also keep in mind that the total width + padding cannot exceed the container's width.
Also, you're missing a semicolon after margin: 0 for content1