I have this piece of code:
<body>
<div class="page-top">
*
</div>
<div class="page-bottom">
<div class="contentbox">
<h1>CONTENTBOX</h1>
</div>
</div>
</body>
And here is the stylesheet:
body {
margin-left: 0;
margin-right: 0;
margin-top: 0;
margin-bottom: 0;
}
div.page-top {
padding-bottom: 20%;
}
div.page-bottom {
padding-bottom: 80%;
background-image: url('http://hd.wallpaperswide.com/thumbs/fog_at_the_pink_house-t2.jpg');
}
div.contentbox {
background-color: red;
margin-top: 10%; <!PROBLEM>
}
The problem is: if I add to the contentbox a margin at the top (see code), instead of just go ten percent beneath the top line of the 'parent' div (.page-bottom), it just creates empty space above both div's.
Why does this occur? What I actually want is that the content div has just a margin of about 20% at all sides so it is a smaller div (contentbox) in a fullscreen div (page-bottom).
To clear things up:
click here for the image
Thanks for your help, and if you need more information I will provide you with that!
Because adding a margin will pushes material into the opposite direction, even if nested. You should add a padding-top to your .page-bottom instead.
You should add padding-top: 10%; to .page-bottom to get more room between the .contentbox and the parent div. See the example below. Cleaned up some code as well.
body {
margin: 0;
}
.page-top {
background-color: blue;
padding-bottom: 20%;
}
.page-bottom {
padding-top: 10%;
padding-bottom: 80%;
background-image: url('http://hd.wallpaperswide.com/thumbs/fog_at_the_pink_house-t2.jpg');
}
.contentbox {
background-color: red;
}
<div class="page-top">
*
</div>
<div class="page-bottom">
<div class="contentbox">
<h1>CONTENTBOX</h1>
</div>
</div>
Related
I'm using float to align 3 div ( left, center, right ). the first picture show how it looks on
on Google Chrome. the second picture show how
it looks on Microsoft Edge . a float works fine on Google Chrome, when using Microsoft Edge the last div(right) moved to a left-bottom container. why this is happens
* body,
p,
img {
margin: 0;
}
.container {
width: 900px;
border: 5px solid green;
padding: 3px;
margin: auto;
}
.left {
background-color: blueviolet;
width: 150px;
height: 300px;
line-height: 100px;
text-align: center;
float: left;
}
.center {
width: 600px;
height: 300px;
background-color: burlywood;
float: left;
}
.right {
width: 150px;
height: 300px;
background-color: coral;
float: left;
}
.clear {
clear: left;
}
<div class="container">
<div class="left"></div>
<div class="center"></div>
<div class="right"></div>
<div class="clear"></div>
</div>
The CSS you wrote make the output appear as in the picture. In your container you used border and padding. The two will cause the actual width of the container to be less than 900px on some browser. So the width is 900 - (5 + 5) - (3 + 3) = 884px.
Possibly, chrome tried to understand what you want, but Edge give you actual output. This is expected as border and padding affect the final width of div containers. Though, setting margin does not affect it.
To resolve the issue and cause the three dogs to appear on same line on all browser, i.e the coral div to appear on the right, you will add the following CSS to your container (or preferably body tag):
box-sizing: border-box;
You can read more at https://css-tricks.com/box-sizing/
Don't forget to add all the Vendor Prefixes
I have a banner that I am trying to add a text to the bottom portion of it. I got the text centered and how I want to be, but when I want to move the text to the bottom of the page, the picture moves too.
HTML
<div class="col_one art-banner">
<div class="art-banner-text">
<h2>what do <span>you</span> want to learn?</h2>
</div>
</div>
CSS
.art-banner { background-image: url("graphics/art_banner.jpg"); height: 150px;}
.art-banner-text { width: 940px; height: 50px; background-color: rgba(0,0,0,0.5); }
.art-banner-text h2 { text-align: center; padding-top: 10px; font-family: "Bender";}
.art-banner-text span { color: #eb6623; }
JSFiddle
Presuming you're trying to use margin-top to move the art-banner-text down, you're running into the collapsing margin problem: the margin is shared between the inner div and the outer one, meaning the outer one gets the margin too.
So the solution is not to use margins, but position:relative for the outer div and position:absolute for the inner one, with bottom:0 to position it at the bottom of the outer one.
.art-banner {
background-image: url("https://photos-2.dropbox.com/t/2/AAAtS4UXAnyf0x4vH0ty5lE779vFfS2smjUWyJFsFwnMPg/12/18401260/jpeg/32x32/1/1437685200/0/2/art_banner.jpg/COyP4wggASACIAMgBCAFIAYgBygBKAIoBw/L9JVtmzn-g-n3CMbDujkZkXxzuwR9ntwvtEoBLNl_4g?size=1024x768&size_mode=2");
height: 150px;
position: relative;
}
.art-banner-text {
width: 940px;
height: 50px;
background-color: rgba(0, 0, 0, 0.5);
position: absolute;
bottom: 0;
}
.art-banner-text h2 {
text-align: center;
padding-top: 10px;
font-family: "Bender";
margin: 0;
}
.art-banner-text span {
color: #eb6623;
}
<div class="col_one art-banner">
<div class="art-banner-text">
<h2>what do <span>you</span> want to learn?</h2>
</div>
</div>
(Note that I had to change the URI for the image, to make it show up. What you had was the URI for the dropbox page that displays the image, not the image itself.)
You need to have the outer container ( which is .art-banner-text) set to position:relative; and set the inner div or element to absolute to place it where you want. https://jsfiddle.net/2ryrnxz7/
<div class="col_one art-banner">
<div class="art-banner-text">
<h2>what do <span>you</span> want to learn?</h2>
</div>
</div>
css
.art-banner { background-image: url("https://www.dropbox.com/s/migdkqlmse8ym0t/art_banner.jpg?dl=0"); height: 150px;}
.art-banner-text { width: 940px; height: 50px; position: relative; background-color: rgba(0,0,0,0.5); }
.art-banner-text h2 { font-family: "Bender"; margin: auto 0; padding:0px; bottom:0px; position:absolute; left:35%}
.art-banner-text span { color: #eb6623; }
You can set the left to whatever % you want to push towards the middle. This won't work for mobile as it is set and won't reposition itself with the page. But if you just need it to work for desktop, this is how to do it.
It sounds like you might want to use CSS positioning. For example .art-banner {position: relative;} .art-banner-text {position: absolute;} You can then position, move, or animate the text in the inner div without affecting the outer div.
I have been trying to determine the cause of the following issue on a web page.
With the code below, when any browser is resized and the page becomes horizontally scrollable, a white space appears on the right.
How can I remove this white space? Thanks for all help given!
body {
margin: 0;
padding: 0;
}
.wrap {
background-color: #2a2c67;
}
.main {
height: 50px;
text-align: center;
width: 1300px;
margin-right: auto;
margin-left: auto;
color: #fff;
}
<div class="wrap">
<div class="main">Content Goes Here</div>
</div>
the container "wrap" has no width set so, as a block element it will take 100% of the ACTUAL window size. when you horizontal scroll because the child has a fixed width bigger than his parent and the actual window, you will scroll the child, but the parent will remain with whatever window size it's atm and scrolling out of the window. It won't dinamically change his current width (as browsers understand) to fill the child width.
Imo you just have to change the background color to the children to fix it (not that it's broken).
Edited: Or as other people said... set the width to the wrap and not to the "main"
body {
margin: 0;
padding: 0;
}
.wrap {
}
.main {
height: 50px;
text-align: center;
width: 1300px;
margin-right: auto;
margin-left: auto;
color: #fff;
background-color: #2a2c67;
}
<div class="wrap">
<div class="main">Content Goes Here</div>
</div>
Some time ago I started studying HTML and CSS. For purposes of study and practice, I am trying to create a simple web application of a game. The main interface of my application is very simple, containing only a header, a content area with login, and a footer. For purposes of demonstrating how I want my application looks like, here is a picture:
IMAGE, MIRROR 1, MIRROR 2.
In my progress in the development of HTML page with styling, I just running into this:
IMAGE, MIRROR 1, MIRROR 2.
What's bothering me now is because of the large white space that appears. I wish this place would go away, and that the background occupy it (the "conteudo" div). Here is the body of my HTML document:
<div id="conteiner">
<!-- CABEÇALHO -->
<div id="cabecalho">
<div class="centro">
<div id="logo">
BANCO DE DADOS <span>- FINAL FANTASY VIII</span>
</div>
</div>
</div>
<!-- CONTEÚDO -->
<div id="conteudo">
<div class="centro">
CONTEÚDO
</div>
</div>
<!-- RODAPÉ -->
<div id="rodape">
<div class="centro">
<div id="rodape-imagem">
<img src="recursos/imagens/griever.png" alt=""/>
</div>
<div id="rodape-autor">
DESENVOLVIDO POR <span>R.D.S.</span>
</div>
</div>
</div>
</div>
And here is my CSS stylesheet:
#font-face
{
font-family: "Runic";
src: url(../recursos/fontes/RUNIC.TTF);
}
*
{
margin: 0;
padding: 0;
}
html , body
{
height:100%;
}
#conteiner
{
min-height: 100%;
position: relative;
}
#cabecalho
{
background: linear-gradient(rgb(29,33,38) , rgb(19,22,26));
height: 100px;
}
#logo
{
font-family: Runic;
font-size: 30px;
color: white;
line-height: 100px;
}
#logo span
{
color: rgb(153,179,206);
}
#conteudo
{
background: linear-gradient(rgb(28,33,38) , rgb(38,44,51));
height: 200px;
}
#rodape
{
background: linear-gradient(rgb(29,33,38) , rgb(19,22,26));
width: 100%;
height: 75px;
position: absolute;
bottom: 0;
left: 0;
}
#rodape-imagem
{
float: left;
position: relative;
left: 15px;
}
#rodape-autor
{
font-family: EngraversGothic BT;
color: rgb(153,179,206);
position: relative;
left: 30px;
line-height: 75px;
}
#rodape-autor span
{
color: white;
}
.centro
{
width: 900px;
margin-top: 0;
margin-left: auto;
margin-right: auto;
margin-bottom: 0;
border: 1px solid white;
}
Can anyone help me on this, and explain the reason for such possible solution?
Thanks!
EDIT - (20/03/2014)
I guess my question was not clear enough, so I'm editing to make it more clear and susceptible to a better understanding and resolution.
If you look at the second picture you will see a blank space. I wish this place was filled by the background of the div "conteudo". This div paints a background with a linear gradient. My intention is to make this div always placed after the header (cabecalho), and always has the size limit to the footer (rodape), ie, its height is over when the footer begins. It should stay that way even if the user resize the page. This feature would be possible to be implemented?
I modified "container" and "content" as follows:
/* ROOT */
#conteiner
{
height: 100%;
position: relative;
}
/* CONTENT */
#conteudo
{
height: 100%;
background: linear-gradient(rgb(28,33,38) , rgb(38,44,51));
border: 1px solid red;
}
My background had increased height, however, it surpassed the footer, completely losing its layout.
Are you referring to the white space above the footer? If so, that's because you are giving the footer position:absolute. So it will stick to the bottom of the container with relative position.
The key concept here is Visual formatting model, learn more about it and you will solve your mysterious problem.
The plain solution is: give your content div a fixed height.
I am new to web design (as you can tell) and playing around with page layouts. I have build the following very basic fluid page that has two column divs (floats) and one div below that I want to set the width to match that of the two floated ones above. As you can see from the screen grab, the red 'strip' isn't as long..
So basically what I have is 2 divs (#main and #extras) floated left. #main has a width of 65% and #extras has a width of 20%. Main has a left and right margin of 3.666666666666667% and #extras just a right margin of 3.666666666666667% which centers it on the page pretty much. I also have 1% padding for both #main and #extras.
I set the third div .strip (which should be exactly the same length as the #main and #extras combined as follows:
left/right margin 3.666666666666667%
2% padding (to equal the combined padding of the #main and #extras divs)
width: 85%
My calculations (although my math is terrible) makes that add up and as far as I can tell the third div #strip should be as long as the two above. But as from the picture, it isn't.
Is this something to do with a compounding effect?
Here is my code:
<!DOCTYPE html>
<html>
<head>
<style>
#header {
width: 100%;
background-color: gray;
margin: 0;
}
#main {
float: left;
width: 65%;
background-color: steelblue;
margin: 0 3.666666666666667%;
padding: 1%;
}
#extras {
float: left;
width: 20%;
background-color: orange;
margin: 0 3.666666666666667% 0 0;
padding: 1%;
}
#footer {
width: 100%;
clear: left;
background-color: gray;
margin-top: 5%;
}
.strip {
margin: 0 3.666666666666667%;
clear: left;
background-color: red;
padding: 2%;
width: 85%;
}
</style>
</head>
<body>
<div id="header">2 divs
<p>Header</p>
</div>
<div id="main">
<p>Main content</p>
</div>
<div id="extras">
<p>Extra stuff</p>
</div>
<div class="strip">
</p>I am the strip</p>
</div>
<div id="footer">
<p>Footer</p>
</div>
</body>
ts</html>
Its probably wrong calculation.. You can understand this by seeing this image., where the extra margin adding up!
Try this code:
Fiddle:
CSS:
#main
{
float: left;
width: 65%;
background-color: steelblue;
margin-left: 3.666666666666667%;
padding: 1%;
}
The problem is in the calculation. The first line width with values that you have add on properties is around 95.98% but the next lin (red div) the width is 88.86 %. Check the calcultions :)
The two divs as the top have padding between them, their combined width without padding is 85%, you need to set the width of strip underneath to 85% + the width of the padding between the top divs.
Your margin is not set correctly, you have to explicitly specify right margins. Make it like this:
#main {
float: left;
width: 65%;
background-color: steelblue;
margin: 0 0 0 3.666666666666667%;
padding: 1%;
}
See this fiddle: http://jsfiddle.net/wCWQL/
Your earlier css was this:
margin: 0 3.666666666666667%;
This is a shorthand, where the first value is for top and bottom margins and the second value is for right and left margins.
So you have to explicitly specify all margins so that only the left one is set.
Alternatively, you can only set the left margin:
#main {
margin-left: 3.666666666666667%;
...
}
Hope that helps.