HTML: Div inside Div always bound to parents borders - html

I want to have a div inside a parent div which is not attached to borders of the parent.
Currently, I've following html code in the index.html:
<div id="high_prio_container">
<div class="overlay">
<div class="article_content">
<h1>
<strong><span class="text-primary">Some title</span></strong> text</p>
</div>
</div>
</div>
And here's the CSS code:
#high_prio_container{
background: url(bootstrap/img/c01.jpg);
background-size: cover;
background-position: center;
background-attachment: fixed;
background-repeat: no-repeat;
color: #cfcfcf;}
#high_prio_container .overlay{
background: -moz-linear-gradient(top, rgba(0,0,0,0.8) 0%, rgba(0,0,0,0.73) 17%, rgba(0,0,0,0.66) 35%, rgba(0,0,0,0.55) 62%, rgba(0,0,0,0.4) 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(0,0,0,0.8)), color-stop(17%,rgba(0,0,0,0.73)), color-stop(35%,rgba(0,0,0,0.66)), color-stop(62%,rgba(0,0,0,0.55)), color-stop(100%,rgba(0,0,0,0.4))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, rgba(0,0,0,0.8) 0%,rgba(0,0,0,0.73) 17%,rgba(0,0,0,0.66) 35%,rgba(0,0,0,0.55) 62%,rgba(0,0,0,0.4) 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, rgba(0,0,0,0.8) 0%,rgba(0,0,0,0.73) 17%,rgba(0,0,0,0.66) 35%,rgba(0,0,0,0.55) 62%,rgba(0,0,0,0.4) 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, rgba(0,0,0,0.8) 0%,rgba(0,0,0,0.73) 17%,rgba(0,0,0,0.66) 35%,rgba(0,0,0,0.55) 62%,rgba(0,0,0,0.4) 100%); /* IE10+ */
background: linear-gradient(to bottom, rgba(0,0,0,0.8) 0%,rgba(0,0,0,0.73) 17%,rgba(0,0,0,0.66) 35%,rgba(0,0,0,0.55) 62%,rgba(0,0,0,0.4) 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#cc000000', endColorstr='#66000000',GradientType=0 ); /* IE6-9 */
height: 750px;
background-attachment: fixed;}
.article_content{
margin-top: 30px;
padding: 100px;
margin-left: 5%;
position: relative;
padding: 5% 0 0;
z-index: 1000;
background-color: gray;
opacity: 0.5;}
The problem is now that no matter what I do, I can't move the child div (.article_content) away from the borders of the parent container. If I use margin, I get a black space (size of margin) between the child and parent div.
I hope that this is somehow understandable. I made this pic to illustrate the problem:


It is called margin-collapsing. There are many ways you can solve it.
One way is use following css:
#high_prio_container .overlay{
padding: 0.1px;
}
Working Demo
Another way it give position: absolute; to .article_content
Or
display: inline-block; to .article_content


What would work is working with padding in the parent container (or even the child container if you have a transparent background). So you could use:
.overlay {
padding-top: 30px;
}

Related

How to apply gradient on whole page in html

I'm trying to apply gradient on whole HTML page using the following CSS class that I defined in the "body" tag:
.gradient{
font-family: Roboto Black;
background-repeat: no-repeat;
background-attachment: fixed;
height: 100%;
background: #234199;
background: -webkit-linear-gradient(#234199 0%, #7db9e8 100%);
background: -o-linear-gradient(#234199 0%, #7db9e8 100%);
background: linear-gradient(#234199 0%, #7db9e8 100%);
filter: progid:DXImageTransform.Microsoft.gradient(
startColorstr='#234199', endColorstr='#7db9e8', GradientType=0 );
}
But there comes a sharp edge where the sidebar exceeds the viewport area, seems like gradient starts repeat itself (as shown in the image).
Can anybody fix the issue?

You may try using a pseudo element that you stretch to the whole page with fixed position :
.gradient {
font-family: Roboto Black;
position: relative;
}
.gradient:before {
content: "";
position: fixed;
z-index:-2;
top: 0;
right: 0;
left: 0;
bottom: 0;
background-repeat: no-repeat;
background: #234199;
background: -webkit-linear-gradient(#234199 0%, #7db9e8 100%);
background: -o-linear-gradient(#234199 0%, #7db9e8 100%);
background: linear-gradient(#234199 0%, #7db9e8 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#234199', endColorstr='#7db9e8', GradientType=0);
}
<body class="gradient">
</body>

maybe try putting the height to auto instead of 100%?

Set height: 100% on the <html> element and it should fill the viewport.
Here's an example: https://codepen.io/anon/pen/JMjYrq

Fade image at the top

Currently, I have a vertical image that looks like this:
What I need is for the image to fade at the top only so that it ends up looking like this:
Here's the JSFiddle I've started: http://jsfiddle.net/R6KSM/
The CSS I have set up is simply:
.line {
height: 500px;
margin-left: 200px;
background: url('http://i.imgur.com/UEfCV17.png') repeat-y;
}
.line > .content {
padding: 20px;
}
Please help.

You could use a <div> with a white-to-transparent gradient:
HTML
<div class="line">
<div class="fadeTop"></div>
<div class="content">
This is just a sample paragraph.
</div>
</div>
CSS
.fadeTop{
height:20px;width:100%;position:absolute;left:0; top:0;
background: -moz-linear-gradient(top, rgba(255,255,255,1) 0%, rgba(255,255,255,0) 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(255,255,255,1)), color-stop(100%,rgba(255,255,255,0)));
background: -webkit-linear-gradient(top, rgba(255,255,255,1) 0%,rgba(255,255,255,0) 100%);
background: -ms-linear-gradient(top, rgba(255,255,255,1) 0%,rgba(255,255,255,0) 100%);
background: linear-gradient(to bottom, rgba(255,255,255,1) 0%,rgba(255,255,255,0) 100%);
}
(I used gradient generator for this particular situation)
Check it out: JSFiddle

Floats and paddings - equal height

I have a page with a container and two columns. My structure looks this
<div id="page">
<div id="left"></div>
<div id="right"></div>
</div>
Here is the CSS
#page {
min-height: 100%;
height: 100%;
width: 90%;
font-size: 100%;
margin: 0 auto 0 auto;
padding: 0;
font-size: 1em;
position: relative;
}
#left {
background-image: url("../images/layout/background.png");
width: 198px;
min-height: 100%;
float: left;
}
#right {
margin-left: 230px;
min-height: 100%;
background-color: #FFFFFF;
border: 1px solid red;
padding: 150px 20px 0px 20px;
text-align: justify;
}
At the moment with the previous code the #page element doesn't stretch to the bottom and neither does the #left. If I remove the paddings from #right, #page and #left are equal height with #right.
How do I solve this?

So there are a couple ways you could handle that. If you're looking to just have two columns with different backgrounds that both reach the bottom of their container you could use a background image that repeats vertically or a css3 gradient. I set up an example here:
http://jsfiddle.net/29wBn/1/
Notice the gradient background on the #page element
#page {
background: -moz-linear-gradient(left, #b2f8ff 0%, #b2f8ff 50%, #9effaf 50%, #9effaf 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, right top, color-stop(0%,#b2f8ff), color-stop(50%,#b2f8ff), color-stop(50%,#9effaf), color-stop(100%,#9effaf)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(left, #b2f8ff 0%,#b2f8ff 50%,#9effaf 50%,#9effaf 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(left, #b2f8ff 0%,#b2f8ff 50%,#9effaf 50%,#9effaf 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(left, #b2f8ff 0%,#b2f8ff 50%,#9effaf 50%,#9effaf 100%); /* IE10+ */
background: linear-gradient(to right, #b2f8ff 0%,#b2f8ff 50%,#9effaf 50%,#9effaf 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#b2f8ff', endColorstr='#9effaf',GradientType=1 ); /* IE6-9 */
overflow:hidden; /* make the container wrap the floated contents */
}
As a fall back the #page element gets assigned the left columns color and the right column receives it's own color.
Chris Coyer wrote a great article that shows several different ways.
http://css-tricks.com/fluid-width-equal-height-columns/

Why does background-gradient not scale?

My CSS gradient in the background does not scale, what can I do?
I plan to do a HTML layout in percentage, but the body gradient is too short.
example: http://jsfiddle.net/snGVt/
<div class="wrapper">
<div class="box round"><img src="http://goo.gl/wv4zi" /></div>
<div class="box round"><img src="http://goo.gl/wv4zi" /></div>
</div>
html{
height: 100%;
width:100%;
}
body {
width:100%;
background: #0e89b6; /* Old browsers */
background: -moz-linear-gradient(top, #0e89b6 0%, #00142c 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#0e89b6), color-stop(100%,#00142c)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #0e89b6 0%,#00142c 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #0e89b6 0%,#00142c 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #0e89b6 0%,#00142c 100%); /* IE10+ */
background: linear-gradient(to bottom, #0e89b6 0%,#00142c 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#0e89b6', endColorstr='#00142c',GradientType=0 ); /* IE6-9 */
}
.wrapper {
width: 60%;
margin-left: auto;
margin-right: auto;
}
.box{
width: 100%;
margin-top: 10px;
padding: 25px;
background-color: #fff;
}
.box > img{
width: 100%;
}

Try changing the html width and height styles to "min-height: 100%" and min-width: 100%"
html{
min-height: 100%;
min-width:100%;
}

Use background-size.
CSS3 gradients can be considered as functions that generate a fixed-sized image, so they still need to be controlled with the size property.

In IE9 there was some margin around the edge of the gradient. You should set your body and html to have no margin. Is that what you were having a problem with?
html,body {
margin: 0;
}
Note this wasn't an issue for me in other browsers.

Dynamic content height with min-height

I am writing a little browsergame to improve my webskills, but I'm stuck within a layout problem. My gamepage consists of a header, content and a footer with two spacers with a backgroundimage between. The content-div should be stretched vertical, so that the whole space of the view is used. If the content is taller then the browser, it should be stretched further with scrollbars. Its important that the heights are correct, because i use a gradient fill for the background and this shouldn't repeat at some point. I thought i can achieve this with height:auto for content with big size and with min-height:100% for content with small size. But this doesn't work. I read several forum-posts, but nothing is working. Could you help me please? Wheres my error in reasoning?
HTML:
(The br's are used to oversize the page)
<html>
<head>
<link rel="stylesheet" type="text/css" href="mycss.css">
</head>
<body>
<div class="center">
<div class="header">
Header
</div>
<div class="spacer"></div>
<div class="main">
Content
<!--<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>-->
</div>
<div class="spacer"></div>
<div class="footer">
Footer
</div>
</div>
</body>
</html>
CSS:
html,body {
margin:0px;
padding:0px;
height: auto;
min-height: 100%;
}
body {
background: rgb(122,188,255); /* Old browsers */
background: -moz-linear-gradient(top, rgba(122,188,255,1) 0%, rgba(96,171,248,1) 44%, rgba(64,150,238,1) 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(122,188,255,1)), color-stop(44%,rgba(96,171,248,1)), color-stop(100%,rgba(64,150,238,1))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, rgba(122,188,255,1) 0%,rgba(96,171,248,1) 44%,rgba(64,150,238,1) 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, rgba(122,188,255,1) 0%,rgba(96,171,248,1) 44%,rgba(64,150,238,1) 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, rgba(122,188,255,1) 0%,rgba(96,171,248,1) 44%,rgba(64,150,238,1) 100%); /* IE10+ */
background: linear-gradient(top, rgba(122,188,255,1) 0%,rgba(96,171,248,1) 44%,rgba(64,150,238,1) 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#7abcff', endColorstr='#4096ee',GradientType=0 ); /* IE6-9 */
}
.center {
height: auto;
min-height: 100%;
width:1024px;
margin-left:auto;
margin-right:auto;
text-align:left;
box-shadow: 0px 0px 20px 0px #000;
background: rgb(181,189,200); /* Old browsers */
background: -moz-linear-gradient(top, rgba(181,189,200,1) 0%, rgba(130,140,149,1) 36%, rgba(117,117,117,1) 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(181,189,200,1)), color-stop(36%,rgba(130,140,149,1)), color-stop(100%,rgba(117,117,117,1))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, rgba(181,189,200,1) 0%,rgba(130,140,149,1) 36%,rgba(117,117,117,1) 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, rgba(181,189,200,1) 0%,rgba(130,140,149,1) 36%,rgba(117,117,117,1) 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, rgba(181,189,200,1) 0%,rgba(130,140,149,1) 36%,rgba(117,117,117,1) 100%); /* IE10+ */
background: linear-gradient(top, rgba(181,189,200,1) 0%,rgba(130,140,149,1) 36%,rgba(117,117,117,1) 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#b5bdc8', endColorstr='#757575',GradientType=0 ); /* IE6-9 */
}
.spacer{
min-height:16px;
background-image: url(Absperrband.png);
background-repeat: repeat;
-webkit-box-shadow: 0px 0px 5px 0px #000;
box-shadow: 0px 0px 5px 0px #000;
}
.header {
padding : 8px;
height:70px;
}
.main{
min-height: 100%;
padding : 12px;
}
.footer{
padding : 12px;
}

Sounds like you're looking for a 'sticky footer' effect.
http://www.cssstickyfooter.com/

html, body should be height:100% and your main div (.center) should have the min-height:100%; height:auto
DEMO

add display:inline-block; to the body and .center
and see the result

add display:inline-block;text-align:center; to the body
and display:inline-block;text-align:left; to the .center
Hope it can fix my answer