The hyperlink on the first image does not work, on the second image it does. If I move the first image more to the right, only the right part of the image has a working hyperlink! Any help is appreciated!
I use the following styles:
.spc {position: absolute; top: 220px; }
.r {position: relative; top: 1px; }
.k1 {position: relative; left: 1px; }
.k2 {position: relative; left: 129px; }
The images are positioned with:
<div class="spc"><div class="r"><div class="k1">
<img src="pic1">
</div></div></div>
<div class="spc"><div class="r"><div class="k2">
<img src="pic2">
</div></div></div>
Put a href before div
<a href="link.html"><div class="spc"><div class="r"><div class="k1">
<img src="pic1"></a></a>
</div></div></div>
<a href="link.html"><div class="spc"><div class="r"><div class="k2">
<img src="pic2">
</div></div></div>
</a>
It is because your second div is overlapping the first div (coz u are taking as left:129px).
Here is the demo http://jsfiddle.net/mKZz7/
Related
What should be the proper style for the IMG in order to work as a background for the Div? I don't want to use CSS to set the background on div because I will have many LI with different DIVS and images every time.
<li class="container">
<div class="inside"> some elements
<img src="some image"></img>
</div>
</li>
I would still use CSS, but inline:
<li class="container" style="background-image:url(image.jpg) top left no-repeat">
Using an image tag for background is poor semantic.
Hei!
The style for IMG in order to work as a background for the DIV:
.inside{position:relative;}
img{position:absolute;left:0;top:0;z-index:-1;}
You can position it with respect to the parent with position: absolute
To view the contents on top, I have used a priority z-index: 1 for the span element.
.inside {
position: relative;
}
img {
position: absolute;
top: 0;
left: 0;
}
span {
position: absolute;
z-index: 1;
}
<li class="container">
<div class="inside"><span>Some Elements</span>
<img src="http://placehold.it/500x500" />
</div>
</li>
You can try like this :
<div class="div_img">
</div>
And css:
.img{
background-image: url('../images/div_img.jpg');
}
I beleive following can help, (without separate CSS)
<div class="inside" style="background-image:url('xyz.jpg');height:xypx; width=xzpx;">
</div>
In action:
http://jsfiddle.net/paulius_m/1xq2gn9s/4/
In details:
I have a big container for group of pictures.
In that container, I have 100x100 px containers floating to the left one beside another.
In each of those containers I have two images surrounded by anchor tags (both looks close to like that: <img src="/thumbnail.jpg" /><img src="download_button.jpg" />).
The first image/link is the thumbnail. The size of the thumbnail could vary, but will never exceed 100px in height and 100px in width. This is know from the server side. Basically, link of the thumbnail is for invoking a lightbox feature (I am skipping describing lightbox feature here, just know it is).
The second image/link is kind of download button. The button is always 20x20px. This is for downloading the biggest version of the same picture.
The thumbnail must be in the middle/center of floating 100x100 px div.
The download button (a/img tags) must be in the left bottom corner of the thumbnail.
The problem:
The problem is that I cannot figure out how to align the main image inside of middle/center of the 100x100 container and place the 20x20 download button on the left bottom corner of the image. The best version of what I have achieved so far could be seen in the jsfiddle link mentioned above.
Edit:
- The download button must always be on top of the image.
Markup (same as in jsfiddle link):
(HTML)
<div class="images">
<div class="image_container_outer">
<div class="image_container_inner">
<a href="http://lorempixel.com/100/67/" class="uploaded_image">
<img src="http://lorempixel.com/100/67/" class="uploaded_image">
</a>
<a href="bigger_image.png" download="bigger_image.png" class="download_button">
<img src="http://goo.gl/vEUcp6" class="download_button">
</a>
</div>
</div>
<div class="image_container_outer">
<div class="image_container_inner">
<a href="http://lorempixel.com/100/67/" class="uploaded_image">
<img src="http://lorempixel.com/100/67/" class="uploaded_image">
</a>
<a href="bigger_image.png" download="bigger_image.png" class="download_button">
<img src="http://goo.gl/vEUcp6" class="download_button">
</a>
</div>
</div>
<div class="image_container_outer">
<div class="image_container_inner">
<a href="http://lorempixel.com/60/100/" class="uploaded_image">
<img src="http://lorempixel.com/60/100/" class="uploaded_image">
</a>
<a href="bigger_image.png" download="bigger_image.png" class="download_button">
<img src="http://goo.gl/vEUcp6" class="download_button">
</a>
</div>
</div>
<div class="image_container_outer">
<div class="image_container_inner">
<a href="http://lorempixel.com/100/67/" class="uploaded_image">
<img src="http://lorempixel.com/100/67/" class="uploaded_image">
</a>
<a href="bigger_image.png" download="bigger_image.png" class="download_button">
<img src="http://goo.gl/vEUcp6" class="download_button">
</a>
</div>
</div>
<span class="clear_left"></span>
</div>
(CSS)
.image_container_outer {
display: block;
float: left;
height: 105px;
padding-top: 5px;
text-align: center;
vertical-align: middle;
width: 110px;
background-color: #000;
border: 1px solid #ffff00;
}
.image_container_inner {
display: inline-block;
height: 100px;
position: relative;
width: 100px;
background-color: #999;
}
a.uploaded_image {
bottom: 0;
display: inline-block;
left: 0;
position: absolute;
}
img.uploaded_image {
border: 0 none;
border-radius: 2px 0;
bottom: 0;
box-shadow: 5px 5px 50px -6px rgba(50, 50, 50, 0.3);
display: inline-block;
left: 0;
position: absolute;
}
a.download_button {
bottom: 0;
display: inline-block;
left: 0;
position: absolute;
}
img.download_button {
background-color: #fff;
border-radius: 2px;
bottom: 0;
display: inline-block;
left: 0;
position: absolute;
width: 20px;
}
Here's a JSFIDDLE to explain how this works.
And here is a JSFIDDLE from your code
To place something to absolute center use css like so:
position:absolute;
top:0;
right:0;
bottom:0;
left:0;
margin:auto;
and to place in the bottom left corner use css like:
position:absolute;
bottom:0;
left:0;
And to make the button on top of the image you can use:
z-index: 9999;
In your div create figure element, and then figcaption, this figcaption always on the bottom left side. in this figcaption create your button. may be its helpful.
<figure>
<img src="abcsd" alt="dsaer" width="304" height="228">
<figcaption>Your Button</figcaption>
</figure>
I'm trying to get a very specific look for my navigation. I want the background to be a solid image and I want the links to be separated text images that float above it to make it look like a piece. I've got it aligned perfectly, the issue is that I can't get the links to appear above the background. The code is below:
<div id=Navigation>
<div id="NavBar">
<img src="Site Images/Navigation/Nav_BG.png"/>
</div><!--Nav Bar -->
<div id="NavLinks">
<a href="x"><img src="" /><a>
<a href="x"><img src="" /><a>
<a href="x"><img src="" /><a>
<a href="x"><img src="" /><a>
<a href="x"><img src="" /><a>
<a href="x"><img src="" /><a>
</div><!-- End of Navlinks -->
</div><!-- End of Navigation Div -->
The CSS is
#Navigation {
height: 810px;
width: 350px;
float: left;
}
#NavBar {
position: absolute;
z: 2; /* What is `z`? */
}
#NavLinks{
float: none;
z: 1; /* What is `z`? */
}
I tried the z attribute but it's not working. I know that something is wrong. The div id="Navigation" must float left, or the div id="content" (not added here) won't be next to it.
Interchange the values of z-index in css of rules
#NavBar
and
#NavLinks
I would delete the background div and set the background with css like this:
HTML:
<div id="nav_links">
</div>
CSS:
#nav_links{
background-image: url('path'); /*Put here the path to your background image*/
}
Maybe if you add more information about your problem I can give you better advice.
I guess the problem is at CSS attribute z that you used. I can find anything about this, so I guess you mean z-index.
Try to change to the CSS below:
#Navigation {
height: 810px;
width: 350px;
float: left;
}
#NavBar {
position: absolute;
z-index: 2 /* `z-index` instead of `z` */
}
#NavLinks{
float: none;
z-index: 1;
}
It should give you the expected result.
i have this div used as an information container on my page, i want to make a read more button on the bottom of the first div but cant do it, i tried position:relative and every other method i know to accomplish this but couldn't make it. any suggestion
<div class="main_banner" style="margin-left:46px;">
<center><b><h3 style="color:purple;padding-top:2px;margin-bottom:0">header1</h3></b></center>
<center><img src="images/pic1.png" width="275px" height="103px" /></center>
<p class="index_services_p">some text</p>
<br>
<a style="padding-top:2px;float:left;padding-left:10px;" href="#" style="float:left">
<img src="images/read-more.png" width="172px" height="32px" />
</a>
<div>
any suggestions will be appritiated.
the goal here is to make the always appear on the bottom of the main_banner DIV
The code doesn't make sense to the question you're asking.
However you can align an element to the bottom of another element by placing the parent relative and the child absolute:
HTML
<div>
Lorem ipsum
read more
</div>
CSS
div {
background: lightgreen;
width: 200px;
height: 200px;
position: relative;
}
div a {
display: block;
background: lightblue;
position: absolute;
bottom: 0;
right: 0;
}
DEMO.
The HTML..
<div class="main-banner">
BLAH..
<a class="read-more" href="#"></a>
</div>
The CSS...
.main-banner{
position: relative;
//other styles.
}
.read-more{
position: absolute;
top: 0px;
right: 0px;
left: 10px;
bottom: 10px;
}
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.