I have an anchor element with in it a div "imgbox" containing an image and a caption, and a div "textbox" containing some text.
Now when I float the div.imgbox, the img element inside is no longer clickable; the caption and the text in the div.textbox is. This only happens in Internet Explorer; all other browsers work just fine.
Does anyone know what's causing this (and how to solve it)? Thanks!
here's the css and html I'm using:
<style>
.wrap a {
display: block;
overflow: hidden;/* makes this a wrap around floats */
cursor: pointer;
}
.imgbox {
float: left;
}
.textbox {
overflow: hidden;/* positions the div next to the float */
}
</style>
<div class="wrap">
<a href="#">
<div class="imgbox">
<img src="http://jaron.nl/misc/dummy.gif" width="80" height="45" alt="" />
caption text is clickable
</div>
<div class="textbox">
some text here
</div>
</a>
</div>
You are using Block element in div in between the img and a link tag .
Related
I have two images, a left arrow and a right arrow, that need to go outside of the text "submit your picture here!" I am actually able to achieve the look I'm going for: http://i.imgur.com/1k1QTE4.jpg ,but I used z-index to do so, which does not stay relative to the text when the screen is made smaller/larger. What would you suggest is the best way to go about this? Here is my code for the text:
<article>
<br>
<p style="text-align:center;font-family:arial">
<font size="4">
<strong>
<span class="white_bg">
Submit your picture here!
</span>
</strong>
</font>
</p>
<br>
<br>
<br>
<br>
<br>
<br>
</article>
There's not really anything (yet in the css) that pertains to this. Thanks!
Edit: Full CSS and HTML
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
<!--
#banner {width:100%}
#banner img {width:100%;height:auto}
nav {width:100%;display:block;}
nav ul {list-style-type:none;margin:0;padding:0;text-
align:center;background-color:#222419}
nav li {display:inline-block;background-color:#222419;}
nav a {line-height:35px; color:white; padding: 0 30px; font-size:18px;
font-family:Arial, sans-serif;background-color:#222419;}
nav a:hover {text-decoration:none}
a{float:left;
margin-right:58px;
margin-left:58px;
color:#000;
text-decoration:none;
}
body {background-image:url("background1.jpg");
background-size:1700px 850px;
background-repeat:no-repeat;
}
.white_bg {background-color:#ffffff;
padding: 1px;
}
.col-split-3 {
-webkit-column-count:3;
-moz-column-count:3;
column-count:3;
text-align:center;
width: 450px;
}
.col-split-3 > div {
display:block;
}
-->
</style>
<meta charset="utf-8"/>
<title>DrawYourPets.com</title>
</head>
<body>
<header>
<nav>
<div style="text-align:center" id="banner">
<img src="drawyourpetsbanner3.jpg" border="0" alt="DrawYourPetsBanner3"/>
</div>
<div>
<ul>
<li><strong>HOME</strong></li>
<li><strong>CONTACT</strong></li>
<li><strong>GALLERY<strong></li>
<li><strong>STORE</strong></li>
</ul>
</div>
</nav>
</header>
<section>
<aside>
</aside>
<article>
<br>
<div class="col-split-3">
<div><img src="arrow1.jpg" width="120" height="120"/></div>
<div><p style="font-family:arial">
<font size="4">
<strong>
<span class="white_bg">
Submit your picture here!
</span>
</strong>
</font>
</div>
<div><img src="arrow2.jpg" width="120" height="120"/></div>
</div>
<br>
<br>
<br>
<br>
<br>
<br>
</article>
</section>
<footer>
<div style="text-align:center" id="banner">
<img src="banner3.jpg" border="0" alt="Banner3">
</div>
</footer>
</body>
</html>
Edit 2 - Columns Centered
I found that the columns are similar to a table, and can only be centered in the css by adding margin-left and margin-right:auto:
.col-split-3 {
margin-left:auto;
margin-right:auto;
-webkit-column-count:3;
-moz-column-count:3;
column-count:3;
text-align:center;
width: 500px;
}
.col-split-3 > div {
display:block;
}
Now my only problem is getting "submit your picture here!" on two lines. I need to find a way to expand the width of the center column. Current screenshot:http://i.imgur.com/wxe79tS.jpg
There are a couple of ways to do this, just from me fiddling around with - Keep In mind: I've only tested these on Chrome because I don't have any other browsers installed on my computer.
Example 1
.img-left {
float: left;
}
.img-right {
float: right
}
.center {
text-align: center;
border: 1px solid black;
}
<br />
<div class="center">
<div class="img-left">
This is the left image
</div>
Text
<div class="img-right">
This is the right image
</div>
</div>
Example 2 (edited)
This one uses a trick of block-level elements inside an element with the column-count CSS property auto splitting into columns. I've not tested this with any large amount of text, but by your example it looks to be a fairly simple application. I've added a width to the parent element to change the spacing between the elements.
.col-split-3 {
-webkit-column-count: 3;
-moz-column-count: 3;
column-count: 3;
text-align: center;
width: 300px;
}
.col-split-3 > div {
display: block;
}
<div class="col-split-3">
<div>Image 1</div>
<div>center text</div>
<div>Image 2</div>
</div>
These were sort of the first two ways that came to mind, I'm sure there's some way to use the ::before and ::after selectors to add images, I just don't currently have the time to fiddle with how.
Using Twitter Bootstrap 3, I have a container, three div place holders, and three images that fill as links each floated side by side and taking up the entire row: When I minimize the screen to make it responsive, I only see the first image (the second two dissapear). What steps would I have to take to make sure that each image becomes responsive and sits one below the other at the minimize dmobile display screen.
Please Note: Each Img. already has class="img-responsive" applied to it.
HTML:
<!--Wide Display Container -->
<div class="wide-display">
<div id="firstholder">
<a href="home.html" title="Home" class="imglink"><img src="/images/slide2.JPG" alt="City Lights Image" class="img-responsive" id="electricone">
<div class="item1">
<h1 class="slickfont1" >First Title</h1>
</div>
</a>
</div>
<div id="secondholder">
<a href="office.html" title="Office" class="imglink"><img src="/images/ant.JPG" alt="City Lights Image" class="img-responsive" id="electrictwo">
<div class="item1">
<h1 class="slickfont1" >Second Title</h1> </div></a>
</div>
<div id="thirdholder">
<a href="reviews.html" title="Locations" class="imglink"><img src="/images/family.JPG" alt="City Lights Image" class="img-responsive" id="thirdelectric">
<div class="item1">
<h1 class="slickfont1" > Third Title</h1>
</div>
</a>
</div>
</div><!-- Wide Display Container -->
CSS:
.wide-display {
min-width:33%;
position: relative;
width: 100%;
height:100%;
margin-top:6px;
overflow: hidden;
height:366px;
}
/*! First img Holder */
#firstholder {
width: 449px;
height: 100%;
float:left;
display:inline-block;
margin-left:1px;
margin-right:0px;
}
.item1 {
width: 24%;
margin: auto;
position:relative;
}
#secondholder {
width: 450px;
height: 100%;
float:left;
display:inline-block;
margin-right:0px;
}
#thirdholder {
width: 449px;
height: 100%;
float:left;
display:inline-block;
}
You have to create Bootstrap Grid to make it work. You can just read the documentation here: http://getbootstrap.com/css/ it's pretty easy to understand. The divs that wrap you images need to have grid classes applied to them.
Sorry, May be my tone is not good,
Question:
I am using CSS3 code of opacity background like this
Edit: (adding code)
CSS:
opecity {
opacity:.75;
content:('Hello');
background:#111 url(../img/view.png) no-repeat center;
}
.opecity img:hover{
-moz-opacity: 0.10;
opacity: 0.10;
-ms-filter:"progid:DXImageTransform.Microsoft.Alpha"(Opacity=70);
background:#000;
}
HTML:
<div class="opecity">
<a class="example-image-link" href="img/port1.png" data-lightbox="example-1">
<img class="example-image" src="img/port1.png" alt="thumb-1" width="250" height="220"/>
</a>
</div>
This code display image only, but not display content 'Hello'. But I want to display image and content together at the same time. I also concern with this
Stackoweflow.com question.
Image and text with opacity background in the same DIV
But I don't get solution.
First line, You've opecity { and you should use .opecity because it's a class.
Separate the Content and place it in his own .classs {}
I.E:
.example-image-link:hover:after {
content:'Hello';
}
It wont work if you use it before or after the image class (Try This)
<\div class="opecity">
<\a class="example-image-link" href="img/port1.png"
data-lightbox="example-1"> <\img class="example-image"
src="http://humor.desvariandoando.com/wp-content/uploads/susto.jpg"
alt="thumb-1" width="250" height="220"/> </div>
.example-image-link:hover:after { content:'Hello'; }
remove the \ and change .example-image-link:hover:after for img:hover:after
The link that you posted they used another method:
try this:
<!DOCTYPE html>
<html>
<body>
<style>
div{
position: relative;
}
span{
background: rgba(0,0,0,0.5);
position: absolute;
bottom: 0;
left: 0;
padding: 6px;
display: block;
}
</style>
<div>
<span>Title</span>
<img src="http://humor.desvariandoando.com/wp-content/uploads/susto.jpg" />
</div>
</body>
</html>
(I took it from your link)
you can test all the html and css here: http://jsfiddle.net/
from W3Schools: "The content property is used with the :before and :after pseudo-elements, to insert generated content."
Try
.opecity:after {
content:'Hello';
}
I'm using http://www.paulvanroekel.nl/picasa/visuallightbox/ plugin, to create a gallery, actually works perfectly, but I have a problem with the blank spaces between images, cause by the different image dimensions, so I need to create something like this
https://pbs.twimg.com/media/BM-usuxCIAAthp9.jpg:large to keep the grid consistent between all the images.
The markup is:
<div>
<a>
<img>
</a>
</div>
I try the #caramba solution resulting in this
http://jsfiddle.net/montogeek/x4PJ5/
How I can change the dimensions of the image to look consistent?
something like this ?
http://jsfiddle.net/rzWKR/1/
<div class="img-box">
<img src="https://pbs.twimg.com/media/BM-usuxCIAAthp9.jpg:large" alt="" />
</div>
<style type="text/css">
.img-box {
position:relative;
border:solid 2px red;
width:280px;height:250px;
overflow:hidden;
}
.img-box > img {
position:absolute;
left:-10px;
top:-10px;
}
</style>
I am attempting to overlay an image above a pdf embedded in and iFrame.
This code results in the image falling behind the iFrame (tested by changing the bottom attribute to -10px and the bottom of the image becomes visable)
The only two methods I was aware of were using z-index, and the fact position absolute should place the object on top, but neither appear to be working.
<div id="images" style="float:right;position:relative" width="400" height="250">
<img src="images/Next_Black_Arrow.png" style="height:25px;width25px;float: left;z-index=10;position:absolute;bottom:10px;left:250px;">
<iframe SRC="testFiles/Categories of pattern matching characters.pdf#toolbar=0&navpanes=0&scrollbar=0" style="z-index=1;position:relative;" width="400" height="250"></iframe>
</div>
*Applogies for the lack of separated css
While that works, unfortunately it doesn't if you change the iframe link to a pdf.
See http://jsfiddle.net/vr4rX/4/
I think it must be a bug in the adobe reader. Could really do with a work around.
have a look at my solution: http://jsfiddle.net/vr4rX/1/
HTML:
<div id="images">
<img src="http://t1.ftcdn.net/jpg/00/02/78/72/400_F_2787285_mlDf8ah974XHflVFrbQB3FM6Qxu1MT.jpg" />
<iframe SRC="http://www.google.de" width="400" height="250"></iframe>
</div>
CSS:
#images {
float:right;
width: 400px;
height: 250px;
position: relative;
z-index: 1;
}
#images img {
height:25px;
width:25px;
z-index=2;
position:absolute;
bottom:20px;
right:20px;
}