Is it possible to make an HTML Element fixed so it stay at the same position when the user scrolls?
The Problem is: If I use "position:fixed", The Elements loses its relation to the containers and changes the actual position. It pops out of the site wrapper (of course) but I would like it to keep its position and just also keep the position when scrolled.
Is that possible?
You can do this by setting the elements position to fixed, but don't set its top, left, bottom or right parameters.
As long as you don't set them, your element will stay on the place where it belongs (relative to the initial parent positioning)
.your-element{
position: relative;
}
Check this fiddle
With css you can only do this with position:fixed. The problem you line out can be mitigates somewhat if you know the height of the element. You can set margin-top on an element around the content to offset it from the top.
#topbar {
height: 5em;
}
#content {
margin-top: 5em;
}
#topbar {
position:fixed;
top:0;
left:0;
width:100%;
height:5em;
background: yellow;
border: 1px red dotted;
}
#content {
margin-top: 5em;
padding-top: 5px;
background: #EEEEFF;
border: 1px blue dotted;
height: 500em;
}
<div id="topbar">Something in the topbar</div>
<div id="content">This text is magically displayed under the topbar</div>
Related
I have two imbricated divs, with the subdiv aligned to the top left of ots parent. It could be any other place. How can I force the subdiv to take it's parent padding into account when fixing top:10. If the parent has a 20 top padding, I'd like the subdiv to automaticaly take this into account and place itself at 20+10 from top of the parent.
This question only applies to IE8.
The following example works on IE11 and FF25, but not on IE8.
<HTML>
<HEAD>
<style>
DIV.A {
width:150px;
border:1px solid black;
position:relative;
padding:20px;
}
DIV.B {
position:absolute;
top:10;
left:0;
padding:inherit;
}
</style>
</HEAD>
<BODY>
<DIV class="A"> some text to see what happens
<DIV class="B">aaaaaaaa</DIV>
</DIV>
</BODY>
</HTML>
What your asking is a little strange in regards to normal CSS best practices, because you're saying "when" the div.a has padding-top: 20px. CSS isn't dynamic like that, unless you're using javascript to adjust the padding-top of div.a, in which case you could change it with javascript. But, if you want div.a and div.b to have the same padding-top, then you could just declare that in your CSS:
div.a, div.b {
padding-top: 20px;
}
If you omit the top property on .b it will be positioned as it would normally, meaning that it will respect the padding on .a. Use margin-top: 10px instead of top: 10px on .b to add the extra top spacing while at the same time respect the parent's top padding.
.parent {
position: relative;
padding: 10px;
background-color: red;
}
.child {
position: absolute;
margin-top: 10px;
background-color: green;
}
I've tested this in IE8 and it works: http://jsbin.com/OnOzOFIX/1
I have a header element into which I want to put a background image but I want to put it on end. So whatever the width of text is it will remain always after the text ending. Possible? How?
<h1>Here is my dynamic text</h1>
If you want to put it really behind the text you should use pseudoelements:
h1:after { content:url(myimage.png); }
Sample here.
If you want to have a real background image you can only do this if you change the h1 to display:inline, since otherwise the element will stretch to the full width of its parent, thus losing all reference to the size of the contained text.
All other solutions (including the other ones mentioned here) require changing the HTML markup, and are as such not pure CSS solutions.
Something like this:
h1
{
background-image:url(https://s.gravatar.com/avatar/c6a0ac3e18f1cd8d0f1be4c2e3a4cfbd?s=32&d=identicon&r=PG);
background-repeat:no-repeat;
background-position:right;
padding-right:40px;
display:inline-block;
}
<h1>Here is my dynamic text</h1>
So backgorund image to the right with padding so it's always outside your text. The display:inline-block is important because it stops your test filling the whole line
Simply at a span for that background image as a child of <h1>, like this:
<h1>Here is my dynamic text <span class="chevron"></span></h1>
CSS:
h1 {
position: relative;
}
.chevron {
background: url(images/chevron.jpg) no-repeat 0 0;
width: xxpx; /* width and height of image */
height: xxpx;
position: absolute;
right: 0;
top: xxpx; /* adjust the position of the image to the heading text from the top */
}
You can use :after in your css like
h1:after
{
background:url(image path)no-repeat;/* apply your image here */
content:" ";
position:absolute;
width:999em;
height:25px;
margin:10px 0 0 5px;
}
look for example http://jsbin.com/uzorew/1
You could try adding div with background img
<h1>Here is my dynamic text <div id="dynamicimage"></div></h1>
#dynamicimage{
background-image: url("images/myimg.png");
}
may i sure tyr this css :
h1 {
height:25px;
overflow:hidden;
position:relative;
}
h1:after {
background:red;/* apply your image here */
content:" ";
position:absolute;
width:999em;
height:25px;
margin:0 0 0 5px;
}
your html :
<h1>Here is my dynamic text </h1>
Pseudo element background image
Although several answers have already suggested the use of CSS's :after, none (at the time of my posting) have shown how to handle the sizing of the image.
Below you'll see that the standard syntax for setting a background image can be applied to an empty content when (as shown in a few other answers) the position is set to absolute.
The width and height properties will set the dimensions of the after pseudo element, but the image size needs to be set via the background shorthand or background-size properties.
i.e. to set the image size to match the size of the after element, use:
background: url( path to image ) no-repeat center/contain;
where center/contain will center and contain the image ;-)
Note that in the snippet below, where the image size hasn't been set correctly, the results are obviously incorrect:
h1:after {
position: absolute;
/* no size or position settings */
background: url(https://lorempixel.com/200/200/) no-repeat;
width: 1em;
height: 1em;
margin-left: .5em;
content: "";
}
<h1>Here is my dynamic text</h1>
But in the following snippet, where the image size has been correctly set, the results are full of awesome:
h1:after {
position: absolute;
/* size and position set properly */
background: url(https://lorempixel.com/200/200/) no-repeat center/contain;
width: 1em;
height: 1em;
margin-left: .5em;
content: "";
}
<h1>Here is my dynamic text</h1>
To adjust the size of the after pseudo element itself, change the width and height properties like so:
h1:after {
position: absolute;
/* size and position set properly */
background: url(https://lorempixel.com/200/200/) no-repeat center/contain;
/* width and height of container reduced */
width: .5em;
height: .5em;
margin-left: .5em;
content: "";
}
<h1>Here is my dynamic text</h1>
And as pointed out by Tepken in his answer, use the top property to adjust the vertical alignment. However, make sure the after's parent also has its position property set, or the image will consider the top to be relative to one of its grandparents:
h1 {
/* the parent must have its position set also */
position: relative;
}
h1:after {
position: absolute;
/* size and position set properly */
background: url(https://lorempixel.com/200/200/) no-repeat center/contain;
/* width and height of container reduced */
width: .5em;
height: .5em;
margin-left: .5em;
content: "";
/* vertically align the image */
top: .35em;
}
<h1>Here is my dynamic text</h1>
Very simple
<div class="content"><h1>Header<img src="one.jpg"></h1></div>
include the image within the header
One for the CSS gurus - is it possible for a div to 'escape' the constrained in the boundaries of a div with fixed dimensions and overflow:hidden?
Ive recreated the example here: http://jsfiddle.net/Wt3q4/1/
Ive tried setting z-indexes on all the elements, and assigning the div with class b position:absolute with no joy.
Since .b is nested with an element that's position:relative;, setting .b to absolute won't do anything. That I know of, with the element structure you have defined, there isn't going to be a CSS work around.
Without knowing more about your layout and what you're trying to accomplish, it's difficult to advise. You could try setting up a "double container" if that makes sense, and use a jQuery function to move the element out of the overflow:hidden; element when you want to show it.
http://jsfiddle.net/Wt3q4/3/
HTML
<div class="a">
<div class="b">
<div class="c">
</div>
</div>
</div>
<div id="show" class="button">Show!</div>
<div id="hide" class="button">Hide!</div>
CSS
.a{
position:relative;
height:200px;
width:200px;
border:3px solid #f00;
background:#ccc;
}
.b{
position:relative;
height:200px;
width:200px;
background:#ccc;
overflow: hidden;
}
.c{
width:50px;
height:300px;
border:3px solid #00f;
background:#dad;
margin:30px;
position:absolute;
z-index:333;
}
.hidden{
display: none;
}
.button {
width: 50px;
padding: 5px;
text-align: center;
border: 3px solid #aaa;
background: #ddd;
margin: 20px;
float: right;
}
jQuery
$('#show').on('click', function(){
$('.c').prependTo('.a');
$('.b').addClass('hidden');
});
$('#hide').on('click', function(){
$('.c').prependTo('.b');
$('.b').removeClass('hidden');
});
Based on my understanding of CSS's block formatting context, your div.b is a child of div.a, which means that div.a sets the block formatting context for div.b. Once you set overflow: hidden on the parent element, any child content that flows out of the parent content box will not be visible.
This is more apparent if you set outline: 1px solid black on the parent container so that you can see the extend of the content box, both with overflow hidden and visible.
Your question does touch on the essentials of CSS's visual formatting model.
How about something like:
.menu > li > ul {
position: absolute; /* you still need this here */
background-color: #9F26B4;
width: 10000000000000000px;
margin-left: -100000px;
padding-left: 100000px;
list-style: none;
z-index: 1000;
top: 0;
left: 0;
}
This, for example, overflows the entire page from left to right (assuming that the body overflow-x is set to hidden) and then set element width to enormous width, margin it to negative left to fill any left content, and padding to the left to move object inside the element to desirable X position. What you think?
I'm using the 960.gs grid system for a design. What is the best way to add a thin separating vertical line between two boxes? The width and color should be adjustable.
My plan is to define a couple of div classes with absolute positions and background color, one for each possible position, and use JQuery to make sure that it has the same height as the surrounding boxes. That seems a bit complicated, though. Is there a better solution?
You can implement a border using the pseudo-selector :after and absolute positioning, like so:
.line:after {
border-right: 1px solid #000000;
content: "";
display: block;
margin: 1px;
position: absolute;
right: -11px;
top: 0;
bottom: 0;
}
.grid_1, .grid_2, .grid_3, .grid_4, .grid_5, .grid_6, .grid_7, .grid_8, .grid_9, .grid_10, .grid_11, .grid_12, .grid_13, .grid_14, .grid_15, .grid_16 {
position:relative;
}
Here is a demo http://jsfiddle.net/andresilich/ZTyf4/show/
Edit here http://jsfiddle.net/andresilich/ZTyf4/
If you don't want the separating line to change the position of the next row of DIVs, I think absolute positioning is your best bet. What you could do is use an absolutely-positioned :after selector to position something relative to the bottom of the box yet not affect the layout. This works for me to position a line between boxes without affecting layout, just change the values of the last four properties as needed:
#topbox:after {
content: "";
display: block;
position: absolute;
margin-top: 25px;
height: 5px;
width: 400px;
background-color: #999;
}
I think this is do-able without jQuery. The main issue is accounting for the variable height of the elements.
reference here: http://jsfiddle.net/uqZgt/1/
HTML:
<div class="container">
<div class="box-1">
This box has alot of content. This box has alot of content. This box has alot of content.
</div>
<div class="box-2">
This box has a little bit of content. This box has a little bit of content. This box has a little bit of content. This box has alot of content. This box has alot of content. This box has alot of content.
</div>
</div>
CSS:
.container {
width: 242px;
}
.container div {
width: 100px;
background: #ff0000;
float: left;
padding: 10px;
border-right: 2px solid #000
}
.box-1 + .box-2 {
border-right: none;
border-left: 2px solid #000
}
.box-1 ~ .box-2 {
margin-left: -2px
}
in this example, all divs in the .container div have a 2px solid black border-right. However, an element with class box-2 which directly proceeds an element with .box-1 will have a 2px solid black border-left, and no border-right. So far this creates a 3px border in between the two elements.
Now, .box-1 ~ .box-2 selects any .box-1 that directly preceeds a .box-2, and sets it's margin-left to -2px. This drags it's sibling two pixels to the left, which effectively makes the borders of both elements overlap.
The .container div has a width equal to the sum of the width of the two elements (200px), plus padding (10px right and left = 20px) plus the width of one of the borders (2px). 242px, so the two elements fit perfectly.
No matter which div has more content, the border will appear to span the height of the div with the most content.
I may not be understanding your problem. I would probably just use a right or left border on one of the columns and adjust padding to be sure it is centered between the 2.
I've got a div that is fluid width depending on the browser. I have a border image that I want to have on both the left and right side of the div. How would I do that? I have the left side working as needed:
#conten {
background: #fff url(/images/pagebgleft.gif) top left repeat-y;
color: #333333;
float: none;
width: 80%;
max-width: 1080px;
margin: auto ;
}
I want to use an image url(/images/pagebgright.gif) for the right side. Thanks!
Use multiple backgrounds or put another wrapper div and set the right hand background to it.
I may have posted too late. Each border needs to be in it's own div and absolutely positioned inside a relative position container. The background image I'm using happens to be an animated border gif i got from google.
<div class="wrap">
<div class="leftb"></div>
<div class="rightb"></div>
</div>
.wrap{
position:absolute;
width:400px;
height:400px;
background:#ccc;
}
.leftb, .rightb{
position:absolute;
top:0;
background: transparent url(http://www.capriogroup.com/webstuff/Images/Borders/Animated-Border-ChainLinksVertical.gif) repeat-y 0 0;
color: #333333;
width: 20px;
height:400px;
}
.leftb {
left:0;
}
.rightb {
right:0;
}
Check working example at http://jsfiddle.net/ZxQ6Z/1/