I have a div that has a photo that has the float: left attribute and text is right next to it, like this:
<div id='1'>
<img src='img.jpg' width='50%' style='float:left;' />
This is text next to it<br/><br/>More text
</div>
I don't know the dimensions of the image, or the height of the text, but the text is often shorter than the image, causing the div to be shorter than the image (which looks really bad). Is there any way I can fix this?
Just add overflow: hidden; to your first div.
Addicionally ids and classes in CSS can not start from numbers.
I think the optimal solution is to add new div at the end and clear everything with it. like this:
CSS in first case:
#1:after{
content: "";
height: 0;
clear: both;
display: block;
}
Second case:
HTML:
<div id='1'>
<img src='img.jpg' width='50%' style='float:left;'>
This is text next to it<br><br>More text
<div class="cl"></div>
</div>
CSS:
.cl {
clear: both;
}
or if you want to run in the oldest versions of IE you can add:
.cl {
font-size: 0;
line-height: 0;
text-indent: -4000px;
clear: both;
}
Related
I have created a grid of images for my site. I created the grid in in my style sheet and then did the images with links in html. I would like to now make it where when I mouse over one of the images, it swaps to another image. I have 18 images, so that is 18 hovers.
thank you
this is the html I use, I use 18 versions of this
<div class="row22">
<div class="column22"><img style="width: 100%;" src="//static.shoplightspeed.com/shops/608846/files/13773857/isabella-shaker.jpg" /></div>
and the css
/* image containers */
.column22 {
float: left;
max-width: 20%;
min-width: 300px;
padding: 5px;
}
/* Clear floats after image containers */
.row22::after {
content: "";
clear: both;
display: table;
}
There are multiple ways of doing this. You can do it with javascript/jquery or you can do it with CSS too.
.Standard{
display:inline-block;
}
.column22:hover .Standard{
display:none;
}
.ShowOnHover{
display:none;
}
.column22:hover .ShowOnHover{
display:inline-block;
}
<div class="row22">
<div class="column22">
<a href="https://www.allegrodanceboutique.com/ambassadors/isabella-shaker">
<img class="Standard" style="width: 100%;" src="https://ichef.bbci.co.uk/news/660/cpsprodpb/37B5/production/_89716241_thinkstockphotos-523060154.jpg" />
<img class="ShowOnHover" style="width: 100%;" src="https://ichef.bbci.co.uk/images/ic/208x117/p0792vnb.jpg" />
</a></div>
Here I have both images in same <a>. En depending on hover or not, I hide/show the images. (Sorry for the bad naming of the classes, I did it to make it more clear for you)
You should know that if you do it this way, all images will be loaded on page. If they are very big, you may not want this, because it will take som time.
In that case you should use Javascript/jquery.
Then you can use this jquery code:
$('.img_class').hide(); // to hide image
$('.img_class').show(); // to show image
I want to hover over a text and display an image then. This works so far, but to be honest the "hitbox" is too small. The image is just getting shown when I actually hover over the text. I would be cool if one could make that hitbox taller. Is there any possible solution for this problem?
$(document).ready(function () {
$('span').hover(function(){
$(this).addClass('under_line');
$(this).prev().show();
},function(){
$(this).removeClass('under_line');
$(this).prev().hide();
});
});
.is_hidden{
display: none;
position: absolute;
}
.under_line{
text-decoration: underline;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<img class="is_hidden" src="http://random-ize.com/lorem-ipsum-generators/lorem-ipsum/lorem-ipsum.jpg" style="z-index:9" width="200px"/>
<span><b>Lorem Ipsum</b></span>
I would love to have it like on this site. Have a look at these tables and then hover over an element like for example like Execute:
It feels so smooth and nice. I already looked with the developer tool into the css of this but couldn't find anything that helps me..
If I understand what you are trying to do correctly, you could try adding some padding and negative margin to your CSS like so:
span {
padding: 30px;
margin: -30px;
}
This will make the element 30px larger on each side, but the negative margin will allow the surrounding text to not be pushed away by the same 30px amount.
There are many ways and it is actually hard to tell what is the best solution without knowing the context, so heres a basic proposal:
span {
display: block;
padding: 10px;
}
You should ofcourse not style the span element in general, but this fits to your example. Better would be to wrap your text in an element and set the style there.
The padding will increase the "hitbox" / size of your element.
Better Solution:
js
$(document).ready(function () {
$('.hovering').hover(function(){
$(this).addClass('under_line');
$(this).prev().show();
},function(){
$(this).removeClass('under_line');
$(this).prev().hide();
});
});
css
.hovering {
padding: 10px;
}
html
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<img class="is_hidden" src="http://random-ize.com/lorem-ipsum-generators/lorem-ipsum/lorem-ipsum.jpg" style="z-index:9" width="200px"/>
<p class="hovering"><b>Lorem Ipsum</b></p>
You could achieve this using pure css. Put the image and text in a div and detect when the div is hovered over, then hide/show the image using the :hover selector.
HTML
<div id="hoverhere">
<img src="http://random-ize.com/lorem-ipsum-generators/lorem-ipsum/lorem-ipsum.jpg"/>
<p>
<b>Lorem Ipsum</b>
</p>
</div>
CSS
img{
width: 200px;
display: none;
position: absolute;
right: -200px;
top: -100px;
}
#hoverhere{
position: relative;
width: 100px;
margin-top: 100px;
}
#hoverhere:hover img{
display: block;
}
#hoverhere:hover p{
text-decoration: underline;
}
Fiddle
http://jsfiddle.net/L7L1bep6/1/
I updated my answer to mimic the site you linked more closely.
I have some html code generated by Wordpress plugin and I want to center vertically the text on the right.I cannot change the HTML code because it's generated by plugin (I have to check if Im allowed to modify its soruce code). In HTML code only DIV tag can be swapped or modified in any way.
But my idea is if this text can be center vertically only by updating existing CSS class definitions and changing only starting and ending DIVs in HTML code?
jsFiddle demo
HTML code:
<div>
<a class="tptn_link" rel="bookmark" href="http://localhost/wordpress/?p=30">
<img class="tptn_thumb" border="1" style="max-width:100px;max-height:100px;" title="Post for TaxTips" alt="Post for TaxTips" src="http://localhost/wordpress/wp-content/plugins/top-10/timthum…2Ftaxhug%2Fimages%2Ffeatured-taxtips.png&w=60&h=60&zc=1&q=75"></img>
</a>
<span class="tptn_after_thumb">
<a class="tptn_link" rel="bookmark" href="http://localhost/wordpress/?p=30">
<span class="tptn_title">
Post for TaxTips
</span>
</a>
<span class="tptn_list_count">
(14)
</span>
</span>
</div>
CSS code:
.tptn_thumb{
margin-right: 10px;
float: left;
}
/* popular post title*/
.tptn_after_thumb{
}
.tptn_after_thumb:after {
content: " ";
display: block;
clear: both;
visibility: hidden;
line-height: 0;
height: 0;
}
If tptn_thumb has a fixed height you can use line-height: 42px; on tptn_title
EDIT:
Sorry, read "vertically" instead of "horizontally". My solution is for a vertical alignment.
EDIT2:
You need to add this css code:
.tptn_title {
line-height: 42px;
}
and remove the line-height from .tptn_thumb{
See the updated FIDDLE
I am building a website using singularity.gs which I am fairly new to.
I am having trouble giving a div a background-color, this is my html structure:
http://oi44.tinypic.com/205xt1i.jpg , the "green" part is my about div.
<div class="about">
<div class="photo">
<img class="photoBorder" src="images/foto_jeroen.png" alt=""/>
</div>
<div class="text">
<h1>Hello I'm Jeroen Druwé</h1>
<p>...</p>
</div>
</div>
To achieve this affect is had to set a height for the div:
#include breakpoint(70em) {
.about {
height: 340px; //This property will set the height of the div
}
.about .photo {
padding: 1em;
#include grid-span(2, 4);
}
.about .text {
padding-top: 7em;
padding-left: 1em;
display: inline;
#include grid-span(4, 6);
}}
If I remove the "height:340px" no background will be drawn:
http://oi39.tinypic.com/2s16ezl.jpg (only my thin borderline)
Is there a way to let the div wrap its height around its content (.photo,.text)?
Note: if i remove #include grid-span for .photo and .text the background shows but I do not want to lose the singularity functionality
Thanks in advance!
Don't span the container.
The problem you experience happens because Singularity columns are floated, and floated elements are taken out of the flow. This means that the container does not "know" about your columns any more, so it behaves like an empty element.
There's a property called clear that positions an element below any nearby floated element. If you create an extra element inside the container after all your columns, the clear: both; rule applied to it will push it below the floated columns, effectively stretching the container as high as columns are:
<div class="about">
<div class="photo">
<img class="photoBorder" src="images/foto_jeroen.png" alt=""/>
</div>
<div class="text">
<h1>Hello I'm Jeroen Druwé</h1>
<p>...</p>
</div>
<div class=clear></div>
</div>
.clear { clear: both; }
But don't add an extra element, that's not semantic. Instead, use the :after pseudo element that appears at the end of an element's contents. Using :after is just like creating a blank element at the end of element's contents.
.about {
&:after {
content: ''; // This is required for the pseudo-element to exist
display: block; // Default display is inline, have to change that for `clear` to work.
clear: both; // Yay, magic!
}
}
This technique is called "clearfix".
This can be done even simpler with the multi-purpose Toolkit extension from Team Sass, the authors of Singularity:
#import 'toolkit';
.about { #extend %toolkit-micro; }
The %toolkit-micro extendable has some additional rules that makes the clearfix trick work in older browsers. There's also the %clearfix-legacy extendable that works even in ancient browsers.
I fixed it.
Forgot to add an #include grid-span(12, 1); for my .about
I want to put one image and one block with two in one line,
but if use float on image,
it will be out of that big block' border.
I don't want to add height to the big block,
because sometimes image doesn't exit.
like this link: images and (p1 + p2 ) in one line.
http://verygif.com/bbs/b/src/138002270032.jpg
sorry for can't post images.
big_block {
border:2px solid #333;
}
<div class="big_block">
{if img exit }<img .... />{/if}
<p>sometext,sometext,sometext,sometext</p>
<p>fulltext,fulltext,fulltext,fulltext</p>
</div>
Just declare overflow: hidden; on the parent <div> container. That will clear the float and ensures that the image does not go beyond the parent's borders by ensuring that the parents wrap around the paragraphs AND the image.
See example here: http://jsfiddle.net/teddyrised/8aeAL/
You can try using display: inline to <p> tags,
p {
margin: 0;
padding: 0;
display: inline;
}
Check this http://jsfiddle.net/tpD2u
I always use something like this:
.big_block img { float: left; }
.big_block:after { display: block; cler: both; content: " "; }
http://jsfiddle.net/QWm4T/