I am currently centring an image horizontally and vertically using:
.centeredImage
{
text-align:center;
display:block;
}
.centeredImage img {
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
margin: auto;
}
html:
<body>
<p class="centeredImage"><img id ="img" src="smallslide1.png"></p>
</body>
This has been working fine however I have now added a header:
#header {
background: #e9e6e6; /* Here set your colour */
height: 55px;
width: 100%;
left: 0;
position: absolute;
/* box-shadow: 0px 2px 2px #888888;*/
}
If I resize the window or the window isn't set at the perfect size this centered image will overlap the header. What I really want is it to be centered vertically between the bottom of the header and the bottom of the window. I tried adjusting top/bottom on the centered img but didn't have any luck. Could someone give me some pointers on how to go about this please?
I think you need something like following:
body{
padding:0;
margin:0;
}
.centeredImage
{
text-align:center;
display:block;
}
.centeredImage img {
position: absolute;
left: 0;
right: 0;
top: 55px;
bottom: 0;
margin: auto;
}
#header {
background: #e9e6e6; /* Here set your colour */
height: 55px;
width: 100%;
left: 0;
top:0;
position: absolute;
/* box-shadow: 0px 2px 2px #888888;*/
}
<div id="header"></div>
<p class="centeredImage"><img id ="img" src="smallslide1.png"></p>
Check Fiddle. Hope it helps.
Just add div tag before and use some styles example
<body>
<div>
<p><img src="sample.png" alt="test"></p>
</div>
</body>
Style
div{display: inline-table;text-align: center}
div p{display: table-cell;vertical-align: middle;}
And use padding-top: {header height should be placed here}px
for example if header height is 50px;
div{padding-top: 50px}
Related
This is the HTML code:
<body>
<div id="container">
<img src="images/coffeebackground1.jpg" alt="">
<div id="topnav">
<ul>
<li>Home</li>
</ul>
</div>
</div>
</body>
This is my CSS code:
* {
margin: 0;
padding: 0;
}
#container {
width: 100%;
height: 704px;
overflow: hidden;
background: white;
opacity: 0.7;
z-index:100;
position: relative;
}
#topnav {
width: 100px;
height: 20px;
background-color: red;
z-index:1000;
position: relative;
color: red;
}
What I did was I put an image as a background and I want to put the topnav div lying on top of the background image. However, it seems like my code is not working.
The text is not visible because both the background color and the foreground color are set to red, so the element just appears as a red block.
Additionally, the text doesn't appear above the image because it is positioned as relative which means it will be positioned relative to its natural position according to the layout. As you haven't specified an offset in the CSS, it actually just appears in its normal position, which is just below the image.
If you change the position to absolute then its position will be relative to #container instead which I think makes more sense in this case. You can then move it to be above the image by setting a position, like this:
#topnav {
background-color: white;
z-index:1000;
position: absolute;
left: 100px;
top: 20px;
color: red;
}
Background and font color are same, that's why its not appearing
* {
margin: 0;
padding: 0;
}
#container {
width: 100%;
height: 704px;
overflow: hidden;
background: white;
opacity: 0.7;
z-index: 100;
position: relative;
}
#container img{
top:20px;
position: relative;
}
#topnav {
width: 100px;
height: 20px;
background-color: white;
z-index: 1000;
position: absolute;
color: red;
top:0;
}
<body>
<div id="container">
<img src="https://www.google.com/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png" alt="">
<div id="topnav">
<ul>
<li>Home</li>
</ul>
</div>
</div>
</body>
Remove position relative from #container and set position absolute in #topnav.
or
Remove img tag from #container and set background image on #container in css like that:
`
background: url("images/coffeebackground1.jpg");
background-repeat: no-repeat; //if you don't want to repeat image
background-size: auto; //try others parameters to fit your background
*{
margin:auto;
}
#container {
width: 100%;
height: 704px;
overflow: hidden;
background: white;
z-index:100;
top:20px;
position: relative;
}
#topnav {
z-index:1000;
position: absolute;
left: 10px;
top: 10px;
color: #FFF;
font-family:arial;
font-size:30px;
}If you want to change position of 'Home' please change #topnav:{ left: 70px}. If you want to increase more please left: 80px.. and so on. If you want to decrease please less #topnav{ left:30px.. and so on.}
I want my text to appear over an image, at the bottom of the image. I can get it to work but when I scale the page, the text moves out of the div (below the image). I want it to stay in the same place when i scale the page.
HTML
<div class="header">
<img src="images/ct.jpg" class="info-image">
<p class="HeaderText">Canterbury Tales<p>
</div>
CSS
.info-image {
width:100%;
position:relative;
}
.HeaderText {
position:absolute;
left:35px;
bottom: 10px;
font-size: 3em;
}
website: explorecanterbury.co.uk
the div can be found by clicking on canterbury tales building
You have a few problems:
You need to close <p> with </p>.
Use position: relative on the .header.
Like this?
.header {
position: relative;
width: 500px;
}
.info-image {
max-width: 100%;
position: relative;
display: block;
}
.HeaderText {
position: absolute;
top: 50%;
text-align: center;
left: 0;
right: 0;
transform: translate(0, -50%);
font-size: 3em;
margin: 0;
padding: 0;
}
<div class="header">
<img src="//placehold.it/500" class="info-image">
<p class="HeaderText">Canterbury Tales</p>
</div>
Preview
Give the image a lower z-index then the text:
.info-image {
width:100%;
position:relative;
z-index: 1;
}
.HeaderText {
position:absolute;
left:35px;
bottom: 10px;
font-size: 3em;
z-index:2;
}
If that doesn't work, try giving the image a position of absolute, and the text a position of relative.
The following code shows a logo and it's background. I can't get the logo centered vertically. Is it because the background div has no height defined? How can I get the background to be always 100% of the screen size with a centered logo?
body {
margin: 0;
}
#header {
min-height: 100%;
width: 100%;
position: absolute;
background-color: #CCC;
}
.logo {
max-width: 100%;
margin: 0 auto;
display: block;
position: relative;
}
<div id="header">
<img class="logo" src="http://lorempixel.com/100/50/abstract/3/">
</div>
Using absolute position for image, positing to center of div using top and left and them move it back for half using transform:translate
There is code
html,body {
margin: 0;
height:100%;
}
#header {
height: 100%;
width: 100%;
position: relative;
background-color: #CCC;
}
.logo {
display: block;
position: absolute;
top:50%; left:50%; /*positing top left corner of image to center*/
transform: translate(-50%, -50%); /* move left and up for 1/2 of image */
}
<div id="header">
<img class="logo" src="http://lorempixel.com/100/50/abstract/3/">
</div>
There is fiddle example with position:absolute;
html, body {
margin: 0;
height: 100%;
}
#header {
min-height: 100%;
width: 100%;
position: relative;
background-color: #CCC;
}
.logo {
margin: 0 auto;
margin: auto;
position: absolute;
top: 0; left: 0; bottom: 0; right: 0;
border: 1px solid blue;
}
<div id="header">
<img class="logo" src="http://lorempixel.com/100/50/abstract/3/">
</div>
You can vertical center using this method inside your .logo class. But you most define your parent height for it to be effective.
.logo {
max-width: 100%;
margin: 0 auto;
display: block;
position: relative;
top: 50%; /* Added Code */
transform: translateY(-50%); /* Added Code */
}
Here is my html
<div class="container">
<img src="something" class="avatar"/>
<div class="edit_photo">Edit</div>
</div>
"edit_photo" has an image on it's background. the img tag dimensions is not set so it could be anything. But I want the "edit_photo" div to always be on the bottom right corner of the img. Is this possible with css? I can't think of a way to do this. the img tag needs to always be an img tag and I can't change it to a div.
Thank you!
I think this may be possible:
CSS:
.container{
position: relative;
display: inline-block;
}
img{
background: red;
height: 120px;
width: 250px;
}
.edit_photo{
position: absolute;
bottom: 0;
right: 0;
background: blue;
height: 25px;
width: 25px;
}
Here's a JSFiddle to see: http://jsfiddle.net/gW9PK/
You might need to play around with the .edit_photo and nudge it up a little bit.
The container should be position: relative; and the edit_photo position: absolute; like this:
.container {
position: relative;
/* inline-block for 100% of child width */
display: inline-block;
border: 3px solid #ddd;
}
img {
/* for 100% height of the container */
display: block;
}
.edit_photo {
position: absolute;
right: 5px;
bottom: 10px;
/* Some color */
background: red;
padding: 2px 4px;
border-radius: 3px;
color: white;
}
UPDATED DEMO WITH MULTIPLE IMAGES: http://jsfiddle.net/HYQLQ/3/
write this code in css
.container{
position: absolute;
}
.edit_photo{
position: absolute;
bottom:0px;
right:0px;
widht:20px;
height:20px;
}
edit_photo
{
bottom:-600
top:30px;
right:5px;
}
play with the numbers.
I have to centralize an image in both axis and then add a linkable area to that image's top left area. This works great for webkit and ff but ie fails. My html code is this:
<body>
<div class="content">
<img src="images/main_image.jpg" />
Logo
</div>
</body>
and my css code this:
body, html {
margin: 0;
padding: 0;
height: 100%;
width: 100%;
background-color: #000;
overflow: hidden;
}
div.content {
position: relative;
width: 1001px;
height: 626px;
top: 50%;
margin: 0 auto;
padding: 0;
}
div.content img {
margin: 0;
padding: 0;
display: block;
position: relative;
top: -50%;
}
div.content a {
width: 14%;
height: 9%;
display: inline-block;
position: absolute;
top: -42%;
left: 7%;
text-decoration: none;
margin: 0;
padding: 0;
text-indent: -9999px;
}
this doesn't work for ie because i use an a tag displayed as inline-block positioned accordingly. Our friend ie doesn't show the linkable part in the screen at all because the text-indent. Can someone help a little bit? Thanks. This demo shall help you more i think.
Take a look at this demo (or results only here)
HTML is not changed. I assume that image has the same height/width as content div
CSS:
body, html {
margin: 0;
padding: 0;
height: 100%;
width: 100%;
background-color: #000;
overflow: hidden;
}
div.content {
position: relative;
padding: 0;
border:solid 1px blue;
width: 1001px;
height: 626px;
/*below will center div on screen */
top: 50%;
margin: -313px auto 0;
}
div.content img {
margin: 0;
padding: 0;
display: block;
border:solid 1px white;
/*top:-50% removed. Assuming that image has the same height/width as content div*/
}
div.content a {
width: 14%;
height: 9%;
position: absolute;
/* top: -something changed. Remember that absolutely positioned div is always positioned from closest parent relative div*/
top: 10%;
left: 7%;
text-decoration: none;
margin: 0;
padding: 0;
text-indent: -9999px;
border:solid 1px green;
}
It looks a like you're creating a container, moving it to the bottom of the screen and then moving the image outside of it to the top-left corner of the screen. This last step is exactly what will fail in many cases. Child-elements usually will be hidden or cutted away when leaving their parent container. IE is more restrictive but correct in this case.
You can achieve your goal easier when you'll place the image outside the container. Keep in mind that body is a container by itself that is allways 100% wide and high (and cannot be changed to be 50% or whatsoever).
Here's the result on js-fiddle
The Html:
<body>
this is the body
<img class="my_image" src="images/main_image.jpg" />
<div class="content">
This is the container
<a href="#" >Logo</a>
</div>
</body>
CSS:
body, html {
margin: 0;
padding: 0;
height: 100%;
width: 100%;
background-color: #000;
overflow: hidden;
color:silver;
}
div.content {
color:black;
background-color: silver;
position: relative;
width: 1001px;
height: 626px;
top: 50%;
margin: 0 auto;
padding: 0;
}
.my_image {
width:160px;
height:60px;
border:1px solid red;
margin: 0;
padding: 0;
display: block;
position: absolute;
top: 0;
left:0;
}
div.content a {
color:red;
font-size:14px;
display: inline-block;
position: absolute;
top: 20%;
left: 7%;
text-decoration: none;
margin: 0;
padding: 0;
}
In general it's the best to avoid negative values. They're misinterpreted in many browsers and produce problems.