I'm having a bit of problem here.
I'm trying to display an image in a circle div (using bootstrap), that when hover, the picture becomes a gif, but if you take your mouse from over the picture, it is only a static image.
It works, almost, as it moves the picture and the frame around, and I can not find why.
Here it is http://jsfiddle.net/eve_mf/zmp7tnho/
<div class="container">
<div class="titleColumns col-md-24">
<h1>Meet Some Of <strong>Our Denison Experts</strong></h1>
<h2>We can have a line about the team</h2>
<div class="personPic col-md-6">
<div class="circleFrame"><img class="static img-circle alignleft wp-image-1008 size-full" src="http://motors06.denison-automotive.co.uk/denison/wp-content/uploads/2015/05/jules_sil5.png" alt="" width="120" height="120" />
<img class="animated img-circle alignleft wp-image-1008 size-full" src="http://motors06.denison-automotive.co.uk/denison/wp-content/themes/denison-automotive/images/jules_sil_gif.gif" alt="" width="120" height="120" /></div>
<span class="peopleName">Jules Perry</span>
<span class="peoplePos">The Thinker</span>
</div>
<div class="personPic col-md-6">
<div class="circleFrame"><img class="static img-circle alignleft wp-image-1012 size-full" src="http://motors06.denison-automotive.co.uk/denison/wp-content/uploads/2015/05/tessa_sil2.png" alt="" width="120" height="120" />
<img class="animated img-circle alignleft wp-image-1012 size-full" src="http://motors06.denison-automotive.co.uk/denison/wp-content/themes/denison-automotive/images/tessa_sil_gif.gif" alt="" width="120" height="120" /></div>
<span class="peopleName">Tessa Denison</span>
<span class="peoplePos">The Creative</span>
</div>
</div>
</div>
I'm just working with html and css
Any suggestions? I've tried to remove all the styles but even then, there is a movement between the pictures and are the same size..
Thank youuuu
In fact, you don't need to set a position at all.
.circleFrame:hover .animated {
display:block;
}
http://jsfiddle.net/zmp7tnho/4/
I recommend you to set border styles to circleFrame too - http://jsfiddle.net/d3z849y7/
It helps you with freezing borders.
Related
I am using bootstrap 4 and I'm trying to get the left of my header to look like this:
The html i've done is this below but i'm stuck here:
<nav class="navbar navbar-light bg-light">
<div class="container-fluid">
<a class="navbar-brand" href="#">
<img src="./images/logo.png" alt="">
<span>TITLE HERE</span>
</a>
<div>
<img src="./images/icon1.png" alt="" />
<img src="./images/icon2.png" alt="" />
<img src="./images/icon3.png" alt="" />
<img src="./images/icon4.png" alt="" />
<img src="./images/icon5.png" alt="" />
</div>
</div>
</nav>
How can I get something similar to the image above?
About your images
You don't need to define height on each img, there must be a problem on some custom CSS or in your image path... maybe give us any more info we need to know, what's the styling of your nav ?
Here, as you can see, i tried your code and the images are
You can see that each img line is formed like this :
<img height="32" src="https://external-content.duckduckgo.com/iu/?u=http%3A%2F%2Fcdn.onlinewebfonts.com%2Fsvg%2Fimg_275609.png" alt="" />
And if you remove it, you'll see that the image appears in full size !
About the second line in the navbar
In your code, there is a full width container which is container-fluid div.
You need to close that down to start a new line :
<nav class="navbar navbar-light bg-light">
<div class="container-fluid">
<a class="navbar-brand" href="#">
<img src="./images/logo.png" alt="">
<span>TITLE HERE</span>
</a>
</div> <!-- Here the line ends -->
<div> <!-- THIS div in now under the container -->
<img src="./images/icon1.png" alt="" />
<img src="./images/icon2.png" alt="" />
<img src="./images/icon3.png" alt="" />
<img src="./images/icon4.png" alt="" />
<img src="./images/icon5.png" alt="" />
</div>
</nav>
I am trying to place social media icons total 6 floated right to right top most corner in my storefront word press.This container i am placing above the head section with bootstrap container.check image attached as the space between columns is too large.Any suggestions with or without bootstrap.
Tried below
<div class="container-fluid">
<div class="row no-gutter" >
<div class="col-md-6" style="background-color:#d9eaf2;color: #6666ccff;font-family: Roboto,Tahoma,Helvetica,sans-serif;font-size: 14px;margin-bottom: 6px;">
</div>
<div class="col-md-1"><img class="aligncenter size-full wp-image-240" src="#iconfinder_facebook_circle_color_107175-e1547916268272.png" alt="" width="28" height="28" /></div>
<div class="col-md-1"><img class="aligncenter size-full wp-image-247" src="#iconfinder_instagram_circle_color_107172-e1547916926464.png" alt="" width="28" height="28" /></div>
<div class="col-md-1"><img class="aligncenter size-full wp-image-246" src="#iconfinder_youtube_circle_color_107167-e1547916948298.png" alt="" width="28" height="28" /></div>
<div class="col-md-1"><img class="aligncenter size-full wp-image-245" src="#iconfinder_pintrest__social__media__icon_2986063-e1547916959860.png" alt="" width="28" height="28" /></div>
<div class="col-md-1"><img class="aligncenter size-full wp-image-244" src="#iconfinder_google_circle_color_107180-e1547916968579.png" alt="" width="28" height="28" /></div>
<div class="col-md-1"><img class="aligncenter size-full wp-image-242" src="#iconfinder_twitter_circle_color_107170-e1547916988283.png" alt="" width="28" height="28" /></div>
</div>
</div>
css
/* remove spacing between middle columns */
.row.no-gutter [class*='col-']:not(:first-child):not(:last-child) {
padding-right:0;
padding-left:0;
}
/* remove right padding from first column */
.row.no-gutter [class*='col-']:first-child {
padding-right:0;
}
/* remove left padding from first column */
.row.no-gutter [class*='col-']:last-child {
padding-left:0;
}
/* only for column content visible */
.col-md-1>div {background-color:#ddd;}
kindly check on code pen https://codepen.io/nhui77777777/pen/pqMOyZ
actual problem:
You can use the bootstrap align class align-middle to align it.
Like:
<div class="col-md-1 align-middle"><img class="aligncenter size-full wp-image-240" src="#iconfinder_facebook_circle_color_107175-e1547916268272.png" alt="" width="28" height="28" /></div>
The problem is that you added each image to their own column, and as the page grows, each column will have the same width much larger than the images.
You should put all images inside the same column and raise its size to col-md-6.
/* remove spacing between middle columns */
.row.no-gutter [class*='col-']:not(:first-child):not(:last-child) {
padding-right:0;
padding-left:0;
}
/* remove right padding from first column */
.row.no-gutter [class*='col-']:first-child {
padding-right:0;
}
/* remove left padding from first column */
.row.no-gutter [class*='col-']:last-child {
padding-left:0;
}
/* only for column content visible */
.col-md-1>div {background-color:#ddd;}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<div class="container-fluid">
<div class="row no-gutter" >
<div class="col-md-6" style="background-color:#d9eaf2;color: #6666ccff;font-family: Roboto,Tahoma,Helvetica,sans-serif;font-size: 14px;margin-bottom: 6px;">
</div>
<div class="col-md-6"><img class="aligncenter size-full wp-image-240" src="https://via.placeholder.com/28" alt="" width="28" height="28" />
<img class="aligncenter size-full wp-image-247" src="https://via.placeholder.com/28" alt="" width="28" height="28" />
<img class="aligncenter size-full wp-image-246" src="https://via.placeholder.com/28" alt="" width="28" height="28" />
<img class="aligncenter size-full wp-image-245" src="https://via.placeholder.com/28" alt="" width="28" height="28" />
<img class="aligncenter size-full wp-image-244" src="https://via.placeholder.com/28" alt="" width="28" height="28" />
<img class="aligncenter size-full wp-image-242" src="https://via.placeholder.com/28" alt="" width="28" height="28" /></div>
</div>
</div>
I have this code, I heard that hspace will be not in use anymore. How can I add space between them on above and between 10px would be good, I tried with margin-top did not worked and broke my other widgets as well.
Here is an example:
Here the code does not have space between them on vertical
This is the wide view here it looks better, once resized into smaller screens I get the above result
I would like to have 10px beween them and when resized on top too.
I want them all in once code, since this is a widget I want it with built in CSS.
<div align="center">
<a href="https://facebook.com/testclue">
<img src="http://uhl.hosting/wp-content/uploads/2016/02/Facebook.png" align="middle" alt="TestClue on Facebook" height="60" width="60" hspace="10">
</a>
<a href="https://twitter.com/testclue">
<img src="http://uhl.hosting/wp-content/uploads/2016/02/Twitter.png" align="middle" alt="TestClue on Twitter" height="60" width="60" hspace="10">
</a>
<a href="https://www.linkedin.com/company/testclue">
<img src="http://uhl.hosting/wp-content/uploads/2016/02/in.png" align="middle" alt="TestClue on LinkedIN" height="60" width="60" hspace="10">
</a>
<a href="https://plus.google.com/+Testclue">
<img src="http://uhl.hosting/wp-content/uploads/2016/02/G.png" align="middle" alt="TestClue on Google+" height="60" width="60" hspace="10">
</a>
</div>
I would recommend to remove all the inline code that you have on your tags, as some of them got deprecated or are not as useful as the CSS.
I would suggest you to do something like this.
For the HTML:
<div id="social-networks-container">
<div class="social-network">
<a href="https://facebook.com/testclue">
<img src="http://uhl.hosting/wp-content/uploads/2016/02/Facebook.png" />
</a>
</div>
<div class="social-network">
<a href="https://twitter.com/testclue">
<img src="http://uhl.hosting/wp-content/uploads/2016/02/Twitter.png" />
</a>
</div>
<div class="social-network">
<a href="https://www.linkedin.com/company/testclue">
<img src="http://uhl.hosting/wp-content/uploads/2016/02/in.png" />
</a>
</div>
<div class="social-network">
<a href="https://plus.google.com/+Testclue">
<img src="http://uhl.hosting/wp-content/uploads/2016/02/G.png" />
</a>
</div>
</div>
And for the CSS:
#social-networks-container .social-network {
display: inline-block;
margin: 10px;
}
#social-networks-container .social-network a {
display: block;
}
An example of this working: https://jsfiddle.net/vfvhqvzf/1/
UPDATE:
If you just want to use inline code on your html you could also try this:
<div style="display:inline-flex;">
<a href="https://facebook.com/testclue" style="display: block;padding: 10px;">
<img src="http://uhl.hosting/wp-content/uploads/2016/02/Facebook.png" />
</a>
<a href="https://twitter.com/testclue" style="display: block;padding: 10px;">
<img src="http://uhl.hosting/wp-content/uploads/2016/02/Twitter.png" />
</a>
<a href="https://www.linkedin.com/company/testclue" style="display: block;padding: 10px;">
<img src="http://uhl.hosting/wp-content/uploads/2016/02/in.png" />
</a>
<a href="https://plus.google.com/+Testclue" style="display: block;padding: 10px;">
<img src="http://uhl.hosting/wp-content/uploads/2016/02/G.png" />
</a>
</div>
Demo: https://jsfiddle.net/vfvhqvzf/4/
Maybe you can try this:
padding: 10px;
Add:
style="padding-top:10px;"
to each 'a' (anchor) element
http://boythemovie.co.nz/wordpress/downloads-2
Thanks to WP formatting, the images with captions sit in their own divs, whilst the others are all within a single <p> tag.
What I would like is for all the images, with or without captions, to flow nicely.
For now I have:
HTML - which I can't change:
<div style="width: 250px" class="wp-caption alignnone" id="attachment_158">
<a href="http://boythemovie.co.nz/wordpress/wp-content/uploads/WaihauBay.jpg">
<img width="240" height="159" alt="" src="http://boythemovie.co.nz/wordpress/wp-content/uploads/WaihauBay-240x159.jpg" title="WaihauBay" class="size-medium wp-image-158 ">
</a>
<p class="wp-caption-text">
Caption text goes here
</p>
</div>
<p>
<a href="http://boythemovie.co.nz/wordpress/wp-content/uploads/1011.jpg">
<img width="240" height="160" alt="" src="http://boythemovie.co.nz/wordpress/wp-content/uploads/1011-240x160.jpg" title="1011" class="alignnone size-medium wp-image-162">
</a>
<a href="http://boythemovie.co.nz/wordpress/wp-content/uploads/1062.jpg">
<img width="240" height="159" alt="" src="http://boythemovie.co.nz/wordpress/wp-content/uploads/1062-240x159.jpg" title="1062" class="alignnone size-medium wp-image-164">
</a>
<a href="http://boythemovie.co.nz/wordpress/wp-content/uploads/1064.jpg">
<img width="240" height="160" alt="" src="http://boythemovie.co.nz/wordpress/wp-content/uploads/1064-240x160.jpg" title="1064" class="alignnone size-medium wp-image-166">
</a>
<a href="http://boythemovie.co.nz/wordpress/wp-content/uploads/521.jpg">
<img width="240" height="160" alt="" src="http://boythemovie.co.nz/wordpress/wp-content/uploads/521-240x160.jpg" title="521" class="alignnone size-medium wp-image-168">
</a>
<a href="http://boythemovie.co.nz/wordpress/wp-content/uploads/519.jpg">
<img width="240" height="160" alt="" src="http://boythemovie.co.nz/wordpress/wp-content/uploads/519-240x160.jpg" title="519" class="alignnone size-medium wp-image-170">
</a>
<a href="http://boythemovie.co.nz/wordpress/wp-content/uploads/507.jpg">
<img width="240" height="360" alt="" src="http://boythemovie.co.nz/wordpress/wp-content/uploads/507-240x360.jpg" title="507" class="alignnone size-medium wp-image-171">
</a>
<a href="http://boythemovie.co.nz/wordpress/wp-content/uploads/508.jpg">
<img width="240" height="360" alt="" src="http://boythemovie.co.nz/wordpress/wp-content/uploads/508-240x360.jpg" title="508" class="alignnone size-medium wp-image-172">
</a>
<a href="http://boythemovie.co.nz/wordpress/wp-content/uploads/BOY_1.jpg">
<img width="240" height="159" alt="" src="http://boythemovie.co.nz/wordpress/wp-content/uploads/BOY_1-240x159.jpg" title="BOY_1" class=" alignnone">
</a>
<a href="http://boythemovie.co.nz/wordpress/wp-content/uploads/BOY_3.jpg">
<img width="240" height="311" alt="" src="http://boythemovie.co.nz/wordpress/wp-content/uploads/BOY_3-240x311.jpg" title="BOY_3">
</a>
<a href="http://boythemovie.co.nz/wordpress/wp-content/uploads/BOY_2.jpg">
<img width="240" height="158" alt="" src="http://boythemovie.co.nz/wordpress/wp-content/uploads/BOY_2-240x158.jpg" title="BOY_2" class="alignnone size-medium wp-image-175">
</a>
<a href="http://boythemovie.co.nz/wordpress/wp-content/uploads/BOY_5.jpg">
<img width="240" height="160" alt="" src="http://boythemovie.co.nz/wordpress/wp-content/uploads/BOY_5-240x160.jpg" title="BOY_5" class="alignnone size-medium wp-image-177">
</a>
</p>
CSS:
.wp-caption {
float: left;
}
#content img {
float: left;
}
Any help in understanding how floated elements work in this case would be greatly appreciated!
Floated elements should normally be used to wrap text around a certain element, for instance, your image. From my estimates of your question, you are trying to position caption for an image so that the position of other images are not disturbed.
Why not use the display:inline-block property. In that manner you can have plenty of such parent div enclosing n number of elements without affecting the position of elements outside this div
It can be summarized as follows.
<div id="theGlobalDiv">
<div id="withCaption" style="display:inline-block" >
<img src="image.jpeg" />
<p id="caption">Some caption inserted here</p>
</div>
<div id="withoutCaption" style="display:inline-block" >
<img src="image2.jpeg" />
</div>
</div>
Hence, display:inline-block will display withCaption and withoutCaption in one line but the elements inside them will be on successsive lines. NOTE that inline-block works only when elements using this property are inside another block level element. Hence, if you try to enclose div inside a p or two or more divs as ultimate parent elements, set to this property, then it will fail to achieve the desired flow
When i display below, the text 'Here is some text' is below the image - i want it to show to the right of the image?
<div style="width:50px;">
<img src="http://assets.devx.com/MS_Azure/azuremcau.jpg" alt="blah" width="70" height="70" />
</div>
<div style="width:150px;">
<h2>Here is some text</h2>
</div>
<div style="width:50px; display: inline-block;">
<img src="http://assets.devx.com/MS_Azure/azuremcau.jpg" alt="blah" width="70" height="70" />
</div>
<div style="width:150px; display: inline-block">
<h2>Here is some text</h2>
</div>
changed float:left to display:inline-block. This is a better solution because it doesn't remove items from the document flow. Make sure you specify a width for every one though.
<div style="float: left; margin-right: 10px;">
<img src="http://assets.devx.com/MS_Azure/azuremcau.jpg" alt="blah" width="70" height="70" />
</div>
<div style="width: 300px;">
<h2>Here is some text</h2>
</div>
<br style="clear: both;" />
This should work.