I have a container DIV that centres itself with a width of 90%. It has a min-width of 940px and a max-width of 1240px.
Within this DIV I have a left side bar that is fixed and has a height of 100%. I want the colour from this DIV to continue to the left edge of the screen.
I can't add another DIV in because the margin is auto, and the min and max-height make the margin completely dynamic.
I have tried using a thick border on the container DIV but it acts as a margin in the sense that it doesn't go beyond the screen, it just moves the container DIV.
The current sidebar is where the content will be. This needs to stay where it is so everything appears centred on the page.
CSS Code:
#contain-content {
width: 90%;
height: auto;
min-width: 940px;
max-width: 1240px;
margin-left: auto;
margin-right: auto;
}
#contain-content #left-panel {
position: fixed;
width: 330px;
top: 0px;
background-color: #183950;
padding-top: 115px;
height: 100%;
}
http://jsfiddle.net/YwN8v
Maximise your browser window. The section I am referring to is the space to the left of the side bar.
What about gradient background of the body filling its left 5% with the needed color?
http://jsfiddle.net/YwN8v/2/
body {
background: linear-gradient(to right, #183950 0%, #183950 6%, transparent 6%);
}
Update
Here's a good tool to make gradients: http://www.colorzilla.com/gradient-editor/, but it's better to copy-paste only the needed values from its output:
background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIxMDAlIiB5Mj0iMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzE4Mzk1MCIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjYlIiBzdG9wLWNvbG9yPSIjMjY0NTVhIiBzdG9wLW9wYWNpdHk9IjEiLz4KICAgIDxzdG9wIG9mZnNldD0iNyUiIHN0b3AtY29sb3I9IiMyODQ3NWMiIHN0b3Atb3BhY2l0eT0iMCIvPgogICAgPHN0b3Agb2Zmc2V0PSIxMDAlIiBzdG9wLWNvbG9yPSIjZmZmZmZmIiBzdG9wLW9wYWNpdHk9IjAiLz4KICA8L2xpbmVhckdyYWRpZW50PgogIDxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxIiBoZWlnaHQ9IjEiIGZpbGw9InVybCgjZ3JhZC11Y2dnLWdlbmVyYXRlZCkiIC8+Cjwvc3ZnPg==);
background: -moz-linear-gradient(left, rgba(24,57,80,1) 0%, rgba(38,69,90,1) 6%, rgba(40,71,92,0) 7%, rgba(255,255,255,0) 100%);
background: -webkit-gradient(linear, left top, right top, color-stop(0%,rgba(24,57,80,1)), color-stop(6%,rgba(38,69,90,1)), color-stop(7%,rgba(40,71,92,0)), color-stop(100%,rgba(255,255,255,0)));
background: -webkit-linear-gradient(left, rgba(24,57,80,1) 0%,rgba(38,69,90,1) 6%,rgba(40,71,92,0) 7%,rgba(255,255,255,0) 100%);
background: -o-linear-gradient(left, rgba(24,57,80,1) 0%,rgba(38,69,90,1) 6%,rgba(40,71,92,0) 7%,rgba(255,255,255,0) 100%);
background: linear-gradient(to right, rgba(24,57,80,1) 0%,rgba(38,69,90,1) 6%,rgba(40,71,92,0) 7%,rgba(255,255,255,0) 100%);
Simply! Just add left: 0 to your #left-panel-sidebar:
#contain-content #left-panel {
position: fixed;
width: 330px;
top: 0px;
left: 0;
background-color: #183950;
padding-left: 3%;
padding-top: 115px;
height: 100%;
}
http://fiddle.jshell.net/YwN8v/3/
Related
I want to achieve this in CSS, valid for all screen sizes:
From the left side to the middle of my screen the background should be blue, from the upper middle to the right bottom corner the background should be white.
This is what I got already:
<style>
.wrapper {
position: fixed;
z-index: 1;
width: 100%;
height: 100%;
background: #297fca;
}
.right {
position: fixed;
z-index: 2;
top: -70%;
right: -50%;
background: #fff;
width: 100%;
height: 100%;
transform: translateY(50%) rotate(45deg);
}
</style>
...
<div class="wrapper">
<div class="right">
</div>
</div>
This is working for some screen sizes but not a general solution.
I'm looking for a CSS only solution. If this isn't possible a SVG apporach is ok too.
Thanks in advance.
You can easily do this with linear-gradient. You need two of them, one will create a square shape to fill the first 50% and the second one will create the triangle shape to fill the remaining 50%.
body {
margin:0;
height:100vh;
background-image:
linear-gradient(#297fca,#297fca),
linear-gradient(to bottom left,transparent 49.8%,#297fca 50%);
background-repeat:no-repeat;
background-size:50.1% 100%; /* both gradient will fill 50% width and 100% height*/
background-position:
left, /* The first one placed on the left*/
right /* The second one placed on the right*/
}
If you don't want transparency you can do it like below:
body {
margin:0;
height:100vh;
background:
linear-gradient(to top right,transparent 49.8%,#fff 50%)
right -1px top 0
/50% 100%
no-repeat,
#297fca;
}
You could use the css clip-path property and give it the necessary fill rules. Try the snippet below:
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.container {
height: 100vh;
background: #297fca;
clip-path: polygon(0 0, 50% 0, 100% 100%, 0 100%);
}
<div class="container"></div>
I have 2 divs, one stretches over the entire screen, other is centered within.
<div id="outer">
<div id="inner">
</div>
</div>
CSS looks like this:
#outer {
/* This line is important */
background: black url("https://placehold.it/1x50") repeat-x;
/* irrelevant */
height: 50px;
width: 100%;
}
#inner {
width: 1000px;
height: 50px;
margin: 0 auto;
background-color: #eee;
}
What I want to do is set the background of the outer div, but only to the right of the inner div. Currently a 1px image is set to repeat itself over the entire outer div, but I need it to go only to the right.
When done right, background will be black on left of inner div and grey on right (because placehold.it image is grey).
I can change HTML if necessary.
You can use a linear gradient background with an abrupt color change at 50% to the body:
#outer {
background: linear-gradient(to right, #000 0%, #000 50%, #ccc 50%, #ccc 100%);
height: 50px;
width: 100%;
}
Here's the result: http://codepen.io/anon/pen/JWjQzm
Addition:
With a background image, you can combine a plain color background and an image. But you can't repeat the image on the x-axis, so you'd have to have an image that covers at least the background width at the right side:
background: #000 url(http://placehold.it/200x50/fa0) right repeat-y;
http://codepen.io/anon/pen/jBOgya
Another addition/version after comment:
You didn't yet say what kind of image that is, but if it's just a repeated 1x50px image as in you example, you might as weel stretch it to half the screen width by adding background-size: 50% 100%; - see codepen linked below:
http://codepen.io/anon/pen/OpJKKO
Try this code on your codepen
HTML
<div id="outer">
<div id="inner">
</div>
</div>
CSS
#outer {
background: black;
height: 50px;
width: 100%;
position: relative;
}
#inner {
width: 1000px;
height: 50px;
margin-left: auto;
margin-right: auto;
background-color: #eee;
}
#inner:after{
content: "";
background: url(http://placehold.it/1x50/fa0) repeat-x;
top: 0px;
right:0px;
height: 50px;
width: calc(50% - 500px);
position: absolute;
}
I have our navigation bar set to 100%. The bar also has a 1px border on it. For some reason, the border causes the nav bar to stick out to the right by 1 or 2 pixels. I tried setting the border to 0 in Firebug and sure enough, it lined up correctly. Our site is here: http://clubschoicefundraising.com/
As you can see, the blue nav bar at the top stick out to the left side. I can remove the "right: 0" and then it sticks out to the right side. How do I prevent the border from causing the nav bar to stick out?
Update: As requested, here is my CSS for the nav:
nav
{
position: absolute;
right: 0;
top: 70px;
margin-top: 5px;
font-size: 1.3em;
font-weight: 600;
list-style: none;
width: 100%;
margin: 5px auto;
height: 43px;
padding: 0;
z-index: 10;
/* Background color and gradients */
background: #014464;
background: -moz-linear-gradient(top, #0272a7, #013953);
background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#0272a7), to(#013953));
background: -ms-linear-gradient(top, #0272a7, #013953);
background: -moz-linear-gradient(top, #3C78B9, #28507B);
background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#3C78B9), to(#28507B));
background: -ms-linear-gradient(top, #3C78B9, #28507B);
/* Borders */
border: 1px solid #002232;
box-shadow:inset 0px 0px 1px #edf9ff;
}
Explanation :
By default, borders are calculated outside a specified with on an element,that is why it overflows when you give your element a border.
Solution :
Use box-sizing:border-box; so that the border width is calculated inside the 100% and it won't overflow. (more info on box sizing on MDN)
box-sizing:border-box; is supported by IE8+ (see canIuse)
This is because the computed width of the element exceeds the available space inside its parent.
<div> elements - other than absolutely positioned ones - will take up the available width of their parent.
However in this particular instance that you have removed the element from normal flow by using absolute positioning, you could specify the width of the element - stretch the element - by left: 0; right: 0; declarations which is supposed to work on a large scale of web browsers.
Alternatively, you could use box-sizing: border-box; declaration to make the UAs calculate the width/height of the box including the borders and padding.
It's worth noting that the second approach is supported in IE 8 and above.
Add box-sizing: border-box to your nav
nav {
box-sizing: border-box;--> ADDED
position: absolute;
right: 0;
top: 70px;
margin-top: 5px;
font-size: 1.3em;
font-weight: 600;
list-style: none;
box-sizing: border-box;
width: 100%;
margin: 5px auto;
height: 43px;
padding: 0;
z-index: 10;
background: #014464;
background: -moz-linear-gradient(top, #0272a7, #013953);
background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#0272a7), to(#013953));
background: -ms-linear-gradient(top, #0272a7, #013953);
background: -moz-linear-gradient(top, #3C78B9, #28507B);
background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#3C78B9), to(#28507B));
background: -ms-linear-gradient(top, #3C78B9, #28507B);
border: 1px solid #002232;
box-shadow: inset 0px 0px 1px #edf9ff;
}
For more info about box-sizing you can refer to this link
#example1 {width: 500px;
height: 250px;
background-image: url(http://www.css3.info/wp-content/themes/new_css3/img/sheep.png),
url(http://www.css3.info/wp-content/themes/new_css3/img/sheep.png);
background-position: 20px 10px, 100px 250px;
background-repeat: no-repeat;
}
Background-image with fixed background-position don't work Demo
You are having same value for height and last number in background position. Change to this and see.
background-position: 20px 10px, 100px 100px;
Demo
Write it as -
#example1 {
width: 500px;
height: 250px;
background: url(http://www.css3.info/wp-content/themes/new_css3/img/sheep.png) no-repeat 20px 10px, url(http://www.css3.info/wp-content/themes/new_css3/img/sheep.png) no-repeat 200px 50px;
}
Demo
Your code also works but the problem with your code is that you are setting top position of the second image at 250px; where the height of your container is 250px; That's why it's not visible :)
Is it possible to make only part of div transparent like an amount of space in div.
For example, you select 100px from top of div and the top 100px have an opacity set?
How would I do it?
You can do a couple of things:
Try a background image where half is transparent and the other half is not.
Use a CSS gradient in such a way that half is transparent and the other is not. Ex:
background: -moz-linear-gradient(top, rgba(30,87,153,0) 0%, rgba(41,137,216,0) 50%, rgba(34,125,203,1) 52%, rgba(125,185,232,1) 100%); /* FF3.6+ */
Use multiple divs where one has transparent BG and the other does not. Ex:
<div>
<div id="transparent" style="background: transparent"></div>
<div id="not-transparent" style="background: #000"></div>
</div>
I'm sure there are other ways, but those are the first three that come to mind.
Good luck.
Either you create the right background-image using a semi-transparent PNG (transparent at top, opaque at bottom for example) ; either you use two sub-divs, each having its own background-color (one of which with rgba for the transparent part).
You can use css3 properties along with pseudo elements to create this effect:
The trick is to draw a box with :before or :after pseudo element. We can apply background property for inner semi-transparent background. While for outer background we can use a large box-shadow value.
HTML:
<div class="box"></div>
CSS:
.box {
position: relative;
overflow: hidden;
height: 120px;
width: 250px;
}
.box:before {
background: rgba(0, 0, 0, 0.3);
box-shadow: 0 0 0 1000px #000;
position: absolute;
height: 50px;
width: 50px;
content: '';
left: 0;
top: 0;
}
html,
body {
height: 100%;
}
body {
background: linear-gradient(to top, #ff5a00 0, #ffae00 100%);
margin: 0;
}
.box {
position: relative;
margin: 30px 20px;
overflow: hidden;
height: 120px;
width: 250px;
}
.box:before {
background: rgba(0, 0, 0, 0.3);
box-shadow: 0 0 0 1000px #000;
position: absolute;
height: 50px;
width: 50px;
content: '';
left: 0;
top: 0;
}
<div class="box"></div>