Hello I am new to css and am in need of some assistance. I am wanting to create 3 layers in CSS for my website so it looks like the picture I have provided below.
How would I go about setting this up in CSS? Any help would be much appreciated.
Thankyou.
You want to learn about the z-index property. But basically, anything you apply z-index to needs to have a position set... I'm pretty sure static doesn't work but absolute relative & fixed all do it. then you can just order them. For example:
.div-background{
z-index:1;
position:relative;
}
.div-middle{
z-index:2;
position:relative;
}
.div-front{
z-index:3;
position:relative;
}
Make sense?
All you have to do is add the background img of the pattern to the css
here's an example of the code
div {
background: url(../images/purpalt.png) repeat;
}
[http://www.bootply.com/4iBwk4Tmfr][1]
/* CSS used here will be applied after bootstrap.css */
/* Custom container */
.container-full {
margin: 0 auto;
width: 100%;
background: #666;
}
.jumbotron {
background: black;
height: 553px;
}
.container {
background: #ccc;
padding: 15px 10px;
height: 553px;
width: 960px;
}
.image-box {
background: #fff;
text-align: center;
height: 500px;
}
footer {
background: orange;
height: 190px;
<div class="container-full">
<div class="jumbotron">
</div>
<div class="container">
<div class="col-md-12">
<div class="image-box">
Image to go here
</div>
</div>
</div>
</div> <!-- /container full -->
<footer></footer>
Related
I'm theming a Drupal website and using the vegas full screen bg.
I want to achieve the following:
But I have some trouble by theming the footer: I want it to be always displayed under the background image (so you have to scroll down to see the footer) now it keeps coming over the background image. Besides that I want the main menu and footer to become full width and not 960px like the container. But I can't seem to get these 2 to 'break out' the container.
Now I've:
#footer {
position: absolute;
bottom:0;
width: 100%;
height:100px;
background-color: #202020;
}
#primary-menu-bar{
position: absolute;
width: 100%;
height: 60px;
padding: 0;
margin: 0;
background-color: rgba(255,255,255,0.70);
padding-top: 10px;
}
Normally something like this does the trick but I'm struggling to get this right...
Anybody any advice or solutions?
You didn't show any HTML, so I just came up with some HTML myself. If the footer is only visible when you scroll down you need to have some sort of wrapper for both your header and your content element. You can then set the wrapper min-height to 100% and use background-image/background-size for a full-screen image background.
HTML:
<div class="wrapper">
<header class="page-head" role="banner">
Header
</header>
<main class="main" role="main">
Content
</main>
</div>
<footer class="page-foot" role="contentinfo">
Footer
</footer>
CSS:
html, body {
height: 100%;
}
.wrapper {
min-height: 100%;
background-image: url(http://placehold.it/1200x800);
background-position: center center;
background-size: cover;
}
.page-head {
background: red;
}
.main {
width: 80%;
margin: 0 auto;
background: yellow;
}
.page-foot {
background: blue;
}
See example on this pen.
here is a possible solution: http://jsfiddle.net/09mcoo2h/1/
as i said in the comment below your question: you need to have footer and header outside the container (that is the only with 960px)
To have a footer TO THE BOTTOM of the page, just set the body as position:relative.
HTML
<div id="primary-menu-bar"></div>
<div id="container"></div>
<div id="footer"></div>
CSS
body {
margin:0;
padding:0;
position:relative;
}
#container {
display:block;
width:960px;
height:1600px;
background:#eee;
margin:0 auto;
}
#footer {
position: absolute;
bottom:0;
width: 100%;
height:100px;
background-color: #202020;
}
#primary-menu-bar{
width: 100%;
height: 60px;
top:0;
background-color: #F00;
padding-top: 10px;
}
It's really hard for us to do it like this with out HTML.
So basically what you need to do is place the footer and header outside the container. Because the container is 960px, so the header and footer can go over it.
The structure should be like this:
<body>
<header></header>
<div class="container"></div>
<footer></footer>
</body>
Example on codepen
I need to insert photo in between divs (blue and light-blue) as in the following example.
I did it with absolute positioning:
HTML:
#*Blue and light-blue sections with photo*#
<div style="width: 100%; height: 120px; background-color: #0052a4"></div>
<div style="width: 100%; height: 120px; background-color: #c2dffd">
<div class="image">
<img src="/Content/pictures/MainPhoto.png" />
</div>
</div>
CSS:
.image {
position: absolute;
bottom: -100px; /* bottom space */
right: 100px; /* right space */
}
.image img {
display: block;
}
But this way doesn't work correctly when you change the screen resolution of the device.
I create JSFiddle with this example.
Could you please to suggest another way to resolve this problem?
I need to create responsive design without hardcoded values.
Thanks! :)
you could just use a background and a padding to keep image from sides : DEMO
HTML
<div class="imaged">
<img src="http://lorempixel.com/800/180/food/7"/>
</div>
CSS
.imaged {
padding:20px;
text-align:center;
background:url(my-blue-light-blue-bg.jpg)repeat-x center ;
}
img {
border:solid white 4px;
vertical-align:top;/* or display:block; + margin:auto;*/
}
from your fiddle: inset box-shadow in a single div works too : DEMO 2 / DEMO 3
<div style="
padding:0 20px;
display:table;
min-width: 100%;
box-shadow:
inset 0 120px 0 #0052a4,
inset 0 -120px 0 #c2dffd;
height:244px;
line-height:244px;
text-align:center;
">
<img src="http://lorempixel.com/842/176/city" style="border:solid white 4px;"/>
</div>
HTML
<div class="container-box">
<div style="width: 100%; height: 120px; background-color: #0052a4"></div>
<div style="width: 100%; height: 120px; background-color: #c2dffd"></div>
<div class="image">
<img src="http://media1.santabanta.com/full1/Outdoors/Landscapes/landscapes-267a.jpg" />
</div>
</div>
CSS
.container-box {
position:relative;
}
.container-box img {
height:200px;
width:90%;
position:absolute;
top:20px;
left:5%;
border:3px solid #fff
}
Of course I'd never use inline CSS, but there you go. See fiddle here
I think this is what you are trying to do:
http://jsfiddle.net/dc6r1bny/
.image {
position: absolute;
bottom: 30px; /* bottom height */
left: 50%; /* position element 50% from left side */
margin-left: -421px; /* bring it back left half the image size */
}
Then for mobile, you will just need to use media queries to adjust the image size to be 100%, remove the margin, etc. when you hit roughly 842px.
add this css code to the image. it should work.
margin-right:auto;
margin-left:auto;
I'd like to have a sticky header with a %-height property. Sections below the header should take up the remaining height of the page, for example: header=10% all other sections are atleast 90%. This is similar to a related question: CSS Sticky Header/Footer and Fully Stretched Middle Area?, but he's using fixed px-height whereas i want %-height. I tried to use margin on my section, but that doesn't seem to work. Not does it seem to work to use a margin and 90% height on my sections.
For the moment I was able to come up with: http://jsfiddle.net/K9m63/. But a few problems:
The first section dissapears underneath the header.
Because of point 1, the section div's are too high and therefore not taking the remaining size.
HTML
<header>
<nav>Test</nav>
</header>
<section>
<div class="container yellow">1</div>
</section>
<section>
<div class="container pink">2</div>
</section>
<section>
<div class="container purple">3</div>
</section>
CSS
body, html {
height: 100%;
}
header {
height: 10%;
background-color: green;
position: fixed;
top: 0px;
width: 100%;
}
.helper {
display: inline-block;
height: 100%;
vertical-align: middle;
}
.nav-image {
vertical-align: middle;
}
section {
height: 100%;
width: 100%;
background-color: red;
}
.container {
width: 72.8125%;
background-color: blue;
margin: 0px auto;
height: 100%;
}
.yellow {
background-color: yellow;
}
.pink {
background-color: pink;
}
.purple {
background-color: purple;
}
Thanks!
Possible solution:
I have wrapped all sections into 2 divs.
<div class="wrapper">//rest 90% of the page
<div class="wrapper2">//100% of parent
<section>
<div class="container yellow">1</div>
</section>
<section>...
</div>
</div>
CSS:
.wrapper {
min-height:90%;
height:auto !important;
position:relative;
top:10%;
}
.wrapper2 {
height:100%;
width:100%;
position:absolute;
}
Also, add z-index:1; to header.
Updated fiddle here.
Based on your drawing, this is how you could* do it. - but there's also "fixed" / or "Sticky" positioning. - and this layout would force you to implement your own scroll below - in the page content, which is a pain.
html, body {
height: 100vh; /* you can use vh or % - but either way... */
height: 100%; /* they don't know their own height... how would they? */
}
body {
margin: 0;
}
.site-header {
background: #ff6666;
height: 10%;
}
.page-content {
background: #6666ff;
height: 90%;
}
<header class="site-header">
header
</header>
<main class="page-content">
main
</main>
This is my first time on this forum and ill try to be clear as possible, i have a problem with creating a small website for my own, specifically with the header. Im trying to create a page which has a wrapper of 1024px center (margin: 0 auto;) and i would like 2 divs, on both sides of this wrapper where i can use another picture as background. My current css looks like this:
body, html
background: url(../images/bg.jpg);
background-repeat: no-repeat;
background-position: top center;
margin: 0;
padding: 0;
}
#wrapper
margin: 0 auto;
width: 1024px;
}
#header {
width: 1024px;
height: 254px;
background-image: url(../images/header2.png);
background-repeat: none;
position: relative;
}
#header_right {
width: 50%;
right: 0;
background-image: url(../images/header_right2.png);
position: absolute;
height: 254px;
}
#header_left {
width: 50%;
left: 0px;
background-image: url(../images/header_left.png);
position: absolute;
background-position: right;
margin-left: -512px;
height: 254px;
}
and my html looks like:
<body>
<div id="header_right"></div><!--End header right!-->
<div id="header_left"></div><!--End header right!-->
<div id="wrapper">
<div id="header"></div><!--End header!-->
<div id="content"></div><!--End Content!-->
</div><!--End wrapper!-->
</body>
What i'm trying to accomplish is to have a header that continues on both left and right (both headers use different backgrounds), in this case it does work on the left, because im using a negative margin, since i use 50% width and exactly the half of the wrapper (-512px), this works, but if i would try to use a negative margin on the right (margin-right: -512px) this will extend the page on the right with an extra 512px, which is not my intention.
I've been googling all day but can't seem to find any answer to my question, also tried to make 3 divs with float: left , but couldnt figure out how to make 1 in the center with a width of 1024px and the rest 100% width, if anyone could help me out that would be really appreciated.
Kind regards
I am not entirely sure how you want it to look like, but I'll give it a shot.
If I'm way off, perhaps you could provide me with a schematic of sorts?
In any case, the example given below does not use your specific code, but it should give you an idea of how it's done.
Result:
The left and right headers are "infinite", in that they always fill the entire page's width.
The middle header covers up the rest. If you've got background images you can use background-position to position them so that they align with the middle header's left and right edges.
Code | JSFiddle example
HTML
<div class='side_wrapper'>
<div class='left_header'></div><div class='right_header'></div>
</div>
<div class='header'></div>
<div class='content'>
Content here
</div>
CSS
.header, .side_wrapper, .left_header, .right_header{
height: 100px;
}
.header, .content{
width: 400px;
margin: 0 auto;
}
.side_wrapper{
width: 100%;
white-space: nowrap;
}
.left_header, .right_header{
width: 50%;
display: inline-block;
}
.left_header{
background-color: blue;
}
.right_header{
background-color: lightblue;
}
.header{
position:absolute;
top: 0;
left: 50%;
margin-left: -200px;
background-color: red;
}
.content{
background-color: green;
text-align: center;
}
You want the two header out of the wrappper and aside of it right?
If im right, try this:
<body>
<div id="header_left"></div><!--End header right!-->
<div id="wrapper">
<div id="header"></div><!--End header!-->
<div id="content"></div><!--End Content!-->
</div><!--End wrapper!-->
<div id="header_right"></div><!--End header right!-->
</body>
and :
display: inline; float: left;
in each element(header-left, header-right, wrappper), and get out of the negative margin
In you divs use float:left; this should mean that within a wrapper as long as there is enough space they will float next to each other for example
css:
#divWrapper
{
width:500px;
float:left;
background-color:red;
}
#divLeft
{
width:250px;
float:left;
background-color:blue;
}
#divRight
{
width:250px;
float:left;
background-color:green;
}
Html
<div id "divWrapper">
<div id = "divLeft">content here</div>
<div id = "divRight">content here</div>
</div><!--this is the end of the wrapper div -->
A really good tool to use for manipulating css is Firebug in Firefox https://getfirebug.com/
if you want a centre div try this:
http://jsfiddle.net/kzfu2/1/
I'm making a website and Id like the sides to have an image that repeats on the Y. Sort of like this website. http://www.solutionkaizen.com/html/boutique.php Im just not sure how to make the div for it. For the CSS I think its basically setting the bg of the div to my image and repeat Y. Thanks
I know how to do the css part, but how would I make a div that spans the whole eight of the site?
Thanks
but how can that div work for both sides:
< page content >
< >
< >
< >
< >
This one is also a great example
http://www.ecodetox.ca/
<style type="text/css">
<!--
body {
background-color: #FFFFFF;
margin-left: 0px;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
background-image: url(background.jpg);
}
div#main {
background-color: #fff;
margin-left:12%;
margin-right:12%;
}
-->
</style>
</head>
<body>
<div id=main>Hello World!</div>
</body>
</html>
The site itself is using a table with two further images to remove the hard edge which my example above produces.
#div {
background-image: url('bg.png');
background-repeat: repeat-y;
background-color: #fff;
}
<div id="div">Greetings!</div>
if you see their code they use a really, really tall image as background and they have set it as background of the whole body ...
their image : http://www.solutionkaizen.com/images/background.jpg (you can zoom on it if it gets scaled to fit the browser..)
To best accomplish what those sites are doing with CSS, I'd go with this:
CSS:
body
{
background: White url("vertical-fading-bk.png") repeat-x;
}
#container
{
width: 800px;
background-color: White;
}
.side-fade
{
width: 10px;
}
#left
{
float: left;
background: #ececec url("left-soft-fade.png") no-repeat;
}
#middle
{
width: 780px; /* (.side-fade * 2) - #container */
background-color: White
}
#right
{
float: right;
background: #ececec url("right-soft-fade.png") no-repeat;
}
HTML:
<body>
<div id="container">
<div id="right" class="side-fade">
<!-- Note how #right comes first. -->
</div>
<div id="left" class="side-fade">
<!-- Then #left. -->
</div>
<div id="middle">
Main body content here...
</div>
</div>
</body>