I'm using WordPress Twenty Sixteen theme. I've created a page and now I have inserted 4 images in it. When I open the page, the images are displayed in vertical order, i.e., 1 above other. They aren't assigned display: block property either. I tried display: inline and display: inline-block properties, but they aren't working. These are clearly shown in inspect element, but they don't affect the elements. (Also, float: left works perfectly, but I want display: inline to work).
What is the problem and how can I solve it?
Here's the text written in the page:
<div id="gal-1">
<img src="http://localhost/microsoft/wp-content/themes/twentysixteen/images/surface.jpg" alt="" />
<img src="http://localhost/microsoft/wp-content/themes/twentysixteen/images/lumia.jpg" alt="" />
<img src="http://localhost/microsoft/wp-content/themes/twentysixteen/images/windows.jpg" alt="" />
<img src="http://localhost/microsoft/wp-content/themes/twentysixteen/images/edge.jpg" alt="" />
</div>
It will work if you use this:
div#gal-1>img {
display:inline;
}
This will match div gal-1 child when it is an img.
Use !important if necessary to override any display: block;
please check your code i think there is break line tag which is causing issue if you remove it will display items inline block;
another solution
instead of using display:inline-block you can do like
#gal-1
{
display:flex;
display: -ms-flexbox;
display: -webkit-flex;
}
#gal-1 img
{
display:inline-flex;
}
Related
I have a div container which contains 3 different divs. I want to place inner divs in a row.
Here is html code:
This is what it should look like.
.partners {
display: inline-block;
display: flex;
flex-direction: row;
width: 100%
}
<div class="partners">
<div>
<img src="media/handshake.png" alt="handshake" class="handshake">
<h1>10+</h1>
<p>partners investing their time and effort to support our mission</p>
</div>
<div>
<img src="media/social-care.png" alt="social care" class="social-care">
<h1>150+</h1>
<p>members working hard to be able to support our mission</p>
</div>
<div>
<img src="media/respect.png" alt="respect" class="respect">
<h1>243+</h1>
<p>donors supporting our community and making impossible possible</p>
</div>
</div>
But the last inner div goes beyond the screen and when I inspect the page it shows that "partners" div contains only first and second inner divs.
How can I solve this?
This is what it looks like when I inspect.The third one is not included in "partners" div
This often happen if you forget to close a tag in html.
Please check the rest of your code to be sure you didn't forget to close any tag. You also can use online unclosed html tags checker like this one :
https://www.aliciaramirez.com/closing-tags-checker/
Did you tried to use something like metroui or even bootstrap ?
I.E.:
With metroUI you can use the grid system to do exactly what you want, see :
https://metroui.org.ua/grid.html#_media_columns
Here is a link explaining how to include metroui in your project :
https://metroui.org.ua/intro.html#_quick_start
This will fix your problem.
.partners{
justify-content:space-around;
display: flex;
width: 100%;
}
.partners div{
width:30%;
}
ypu can set up a max width to the children divs, using like .partners div { width: 30% } and to add some space between them, you can also use .partners { justify-content: space-between; } tip: display inline-block is canceled when you put another display: flex above, try use only flex
Here's some code that contains a tags, one which contains an image.
<div class="container">
Not styled
<img src="image.png">
</div>
If I only want to style the image, how would I do it (without creating a class or something similar)?
For example, if I want to style all the a tags, I could use the following CSS:
.container a {
/* styles here */
}
If I want to style all the img tags, I could use this:
.container img {
/* styles here */
}
Is there a way to apply this same logic to an img in an a tag?
Edit: Here are the styles I'm applying. For some reason, when I use .container a img it adds extra padding/margins.
.container a {
padding: 9px 10px 5px 10px;
}
Edit 2: I think the problem lies elsewhere. Whenever I try any of the suggested responses (i.e. .container a img, #img, src="image.png") they all lead to the amount of vertical padding/margin increasing. Should I delete my post? It seems all it is getting is downvotes right now.
Yes You can do that, Have a look into the demo, it will be applied to all the images under a tag
.container a img {
/* styles here */
}
If you just want a single image to be applied for css, try giving it an ID, then apply css to an id
Demo which applies to all
.container a img{
filter: sepia(100%);
}
<div class="container">
Not styled
<img src="https://www.whistler.com/images/placeholders/200x200.gif" />
<img src="https://www.whistler.com/images/placeholders/200x200.gif" />
</div>
Demo which applies to single id
#img{
filter: invert(100%);
}
<div class="container">
Not styled
<img src="https://www.whistler.com/images/placeholders/200x200.gif" />
<img src="https://www.whistler.com/images/placeholders/200x200.gif" id='img' />
</div>
You can do a nested CSS
.container a img {
/* styles here */
}
.container a img {} is the best way to do it, but every IMG will use the amount of padding/margin that you've given in the .container a {padding: etc }. So try to position the IMG with margins.
I think you can simply use CSS to point exactly to the image like below:
img[src="image.png"]{
}
your question: If I only want to style the image, how would I do it (without creating a class or something similar)?
Now, if you only want that specific image no problem, but if later more and more images will behave the same way you better create a class
note: you didnt specify what styles you wanted for the image, so I asummed you wanted this ones padding: 9px 10px 5px 10px
<div class="container">
Not styled
<img style="padding: 9px 10px 5px 10px;" src="image.png">YES styled
</div>
Give your image a seperated class and then style it in your css
You just to need to write CSS with a in heirarchy as
.container a img {
// your code
}
I am new to all of this and wanted to know how to enlarge my image when I hover over it.
So far I have tried this.
<ul class="enlarge">
<li>
<img src="http://bhushan.wcukdev.co.uk/wp_239/dev/wp-content/uploads/2015/02/Optimized-DSC_0077.jpg" width="150px" height="100px" alt="St John's" />
<span>
<img src="http://bhushan.wcukdev.co.uk/wp_239/dev/wp-content/uploads/2015/03/St-Johns-Pop-up.jpg" />
<br />St John's, Baldock
</span>
</li>
All this does is makes a small image and a large image. I don't know how to use css so if you respond please can it be in HTML code.
Also the HTML code that is coming up in the text box beneath is not what I have written and don't know how to change that.
Thanks for any help in advance.
Sarah
You should really look into CSS or Javascript as otherwise hovering is a near-impossible task. Heres what you can do:
First off, remove the span and use a class to identify the thumbnail.
<ul class="enlarge">
<li>
<img src="http://bhushan.wcukdev.co.uk/wp_239/dev/wp-content/uploads/2015/02/Optimized-DSC_0077.jpg" width="150px" height="100px" alt="St John’s" class="thumbnail" />
<img src="http://bhushan.wcukdev.co.uk/wp_239/dev/wp-content/uploads/2015/03/St-Johns-Pop-up.jpg" class="large-image" />
<br />St John’s, Baldock
</li>
</ul>
Now add some CSS, don't worry, it's rather simple. What we want to accomplish is that when you hover over the thumbnail, we display the larger image. So on hover, we hide the thumbnail and show the larger image. But since we're hiding the thumbnail, we can't hover on it, so we also want to keep displaying the larger image until our cursor moves away from it entirely.
<style type="text/css">
.enlarge .thumbnail + img {
display: none;
}
/* Hovering over the thumbnail, hide the thumbnail */
.enlarge .thumbnail:hover {
display: none;
}
/* Hovering over the thumbnail, show the large image and keep showing it when hovering over the image */
.enlarge .thumbnail:hover + img,
.enlarge .thumbnail + img:hover {
display: block;
}
</style>
The .enlarge select all elements with class="enlarge", the .thumbnail does the same for the class thumbnail. img selects every image element, and the + in the middle says to select any element that comes directly after the preceding, so the line simply reads: select any img element that comes after a .thumbnail element that is inside a .enlarge element. The :hover seems self-explanatory, but here goes anyway: a : selector is called a pseudo-selector and defines a state or meta element (meta elements are elements you can stylise but aren't really there, like ::before and ::after). Metas usually use a ::. There are other pseudo-states as well, like :active. The style that is defined here will only be invoked when that state is invoked. Its the easiest way to make a hover happen!
You can, however, do this with just one image as well:
<img src="http://bhushan.wcukdev.co.uk/wp_239/dev/wp-content/uploads/2015/02/Optimized-DSC_0077.jpg" width="150px" height="100px" alt="St John’s" class="enlarge-image" />
<br />St John’s, Baldock
It simplifies your styling a lot:
<style type="text/css">
.enlarge-image {
width: 150px;
height: auto;
}
/* Show full size on hover */
.enlarge-image:hover {
/* This can be any size you want it to be as well. */
width: auto;
}
</style>
A couple of notes on your code: first off, be aware you have typographic quotes (” compared to regular quotes: ") surrounding your image source. This can lead to issues. Second, an image size is always in pixels unless defined in %, so ommit px from your width and height.
.enlarge-image {
width: 50px;
height: auto;
}
.enlarge-image:hover {
width: auto;
}
<img src="http://bhushan.wcukdev.co.uk/wp_239/dev/wp-content/uploads/2015/02/Optimized-DSC_0077.jpg" width="150" height="100" alt="St John’s" class="enlarge-image" />
<br />St John’s, Baldock
You should start learning css. It is the only way to fix it.
<head>
<style type="text/css">
.picture{
width : 150px;
height : 100px;
}
.picture:hover{
width : 200px;
height : 150px;
}
</style>
</head>
<ul class="enlarge">
<li>
<img src="http://bhushan.wcukdev.co.uk/wp_239/dev/wp-content/uploads/2015/02/Optimized-DSC_0077.jpg" class="picture" alt="St John’s " />
</li>
</ul>
Figured it out, but now it looks rubbish. Anyone know how to hide the other photos when I hover and enlarge one photo as they just move around the larger photo.
That's what I have. I still cant post a photo of what it looks like. Also the last photo when you hover over it it flickers, is this my code or the size of the screen?
Above answer are correct. I am providing you some link which will help you.
http://cssdemos.tupence.co.uk/image-popup.htm
http://jsfiddle.net/4AM3S/
I have a footer with social media icons. I want the icons arranged in a 3 x 3 grid
like below.
# # #
# # #
# # #
I also want it centered in a div. The issue that I'm running into, is that when I float the elements left to keep them on the same line my
margin-left:auto;
margin-right:auto;
Doesnt work, and they just align left. I need a solution that will work for mobile since my whole site is responsive.
Here is the HTML
<div class="d-all m-all" id="mainFooter">
<div class="d1-d4 m-all" id="socialMedia">
<div id="centerIcons">
<img src="images/fb_icon_vi.png"><img src="images/tw_icon_vi.png"><img src="images/in_icon_vi.png">
</div>
</div>
<div class="d5-d8 m-all" id="contact">
Contact
</div>
<div class="d9-d12 m-all" id="awards">
awards
</div>
</div>
And here is the CSS
#mainFooter{
background-color:black;
height:250px;
}
#socialMedia{
background-color:green;
}
#socialMedia img{
display:block;
}
#centerIcons{
background-color:yellow;
width:50%;
margin-left:auto;
margin-right:auto;
height:75px;
}
#centerIcons img{
margin-left:auto;
margin-right:auto;
}
The whole site can be seen HERE
I guess you want to something like this, right?
#socialMedia img {
display: inline-block;
}
#centerIcons{
background-color:yellow;
width:50%;
height:75px;
max-width: 171px;
margin: 0 auto;
}
#centerIcons img{
/* nothing is needed */
}
Explanation:
display: inline-block; will keep as block but not opening a new line
since #centerIcons is a DIV element, it is a block element, to make use of centering effect with margin: 0 auto; a width control is needed
so max-width: 171px; will constraint its width to a maximum of 171px (icon width 57px * 3), you may adjust as you need
Note:
About display property, please refer to W3C's visual formatting model.
About box model specification, you may refer to W3C's box model.
Depends on your browser compatibility plan, max-width does not supported in IE8 below and IE8 have some bugs. For details, you may refer to online compatibility chart like this.
If you are using jQuery and really mean to support IE6-8, you may consider using polyfill such as Scott Jehl's Respond.js
Edit: I think #Matt Smith's answer is what you want, I may have misinterpreted your meaning. Anyway, for your reference.
<img> is a replaced inline element (by default). The image elements sit beside each other like words. Therefore there's no need to change their display type to block (as you have done in the live demo).
I want the icons arranged in a 3 x 3 grid
In order to achieve that, you could wrap each 3 images by a wrapper, and add text-align: center to that element to align the inline images horizontally.
EXAMPLE HERE.
<div id="centerIcons">
<div class="wrapper">
<img src="images/1.png">
<img src="images/2.png">
<img src="images/3.png">
</div>
<div class="wrapper">
<img src="images/4.png">
<img src="images/5.png">
<img src="images/6.png">
</div>
<div class="wrapper">
<img src="images/7.png">
<img src="images/8.png">
<img src="images/9.png">
</div>
</div>
.wrapper {
text-align: center;
}
Add text-align: center to the #centerIcons {} rule and display: inline-block to your #centerIcons img {} rule:
#centerIcons img {
text-align: center;
}
#centerIcons img {
display: inline-block;
}
I'm working with a list of links that reveal an image when hovered.
However when the image is revealed and subsequently hidden a line break is left. Is there any way to avoid this?
Here are some images to show the exact problem:
Before: http://i38.photobucket.com/albums/e126/aaron123456/Screenshot2011-11-10at155956.png
After the images are revealed: http://i38.photobucket.com/albums/e126/aaron123456/Screenshot2011-11-10at160023.png
I'm pretty new to coding, any help you can give would be great.
thanks!
Try this: http://jsfiddle.net/csPw2/
html
<span id="hover_img">Hover!<img src="http://www.google.de/images/srpr/logo3w.png" alt="image" /></span>
<br />
Link1<br />
Link1<br />
...
css
#hover_img img {
display: none;
}
#hover_img:hover img {
display: block;
}
#hover_img:hover + br {
display:none;
}