I am creating a responsive site with a fixed header and navbar and a rotating banner on the homepage. The banner is made using some javascript and css position values. So the header, navbar and rotating banners work fine but because the banners have width:100% and height:auto attributes they obviously expand and contract based on the window size or device. When I try to add content below I don't know what to do in order to keep it snug under the banner when I need to use position:absolute or relative and a top value for the content to appear. I've tired using a % but that doesn't seem to work.
JSFiddle
.header {
height:74px;
width:100%;
}
.navbar {
height:24px;
width:100%;
}
#banners {
position:relative;
}
#banners img {
position:absolute;
z-index:1;
top:98px;
width:100%;
height:auto;
}
#banners img.active {
z-index:3;
}
<div class="header"></div>
<div class="navbar"></div>
<div id="banners">
<img src="images/banner1.jpg" class="active" />
<img src="images/banner2.jpg" />
<img src="images/banner3.jpg" />
</div>
<div id="content">
</div>
Related
I'm just learning Bootstrap and trying to figure out a good way to display content with an opaque background image. I'm currently using a "well" but don't have to. I can get the image "inside" the well and opaque but I can't get it "behind" the other content. Here is a small sample of the html:
.background1{
background-size:cover;
opacity: .25;
max-width: 1130px;
}
<div class="well">
<div class="row">
<img class="img-rounded background1" src="/Images/housing-4-1213183.jpg" alt="housing" />
<h2>Section Title Here</h2>
<p>This is just a place holder for text content that would be showed on top of the desired image.</p>
</div>
</div>
If there is a better class to use for the content please let me know.
This should do it for you. Bootstrap doesn't have a component for this, so you're stuck making it yourself.
How it works:
By putting the img as the first child in the parent container, it gets drawn first. The absolute positioning guarantees it fills the parent container size, and the container's relative position means the children's absolute are relative to the parent container. (otherwise, the image would be absolute compared to the body, and fill up the entire window). Then, the Text is drawn, and as it is defined AFTER the image, rendered next, drawing on top of the image.
.covered {
position:relative; /* make a new "render context", so absolute positioning is relative to this parent container */
padding:30px; /* only needed for this demo */
}
.covered-img {
background:url('https://source.unsplash.com/random/800x600');
opacity: .25;
background-size:cover; /* cover will scale the image so that the smallest dimension = the widest dimension of the box */
background-position:center; /* vs the top-left that is default */
position:absolute; /* take me out of the render context! let me define my own positioning */
top:0;bottom:0;left:0;right:0; /* this could also work with width:100%; height:100%;, but is simpler */
}
<div class="row">
<div class="col-xs-12 covered">
<div class="covered-img"></div>
<h3>Dat content doe</h3>
<p>So much glorious content</p>
</div>
</div>
try :
.background1 {
background:url('/Images/housing-4-1213183.jpg');
background-size:cover;
opacity: .25;
max-width: 1130px;
}
and
<div class="well">
<div class="row">
<h2>Section Title Here</h2>
<p>This is just a place holder for text content that would be showed on top of the desired image.</p>
</div>
</div>
If you only want the background image (and not the text) to appear translucent try this:
.background1 {
background-image: linear-gradient(to bottom, rgba(255,255,255,0.3)0%,rgba(255,255,255,0.3) 100%), url("/Images/housing-4-1213183.jpg");
background-size:cover;
max-width: 1130px;
}
and in the HTML you'd want the div surrounding the content like this:
<div class="well">
<div class="row">
<div class="background1">
<h2>Section Title Here</h2>
<p>This is just a place holder for text content that would be showed on top of the desired image.</p>
</div>
</div>
</div>
Image faded in the background and text on top of it which is not faded. I believe if this is what you are looking for.
<!DOCTYPE html>
<html>
<head>
<style>
img {
opacity: 0.5;
filter: alpha(opacity=50); /* For IE8 and earlier */
position: absolute;
left: 0px;
top: 0px;
z-index: -1;
}
.container {
position:relative;
left:100px;
top:100px;
}
.container h3 {
position:absolute;
top:50px;
left:50px;
}
</style>
</head>
<body>
<div class="container">
<img src="https://encrypted-tbn1.gstatic.com/images?q=tbn:ANd9GcQBK3FmyjIENz16NWEl1iJcIWj8I5n8hs-rl5JPixzw-XppNfKx" alt="Forest" width="170" height="100">
<span>
<h3>Hello
</span>
</div>
</body>
</html>
the background image css should be for the container element, and not as a tag inside the content...
<div class="image">
Text Content <!-- Right -->
</div>
<div>
<img class="image" /> <!-- Wrong -->
Text Content
</div>
.image{
background-image : url(.../);
}
I have user photo which I want to put on top other image, so as to make that image complete.
Here is my code
<div id="containerDiv">
<figure>
<img id="someImage" src="../images/someImage.gif" >
</figure>
<div id="buttonDiv">
<button>Done</button>
</div>
</div>
I have other image which I am taking from cache and putting in some
<img src=cachedImage />
I want to style it so that I can put the cached image on top of someImage also The entire containerDiv should be responsive to the browser window. So, I want to get the css part of this. I tries using relative and absolute positioning
<style>
#containerDiv{
position:relative; width:100%; height:300px;
}
#someImage{
position:absolute; top:10px; left:100px;
}
#buttonDiv{
position:absolute; top:100px; left:200px;
}
</style>
I want the button to be responsive with the someImage too. But it does not move along with the image. Also the cached image should be in sync with someImage. Thanks in advance.
i am not aware with your code but try this hope this helps you
<div class="div on which you want to show overlay">
<div class="overlay overlay-div">
<center>
<div class="overlay-content"><p>your overlay content,img goes here</p>
</div>
</center>
</div>
</div>
and css for overlay is :
.overlay{
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 1050;
background-color: rgba(0,0,0,0.5); /*dim the background*/
}
you can show overlay div on mouse hover/in/out events.
I can't figure out, on how to go around this problem for moving content within two pages + outside content.
I have following layout:
header + footer
book
pages with fixed width and height.
I want to scroll pages content from the main scrollbar without any page scroll bar (like gmail compose example)
The main problem is. book will show after header and if user is using smaller screen resolution, it will show scrollbar to scroll down to see book properly.
Then we have two pages, which content are different from each other and each page can be longer then the other one. so we want to scroll through all the data, before we continue scrolling back to footer again.
jsFiddle Example: http://jsfiddle.net/7vqzF/2/
It would be awesome to solve this from css only.
Layout Structure: (solution should have only one main browser scrollbar, to control the pages and outside book content from it.)
If I got your question right you are looking for the CSS attribute fixed. Here is some HTML including CSS that might do exactly what your are after:
<html>
<head>
<style>
body {
margin-top: 150px;
}
.header {
width: 100%;
position: fixed;
top: 0;
background-color: white;
border-bottom: 2px solid lightblue
}
.footer {
width: 100%;
position: fixed;
bottom: 0;
background-color: white;
border-top: 2px solid lightblue
}
.book table td {
vertical-align: top;
}
.page1, .page2 {
border: solid 1px red;
width: 400px;
}
</style>
</head>
<body>
<div class="header">
<h1>Header</h1>
<ul>
<li>home</li>
<li>contact us</li>
</ul>
</div>
<div class="book">
<table>
<tr>
<td>
<div class="page1">
<h2>Page1</h2>
scroll from main scrollbar<br/>
scroll from main scrollbar<br/>
scroll from main scrollbar<br/>
...
</div>
</td>
<td>
<div class="page2">
<h2>Page2</h2>
scroll from main scrollbar<br/>
scroll from main scrollbar<br/>
...
</div>
</td>
</tr>
</table>
</div>
<div class="footer">
My Footer
</div>
</body>
</html>
Here is a screenshot from my browser showing the above HTML:
The Browser-Scrollbar scrolls only the page1/page2 <div> elemtents but not the header and footer elements.
And finally here is the jsFiddle Link for the online-demo.
Put your header part which needs to be in fixed in separate div and apply these styles.
<div class="fix">
<h1> Header</h1>
<menu><ul><li>home</li><li>contact us</li></ul></menu>
</div>
.fix{
position:fixed;
top:0px;
left:0px;
background:#FFF;
width:100%;
border-bottom:1px solid black;
}
for space add another div to bottom of the header
<div class="space"></div>
.space{
width:100%;
height:150px;
}
Here is the jsfiddle.
You can use the following approach with pure CSS and no tables.
See online demo here.
Result:
It means however that you need to change the document structure a little (I am using HTML5 elements but this can easily be changed into normal divs if required) - as you can see the structure is fairly simple:
<header>Header
<nav>Menu</nav>
</header>
<main>
<div class="page">
<h3>Page 1</h3>
scroll from main scrollbar
....
</div>
<div class="page">
<h3>Page 2</h3>
scroll from main scrollbar
....
</div>
</main>
<footer>Footer</footer>
Now it's just a matter of styling this so that you can use main scroll-bar to scroll "both" pages. The essential class in this context is:
.page {
float:left;
margin:70px 10px 50px 10px;
border:1px solid #000;
width:45%;
}
The important part with the page class is that its top and bottom margin is set to match header and footer. This is what makes the two pages visible even if the header and footer are fixed.
The rest of the CSS is just for example:
html, body {
width:100%;
height:100%;
margin:0;
padding:0;
}
header {
position:fixed;
top:0;
width:100%;
height:70px;
font:32px sans-serif;
color:#fff;
background:#555;
}
nav {
position:absolute;
bottom:0;
font:12px sans-serif;
}
footer {
position:fixed;
width:100%;
bottom:0;
height:50px;
background:#555;
}
sorry if the context already exists in other SO thread. I didnt found anyone, so I am posting it.
I have two elements(tabs) in the container(body) both are overflowing. when I try to scroll one tab, the hidden tab content also scrolling. I think, this is because both elements bound to the window.
<div class="header">
<ul>
<li data-tabid="tab1" class="tab">Tab1</li>
<li data-tabid="tab2" class="tab">Tab2</li>
</ul>
</div>
<div class="tabContainer">
<div class="tab1 tabpanel">
<!-- overflowing content -->
</div>
<div class="tab2 tabpanel">
<!-- overflowing content -->
</div>
</div>
CSS
body{
height:100%;
overflow-x:auto;
}
.header{
position:fixed;
top:0px;
height:50px;
}
.tabpanel{
position:absolute;
top:50px;
}
Demo
How to prevent scrolling on hidden element?
Here is a working demo, the solution is come up with setting both ends fixed and scrolling content. This should give effect like bound to the container.
.tabpanel{
position:absolute;
top:0px;
bottom:0px;
display:none;
min-height:100%;
height:auto;
width:100%;
overflow:auto;
}
.tabpanel .inner{
width:100%;
height:150%;
margin-top:60px;
}
http://jsfiddle.net/kongaraju/P6XWH/2/
Bascially you didnt set the height of your tabs, and neither did you apply an overflow to it. Doing that would solve the issue.
If you prefer to have the tabs 100% height, you would need a div within a div. In the outer div set your 100% height, in the inner div set a top padding of the height of the tab-selection.
Like this:
<div class="tab">
<div class="inner">
* tab content *
</div>
</div>
With css
.tab { height:100%; }
.inner { margin-top:20px; overflow:auto; }
I'm building a page. This page will have a custom navigation bar.
Nav bar dimensions - width:800px height:100px.
Body bgcolor: grey; Nav bar bgcolor: blue.
Since the nav bar will be 800px wide and be blue, I would like the nav bar to stay centered on the page but keep stretching blue to the left and right edges of larger screens.
Any ideas how I can accomplish this?
This will do it, the trick is margin-auto left and right
.outer
{
background-color:Gray;
}
.inner
{
width:800px;
height:100px;
background-color:blue;
margin:0 auto 0 auto;
}
<div id="outer">
<div id="inner">blah</div>
</div>
Not sure if you got the answer you were looking for, but for clarity you can nest and centre your navigation element within a wrapper element that has 100% width and similar styles, as follows.
<div id="navWrap">
<ul id="nav">
<li>...</li>
</ul>
</div>
<style type="text/css">
#navWrap {
width:100%;
background:blue;
}
#nav {
width:800px;
height:100px;
margin:0 auto;
background:blue;
}
body {
background:grey;
}
</style>