I have tried everything I can think of and read lots of posts on here. I cannot figure out what is wrong with my code, it's probably something silly knowing my luck.
Anyway, I am trying to put 4 navigation images in a line, which I've done before, and have them be fixed on the page. For some reason I'm having an issue. I've tried floating them and I just can't seem to get them all to fall in line, I've got two of them to float in a line, then some text links, then the next two break and float on their own.
Sorry if this is overly simple, I don't usually have issues like this.
For the record, I haven't "fixed" them yet, I wanted them to fall in line first.
Here is my code:
<div id="Container">
<a style="float: left;" href="#">
<img src="http://127.0.0.1/wp/wp-content/uploads/2016/06/FirstArrowsLikeACatPagenJewelryPentagramsSilverWiccanNecklaceBracelet.png" alt="FirstArrowsLikeACatPagenJewelryPentagramsSilverWiccanNecklaceBracelet" width="68" height="50" class="aligncenter size-full wp-image-158"
/>
</a>
<a style="float: left;" href="#">
<img src="http://127.0.0.1/wp/wp-content/uploads/2016/06/PreviousArrowsLikeACatPagenJewelryPentagramsSilverWiccanNecklaceBracelet.png" alt="PreviousArrowsLikeACatPagenJewelryPentagramsSilverWiccanNecklaceBracelet" width="50" height="50" class="alignnone size-full wp-image-161"
/>
</a>
1 2 3
<a style="float: left;" href="#">
<img src="http://127.0.0.1/wp/wp-content/uploads/2016/06/NextArrowsLikeACatPagenJewelryPentagramsSilverWiccanNecklaceBracelet.png" alt="NextArrowsLikeACatPagenJewelryPentagramsSilverWiccanNecklaceBracelet" width="50" height="50" class="alignnone size-full wp-image-160"
/>
</a>
<a style="float: left;" href="#">
<img src="http://127.0.0.1/wp/wp-content/uploads/2016/06/LastArrowsLikeACatPagenJewelryPentagramsSilverWiccanNecklaceBracelet.png" alt="LastArrowsLikeACatPagenJewelryPentagramsSilverWiccanNecklaceBracelet" width="68" height="50" class="alignnone size-full wp-image-159"
/>
</a>
</div>
The first item has WP class aligncenter, which works against what you want to achieve.
After the second one, there are indeed three text links, which are inline, which is also against what you want to achieve.
Related
Code like this:
<div>Overall Advance Rating(1 foodees rated)</div>
<a href="#">
<img src="#"/>
<img src="#"/>
<img src="#"/>
<img src="#"/>
<img src="#"/>
</a>
Here am getting cursor after rating images also. How can i handle cursor until images only. I had tried with width and max width but not able to get solution.
You are trying to only have the pointer cursor over the images and not in between if I understand your question correctly. If so, try this:
a { cursor: default; }
a img { cursor: pointer; }
<div>Overall Advance Rating(1 foodees rated)</div>
<a href="#">
<img src="#"/>
<img src="#"/>
<img src="#"/>
<img src="#"/>
<img src="#"/>
</a>
Otherwise I believe you might have to try harder to get your question across.
See comments please, we need to get a better explanation of what you need. If I understand you, you need to individualize img with anchor? Maybe this?
<a href="#">
<img src="#"/>
</a>
<a href="#">
<img src="#"/>
</a>
etc etc
I am very new to html and css coding and recently i created my own website using wordpress.
In one of the pages in wordpress i wanted to add images next to each other separated with a small space; something that i did successfully but unfortunately the images are not horizontally aligned. The second and third images are positioned further down from the first image.
The html coding that i used without making any changes to css is the following:
<a href="http://www.mywebsite.com/wp-content/uploads/2015/03/Image_1.jpg"><img style="float: left;" src="http://www.mywebsite.com/wp-content/uploads/2015/03/Image_1-150x150.jpg" alt="Image_1" width="150" height="150" hspace="10" />
</a>
<a href="http://www.mywebsite.com/wp-content/uploads/2015/03/Image_2.jpg"><img style="float: left;" src="http://www.mywebsite.com/wp-content/uploads/2015/03/Image_2-150x150.jpg" alt="Image_2" width="150" height="150" hspace="10" />
</a>
<a href="http://www.mywebsite.com/wp-content/uploads/2015/03/Image_3.jpg"><img style="float: left;" src="http://www.mywebsite.com/wp-content/uploads/2015/03/Image_3-150x150.jpg" alt="Image_3" width="150" height="150" hspace="10/" />
</a>
Any help will be much appreciated.
Many Thanks
Demis
You need to write little CSS to do the Work. Here is detailed info how to do it.
# Punctweb
for some reason the following code worked Punctweb. I just added the images next to each other. although i think this code doesnt look very correct
<img class=" alignnone" style="float: left;" src="http://www.infosyntaxis.com/wp-content/uploads/2015/03/Northern_Ireland_MDM_Indicator-150x150.jpg" alt="Northern_Ireland_MDM_Indicator" width="150" height="150" hspace="10" /> <img class=" alignleft" style="float: left;" src="http://www.infosyntaxis.com/wp-content/uploads/2015/03/Northern_Ireland_School_Service_Areas-150x150.jpg" alt="Northern_Ireland_School_Service_Areas" width="150" height="150" hspace="20" /> <a href="http://www.mywebsite.com/wp-content/uploads/2015/03/PCs_Gross_Wage.jpg"><img class=" alignleft" style="float: left;" src="http://www.infosyntaxis.com/wp-content/uploads/2015/03/PCs_Gross_Wage-150x150.jpg" alt="PCs_Gross_Wage" width="150" height="150" hspace="0" />
Have you checked if there isn't already some other CSS rules that affect your elements in page? Also, as a side note, you have an extra slash (/) in your hspace attribute on your third image
Also, this example will help you http://jsfiddle.net/0fe0w32s/ ?
HTML
<a href="http://www.example.com/wp-content/uploads/2015/03/Northern_Ireland_MDM_Indicator.jpg" class="my_image"><img style="float: left;" src="http://high-resolution-photos.com/stock_photos/royalty_free_3.jpg" alt="Northern_Ireland_MDM_Indicator" />
</a>
<a href="http://www.example.com/wp-content/uploads/2015/03/Northern_Ireland_School_Service_Areas.jpg" class="my_image"><img style="float: left;" src="http://www.gettyimages.com/CMS/Pages/RoyaltyFree/StaticContent/113198687.jpg" alt="Northern_Ireland_School_Service_Areas" />
</a>
<a href="http://www.example.com/wp-content/uploads/2015/03/PCs_Gross_Wage.jpg" class="my_image"><img style="float: left;" src="http://www.royaltyfreeimages.net/wp-content/uploads/2010/09/royalty-free-images-mushroom-500x375.jpg" alt="PCs_Gross_Wage" />
</a>
CSS
.my_image {
display: block;
float: left;
margin-right: 10px;
}
.my_image img {
width: 150px;
height: 150px;
}
Edit 2: please, remove the BR tags that are present in the containing paragraph so that your final code will look like this
<p><a href="http://www.example.com/wp-content/uploads/2015/03/Northern_Ireland_MDM_Indicator.jpg"><img style="float: left;" src="http://www.infosyntaxis.com/wp-content/uploads/2015/03/Northern_Ireland_MDM_Indicator-150x150.jpg" alt="Northern_Ireland_MDM_Indicator" height="150" hspace="10" width="150">
</a>
<a href="http://www.example.com/wp-content/uploads/2015/03/Northern_Ireland_School_Service_Areas.jpg"><img style="float: left;" src="http://www.infosyntaxis.com/wp-content/uploads/2015/03/Northern_Ireland_School_Service_Areas-150x150.jpg" alt="Northern_Ireland_School_Service_Areas" height="150" hspace="10" width="150">
</a>
<a href="http://www.example.com/wp-content/uploads/2015/03/PCs_Gross_Wage.jpg"><img style="float: left;" src="http://www.infosyntaxis.com/wp-content/uploads/2015/03/PCs_Gross_Wage-150x150.jpg" alt="PCs_Gross_Wage" height="150" hspace="10" width="150">
</a>
</p>
Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 8 years ago.
Improve this question
i have an CSS problem
CSS
img[align="left"] {
display: block;
float: left;
}
HTML
<p>
<img class="alignleft wp-image-48 size-thumbnail" src="http://url.com/en/wp-content/uploads/2013/08/jamones-secando-150x150.jpg" alt="jamones-secando" width="150" height="150">
<img class="alignleft size-thumbnail wp-image-50" src="http://url.com/en/wp-content/uploads/2013/08/queso_curado-150x120.jpg" alt="queso_curado" width="150" height="120">
<img class="alignleft size-thumbnail wp-image-49" src="http://url.com/en/wp-content/uploads/2013/08/embutidos-150x150.jpg" alt="embutidos" width="150" height="150">
please check this url http://goo.gl/R0CgpR
There are 3 images alingned on single line around middle of page.
The parent P tag height remains zero. so the next paragraph is aligning right to the images.
so i have to manually put a dot on next 5 lines to get the next paragraph come right below the image.
is this something i can fix through CSS., rather than using dots ?
You can just add overflow:auto to the <p> that contains the images and remove all the <p>.</p>
<p style="text-align: center; overflow:auto">
<img class="alignleft wp-image-48 size-thumbnail" src="http://poqueira.com/en/wp- content/uploads/2013/08/jamones-secando-150x150.jpg" alt="jamones-secando" width="150" height="150">
<img class="alignleft size-thumbnail wp-image-50" src="http://poqueira.com/en/wp-content/uploads/2013/08/queso_curado-150x120.jpg" alt="queso_curado" width="150" height="120">
<img class="alignleft size-thumbnail wp-image-49" src="http://poqueira.com/en/wp-content/uploads/2013/08/embutidos-150x150.jpg" alt="embutidos" width="150" height="150">
</p>
Try adding overflow: hidden; to your p element style
<p style="text-align: center; overflow:hidden">
<img class="alignleft wp-image-48 size-thumbnail" src="http://poqueira.com/en/wp- content/uploads/2013/08/jamones-secando-150x150.jpg" alt="jamones-secando" width="150" height="150">
<img class="alignleft size-thumbnail wp-image-50" src="http://poqueira.com/en/wp-content/uploads/2013/08/queso_curado-150x120.jpg" alt="queso_curado" width="150" height="120">
<img class="alignleft size-thumbnail wp-image-49" src="http://poqueira.com/en/wp-content/uploads/2013/08/embutidos-150x150.jpg" alt="embutidos" width="150" height="150">
</p>
I have a simple div with three images in it and Im trying to make all three images separate html links
Am I missing something? This seems too easy, but it surely doesn't work:
<div><img src="img/dboarddown.png"><img src="img/ranking.png"><img src="img/analytics.png"></div>
span doesnt work either....I dont get the pointer and nothing is click-able.
this should work just fine
<div>
<a href="#link1">
<img src="img/dboarddown.png"/>
</a>
<a href="#link2">
<img src="img/ranking.png"/>
</a>
<a href="#link3">
<img src="img/analytics.png"/>
</a>
</div>
you only got one link:
<div>
<img src="img/dboarddown.png">
<img src="img/ranking.png">
<img src="img/analytics.png">
</div>
replace to:
<div>
<img src="img/dboarddown.png" alt="" />
<img src="img/ranking.png" alt="" />
<img src="img/analytics.png" alt="" />
</div>
<div><img src="img/dboarddown.png"/>
<img src="img/ranking.png"/>
<img src="img/analytics.png"/></div>
Last two images are not wrapped in to tag and don't forget to close img tag.
I have the following html..
<div class="container animate" data-animation="pulse">
<div class="margin30 "></div>
<h2 class="border-title">Powering payments for <span></span></h2>
<div class="margin25"></div>
<div style="display:table-cell;">
<div>
<img src="images/clientlogos/pappa.png" title="" width="170" height="88" style="margin-left:5px;">
</div>
<div>
<img src="images/clientlogos/offergrid.png" title="" width="215" height="55" style="margin-left:5px;">
</div>
<div>
<img src="images/clientlogos/index.png" title="" width="121" height="33" style="margin-left:5px;">
</div>
<div>
<img src="images/clientlogos/fudr.png" title="" width="156" height="65" style="margin-left:5px;">
</div>
<div>
<img src="images/clientlogos/inloc8.png" title="" width="139" height="39" style="margin-left:5px;">
</div>
</div>
</div>
Can someone tell how could I arrange all the divs having images in a horizontal line.I want all the images in one line
div, img {
float: left;
display: inline-block;
}
float: left on your divs is one option:
http://jsfiddle.net/c3DV3/
Since you are only storing images in your div, you should check if it's better for you to use the <img> tag or to set them as a background-image, as stated in this post. It mainly depends on what you are going to do with those images. Check the link for further informations.
Floating the divs on left like others already said is the proper way to do it. You could also use display:inline-block; (even if divs are rendered as blocks by default).
Personally I didn't get if you wanted just to display them on one line, or to align them on top: in this case, you can use vertical-align:top; in addition to the other CSS parameters to achieve the result.