I have created a code snippet to try and demonstrate what I am trying to achieve. (I have tried to make it as simple as possible)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Fixed Top Navbar and "drawer" content area</title>
<!-- Bootstrap core CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<!-- Custom styles for this template -->
<style>
#fixed-panel-top {
position: fixed;
top: 0;
right: 0;
left: 0;
width: 800px;
margin-left: auto;
margin-right: auto;
}
.custom-navbar-example {
height: 40px;
background-color: yellow;
z-index: 1030;
}
.fixed-content-top {
height: 200px;
background-color: blue;
z-index: 1;
}
.relative-content {
width: 800px;
margin-top: 300px;
height:1000px;
background-color: red;
z-index: 1020;
}
</style>
</head>
<body>
<!-- Fixed navbar -->
<div id="fixed-panel-top">
<!-- Navbar -->
<div class="custom-navbar-example"></div>
<!-- Top fixed content area -->
<div class="fixed-content-top">
</div>
</div>
<div class="container relative-content">
</div> <!-- /container -->
<!-- Bootstrap core JavaScript
================================================== -->
<!-- Placed at the end of the document so the pages load faster -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
</body>
</html>
The yellow div represents a fixed top navbar, the blue div represents the fixed top content area below the navbar and the red div represents the "rest of the page content" which will be relative.
The desired effect is that as you scroll down, the red div will appear over the top of the blue div, but under the yellow div. This will give the effect of the blue div being a "drawer" of content that can be hidden by the red div. I have already tried representing this using z-index but to no avail.
Can anyone point me in the right direction or solve it?
EDIT: Clarifications
I am wanting the yellow and blue div to be both fixed. The illusion I am trying to achieve is the red div scrolls up over the blue div. If the blue div contained an image, the image would stay static while the red div scrolled up to hide it.
Here following is the output what you want. position:relative do the trick.
#fixed-panel-top {
position: fixed;
top: 0;
right: 0;
left: 0;
width: 800px;
margin-left: auto;
margin-right: auto;
}
.custom-navbar-example {
height: 40px;
background-color: yellow;
z-index: 1030;
position: relative;
}
.fixed-content-top {
height: 200px;
background-color: blue;
z-index: 1;
}
.relative-content {
width: 800px;
margin-top: 300px;
height:1000px;
background-color: red;
z-index: 10;
position: relative;
}
<div id="fixed-panel-top">
<!-- Navbar -->
<div class="custom-navbar-example"></div>
<!-- Top fixed content area -->
<div class="fixed-content-top">
</div>
</div>
<div class="container relative-content">
</div>
Check Fiddle Here.
Hope it helps.
Edit:
In chrome can't able to overrule the parent z-index. Check Reference Link
Update:
For fixed in chrome you have to make changes in HTML.
Check Updated Fiddle Here.
Related
I have a web page that is 960px wide. Inside this page there's a section with an image inside that I want pushed all the way to the right so it's half way outside the page. The attached image below will show you an example of what I would wan this to look like.
I would also like it if the image is in the background so if the browser window is small in width it would just keep covering the image.
Here's a couple sites that has this:
http://cpanel.com/products/
At cpanel you can see the iPad on that page is only half way displayed when the browser window is smaller than image.
Another website with this effect is Doteasy.com here's the URL:
http://www.doteasy.com/
If you scroll down to the middle of their page you will see the Site builder section which includes a screenshot of the software. Their page is 980px wide and you can see that the screenshot is halfway outside the page wrapper.
The image should be 552px widde by 315px high.
.container {
width: 960px;
height: auto;
margin: 0 auto;
background-color: yellow;
}
section {
width: 100%;
height: 508px;
background-color: blue;
}
.image {
width: 552px;
height: 315px;
background-color: red;
}
<!DOCTYPE html>
<html>
<head>
<title>Site Example</title>
<meta charset="UTF-8">
<meta name="description" content="">
<meta name="keywords" content="">
</head>
<body>
<section>
<h1>This is the Section</h1>
<div class="container">
<div class="image">This would be the image.</div>
</div>
</section>
</body>
</html>
I hope you guys are able to help !
Thanks.
You can position absolutely relative to the container like so:
Add position: relative; to the container
Add absolute positioning to the image position: absolute; top: 0; right: -276px; (The right value is half the image width)
overflow-x: hidden on the container will stop the extra half of the image from being visible.
section {
width: 100%;
height: 508px;
background-color: blue;
}
.container {
position: relative;
width: 960px;
height: 400px;
margin: 0 auto;
background-color: green;
overflow-x: hidden;
}
.image {
position: absolute;
top: 0;
right: -276px;
width: 552px;
height: 315px;
background-color: red;
}
<section>
<h1>This is the Section</h1>
<div class="container">
This is the container
<div class="image">This would be the image.</div>
</div>
</section>
This should work for you. I added position: relative to the .container and section, then position: absolute to the image container. You can then use left: 25% to adjust how far off screen you would like the image to be. The 25% can be adjusted according to your needs. You can also use px instead of percentages if that works better for your needs.
.container {
width: 960px;
height: auto;
margin: 0 auto;
position: relative;
}
section {
width: 100%;
height: 508px;
background-color: blue;
position: relative;
}
.image {
width: 552px;
height: 315px;
background-color: red;
position: absolute;
left: -25%; /* -- Adjust this percentage as needed -- */
}
<!DOCTYPE html>
<html>
<head>
<title>Site Example</title>
<meta charset="UTF-8">
<meta name="description" content="">
<meta name="keywords" content="">
</head>
<body>
<section>
<h1>This is the Section</h1>
<div class="container">
<div class="image">This would be the image.</div>
</div>
</section>
</body>
</html>
I am new to HTML and Bootstrap and I am trying to learn it. I have came to a situation, where the images don't display at all.
First image should be full background for the first div and second image, smaller, should be in the top right, using bootstrap.
If someone has any idea please give a hand.
<!DOCTYPE html>
<html>
<head>
<title></title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
<style>
.top {
width: 100%;
height: auto;
min-height: 100%;
min-width: 1024px;
background: url('images/img1.jpg') no-repeat;
background-size: cover;
}
.top .text {
position: absolute;
width: 100%;
top: 132px;
right: 351px;
background-image: url('images/img2.jpg') no-repeat;
}
</style>
</head>
<body>
<div class=" top container-fluid">
<div class="row-fluid">
<div class="text col-lg-3 col-lg-offset-5">
<p>Hello</p>
</div>
</div>
</div>
</body>
</html>
Need to put your min-height in .top according to your mobile device or your smallest device not 100%. and .next the height:auto;. also your min-width is too much large value, so please decrease it as your device width.
In the second class you are using a background-image simply say background as in the first one.
.top .text {
position: absolute;
width: 100%;
top: 132px;
right: 351px;
background: url('images/img2.jpg') no-repeat;
border: 1px solid;
}
And you are using "position: absolute" for the second div so the first one have no content and therefore height: 100% will not do anything either put height in pixels or put some content inside the div to make it scale in height.
I have created a sticky footer, a footer that hugs the bottom of the window whether or not there is enough content to fill the page. My implementation works well except for one minor issue when rendering in Internet Explorer. If the content fills the page and any of my content divs have an unspecified height, a crack appears beneath the footer. This also happens if the content contains a span with or without a fixed height.
Below is my implementation. If I give Div 2 a fixed height the footer tightly hugs the bottom of the window, but by not setting a height the crack appears. I have been unable to resolve this. Any suggestions on how to prevent it would be appreciated.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Sticky Footer</title>
<style type="text/css">
Html, body {
margin: 0;
height: 100%;
background-color: lightgreen;
}
header {
height: 40px;
background-color: green;
}
footer {
bottom: 0;
position: absolute;
width: 100%;
height: 40px;
background-color: gray;
}
.fixedHeightDiv {
border: 2px;
border-style: solid;
height: 500px;
}
.container {
min-height: 100%;
position: relative;
}
.content {
padding-bottom: 40px;
}
</style>
</head>
<body>
<div class="container">
<header>Header</header>
<div class="content">
<div class="fixedHeightDiv">
Div 1
</div>
<div>
Div 2
</div>
<div class="fixedHeightDiv">
Div 3
</div>
</div>
<footer>Footer</footer>
</div>
</body>
</html>
The HTML is dead simple and I'm looking to add as few <div>s as possible as they make code readability a headache.
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=720, user-scalable=yes" />
<title>SharpCraft</title>
<!-- Stylesheets -->
<noscript>
<link rel="stylesheet" href="css/style.css" />
</noscript>
<!-- jQuery -->
<script>
</script>
</head>
<body>
<!-- #main -->
<main id="main">
<!-- #content -->
<div id="content">
</div>
</main>
</body>
</html>
Regrettably my "style" of CSS development is guess and check so I've mutilated my stylesheet beyond repair. All I know for certain is that the content div should follow the following rules:
#content {
background: url("https://raw.githubusercontent.com/brianjenkins94/SharpCraft/master/SharpCraft/Assets/graphics/ui/Menu_background_with_title.png") no-repeat;
min-width: 640px;
min-height: 480px;
display: table;
}
With the end product resembling the following:
There are many ways to center an element horizontally and vertically, but I would suggest the CSS table approach, as you're doing it on the main content area, so we need to ensure the scroll bars to work properly when the window size is rather small.
html, body, #table {
height: 100%;
}
body {
background: black;
margin: 0;
}
#table {
display: table;
width: 100%;
}
#main {
display: table-cell;
vertical-align: middle;
}
#content {
background: url("http://goo.gl/TVjkjW");
width: 640px;
height: 480px;
margin: 0 auto;
}
<div id="table">
<div id="main">
<div id="content"></div>
</div>
</div>
JSFiddle: http://jsfiddle.net/ykato61n/
(I adjusted the markup slightly to make it work)
Heres a pure CSS solution, it makes use of the transform and translate function from CSS3. It uses minimal HTML and CSS. I've put the content div's background to red, just incase the image disappears for some reason.
#wrap {
color: #fff;
position: absolute;
top: 50%;
left: 50%;
-webkit-transform: scale(2, 3);
/* Safari */
transform: scale(2, 3);
-webkit-transform: translate(-50%, -50%);
/* Safari */
transform: translate(-50%, -50%);
/* Safari */
background: red url("https://raw.githubusercontent.com/brianjenkins94/SharpCraft/master/SharpCraft/Assets/graphics/ui/Menu_background_with_title.png") no-repeat;
background-size: cover;
background-position: center center;
width: 90%;
padding-bottom: 67.50%;
/* sorts out aspect ratio*/
}
body {
background: #000;
}
#content {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
min-width: 640px;
min-height: 480px;
/*background:blue;*/
display: table;
}
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<div id="wrap">
<div id="content">content</div>
</div>
</body>
</html>
I'm not sure why you wanted the content div to have display: table;, but have put it in for good measure.
On a page styled with Twitter Bootstrap and using the navbar I wanted to fill the whole container below the navigation bar with a Google Maps map. To accomplish that I have added the CSS following below.
I define for the html and body elements the sizes to 100% so that this is used for the map's size definition. This solution, however, yields one problem:
The map's height is now the same as the whole page height, which results in a scroll bar which I can scroll for the 40px the navigation bar adds. How can I set the size of the map to 100% - 40px of the navigation bar?
#map {
height: 100%;
width: 100%;
}
#map img {
max-width: none;
}
html, body {
height: 100%;
width: 100%;
}
.fill {
height: 100%;
width: 100%;
}
.navbar {
margin-bottom: 0;
}
For completeness the HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8">
<!-- Stylesheets -->
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="css/core.css">
</head>
<body>
<div class="navbar">
<div class="navbar-inner">
</div>
</div>
<div class="container fill">
<div id="map">
</div>
</div>
</body>
</html>
You could solve the problem with absolute positioning.
.fill {
top: 40px;
left: 0;
right: 0;
bottom: 0;
position: absolute;
width: auto;
height: auto;
}
Demo (jsfiddle)
You could also make the navbar .navbar-fixed-top and somehow add a padding or margin inside the #map element.