I'd like to ask, how to add two images on both sides of a div.
See, I got a main container on my site, and I'd like to add a little decoration on both sides, like a shadow which would foreground the actual content and place less emphasis on the background, y'know?
So, I got something like this:
page.html
...
<body>
<div id="container">
<div id="shadow-left"></div>
<div id="shadow-right"></div>
...
</div>
...
</body>
...
main.css
...
#container {
position: relative;
background: #FFF;
width: 840px;
min-height: 100vh;
margin-left: auto;
margin-right: auto;
}
#shadow-left {
// Gotta do that on the left site too
}
#shadow-right {
position: absolute;
top: 80px; // So there's a little space just for the upper nav
left: 840px;
width: 500px;
height: 100vh;
background: url('/res/img/shadow-right.png') 0 0 no-repeat;
}
...
I imagined it to look like this, but there's just NOTHING. How could I accomplish to do that?
Here is a fiddle where the main content is under-shadowed by whatever color you'd like, you can expand the shadow effect by playing around with the css and I'm sure there are plenty of css-shadow generators online. Hope this is what you're looking for.
HTML
<div id="main"></div>
CSS
#main {
width:60%;
margin-left:auto;
margin-right:auto;
background:green;
height:1000px;
box-shadow: 30px 0 19px -4px lightgreen, -30px 0 19px -4px lightgreen;
}
P.S. Excuse the green..
It seems like for this you can use floats, I hope I am understanding your question correctly.
fiddle: https://jsfiddle.net/L4cjz8p9/
HTML
<body>
<div id="container">
<div id="shadow-left"><img src="http://placehold.it/100x300"></div>
<div id="shadow-right"><img src="http://placehold.it/100x300"></div>
Main content
</div>
</body>
CSS
#shadow-left
{
float:left;
}
#shadow-right
{
float:right;
}
#container {
position: relative;
background: #FFF;
width: 840px;
min-height: 100vh;
margin-left: auto;
margin-right: auto;
}
Here is one way to position things outside e.g. a centered container. You could then fill the "shadows" with a background that repeats only over y or no repeat at all if you only would like to have something on the top of the page but not repeat when you scroll down.
The example here just has a 50px wide box at both sides next to the container.
Fiddle: http://jsfiddle.net/60yjen0a/
HTML:
<div class="container">
<div class="shadow left"></div>
<div class="shadow right"></div>
<div class="content"></div>
</div>
CSS:
.container {
position: relative;
width: 600px;
height: 1000px;
margin: 0 auto;
}
.content {
position: absolute;
width: 100%;
height: 100%;
background: #eee;
}
.shadow {
position: absolute;
height: 100%;
top: 0;
background: #ddd;
width: 50px;
}
.left {
left: -50px;
}
.right {
right: -50px;
}
With absolute position you can use left and right
#shadow-left {
position: absolute;
top: 80px;
left: 0px;
width: 500px;
height: 100vh;
background: YOUR_BACKGROUND_URL_FOR_LEFT_SHADOW;
}
#shadow-right {
position: absolute;
top: 80px;
right: 0px;
width: 500px;
height: 100vh;
background: YOUR_BACKGROUND_URL_FOR_RIGHT_SHADOW;
}
Check this on JSfiddle
Related
The yellow box at the top works like it should. The one at the bottom does not. The scrolling should stop at the end of the footer, here as black line (and also not extend to the right).
Of course, there could be a way to to this with graphics.
Is there a solution with CSS?
#mainwrapper {
max-width: 1000px;
margin: auto;
padding-top: 100px;
position: relative;
}
.top-ci-colorbox {
position: absolute;
top: -135px;
right: 0;
height: 200px;
width: 2000px;
background-color: yellow;
transform: rotate(-3.5deg);
}
.bottom-ci-colorbox {
position: absolute;
bottom: -135px;
left: 0;
height: 200px;
width: 2000px;
background-color: yellow;
transform: rotate(-3.5deg);
}
header {
position: fixed;
max-width: 1000px;
top: 0;
}
footer {
position: relative;
z-index: 10;
border-bottom: 1px solid black;
}
<div id="mainwrapper">
<div class="top-ci-colorbox"></div>
<header>Navigation Here</header>
<main>
...
<br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br>
</main>
<footer>Footer Here. Scrolling should stop at black line</footer>
<div class="bottom-ci-colorbox"></div>
</div>
View on JSFiddle
Please check this code. hope it will help you
#mainwrapper {
max-width: 100%;
margin: auto;
padding-top: 100px;
position: relative;
overflow-y: hidden;
}
#mainwrapper:before,
#mainwrapper:after{
content : "";
transform: rotate(-3.5deg);
position: absolute;
top: -60px;
left: 0;
height: 100px;
right: 0;
width: 100%;
background-color: yellow;
transform: rotate(-3.5deg);
}
#mainwrapper:after{
top: auto;
bottom: -60px;
}
header {
position: fixed;
max-width: 1000px;
top: 0;
}
footer {
position: relative;
z-index: 10;
border-bottom: 1px solid black;
}
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<div id="mainwrapper">
<div class="top-ci-colorbox"></div>
<header>Navigation Here</header>
<main>
Is it possible to let the bottom box behave like the top one, so that the scrolling ends after reaching the footer and most part of the box is not beeing displayed. The same with the right scrolling, which is extended by the bottom box (and left scrolling not by the top one).
<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>
</main>
<footer>Footer Here. Scrolling should stop at black line</footer>
<div class="bottom-ci-colorbox"></div>
</div>
</body>
</html>
html,body,#mainwrapper{
height:100%;
}
body{
margin-bottom:0;
}
#mainwrapper {
max-width: 1000px;
margin: auto;
padding-top: 100px;
position: relative;
overflow:hidden;
box-sizing:border-box;
}
main{
height: calc( 100% - 19px );
}
.top-ci-colorbox {
position: absolute;
top: -135px;
right: 0;
height: 200px;
width: 2000px;
background-color: yellow;
transform: rotate(-3.5deg);
}
.bottom-ci-colorbox {
position: absolute;
bottom: -135px;
left: 0;
height: 200px;
width: 2000px;
background-color: yellow;
transform: rotate(-3.5deg);
}
header {
position: fixed;
max-width: 1000px;
top: 0;
}
footer {
position: relative;
z-index: 10;
border-bottom: 1px solid black;
}
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<div id="mainwrapper">
<div class="top-ci-colorbox"></div>
<header>Navigation Here</header>
<main>
Is it possible to let the bottom box behave like the top one, so that the scrolling ends after reaching the footer and most part of the box is not beeing displayed. The same with the right scrolling, which is extended by the bottom box (and left scrolling not by the top one).
<br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br>
</main>
<footer>Footer Here. Scrolling should stop at black line</footer>
<div class="bottom-ci-colorbox"></div>
</div>
</body>
</html>
Check in Fiddle https://jsfiddle.net/h25d5b8z/28/
First up all you must need to set height 100% to html,body and the main element.If we absolute any item ,we must need to add property overflow:hidden to it's parent element.In this case we need to add overflow:hidden to #main-wrapper.We also need to set height to main tag element
After reading several topics about css overflow problems here on stackoverflow, I found the solution by myself. It is difficult to use overflow on only one axis because of unexpected behaviour.
Insted the #mainwrapper div needs to be wrapped in another div. This div comes with overflow: hidden.
<div style="overflow:hidden;">
<div id="mainwrapper">
...
</div>
</div>
I am trying to create 2 side banners (left and right) with fixed positioning, and a centered container for the content.
The problem is that when minimizing the screen, the 2 side banners cover the centered container. I need a CSS solution to set the minimum width of the view to 860px; after which, the window becomes scrollable and divs do not overlap. The perfect solution is:
The HTML I am using is as such:
<div class="left" style="position:fixed; height:100%; background-color:#7fb4dd; top:43px; left:0px; width:180px;">
</div>
<div class="center" style="margin:100px 180px 0 180px;">
<div style="width:100%;">
<div style="width:500px; margin:0 auto;">
</div>
</div>
</div>
<div class="right" style="position:fixed; height:100%; background-color:#7fb4dd; top:43px; right:0px; width:180px;">
</div>
The above code prevents the left bar from overlapping the center container; but the problem is still present with the right bar.
This is a fiddle of the code: preview
You need to wrap the three DIVs in a wrapping DIV and set the min-width to prevent the overlap. This prevents it from getting narrower than the three columns. Add up the widths, set that as the minimum.
Here is a pure HTML/CSS solution for you , tell me if it is not exactly what you needed.
<html>
<head>
<style type="text/css">
body{
margin:0;
padding:0;
line-height: 1.5em;
}
b{font-size: 110%;}
em{color: red;}
#topsection{
background: #EAEAEA;
height: 90px; /*Height of top section*/
}
#topsection h1{
margin: 0;
padding-top: 15px;
}
#contentwrapper{
float: left;
width: 100%;
}
#contentcolumn{
margin: 0 200px 0 230px; /*Margins for content column. Should be "0 RightColumnWidth 0 LeftColumnWidth*/
background-color : red;
width : 400px;
margin-left : auto;
margin-right : auto;
}
#leftcolumn{
float: left;
width: 200px; /*Width of left column*/
margin-left: -100%;
background: #C8FC98;
}
#rightcolumn{
float: left;
width: 200px; /*Width of right column*/
margin-left: -200px; /*Set left marginto -(RightColumnWidth)*/
background: #FDE95E;
}
#footer{
clear: left;
width: 100%;
background: black;
color: #FFF;
text-align: center;
padding: 4px 0;
}
.innertube{
margin: 10px; /*Margins for inner DIV inside each column (to provide padding)*/
margin-top: 0;
height : 700px;
}
.innertubetop{
margin: 10px; /*Margins for inner DIV inside each column (to provide padding)*/
margin-top: 0;
}
</style>
</head>
<body>
<div id="maincontainer" style = "min-width : 800px;"> <!-- this will be sum of width of all three columns-->
<div id="topsection"><div class="innertubetop"><h1>Hello iam navigation bar</h1></div></div>
<div id="contentwrapper">
<div id="contentcolumn">
<div class="innertube"><b>Center Column </b></div>
</div>
</div>
<div id="leftcolumn">
<div class="innertube"><b>Left Column: <em>200px</em></b></div>
</div>
<div id="rightcolumn">
<div class="innertube"><b>Right Column: <em>200px</em></b></div>
</div>
</div>
</body>
</html>
The problem you are in is because of position: fixed; since that object is taken out of the workflow the other objects can't push it away. I was able to get a nice and fully responsive layout to work. (Let me know how it is)
Fixed positioned elements are removed from the normal flow. The
document and other elements behave like the fixed positioned element
does not exist.
Fixed positioned elements can overlap other elements.
Updated answer to better suit his needs (JSFIDDLE, remove the show, in the url, to see code)
Okay what I am doing here is using css media queries to change the layout.
Here is the html,
<div class="wrap">
<nav></nav>
<div class="content"></div>
<section class="lSide"></section>
<section class="rSide"></section>
</div>
Now the media query,
#media only screen and (max-width: 680px) {
.content {
width: 90%;
margin-bottom: 10px;
}
.lSide, .rSide {
position: relative;
width: 90%;
height: 100px;
margin: 10px auto;
bottom: 0;
}
}
Don't forget to add this to your head on your html file,
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0;">
OLD answer
The CSS, (JSFIDDLE, remove the show to see code)
html, body {
width: 100%;
height: 100%;
padding: 0;
margin: 0;
background: tan;
}
.wrap.active {
min-width: 750px;
}
nav {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 20%;
background: brown;
z-index: 101;
}
.lSide {
background: #3b3b3b;
position: fixed;
left: 0;
top: 20%;
width: 200px;
height: 80%;
}
.content {
width: 300px;
height: 600px;
background: #c1c1c1;
margin: 0 auto;
position: relative;
z-index: 100;
top: 20%;
}
.rSide {
background: #3b3b3b;
position: fixed;
right: 0;
top: 20%;
width: 200px;
height: 80%;
}
.rSide.active {
display: none;
}
The JS, (updated)
$(window).resize(function() {
if ($(window).width() < '750') {
$('.wrap, .rSide').addClass('active');
}
else {
$('.wrap, .rSide').removeClass('active');
}
});
One solution I have, refer to fiddle next to css, is to remove the right side when a screen size is to small.
Please see the attached image,I want to design this in html,Quite successful.But when I test it on different resolutions the red box moves here and there.I made the design in 100% width and height 100%
<style type="text/css">
#green-box { width: 75%; background: green; float: left; position: relative; height: 100%; overflow: visible; position: relative; }
#blue-box { width: 25%; background: blue; float: left; height: 100%; }
#red-box {
position: relative;
top: 50px;
left:450px;
width: 357px;
background: red;
height: 207px;
margin:0 auto;
}
#green-box-content
{
margin:0 auto;
width:1600px;
height:800px;
}
</style>
<div id="container">
<div id="green-box">
<div id="green-box-content">
<p>Here is some text!</p>
<div id="red-box"></div>
</div>
</div>
<div id="blue-box">
</div>
<div style="clear: both"></div>
</div>
Part of the problem is in how you are trying to position the element. It looks like you want it to be centered between the blue and green, but you're positioning from the left-hand side. Once the width of the green changes, it won't be where you want it. It would be better to position from the right (the border between the two) and set right to -1/2 of the width.
Also, 100% height will only work if the parent containers have a set height
Here's the modified CSS, and a fiddle to demonstrate
#blue-box,
#green-box {
height: 300px;
}
#green-box {
position: relative;
width: 75%;
float: left;
background: green;
}
#blue-box {
width: 25%;
float: left;
background: blue;
}
#red-box {
position: absolute;
top: 50px;
right: -178px; /* width / 2 */
width: 357px;
height: 207px;
background: red;
}
Remove width and height from #green-box-content, works perfectly in my local.
#green-box-content
{
margin:0 auto;
}
check this after making the change in my local.
I think you should Percentage of the red box as you have used it for green and blue and position as absolute.
http://jsfiddle.net/ccEKk/
if I am wrong update the fiddle so that someone can help you with it
#red-box {
position: absolute;
top: 5%;
left:45%;
width: 35%;
background: red;
height: 20%;
margin:0 auto;
}
i have div area which is devided in to 4 equal parts, like the one atached.
now i need another div to be placed at the bottom area as an overlay to the above div. Imagine it like a text scroll area on the bottom side of the TV and the TV screen is constructed by 4 divs.
I am able to create the 5 divs. now the issue is that the 5th div(scroll area) is not going above the bottom edge of the 2 lower divs (3 and 4). I also had put z-index also but failed
can anybody share a sample for styling this.
You can solve it this way:
HTML:
<div class="area"></div>
<div class="area"></div>
<div class="area"></div>
<div class="area"></div>
<div class="overlay"></div>
CSS:
.area{
float: left;
width: 49%;
height: 300px;
border: 1px solid black;
}
.overlay{
width: 200px;
height: 100px;
background-color: blue;
clear: both;
position: absolute;
bottom: 30px;
margin: -100px;
left: 50%;
}
Please note that I have used hard coded example values. The actual values depends on which context the markup is in.
Without your code it's hard to figure what's not working.
If I understand what you want this is what I would have done:
<div class="container">
<div class="block1"></div>
<div class="block2"></div>
<div class="block3"></div>
<div class="block4"></div>
<div class="overlay"></div>
</div>
css:
.container {
position: relative;
width: 600px; /* use the size you want */
height: 400px;
}
.container div {
position: absolute;
width: 50%;
height: 50%;
}
.container .block1 { top: 0; left: 0; background: pink; }
.container .block2 { top: 50%; left: 0; background: red; }
.container .block3 { top: 0; left: 50%; background: green; }
.container .block4 { top: 50%; left: 50%; background: blue; }
.container .overlay {
position: absolute;
width: 80%;
height: 100px;
left: 10%;
bottom: 30px; /* distance from the bottom */
z-index: 1;
background: yellow;
}
See attached image. How is this accomplished? Gosh, I've been going CSS for 8 years but somehow never had to do this!
Thanks!
This is how I do it:
<style>
#container { margin-left: 250px; }
#sidebar {
display: inline; /* Fixes IE double-margin bug. */
float: left;
margin-left: -250px;
width: 250px;
}
/* Definitions for example only: */
#sidebar { background: #FF0000; }
#content { background: #EEEEEE; }
#sidebar, #content { height: 300px; }
</style>
<div id="container">
<div id="sidebar"></div>
<div id="content"></div>
</div>
Example here
I had this implemented on my site a while back, but I lost the code. Here's a quick CSS mockup:
The HTML:
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>Test</title>
</head>
<body>
<div id="left">
Mr. Fixed-width left
</div>
<div id="right">
Mr. Dynamic right. Scroll me!
</div>
</body>
</html>
And here's the CSS:
body
{
padding-left: 230px;
}
#left
{
position: fixed;
height: 100%;
left: 0px;
top: 0px;
width: 200px;
background-color: rgb(150, 150, 150);
border-right: 5px solid rgb(50, 50, 50);
padding: 10px;
}
#right
{
width: 100%;
height: 10000px;
}
This should work, and here's a live copy: http://jsfiddle.net/dDZvR/12/.
Note that whenever you add padding, borders, margins, etc. to the left bar, you have to increase the padding on the body. It'll save you a ton of debugging ;)
Good luck!
This new approach doesn't break the layout as the content box (right) organically grows. Also it allows to safely apply backgrounds and borders to the container box.
.container {
width: 100%;
height: 100px;
overflow: hidden;
position: relative;
}
.left {
position: absolute;
width: 80px;
height: 100%;
}
.right {
position: relative;
left: 80px;
top: 0;
margin-right: 100px;
height: 100%;
}
See demo.
You can always use table display layouts (sigh).
.container {
width: 100%;
display: table;
}
.container div {
display: table-cell;
}
.sidebar {
width: 200px;
background: gray;
}
<div class="container">
<div class="sidebar">fixed width sidebar</div>
<div>dynamic content</div>
</div>
This is the most straight forward solution I could think of.
Wrap both elements in a parent div set to relative positioning, then absolutely position the static side bar and set a margin on the responsive div the same width as the static sidebar.
HTML:
<div class="wrapper">
<div class="fixed"></div>
<div class="responsive">xx</div>
</div>
CSS:
.wrapper {
width: 100%;
}
.fixed {
position: absolute;
bottom: 0;
left: 0;
top: 0;
}
.responsive {
margin-left: 250px;
}