I tried to position my logo and headerpic on top of each other like this:
img {
position: absolute;
top: 25px;
left: 25px;
}
.imgA1 {
z-index: 1;
}
.imgB1 {
z-index: 3;
}
<img class="imgA1" src="https://placehold.it/200/333333">
<img class="imgB1" src="https://placehold.it/100">
But my logo is still at the top end of my header pic.
My css code looks like this:
.header img.headerpic {
max-width:100%;
float:left;
position:relative;
background:transparent url(../images/header.jpg)
}
.header img.logo {
position: relative;
float:left;
max-width:100%;
background:transparent url(../images/logo.png )
}
and i added this in my index.php:
<body id="home">
<!-- header area -->
<div class="header">
<id="logo">
<img src="<?php echo TEMPLATE_DIR; ?>/images/logo.png" alt="logo"/>
<img class="headerpic" src="<?php echo TEMPLATE_DIR; ?>/images/headspacer.jpg" alt="" />
<div class="infobox"><div class="inner">
</div>
</body>
What do i need to change that my Header-Picture is the background and my logo is on the left in the center of the Picture?
My actual view
position:absolute is relative to the nearest positioned parent, or the entire page. Therefore, here you are setting the images to be at the exact same location.
What you need is for .imgB1 to set position: relative and then move it to place with the top and others. E.g something like so:
#logo img {
position:absolute;
}
.header img.headerpic {
max-width:100%;
top: 10px;
left: 10px;
position: relative !important;
}
<div class="header" id="logo">
<img src="https://placehold.it/200/333333" alt="logo"/>
<img class="headerpic" src="https://placehold.it/100" alt="" />
<div class="infobox"><div class="inner">
</div>
I'm not actually tested this but, if it works thumbs up. I forget to complete my css classes and goes to php and not I have full knowledge of php
margin-left: 25%;
margin-top:25%;
Increase the z-index, case may be that your logo has more z index than img divs
If you want both images to stack on top of each other, what you need to do is to set header as relative and img to absolute like so:
.header{
position: relative;
}
.header img{
position: absolute;
}
<div class="header">
<img class="imgA1" src="https://placehold.it/200/333333">
<img class="imgB1" src="https://placehold.it/100">
</div>
By setting both img.headerpic and img.logo to position:relative, both will occupy their own space and thus won't stack on top of each other.
By defining the parent's position as relative, in this case .header, anything inside .header with an img tag that's positioned absolute will occupy the same space, relative to the parent.
Related
I have several fluid images that I want to float and stack up next to each other. For example I have the img-div width set to 50% which stacks two images in each row. The images also increase in size depending on browser size. At the same time I want to be able to put a text over the middle of each image that floats around and stays in the center of the images. My problem is the text not centering. When I set img as absolute it centers but the stacking gets messed up.
Any idea how I can do this via CSS only?
Here's my HTML code:
<div id="container">
<!-- image1 -->
<div class="img-div">
<a href="#">
<img src="images/image1.jpg" />
<div class="txt-div">
<p>Some text goes here!</p>
</div>
</a>
</div>
<!-- image2 -->
<div class="img-div">
<a href="#">
<img src="images/image2.jpg" />
<div class="txt-div">
<p>Another text.</p>
</div>
</a>
</div>
<!-- image3 -->
<div class="img-div">
<a href="#">
<img src="images/image3.jpg" />
<div class="txt-div">
<p>Some more text.</p>
</div>
</a>
</div>
<!-- image4 -->
<div class="img-div">
<a href="#">
<img src="images/image4.jpg" />
<div class="txt-div">
<p>Last text.</p>
</div>
</a>
</div>
</div>
Here's my CSS:
.img-div {
width: 50%;
float:left;
a {
position: relative;
display: block;
height: 100%;
font-size: 0;
text-align: center;
}
a:before {
vertical-align: middle;
content: '';
display: inline-block;
height: 100%;
width: 0;
}
.txt-div {
vertical-align: middle;
position: relative;
z-index: 10;
display: inline-block;
font-size: medium;
p {
padding: 0;
margin:0;
}
}
img {
position: absolute;
width: 100%;
z-index: 9;
top: 0;
left: 0;
}
}
You almost had it :)
use position:relative/ absolute to draw your text-container over the image, and within use the pseudo :before and vertical-align technique to center your <p>.
.img-div {
width: 50%;
display:inline-block;
position: relative;
}
.img-div img {
width:100%;
}
a {
text-align: center;
}
.txt-div {
position:absolute;
top:0;
left:0;
right:0;
bottom:0;
z-index:1;
}
.txt-div:before {
content:'';
padding-top:100%;
vertical-align:middle;
display:inline-block;
}
.txt-div p {
max-width:95%;
display:inline-block;
vertical-align:middle;
}
DEMO: http://codepen.io/gc-nomade/full/Cxkqf
remove the div around the p and set position:absolute; to the p set the img to position:relative; the p will now go over the img, if I'm correct. set text-align:center; to p to get it centered. (sometimes it might be good to width:100%; the p too)
You could use CSS background images to place each image in a dynamically sized div, then simply float the divs and they will fill in whatever space without altering position of the block level elements. In this case each div would get a unique id according to the image it would contain and the urls for your images would be a background image for the div. The only drawback to this that I can see is that if images were disabled you would not get alt text, but your divs would remain the specified size. and in their correct position.
In my page i have 2 images that i want show one of them on the another one, this is my code, how can i set images:
<div class="profile-image img-responsive">
<img src="images/pro.png"/>
<img src="images/2.png" class="img-circle">
</div>
JSFIDDLE
I want to set 2.png onto the left and bottom pro.png like this:
How can I do this?
The following code will display the second image over the first image. All the images and the image panel are responsive.
1.CSS
.profile-img {
width: 100%;
position: relative;
}
.img-responsive {
max-width:100%;
height:auto;
}
.img-circle {
position:absolute;
z-index:99;
left:10px;
bottom:-50%;
}
2.HTML
<div class="profile-img">
<img class="img-responsive" src="images/pro.png" />
<img class="img-circle img-responsive" src="images/2.png" />
</div>
#bnuhero's answer is very good, and I would change it just a little.
First, basing off the jsfiddle, encapsulate the two images in a relative div. This will allow the image placed on top, when defined as "absolute" to be placed relative to the parent div, rather than relative to the entire window.
<div class="header-image">
<div class="profile-image" style="margin: 50px auto;">
<img src="http://s9.postimg.org/41fwo4k4v/pro.png" class="img-responsive"/>
<img src="http://s24.postimg.org/on764040x/image.png" class="img-circle img-responsive img-on-top">
</div>
</div>
</div>
Next, make a rule to define the realtive div. And make an additional class or id to target the image to be placed on top. Writing the rules with the same 'img-circle' class will interfere with the default 'img-circle' rules setup by Bootstrap
.header-image {
position:relative;
}
.img-on-top {
position:absolute;
z-index:99;
left:10px;
bottom:-50%;
}
Updated jsfiddle at http://jsfiddle.net/Bavc_Am/jG9bP/1/
Update your css to this
.img-circle {
border-radius: 50%;
position: relative;
top: -69px;
left: 10px;
}
In the following HTML, I want the small delete icon to appear in the upper left corner of its container (the div). The larger image (a cat) needs to be inside of the div and scale so that it does not exceed the height of the div. I need the div to float left because of how its used elsewhere. The delete icon is suppose to overlay on top of the larger image (if the larger image fills the width of the div). Please note, that the larger image may actually have a width that is much less than the div and it gets centered in the div. In this case, the delete icon, still is in the upper left corner but is not really overlaying on top of the larger image since the larger image would be too small. The width of the div always remains the same regardless of the width of the larger image.
Here is my html:
<div style="float:left; width:120px; height:90px; text-align:center; border:1px solid #c0c0c0">
<img src="http://hellopune.mobi/site2/Images/icon_delete.png" />
<img src="http://www.petfinder.com/wp-content/uploads/2012/11/100691619-what-is-cat-fostering-632x475.jpg" style="height:90px" />
</div>
And in fiddler:
http://jsfiddle.net/AndroidDev/eJZ7X/
Do you need something like this?
Demo
div {
position: relative;
}
div img {
max-width: 100%;
max-height: 100%;
}
div img:first-of-type {
position: absolute;
top: 5px;
right: 5px;
}
Here, am positioning the delete img to absolute with top and right properties, if you want left than you can do that too, and make sure you wrap them inside a position: relative; container.
Note: Am using first-of-type pseudo so you do not have to alter your
DOM, but if you think that the order of the img might change than
better assign a class to the delete img instead.
As you feel my selectors are too generic, assume that you have a parent with a class called .img_holder and this will have div nested further and than you nest both the img inside that so your selector will be
.img_holder > div {
position: relative;
}
.img_holder > div > img {
max-width: 100%;
max-height: 100%;
}
.img_holder > div > img:first-of-type {
position: absolute;
top: 5px;
right: 5px;
}
And the DOM would look like
<div class="img_holder">
<div>
<img src="#" />
<img src="#" />
</div>
<div>
<img src="#" />
<img src="#" />
</div>
<div>
<img src="#" />
<img src="#" />
</div>
</div>
I've updated your fiddle here
The icon img now has an icon class and is absolute positioned in the div.
html:
<div style="float:left; width:120px; height:90px; text-align:center; border:1px solid #c0c0c0">
<img class="icon" src="http://hellopune.mobi/site2/Images/icon_delete.png" />
<img src="http://www.petfinder.com/wp-content/uploads/2012/11/100691619-what-is-cat-fostering-632x475.jpg" style="height:90px" />
</div>
css:
.icon {
position: absolute;
}
I'm currently skinning site for a virtual airline and I need help as to how to get
two images to show up on the same line instead of one breaking onto the next line.
It should be displayed as:
LOGO ICON
But instead it turns into:
ICON
LOGO
Does anyone know how to fix this in the CSS?
Thanks!
Check this jsfiddle
You can make a div for each LOGO and ICON and float them.
<div class="head">
<div class="logo">LOGO</div>
<div class="logo">ICON</div>
</div>
and CSS:
.head { width:100%;}
.logo {float:left; padding:10px;}
First, I have to admit your HTML is screwed up - inline style declarations, incorrect image links, etc.
Replace the #top div with the following in your layout.tpl file:
<!-- Logo + Search + Navigation -->
<div id="top">
<a id="logo" href="<?php echo SITE_URL?>" target="_blank">
<img src="/lib/skins/klm/img/logo.png" alt="Home">
</a>
<img id="fb" src="http://fc04.deviantart.net/fs71/f/2012/295/0/a/facebook_icon_by_x_1337_x-d5ikwkm.png" alt="Facebook">
</div>
Replace the following CSS style declarations with this:
#fb {
float: left;
position: absolute;
display: inline;
width: 50px;
bottom: 0;
right: 0;
}
#logo {
bottom: 0;
display: inline;
left: 0;
position: absolute;
}
#top {
height: 58px;
margin: 0;
padding: 10px 0;
position: relative;
}
try using links instead of using image tags ,,
HTML:
<div class="container">
<a class="one"><a class="two"></a></a>
</div>
CSS:
.one {float:left; background-image: url(../img/logo.png);}
.two {float:right; background-image: url(../img/ico.png);}
or if you still want to use the image tag, you can also use this ..
HTML:
<div class="container">
<img class="one" alt scr="bla">
<img class="two" alt scr="bla">
</div>
CSS:
.container {display:table;}
.one, .two {display:table-column;} -or- .one, .two {display:table-cell;}
if you're going to change the container's size, sure it must fit both of the images.
I need to display an image on the top-right corner of a div (the image is a "diagonal" ribbon) but keeping the current text contained in an internal div, like stuck to the top of it.
I tried different things as including the image in another div or defining its class like:
.ribbon {
position: relative;
top: -16px;
right: -706px;
}
<div id="content">
<img src="images/ribbon.png" class="ribbon"/>
<div>some text...</div>
</div>
but without any luck. The best result I got was all the text scrolled down for the same height size of the image.
Any idea?
You can just do it like this:
<style>
#content {
position: relative;
}
#content img {
position: absolute;
top: 0px;
right: 0px;
}
</style>
<div id="content">
<img src="images/ribbon.png" class="ribbon" alt="" />
<div>some text...</div>
</div>
Position the div relatively, and position the ribbon absolutely inside it. Something like:
#content {
position:relative;
}
.ribbon {
position:absolute;
top:0;
right:0;
}
While looking at the same problem, I found an example
<style type="text/css">
#topright {
position: absolute;
right: 0;
top: 0;
display: block;
height: 125px;
width: 125px;
background: url(TRbanner.gif) no-repeat;
text-indent: -999em;
text-decoration: none;
}
</style>
<a id="topright" href="#" title="TopRight">Top Right Link Text</a>
The trick here is to create a small, (I used GIMP) a PNG (or GIF) that has a transparent background, (and then just delete the opposite bottom corner.)
Try using float: right; and a new div for the top so that the image will stay on top.
Example below:
#left{
float: left;
}
#right{
float: right;
}
<div>
<button type="button" id="left" onclick="alert('left button')">Left</button>
<img src="images/ribbon.png" class="ribbon" id="right">
</img>
</div>
<p>some text...
the image is on the top right corner</p>
<p>some more text...</p>