This is simplified markup:
<div id="container">
<div id="top" style="position:fixed">
<div class="header-top" style="z-index:100"></div>
<div id="access" style="z-index:100"></div>
<div id="image" style="z-index:50"></div>
</div><!--end top-->
<div id="main" style="z-index:75"></div>
</div>
as #main scrolls up over the fixed #top element, I would like it to display layered above #image, but below #access and .header-top.
Since the fixed position of #top creates a context, it seems I have a problem.
any thoughts?
You need to insert your <div id="main"> inside <div id="top"> after all.
You can create specific class for a fixed elements.
#access, #main, #image {
width:200px;
height: 200px;
}
.fixed {
position:fixed;
}
#access {
background-color:red;
margin: 100px 0 0 100px;
}
#main {
background-color:blue;
margin: 50px 0 0 50px;
position:absolute;
}
#image {
background-color:green;
}
<div id="container">
<div id="top">
<div class="header-top fixed" style="z-index:100"></div>
<div id="access" class="fixed" style="z-index:100"></div>
<div id="image" class="fixed" style="z-index:50"></div>
<div id="main" style="z-index:75"></div>
</div><!--end top-->
</div>
Related
<body>
<div id="containers" >
<div id="header">
<table> <tr>
<td><div id="logo"></div></td><td><div id="band-logo">
</div></td><td><div id="facebook"></div></td><td>
</td></tr>
<div id="amenu">
<ul id="mainMenu"><li id="first"></li><li></li><li id="last"></li></ul></div>
<div id="clearheader"></div>
</div>
<div id="container">
<div id="subMainBox"></div>
<div id="mainBox">
<div id="contents">
</div></div>
</div>
<div id="footer_show"> <div id="fd">
<div id=copy_right><br /><strong></strong></div>
</div>
</div>
</div>
</body>
(CSS CODE UPDATED)
#containers{
width:1000px;
margin: 0 auto;
position:relative;
margin-top:-20px;
}
#container{
position:relative;
top:-247px;}
#header{
width:1000px;
margin: 0 auto;
}
#contents{
position:relative;
top:-60px;
left:30px;
}
#mainBox{
height:500px;
float:right;
width:650px;
margin:0 150px 0 150px;
}
#mainBox2{
float:right;
width:650px;
margin:0 120px 0 150px;
}
The code as above, can anyone help to make this code to sticky footer? I have tried many methods. Thanks.(CSS CODE UPDATED)
I have a <Div> that I would like 2 images to be displayed in. The first one set in the top left and the other at the bottom right.
Ideally i'd like to do this on <Div> so that the content sits in it also and goes over the images.
I have managed to get the top left image in but I cant figure out how to get the bottom one in.
My CSS is
.tab-content > .tab-pane,
.pill-content > .pill-pane
{
display: none;
background-image: url("../images/brand/QuotationOpen.JPG");
background-repeat: no-repeat;
padding-top: 50px;
padding-left: 25px;
}
My HTML is
<div class="row">
<div class="col-md-12">
<ul class="nav nav-GP col-sm-3 col-md-4">
<li>Intelligent</li>
<li>Principled</li>
<li>Personal</li>
<li>Focused</li>
<li>Straightforward</li>
<li>Energetic</li>
</ul>
<div class="tab-content col-sm-9 col-md-8">
<div class="tab-pane active">
<h2>Heading 2</h2>
<p>Content here</p>
</div>
<div class="tab-pane" id="Intelligent">
<h1>Heading 1</h1>
<h2>Heading 2</h2>
<p>Content here</p>
</div>
</div>
</div>
</div>
And this give me
I need to get the following image in the bottom right which also allows the text to over-run it
The image below is a mock-up I did in paint to show what i'm after
You can also do this by assigning two background images to the div.
.quote {
background-image: url("http://i.stack.imgur.com/kXynJ.jpg"), url("http://i.stack.imgur.com/aduet.jpg");
background-repeat: no-repeat, no-repeat;
background-position: top left, bottom right;
height: 200px;
width: 400px;
}
<div class="quote">Here is some text.</div>
If anyone is interested in a solution without the framework css-classes i created a demo jsfiddle:
http://jsfiddle.net/q5dn5589/
HTML:
<div class=wrapper>
<img src="http://i.stack.imgur.com/Smqyd.jpg">
<img class="image2" src="http://i.stack.imgur.com/aduet.jpg">
</div>
CSS:
.wrapper {
position: relative;
width: 499px;
height: 213px;
border: 1px black solid;
}
.image2 {
position: absolute;
bottom: 0;
right: 0;
}
solved it
try positioning two images absolutely and position its accordingly!
See jSfiddle
css
img.first {
position:absolute;
top:0;
left:0;
z-index:-999px;
}
img.second {
position:absolute;
bottom:0;
right:0;
z-index:-999px;
}
Snippet (see it full-screen for effect)
/* Latest compiled and minified CSS included as External Resource*/
/* Optional theme */
#import url('//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap-theme.min.css');
body {
margin: 10px;
}
.tab-content > .tab-pane, .pill-content > .pill-pane {
border:1px solid #ccc;
padding-top: 50px;
padding-left: 25px;
}
.tss {
position:relative;
display: flex;
height:300px;
}
h2 {
z-index:999;
display:block;
}
img.first {
position:absolute;
top:0;
left:0;
z-index:-999px;
}
img.second {
position:absolute;
bottom:0;
right:0;
z-index:-999px;
}
<link href="http://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<script src="http://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<div class="row">
<div class="col-md-12">
<ul class="nav nav-GP col-sm-3 col-md-4">
<li>Intelligent
</li>
<li>Principled
</li>
<li>Personal
</li>
<li>Focused
</li>
<li>Straightforward
</li>
<li>Energetic
</li>
</ul>
<div class="tss tab-pane" id="Intelligent ">
<h2>Heading 2</h2>
<img class="first" src="http://i58.tinypic.com/1zm2tmp.jpg" border="0" alt="Image and video hosting by TinyPic">
<img class="second" src="http://i62.tinypic.com/dyoopu.jpg" border="0" alt="Image and video hosting by TinyPic">
</div>
</div>
</div>
</div>
With Bootstrap 3, I'm trying to make an image stay within the boundaries of it's parent div.
This works fine for width, but no matter what I try, the image keeps falling out of the bottom of the parent div, because it's height doesn't update when I decrease browser height. Is it possible to make this work ? If so, how ? Thanks.
JSFiddle : http://jsfiddle.net/rensdenobel/9486t/
HTML :
<div class="container">
<div class="row">
<div class="col-sm-3 col-md-3 col-lg-4"></div>
<div class="col-xs-12 col-sm-6 col-md-6 col-lg-4 center">
<div class="content">
<div id="text">You chose this photo :</div>
<div id="thumbnail-container">
<img id="thumbnail-image" class="img-responsive" src="http://placehold.it/800x800" />
</div>
<div id="button-share">
<button class="btn btn-success">Share it !</button>
</div>
</div>
</div>
<div class="col-sm-3 col-md-3 col-lg-4"></div>
<div>
</div>
CSS :
html, body {
height:100%;
}
.container {
height:100%;
width:100%;
border:1px solid blue;
}
.row {
border:1px solid green;
height:100%;
}
.center {
display:table;
border:1px solid red;
padding-top:12px;
padding-bottom:12px;
text-align:center;
height:100%;
max-height:100%;
}
.content {
display:table-cell;
vertical-align:middle;
text-align:center;
height:auto;
border:1px solid green;
}
#thumbnail-image {
margin-left:auto;
margin-right:auto;
height:auto;
}
#thumbnail-container{
width:100%;
border:1px solid pink;
max-height:70%;
height:70%;
margin-top:12px;
margin-bottom:12px;
}
try
<div id="thumbnail-container col-sm-4 col-xs-4">
<img id="thumbnail-image" class="img-responsive" src="http://placehold.it/800x800" />
</div>
change the col-sm-* and col-xs-* to get your desired output
This approach works for me. Please try adding this to your css:
.container {
height:max-content;
}
I have the following HTML (and also at http://jsfiddle.net/pHXSJ/). In IE and Firefox, it works as expected. However, Chrome and Safari do not correctly position the footer at the bottom of the viewport.
I have tried many things suggested here already, including implementing from cssstickyfooter.net. While those techniques work, they start to fail once I try to provide the (in the example) green side bar color. Note there is no content slated for those sidebars.
<!DOCTYPE html>
<html>
<head>
<title>2012 test</title>
<style>
html,body,form {height: 100%;}
body,p{margin:0}
div#wrapper {height:100%;background-color: transparent;}
div#contentwrap {width:100%; position:relative; height:100%; top:0; padding-bottom: -4em;}
div#content {top:0;position:relative;width:20em;min-height:100%;margin-left:auto;margin-right:auto;background-color:white; border-left: 2px yellow solid;border-right:2px yellow solid;}
div#header {min-width:20em; width:100%; position:absolute; top: 0; height: 2em; background-color: silver;}
div#header2 {min-width:20em; width:100%; position:absolute; top:2em; height: 1em; background-color: aqua;}
div#footer {min-width: 20em; position: relative; clear: both; margin-top:-4em; height: 4em; background-color: red;}
</style>
</head>
<body style="background-color:green;">
<form>
<div id="wrapper">
<div id="contentwrap">
<div id="content">
<div style="padding-top: 3.5em;">
<div id="lcol" style="float:left;position:relative; width:38%">
<p>Left</p>
</div>
<div id="rcol" style="float:right; position:relative; width:60%;">
<p>Right 1 total of 35</p>
<p>Right</p>
<p>Right</p>
<p>Right</p>
<p>Right 5</p>
<p>Right</p>
<p>Right</p>
<p>Right</p>
<p>Right</p>
<p>Right 10</p>
</div>
<div style="clear:both;position:relative;">
</div>
</div>
</div>
</div>
<div id="header">
<div>Main Header</div>
</div>
<div id="header2">
<div>Header level 2</div>
</div>
</div>
<div id="footer" style="">
<div>Footer text</div>
</div>
</form>
</body>
</html>
If i look at your css this part is missing:
div#wrapper { min-height: 100%; padding-bottom: -4em; }
This should fix your problem in Chrome.
Here's the jsFiddle: http://jsfiddle.net/RkMFK/
Here's the html and css:
<div class="cont">
<div class="item">one</div>
<div class="item">two</div>
<div class="item">three</div>
<div class="item">four</div>
<div class="item">five</div>
<div class="item">six</div>
<div class="item">seven</div>
<div class="item">eight</div>
<div class="item">nine</div>
<div class="item">ten</div>
<div class="item">eleven</div>
<div class="item">twelve</div>
<div class="item">thirteen</div>
<div class="item">fourteen</div>
<div class="item">fifteen</div>
<div class="item">sixteen</div>
<div class="item">seventeen</div>
<div class="item">eighteen</div>
<div class="island"></div>
</div>
.cont {
width: 240px;
height: 160px;
background-color:blue;
position:relative;
overflow:hidden;
}
.island {
position:absolute;
top:50px;
left:80px;
width:40px;
height:40px;
background-color:red;
}
.item {
float:left;
display:inline;
position:relative;
height:20px;
margin:2px;
padding: 0 10px;
background-color:yellow;
overflow:hidden;
}
How can I make the yellow items flow around the red "island" with css?
Summary: I have a container div of a fixed dimension. Somewhere within it is a small "island" div at a specific location (currently positioned absolutely, which removes it from the flow). How can I fill the container with a number of small elements of unknown width that surround the island? Any way to do this with css only? I'm stuck.
May be you want some what like in this fiddle . If i am lagging some where please let me know. so i can work out..
code:html
<div class="cont">
<div class="island"></div>
<div class="item">one</div>
<div class="item">two</div>
<div class="item">three</div>
<div class="item">four</div>
<div class="item">five</div>
<div class="item">six</div>
<div class="item">seven</div>
<div class="item">eight</div>
<div class="item">nine</div>
<div class="item">ten</div>
<div style="margin:0 20px" class="item">eleven</div>
<div style="margin:0 25px" class="item">twelve</div>
<div class="item">thirteen</div>
<div style="margin-left:58px;" class="item">fourteen</div>
<div class="item">fifteen</div>
<div class="item">sixteen</div>
<div class="item">seventeen</div>
<div class="item">eighteen</div>
</div>