Is there a better way to align something in the bottom right of a cell?
I have a div which only contains a background image, 10px by 10px. I am using the following styles to put it in the bottom right corner. (The cell I have it in is 40px high.)
Doing it this way causes me to lose the 30px above the div. (I'm also using it as something to click, so I can click anywhere on the right instead of only the bottom corner of the cell.)
.time_note { float:right; width:20%; min-height:40px; display:block;
margin-right:-5px; }
.time_note { background:url('/images/sheet/note_marker.png') no-repeat;
background-position:bottom; }
If this could also be done NOT using margins, that would be great.
Example Image:
You should make your wrapping class position:relative; and then whatever you have inside you can position absolutely position:absolute; bottom:0; right:0;
For example
HTML:
<div class="wrapper">
<div class="arrow"></div>
</div>
CSS:
.wrapper
{
width:100px;
height:100px;
position:relative;
}
.arrow
{
width:10px;
height:10px;
position:absolute;
right:0px;
bottom:0px;
}
You could position: absolute, and bottom: 0; right:0; to place it on the bottom right of the parent element (which needs position: relative;). Of course, this has the danger of overlapping some other info in that element.
try:
background-position:bottom right;
I believe what you are looking for is this, you just need to modify it to be on the right
Sticky footer
Related
I'm trying to make an image under a title on the top left but the image doesn't want to cover the left side.
I changed the position to position: absolute, made the margin and padding 0, inspected the HTML page and can't see anything that can influence this image.
The HTML:
<div class="header">
<div class="container">
<div class="row">
<div class="col">
<h1>Dillan Robbertze<h1>
<img src="mountain-og.jpeg">
</div>
</div>
</div>
</div>
The CSS:
.header img{
height:Auto;
left:0;
margin:0;
padding:0;
position:absolute;
width:100vw;
z-index:1;
}
Expected Results: Image is under the title top left.
Actual Results: There is a white space left and top of the image.
EDIT: I added top:0; thanks to #Somesh Mukherjee. The image moved up, but there is still a left space that shouldn't be there.
add a class to the parent div element. and add position relative to it.
.myNewClass {
position: relative;
}
also, make sure your parent elements don't have margin and padding. for that, you can use a CSS reset like this:
* {
margin: 0;
padding: 0;
}
though this will make sure all of your elements don't have any margin or padding so you need to specify all you need by yourself. you should put this at the top of your CSS file if you want to use it.
You have not specified the top attribute
.header img{
height:auto;
left:0;
top:0;
margin:0:
padding:0;
position:absolute;
width:100vw;
}
why don't you try:
top: -28px;
position:relative;
Helped me once, or twice in similar situations.
I have div inside a div (.konteineris2 and .feedback). When I use left:-200px in .feedback class, fixed div suddenly appears in the very left side of screen, outside .konteineris2. All I wanted it to move for 200px to the left outside .konteineris2, but not appear to the left screen border and then move 200px from that point.
HTML:
<div class="konteineris2">
<div class="feedback">
</div>
</div>
CSS:
.feedback{
position:fixed;
top:220px;
width:100px;
height:200px;
background:white;
}
.konteineris2{
width: 960px;
height:700px;
position:absolute;
top:460px;
padding-top:30px;
pointer-events:none;
overflow:hidden;
}
Any ideas how to manage it?
change position:absolute; to position:relative; in .konteineris2
Add margin-left: -200px; in .feedback
Check it on CodePen . I think you're looking for the same thing.
Without seeing more of the context in which this occurs I'd guess the following might achieve your goal: Try adding margin-left:-200px instead.
I have been looking for an answer to this question all over the interwebs, but I just can't find the answer.. I have a transparent header filled with a background image that is the same as my background, and I want my main div to scroll underneath it so the text is hidden. Here is the HTML:
<body>
<div class="wrapper">
<div class="top">
<!-- This is my header -->
</div>
<div class="main">
[.....]
</div>
And here is the CSS:
.top {
background-image:url("http://img138.imageshack.us/img138/9215/headerqrk.png") no-repeat top center fixed;
margin-top:0px;
height:100px;
width:1000px;
margin-left:auto;
margin-right:auto;
vertical-align:central;
padding-left:0px;
padding-right:opx;
}
.main {
position:absolute;
top:100px;
bottom:20px;
left:0;
right:0;
width:990px;
margin:0 auto;
padding-top:10px;
padding-left:5px;
padding-right:5px;
z-index:-1;
}
I have made a jsFiddle which can be found here: http://jsfiddle.net/qcaJJ/. Can you please help me out on how to get this working? Thanks in advance!
ps. Please don't mind the footer, I've used the footer from another page of mine, I don't want this one on this page :p
pps. If anyone knows a way to let the nav stay on it's place and the main2 div scroll, you're my hero! Kinda new to HTML and CSS..
In addition to using fixed position for the header, as the other answers pointed out, you're also using a background image with transparency, so when the main section scrolls underneath, you still see it. You need to add a background color like so, to make sure that the header div covers over what's scrolling underneath:
.top {
background: #fff url("http://img138.imageshack.us/img138/9215/headerqrk.png") no-repeat top center fixed;
See my JSFiddle here: http://jsfiddle.net/qcaJJ/3/
You need a fixed position for your header rather than an absolute positioning for all the rest of your page.
.header{
position:fixed;
top:0;
left:0;
width:100%;
height:100px;
background:red;
}
.content{
margin-top:100px;
font-size:180%;
}
The top must be position:fixed for that to work. This ensures that it is always stuck at the top of the screen.
You may also want to set the z-index to something like 1000 so that it always stays on top of everything else.
I am having an issue with overlapping items within a floating div. I must be applying the z-index wrong, but I've tried a few different things and I can't get the two items to overlap. I have the following code (note: topLink and topIconNew divs are actually pngs):
http://jsfiddle.net/jhacks/neskB/7/
HTML:
<div class="topIcon">
<div class="topIconNew"></div>
<div class="topLink"></div>
</div>
CSS:
.topIcon{
border:1px solid black;
background-color:gray;
width:28px;
height:40px;
float:right;
position:relative;
}
.topLink{
background-color:green;
width:16px;
height:16px;
position:absolute;
top:14px;
left:6px;
z-index;300;
}
.topIconNew{
background-color:red;
margin:30px 0px 0px 18px;
width:10px;
height:10px;
position:relative;
z-index:350;
cursor:pointer;
}
The HTML for the pngs (if it makes a difference):
<img src="xxxxx.png"> </img>
EDIT** I've done it! Finally. Thank you for the help... upon seeing your code I saw the use of absolute and relative together. I now have a better understanding over the usage of those things and now instead of positioning things with padding/margins, I'm using (and correctly so I'd assume) positioning. I feel stupid for doing what I was doing.
Thanks for the edits, your question is much more clear now. I think this will satisfy your question.
http://jsfiddle.net/neskB/26/
Okay, so this makes a lot more sense now.
You have gray div floated right
You want to center a green div in this
You want a red div in bottom right of green div
First I would change your html structure to this.
<div class="topIcon">
<div class="topLink">
<div class="topIconNew"></div>
</div>
</div>
Link will be positioned relative to its parent Icon.
New will be positioned relative to its parent, Link.
/* set topIcon to relative so that its child will be positioned relative to it */
.topIcon{ position: relative; }
/* topLink is absolute positioned. We use top/left of 50% and negative margins to automatically center it */
.topLink{
position: absolute;
width:16px;
height:16px;
margin:-8px 0 0 -8px;
left:50%;
top:50%;
}
/* New is positioned in bottom right of its parent */
.topIconNew{
position:absolute;
bottom:0px;
right:0px;
}
So I tried to experiment with CSS pseudo class before and after. I tried to use those pseudo to create header element.This is to reduce using div to hold left and right images. This is code for HTML
<header id="mastHead">
<h1>Branding</h1>
</header>
So I have 3 images to create traditional header element which is 20px width for left and right side with 100px height and for the middle, 1px width and 100px height which will repeat horizontal. And here my CSS
#mastHead {
background:url(images/headMiddle.jpg) repeat-x top left;
width:1000px;
height:100px;
overflow:hidden;
}
#mastHead:before {
content:"";
display:block;
background:url(images/headLeft.jpg) no-repeat top left;
width:20px;
height:100px;
float:left;
}
#mastHead:after {
content:"";
display:block;
background:url(images/headRight.jpg) no-repeat top left;
width:20px;
height:100px;
float:right;
}
#mastHead h1 a {
display:block;
width:200px;
height:41px;
background:url(images/logo.png) no-repeat;
}
So the problem is if I remove h1 element, it will align perfectly but if I put these element, it will push the ::after pseudo-class down and it will take leftover space according to it height.How can I make this h1 element to take just middle space without affecting the ::after space?
I made a fiddle with your example: http://jsfiddle.net/3Dcw3/ (only set width to 500 to fit in a fiddle and set background to visualize them)
And here is a fixed version: http://jsfiddle.net/3Dcw3/1/
The points are:
Add position:relative; to the header.
Use absolute positioning instead of floating.
Add paddings so the blocks would position over them.