Related
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;
}
I need help with auto expanding a gradient done in css. Like, if I enter my website with my mobile phone, it auto adjusts to it. Actualy, the website doesn't auto adjust to the browsers very well: it does in my pc with google chrome, but it doesn't in other browsers or devices.
http://jsfiddle.net/g4YNk/
<html>
<link rel="stylesheet" type="text/css" href="main.css" />
<script language="JavaScript">
<!--
function autoResize(id){
var newheight;
var newwidth;
if(document.getElementById){
newheight=document.getElementById(id).contentWindow.document .body.scrollHeight;
newwidth=document.getElementById(id).contentWindow.document .body.scrollWidth;
}
document.getElementById(id).height= (newheight) + "px";
document.getElementById(id).width= (newwidth) + "px";
}
//-->
</script>
<body>
<div id="wrapper">
<div id="content">
<iframe src="http://www.9gag.com" width="800px" height="400px" name="CHANGETHIS" id="CHANGETHIS" marginheight="0" frameborder="0" onLoad="autoResize('CHANGETHIS');"></iframe>
<H1>HOLAGOLAHOLAGOLAHOLAGOLAHOLAGOLAHOLAGOLAHOLAGOLAHOLAGOLAHOLAGOLAHOLAGOLAHOLAGOLAHOLAGOLAHOLAGOLAHOLAGOLAHOLAGOLAHOLAGOLAHOLAGOLAHOLAGOLAHOLAGOLAHOLAGOLAHOLAGOLAHOLAGOLAHOLAGOLAHOLAGOLAHOLAGOLAHOLAGOLAHOLAGOLAHOLAGOLAHOLAGOLAHOLAGOLAHOLAGOLAHOLAGOLAHOLAGOLAHOLAGOLAHOLAGOLAHOLAGOLAHOLAGOLAHOLAGOLAHOLAGOLAHOLAGOLAHOLAGOLAHOLAGOLA</H1>
</div>
</div> <!-- End Wrapper -->
</body>
</html>
css:
* { padding: 0; margin: 0; }
html, body {
background-repeat: no-repeat;
min-height: 100%
height: 100%;
margin: 0;
padding: 0;
}
body {
background-repeat: no-repeat;
min-height: 100%
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
background-image: -webkit-gradient(
linear,
left top,
right bottom,
color-stop(0.07, #59BFFF),
color-stop(1, #000000)
);
background-image: -o-linear-gradient(right bottom, #59BFFF 7%, #000000 100%);
background-image: -moz-linear-gradient(right bottom, #59BFFF 7%, #000000 100%);
background-image: -webkit-linear-gradient(right bottom, #59BFFF 7%, #000000 100%);
background-image: -ms-linear-gradient(right bottom, #59BFFF 7%, #000000 100%);
background-image: linear-gradient(to right bottom, #59BFFF 7%, #000000 100%);
}
#wrapper {
width: 70%;
margin: 0 auto;
background-color:transparent;
word-wrap: break-word;
height: 100%;
}
background-color:Red;
}
#content {
background: Yellow;
}
FIX:
REPLACE PREVIOUS CSS FOR THIS ONE:
* { padding: 0; margin: 0; }
html, body {
background-repeat: no-repeat;
min-height: 100%;
margin: 0;
padding: 0;
}
body {
background-repeat: no-repeat;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
background-image: -webkit-gradient(
linear,
left top,
right bottom,
color-stop(0.07, #59BFFF),
color-stop(1, #000000)
);
background-image: -o-linear-gradient(right bottom, #59BFFF 7%, #000000 100%);
background-image: -moz-linear-gradient(right bottom, #59BFFF 7%, #000000 100%);
background-image: -webkit-linear-gradient(right bottom, #59BFFF 7%, #000000 100%);
background-image: -ms-linear-gradient(right bottom, #59BFFF 7%, #000000 100%);
background-image: linear-gradient(to right bottom, #59BFFF 7%, #000000 100%);
}
#wrapper {
height:80%;
width:80%;
width:700px;
margin: 0 auto;
background-color:transparent;
word-wrap: break-word;
}
background-color:Red;
}
#content {
background: Yellow;
}
{}{}{}{}{}{}
To make your web site adjust to devices. You will first of all need a viewport meta tag in your documents head
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
This will prevent the devices from zooming the content.
Next you will need to specify all css widths in % rather than pixels (you can combine it with a max-width)
#mainWrapper{
width:80%;
max-width:1200px;
}
If you have some elements that will need to be in px you can use mediaqueries to specify different values for different displays.
About the CSS gradients: The gradients will allways take up the entire size of the element you have assigned it to. You might be able to change this by playing around with background-position and background-attachment with css (not really sure on that)
Here's a good CSS gradient generator that will generate code for all browsers:
http://www.colorzilla.com/gradient-editor/
You really need to look into css media queries:
you can specify different settings for each screen size (or other media)
for your Iframe, you can just set it to 'width=100%' and it will fill the width of '#content'
eg:
#media screen and (max-width:320px){
#wrapper {
/*
* css gradient here
*/
}
#content{
margin:0 auto;
max-width:300px;
}
}
#media screen and (min-width:321px) and (max-width:1024px){
#wrapper {
/*
* css gradient here
*/
}
#content{
margin:0 auto;
max-width:1000px;
}
}
this is a great place to get started:
http://css-tricks.com/css-media-queries/
to have a gradient that sits behind the iframe, and fills up the width and height of the 'viewable area' then you would need to do something like this with your markup:
<body>
<div id="wrapper"></div>
<div id="content">
iframe goes here
</div>
</body>
and alter your css for the #wrapper element and the #content element to be something like:
#wrapper {
background: linear-gradient(red, blue);
left: 0;
min-height: 100%;
min-width: 100%;
position: absolute;
top: 0;
z-index: 9;
}
#content{
position: relative;
z-index: 10;
}
Here is a proof of concept: http://jsfiddle.net/aa7vJ/
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/
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.
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