I have a div in which I'm trying to center an image. It centers perfectly if position is set to fixed, but when position is set to absolute, the image is a few pixels too much to the right.
I can't have position set to fixed because this div scrolls in from the top when the user clicks something, so I can't have it be visible until that moment. I've never had this problem before. Can anyone tell me what's wrong?
html:
<div class="header">
<img class="logo" src="img/navbar_title.jpg"/>
<img class="tab" src="img/mid_tab.png" /><!-- image to be centered -->
<div class="header_social">
<img src="img/button_pg.jpg" />
<img src="img/button_facebook.jpg" />
<img src="img/button_twitter.jpg" />
</div>
</div>
css:
.header
{
position:fixed;
top:-100px;
width:100%;
height:30px;
padding:10px;
background-color:black;
color: white;
z-index:10;
margin-top:0px;
box-shadow: gray 3px 0px 10px;
}
.header .logo
{
position: absolute;
top: 10px;
z-index: 4;
left: 20px;
}
.header .tab { /* not working right */
position: absolute;
top: 0;
z-index: 4;
left: 50%;
transform: translateX(-50%);
-moz-transform: translateX(-50%);
-ms-transform: translateX(-50%);
-webkit-transform: translateX(-50%);
}
.header h1
{
font-family: Helvetica, sans-serif;
font-weight: bold;
font-size:14pt;
display:inline-block;
line-height:30px;
float:left;
margin-top: 0;
margin-left: 20px;
letter-spacing: .05em;
color: #303030;
}
.header .header_social
{
float:right;
height:30px;
line-height:30px;
width:150px;
}
This is due to box-sizing. When you position fixed, it is relative to the entire screen, period. When you position absolute, it is relative to the nearest non-static position parent. In your case, that is your div.header. Your div.header has a padding and a width 100%, so it is actually 100% + 20. Set box-sizing: border-box on your div.header and your image will move a few pixels to the left. :)
Related
I'm trying to make a div have a background color with a specific size, but whenever i put position absolute on the content inside of the div it removes the background color.
Heres an image of what i'm trying to do:
[![enter image description here][1]][1]
* {
font-family: 'Poppins', sans-serif;
}
.background {
position: relative;
background: #DFEDFF;
height: 100%;
width: 100%;
}
.hero-text {
position: absolute;
top: 50%;
transform: translateY(-50%);
}
.title {
font-size: 8.4375rem;
font-weight: 800;
line-height: 130px;
margin: 0;
}
.description {
margin: 0;
font-size: 2.75rem;
font-weight: 300;
}
<div class="background">
<div class="hero">
<div class="hero-text">
<h1 class="title">Hello,<br>I'm Ian</h1>
<p class="description">Website coming soon.</p>
</div>
<img class="callum" src="images/callum.png" alt="">
</div>
</div>
When you make an element position:absolute; it's width/height will no longer influence the width and height of it's parent element. The div's height is defined by its child if there is no set height specified (100% doesn't really work, thats just css magic for you).
If there is no child to give it a height (because it has been discounted because it is now position:absolute;) you need to set a specific px height for your div eg height:100px
I Applied min-height to main_container 410px and then both set absolute ,background div and hero-text
,hero-text setup in center just like you already did and then set left 100px to background so it will start setting up background by leaving 100px space, top:10px ,bottom:10px,right:10px so on....
.main_container{
min-height:410px;
width:100%;
position:relative;
}
.title {
font-size: 8.4375rem;
font-weight: 800;
line-height: 130px;
margin: 0;
}
.description {
margin: 0;
font-size: 2.75rem;
font-weight: 300;
}
.background{
position:absolute;
top:10px;
bottom:10px;
left:100px;
right:10px;
content:'';
display:block;
background:#DEEDFE;
z-index:-1;
}
.hero-text {
position: absolute;
top: 50%;
transform: translateY(-50%);
}
<div class="main_container">
<div class="background"></div>
<div class="hero-text">
<h1 class="title">Hello,<br>I'm Ian</h1>
<p class="description">Website coming soon.</p>
</div>
</div>
https://jsfiddle.net/3pL5srvq/1/
the background will auto growth height by hero-text.
calc(25% - 4rem) means a position to center and offset-top by padding space(3rem) + balance height up to you, I just set to 1rem
25% to center
-4rem (remove padding-top space(3rem) + balance offset-top(1rem))
* {
font-family: 'Poppins', sans-serif;
}
.background {
position: relative;
background: #DFEDFF;
width: 80%;
margin: 0 auto;
}
.hero-text {
transform: translate(-5% , calc(25% - 4rem));
padding: 3rem 0;
}
p.description {
margin: 0;
}
<div class="background">
<div class="hero">
<div class="hero-text">
<h1 class="title">Hello,<br>I'm Ian</h1>
<p class="description">Website coming soon.</p>
</div>
<img class="callum" src="images/callum.png" alt="">
</div>
</div>
I have a div representing a lesson that is dynamically "filled up" with a green span according to the student's percentage of completion of the lesson. So the height of the span is dynamically assigned. This works perfectly in all browsers except for Internet Explorer, where the span doesn't start from the bottom of the div, but it's half way in the middle,
as you can see from the pictures where the first lesson is 100% complete and the second is 25% complete:
Chrome, Firefox, Safari, Opera:
Internet Explorer:
My HTML is:
<div style="display:table; margin:0 auto;">
<div class="detail_image">
<div class="detail_image_cont">
<img src="images/thamatho/chapters/img.png" />
</div>
<span style="height:<?php echo $completepercentage."%";?>">
</span>
</div>
</div>
My CSS is:
.detail_image{
display: table-cell;
border: 4px solid #39C;
width:48px;
height:48px;
vertical-align: middle;
text-align:center;
-webkit-border-radius: 35px 35px 35px 35px;
-moz-border-radius:35px 35px 35px 35px;
border-radius: 35px 35px 35px 35px;
position:relative;
overflow:hidden;
background-color:transparent;
}
.detail_image > span {
width: 101%;
overflow: hidden;
left: -0.4px;
position: absolute;
background-color: #CFC;
bottom: 0px;
height: 0%;
z-index:1;
}
.detail_image_cont{ /* to center image in the div */
display:block;
width:100%;
text-align:center;
margin:0 auto;
position:relative;
z-index:999;
}
Add display: block to your span, it should help.
I am trying to place a div with text on top of an image but for some reason it doesn't work. My code is:
<div id="pics">
<div class="inner">
<img src=".." class="pic" height="310" width="310">
<div class="cover">blah blah</div>
</div>
</div>
my CSS is:
#pics{
overflow:hidden;
display:block;
}
.inner a{
position:relative;
margin:3px;
padding:10px;
top:10px;
}
.inner{
position: relative;
display: inline-block;
}
.cover{
position: absolute;
background-color: black;
color: white;
left: 0;
right: 0;
bottom: 0;
top: 0px;
}
I have tried many things but it doesn't seem to work. I might have messed up my cs somewhere
That's because you're targetting an ID and not a class.
In other words, in the CSS you have the definition for an ID (#cover) and the HTML code has a class:
<div class="cover">blah blah</div>
Either change the HTML to have an ID:
<div id="cover">blah blah</div>
or change the CSS to target the class name:
.cover{
position: absolute;
background-color: black;
color: white;
width: 100%;
height: 100%;
border-style: solid 5px;
top: 0px;
}
UPDATE:
You are giving the .cover a width and height of 100%, but absolute positioned elements don't really "understand" that, so I suggest changing it to:
(place the left, bottom and right to the edges, this will fit the div as 100% width and height of the relative parent)
.cover{
position: absolute;
background-color: black;
color: white;
left: 0;
right: 0;
bottom: 0;
border-style: solid 5px;
top: 0px;
}
How about setting the picture as background via the background-image: attribute.
You then could make your div clickable with <div onclick="window.location="url";>
In detail your css would look like this:
.image {
width:310px;
height:310px;
background-image:url('pathtoimage');
}
How can I get <div id="green_bar"> to overlap <div id="top_header"> and stop at the left edge of the logo? I'm trying to get the green bar to expand to the left when the screen width is expanded, but I want it to stop at the left edge of the logo.
I've tried position: absolute; on #green_bar but it expands it 100% across the screen.
JSFiddle: http://jsfiddle.net/hfgQt/14/
HTML:
<div id="header_bar"></div><!-- Grey line on top -->
<div id="top_header"><!-- begin top header -->
<div id="green_bar"></div>
<div class="wrap">
<div id="logo">
<a><h1>info</h1></a>
</div>
</div>
</div><!-- end top header -->
CSS
.wrap {
margin:0px auto;
width:960px;
}
#header_bar {
background-color: #424243;
height: 25px;
}
#top_header {
padding:0px 0px;
background-color:#24303d;
background-image:url("http://i.imgur.com/kGjGG.png");
border-bottom:1px solid rgba(0,0,0,.4);
overflow:hidden;
}
#green_bar {
display: block;
height: 10px;
width: 100%;
background-color: green;
}
#logo {
float:left;
clear:both;
}
#logo h1 {
margin:0px;
padding:0px;
background:url(../images/logo.png) no-repeat;
text-indent:-9999px;
width:258px;
height:56px;
}
Try the snippet below.
As I understand your problem, the trick is to get something that is half of (browser width - 960px). That's the amount of the left margin. I used an extra wrapper div to cut out the fixed width (should be 960px, but I changed it to 480px to get it to look OK in jsfiddle). It's position: absolute to get it out of the flow. Then the inner div (#green_bar) simply has width: 50% to cut it down to half the width of both margins put together - the width of the left margin only.
It's hard to understand what you want, so I might have done the wrong thing. Let me know if you need any more help.
header {
padding-bottom:5px;
margin-bottom:35px;
background:#ffdf85;
border-bottom:1px solid #d4d4d4;
background-color:#ffdf85;
}
.wrap {
margin:0px auto;
width:480px;
background: rgba(128, 128, 0, .5);
overflow: hidden;
}
#header_bar {
background-color: #424243;
height: 25px;
}
#top_header {
padding:0px 0px;
background-color:#24303d;
background-image:url("http://i.imgur.com/kGjGG.png") no-repeat;
border-bottom:1px solid rgba(0,0,0,.4);
overflow:hidden;
position: relative;
}
#green_bar_wrapper {
position: absolute;
padding-right: 480px;
left: 0;
right: 0;
top: 0;
}
#green_bar {
width: 50%;
height: 10px;
background-color: green;
}
/* 3.0.0 Logo
----------------------------------------*/
#logo {
float:left;
clear:both;
}
#logo h1 {
margin:0px;
padding:0px;
background:url(http://i.imgur.com/kGjGG.png) no-repeat;
width:258px;
height:56px;
}
#logo h1 span {
text-indent: -9999px;
}
<header><!-- BEGIN HEADER -->
<div id="header_bar"></div><!-- Grey line on top -->
<div id="top_header"><!-- begin top header -->
<div id="green_bar_wrapper"><div id="green_bar"></div></div>
<div class="wrap">
<div id="logo">
<h1><a><span>info</span></a></h1>
</div>
</div>
</div><!-- end top header -->
</header><!-- END HEADER -->
I have an image inside a span tag, the span has a set width and height, and is set to overflow hidden. so it only reveals a small portion of the image. This works but the small portion of the image that is visible is the top left corner. I would like it to be the center of the image that is visible. I think I need to absolutely position the image, but the size of the image can vary though. Does anyone know how to do what I am trying to do?
Thanks!
Here is the HTML:
<div class="lightbox_images">
<h6>Alternate Views</h6>
<span>
<a href="http://www.kranichs.com/mothers_rings/mothers_rings_txt2.jpg" rel="lightbox[product_alternate_views]" title="This is my captions 1">
<img src="http://www.kranichs.com/mothers_rings/mothers_rings_txt2.jpg" />
</a>
</span>
<span>
<a href="https://www.kranichs.com/product_images/Simon-G#346_M_346_M.jpg" rel="lightbox[product_alternate_views]" title="This is my captions 2">
<img src="https://www.kranichs.com/product_images/Simon-G#346_M_346_M.jpg" />
</a>
</span>
<span>
<a href="http://www.kranichs.com/images/simong/sim_banner_01.jpg" rel="lightbox[product_alternate_views]" title="This is my captions 3">
<img src="http://www.kranichs.com/images/simong/sim_banner_01.jpg" />
</a>
</span>
<span>
<a href="http://www.kranichs.com/images/psu/psu_banner.jpg" rel="lightbox[product_alternate_views]" title="This is my captions 4">
<img src="http://www.kranichs.com/images/psu/psu_banner.jpg" />
</a>
</span>
</div>
Here is the CSS:
.lightbox_images{
background-color:#F9F9F9;
border:1px solid #F0F0F0;
}
.lightbox_images h6{
font-family:Verdana, Arial, Helvetica, sans-serif;
color:#333333;
font-size:14px;
font-weight:bold;
font-style:italic;
text-decoration:none;
margin:0px;
}
.lightbox_images span{
padding:5px;
padding-bottom:15px;
background-color:#DFDFDF;
margin:5px;
display:inline-block;
border:1px solid #CCC;
}
.lightbox_images a{
display:inline-block;
width:60px;
height:60px;
overflow:hidden;
position:relative;
}
.lightbox_images a img{
position:absolute;
left:-50%;
top:-50%;
}
.lightbox_images span:hover{
border:1px solid #BBB;
background-color:#CFCFCF;
}
As proposed in https://stackoverflow.com/a/14837947/2227298 by Billy Moat, there is a solution without knowing the image height and width.
Try it here: http://jsfiddle.net/LSKRy/
<div class="outer">
<div class="inner">
<img src="http://3.bp.blogspot.com/-zvTnqSbUAk8/Tm49IrDAVCI/AAAAAAAACv8/05Ood5LcjkE/s1600/Ferrari-458-Italia-Nighthawk-6.jpg" alt="" />
</div>
</div>
.outer {
width: 300px;
overflow: hidden;
}
.inner {
display: inline-block;
position: relative;
right: -50%;
}
img {
position: relative;
left: -50%;
}
Given this sort of HTML:
<span><img src="..." width="..." height="..." alt="..." /></span>
You could use CSS like this:
span {
position: relative;
display: block;
width: 50px; /* Change this */
height: 50px; /* Change this */
overflow: hidden;
border: 1px solid #000;
}
span img {
position: absolute;
left: -10px; /* Change this */
top: -10px; /* Change this */
}
You can then center the image based on its exact dimensions.
Alternatively, if you're able to modify the HTML, you could instead use something like this:
<div>
[name of picture]
</div>
Then, match it with this CSS:
div {
width: 50px;
height: 50px;
background: transparent url(...) center center no-repeat;
border: 1px solid #000;
}
div a {
display: block;
height: 100%;
text-indent: -9999em; /* Hides the link text */
}
In this case, the background will be automatically centered regardless of its dimensions, and it'll still be clickable.
This example, the images are at the center of the element, regardless of its size
HTML:
<div class="box">
<img src="example.jpg">
</div>
CSS:
div.box{
width: 100px;
height: 100px
overflow: hidden;
text-align: center;
}
div.box > img{
left: 50%;
margin-left: -100%;
position: relative;
width: auto !important;
height: 100px !important;
}
If the width and height of the image varies, I think the only way to do this is with javascript.
Style the image to left:50%; top:50%; and then, use javascript (image onload event maybe) to add margin-left:-imageWidth/2 px; margin-top:-imageHeight/2 px;
So basically you have
span img {
position: absolute;
left: 50%;
top: 50%;
}
and the following js
window.onload = function() {
var images = document.getElementsByTagName('img');
for(i=0; i<images.length; i++)
images[i].onload = centerImage(images[i]);
function centerImage(img) {
img.style.marginLeft = -(img.width/2) + "px";
img.style.marginTop = -(img.height/2) + "px";
}
}
PS. If you're using a javascript framework/library the code could simplify a bit, but I didn't make that assumption.
You can set the image as the background of the element and set x,y axis as in the following example:
#mySpan {
background-image: url(myimage.png);
background-repeat: no-repeat;
background-attachment:fixed;
background-position: -10 -10
}