I need move container of site IN FRONT OF another div with background.
This is how it should looks like(ignore all other elements, just notice the background and container) -
And this is how it looks now (wrong):
I was trying something with "position: absolute" and "top: x" and it "little works" but when i used magnifier in browser, it was completely scattered.
This is my actual code...
html:
<div class="horni-panel">
<div class="logo">
Zhlednuto.cz
</div>
<div class="menu">
Home, about atd.
</div>
</div>
<!-- Mini pozadi -->
<div class="minipozadi">
ahoj
</div>
<!-- hlavni obsah -->
<div class="container">
ahooj
</div>
and css:
#font-face
{
font-family: Lato-Bold;
src: url(fonts/Lato-Bold.ttf);
}
body
{
background-color: #34495e;
}
.horni-panel
{
border-top: 8px solid #34495e;
position:absolute;
top:0;
left:0;
right:0;
height: 77px;
width: 100%;
background-color: #ffffff;
}
.logo
{
color: #34495e;
font-family: Lato-Bold;
font-size: 33px;
}
.minipozadi
{
height: 282px;
width: 100%;
background-image: url(img/bg.jpg);
background-size: 100%;
background-repeat: no-repeat;
margin: 0 auto;
position:absolute;
top: 85px;
left:0;
right:0;
}
.container
{
z-index: -1;
margin: 0 auto;
top:0;
right:0;
left:0;
width: 70%;
height: 500px;
background-color: #ffffff;
border-radius: 5px;
}
I'm suspecting your looking for this
http://output.jsbin.com/puladizire/2/
.minipozadi
{
height: 282px;
width: 100%;
background:url(http://www.hdwallpapers.in/walls/abstract_color_background_picture_8016-wide.jpg);
background-size: 100%;
background-repeat: no-repeat;
margin: 0 auto;
position:absolute;
top: 85px;
left:0;
right:0;
z-index:1;
text-align:center;
font-size:30px;
}
.container
{
z-index: 100;
margin: 0 auto;
position:absolute;
top:0;
right:0;
left:0;
margin-top:200px;
width: 70%;
height: 400px;
background-color: #ffffff;
border-radius: 5px;
}
I have added margin and z-index to the container
Related
I'm trying to line two empty <div>s one directly above the other, with basically the first <div> taking the top half of the screen and the second <div> taking the bottom half of the screen. Both <div>s contain background images, and need to line up perfectly (i.e. the bottom of the top <div> needs to be flush with the top of the bottom <div>) in order for the effect I'm trying to create to make sense.
What I have so far is this :
html {
height: 100%;
}
body {
display: block;
text-align: center;
height: 100%;
min-height: 100%;
position: relative;
padding: 0;
margin: 0;
}
.top {
display: block;
background-image: url(photo-top.jpg);
background-position: 50%;
background-size: cover;
height:100%;
min-height: 100%;
width:100%;
top: 0;
margin: 0;
padding: 0;
}
.bottom {
display: block;
background-image: url(photo-bottom.jpg);
background-position: 50%;
background-size: cover;
height:100%;
min-height: 100%;
width:100%;
bottom: 0;
margin: 0;
padding: 0;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
</head>
<body>
<div class="top"></div>
<div class="bottom"></div>
</body>
</html>
This puts a huge white space between the top and bottom image. How do I fix this?
You can use the following solution using 50vh for each <div> as height:
html {
height: 100%;
}
body {
display: block;
text-align: center;
height: 100%;
min-height: 100%;
position: relative;
padding: 0;
margin: 0;
}
.top {
display: block;
background-color:red;
background-image: url(https://picsum.photos/id/1025/200/300);
background-position: 50%;
background-size: auto 100%;
background-repeat:no-repeat;
height: 50vh;
width: 100%;
margin: 0;
padding: 0;
}
.bottom {
display: block;
background-color:blue;
background-image: url(https://picsum.photos/id/1025/200/300);
background-position: 50%;
background-size: auto 100%;
background-repeat:no-repeat;
height:50vh;
width:100%;
margin: 0;
padding: 0;
}
<div class="top"></div>
<div class="bottom"></div>
In case there is no other content below the two <div> elements you can use absolute positioned elements:
html {
height: 100%;
}
body {
display: block;
text-align: center;
height: 100%;
min-height: 100%;
position: absolute;
padding: 0;
margin: 0;
top:0;
bottom:0;
left:0;
right:0;
}
.top {
display: block;
background-color:red;
background-image: url(https://picsum.photos/id/1025/200/300);
background-position: 50%;
background-size: auto 100%;
background-repeat:no-repeat;
height: 50vh;
width: 100%;
margin: 0;
padding: 0;
position:absolute;
top:0;
bottom:50%;
left:0;
right:0;
}
.bottom {
display: block;
background-color:blue;
background-image: url(https://picsum.photos/id/1025/200/300);
background-position: 50%;
background-size: auto 100%;
background-repeat:no-repeat;
height:50vh;
width:100%;
margin: 0;
padding: 0;
position:absolute;
top:50%;
bottom:0;
left:0;
right:0;
}
<div class="top"></div>
<div class="bottom"></div>
I need to make responsive layout of the design attached , please help.
Things to keep in mind:
Can't fix height/width of logo image or any of the div's, it has to be dynamic
5px padding between the border line and the image.
Thanks!
.width100per {
max-width:1100px;
width:100%;
height:1000px;
text-align:center;
margin: 0px auto;
background-color: #808080;
}
.container {
width:100%;
float:left;
}
.container::after {
content: " ";
border-bottom:red 2px solid;
width: 100%;
float: left;
position: absolute;
top: 24%;
left: 0;
z-index: 10;
}
header {
float: left;
width: 100%;
}
header .logo {
float:left;
width:20%;
height:100%;
background-color:#000;
position: relative;
z-index: 20;
}
header .logo img{
width: 100%;
}
<div class="width100per">
<div class="container"></div>
<header>
<div class="logo">
<img src="jessicarose.nordicfinest.com/static/home_333333.png">
</div>
</header>
</div>
add this code in your css
header:after{
content: " ";
border-bottom: red 2px solid;
width: 100%;
float: left;
position: absolute;
bottom: -2px;
left: 0;
z-index: 10;
}
header{
position:relative;
}
.container::after {
display:none;
}
<div class="width100per">
<header>
<div class="logo">
<img src="jessicarose.nordicfinest.com/static/home_333333.png">
</div>
</header>
</div>
/* Css */
header {
float: left;
width: 100%;
padding-left: 20%;
position: relative;
}
header .logo {
float:left;
width:20%;
height:calc(100% + 10px);
height:-moz-calc(100% + 10px);
height:-webkit-calc(100% + 10px);
background-color:#000;
position: absolute;
background-color:#000;
padding: 5px;
z-index: 20;
top: 0;
left: 0;
text-align: center;
}
header .logo img{
padding-top: 20px;
display:inline-block;
float: none;
max-width: 100%;
}
I have in my design a fixed head and sidebar and in the content area which is able to scroll I have a 3 column layout.
Now I want the 2 sidebars in my content area scrolling when there is enough content but then when its at bottom then the sidebars should be fixed and only the content in the middle should then scroll.
Here for a better understanding a high quality concept
.
Is this possible without JS and if yes how ?
Thanks for every help :)
body {
background: #e1eae7;
}
.sidebar {
z-index: 100;
position: fixed;
height: 100%;
width: 150px;
background: rgba(47,160,178,1.0);
background-repeat: no-repeat;
background-position: bottom;
padding-top: 40px;
}
.header {
width: 100%;
background: #cf5c41;
background-repeat: repeat;
background-size: 38px 133px;
height: 40px;
background-position: 0px 39px;
box-shadow: 0px 1px 3px;
position: fixed;
z-index: 1000;
}
.content {
position: fixed;
top: 41px;
bottom: 0px;
left: 150px;
right: 0px;
overflow-y: scroll;
padding-bottom: 10px;
}
.one {
width: 22%;
min-width: 150px;
min-height:100px;
float: left;
padding-top: 10px;
background:red;
}
.two {
width: 56%;
min-width: 400px;
min-height:100px;
float: left;
padding-top: 10px;
background:green;
}
.three {
width: 22%;
min-width: 150px;
min-height:100px;
float: left;
padding-top: 10px;
background:orange;
}
.clear {
clear:both;
}
<div class="header"></div>
<div class="sidebar"></div>
<div class="content">
<div class="one"></div>
<div class="two"></div>
<div class="three"></div>
<div class="clear"></div>
</div>
If you the remove padding from your three colomns, add a child div to each for padding, give them a height of 100%, an overflow-x of scroll and give content a fixed position, all 3 columns will have a height of 100% and scroll independently.
body {
background: #e1eae7;
}
.sidebar {
z-index: 100;
position: fixed;
height: 100%;
width: 150px;
background: rgba(47,160,178,1.0);
background-repeat: no-repeat;
background-position: bottom;
padding-top: 40px;
}
.header {
width: 100%;
top: 0px;
left 0px;
position: fixed;
background: #cf5c41;
background-repeat: repeat;
background-size: 38px 133px;
height: 40px;
background-position: 0px 39px;
box-shadow: 0px 1px 3px;
position: fixed;
z-index: 1000;
}
.content {
position: fixed;
top: 41px;
bottom: 0px;
left: 150px;
right: 0px;
height:100%;
max-height:100%;
min-height:100px;
}
.one {
width: 22%;
min-width: 150px;
float: left;
background:red;
}
.two {
width: 56%;
min-width: 400px;
min-height:100%;
float: left;
background:green;
}
.three {
width: 22%;
min-width: 150px;
float: left;
background:orange;
}
.column {
height:100%;
max-height:100%;
min-height:100px;
overflow-x: scroll;
}
.column .inner {
padding-top: 10px;
}
.clear {
clear:both;
}
I am new to Asp.Net and CSS
i want div header fixed and Bottom left div fixed. And right side two div width based on percentage. So i tried like this
CSS
left: 0px;
position:fixed ;
z-index: 2;
border-bottom: 1px solid #00e5e6;
}
#DivLogo
{
height: 80Px;
width: 350px;
position:fixed;
margin-left: 20px;
margin-top: 10px;
border:1px solid #aaac62;
-webkit-border-radius:15px;
-moz-border-radius:15px;
border-color:Blue
}
#DivShow
{
height: 30Px;
width: 350px;
position:fixed;
float:left;
margin-left: 20px;
margin-top: 95px;
}
#DivRight
{ height: 70px;
width: 150px;
position:fixed;
left: 85%;
margin-top: 10px;
top: 0px;
}
#DivMenuRight
{
height: 30Px;
width: 500px;
position:fixed;
right:15%;
margin-top: 95px;
}
#DivBody
{
width: 100%;
height: 380px;
position: fixed;
margin-top: 155px;
margin-bottom: 20px;
top: 4px;
left: -2px;
margin-left: 0px;
margin-right: 0px;
}
#DivLeft
{
width: 200px;
height: 100%;
position: fixed;
float: left;
border-right: 1px solid #00e5e6;
}
#DivBodyRight
{
height: 100%;
position:absolute;
float: left;
right:0px;
left:200px;
top: 156px;
}
#DivVersion, #DivRelease, #DivUserAccount, #DivOther
{
width:70%;
height: 100%;
position:absolute;
float: left;
top:0px;
left:0px;
border-Right: 1px solid #00e5e6;
}
#grdVersions, #grdRelease, #grdUserAccount, #grdOther
{
width:100%;
height:100%;
}
#DivUserDetail
{
width: 30%;
height: 100%;
position:absolute;
float: right;
right:0px;
top:0px;
border-Left: 1px solid #00e5e6;
}
ASP.Net
<div id="DivMain">
<div id="DivHeader">
<div id="DivLogo">
</div>
<div id="DivShow">
</div>
<div id="DivRight">
</div>
<div id="DivMenuRight">
</div>
</div>
<div id="DivBody">
<div id="DivLeft">
</div>
<div id="DivBodyRight">
<div id="DivVersion" runat=server>
</div>
<div id="DivUserDetail">
</div>
</div>
</div>
</div>
Fiddle https://jsfiddle.net/fsp1vw2u/
Bottom right side div not showing properly. Its Start from middle.
What am doing wrong here?
am using visual studio 2008 and CSS 2.1
Change Position absolute to fixed
#DivBodyRight {
float: left;
height: 100%;
left: 200px;
position: fixed;
right: 0;
}
https://jsfiddle.net/fsp1vw2u/9/
Demo jsFiddle
I have div color azure I want to fill the width area in the middle column no meter what size will be.
is there any solution with css3/css no jQuery ?
i need it like this picture:
the ststus current like this:
many Thx.
Demo jsFiddle
the code html:
<div id="frame">
<div id="inside_window">
<div id="Yellow"></div>
<div id="Green"></div>
<div id="Blue"></div>
<div id="Red"></div>
<div id="ver"></div>
<div id="hor"></div>
<div id="ver2"></div>
</div>
</div>
the code css:
html, body{
height:100%;
background-color: azure;
}
#frame
{
position: relative;
background-color: black;
height: 100%;
width: 100%;
margin: auto;
padding:0;
border: 1px solid black;
}
#Yellow
{
position: absolute;
height: 100%;
width: 150px;
-webkit-border-radius: 0px;
margin: 0 ;
background-color: Yellow;
z-index:10;
display:table;
left:0px;
top:0;
}
#Green
{
position: absolute;
height: 100%;
width: 150px;
-webkit-border-radius: 0px;
margin: 0 ;
background-color: green;
z-index:10;
right:0px;
top:0;
}
#Blue
{
position: relative;
height:100%;
min-width:65.8%;
-webkit-border-radius: 0px;
margin: 0 auto;
background-color: #62A9FF;
z-index:10;
display:table;
font-size:220%;
left:0px;
top:0px;
}
#Red
{
position: absolute;
height: 150px;
width: 100%;
-webkit-border-radius: 0px;
margin: 0 ;
background-color: red;
z-index:10;
border: 1px solid black;
left:0px;
bottom:0px;
}
#inside_window
{
width:100%;
height:100%;
margin:0 auto;
position: relative;
border: 1px solid black;
background-color: brown;
-webkit-transform: rotate(0deg);
-webkit-transform-origin:50% 50%;
}
#ver
{
position: absolute;
height: 100%;
width: 5px;
margin: 0;
background-color: white;
left:150px;
top:0px;
z-index:1;
}
#hor
{
position: absolute;
height: 5px;
width: 100%;
margin: 0;
background-color: white;
left:0px;
bottom:150px;
z-index:20;
}
#ver2
{
position: absolute;
height: 100%;
width: 5px;
margin: 0;
background-color: white;
right:150px;
top:0px;
z-index:1;
}
Try removing the following CSS from your blue code:
position: relative;
display:table;
There are many ways to acheive a layout like this. Supposing that you could alter the order of your content, you could always try the "Holy Grail" layout method.