CSS inline-block images won't align horizontally - image

I've done this a million times but I can't figure out why this won't work now. I'm trying to get 4 images of the same size to sit in a straight line horizontally however they are appearing slightly diagonal from each other.
Here is my html
<div class="homepage_images">
<img src="http://one-event.org.uk/wp-content/uploads/2013/12/CHILDREN.jpg" alt="" width="300" height="228" class="alignnone size-full wp-image-182" />
<img src="http://one-event.org.uk/wp-content/uploads/2013/12/ACTIVITIES-COVER.jpg" alt="ONE 2014 WEBSITE REV2" width="300" height="228" class="alignnone size-full wp-image-181" />
<img src="http://one-event.org.uk/wp-content/uploads/2013/12/STREAMS-COVER.jpg" alt="ONE 2014 WEBSITE REV2" width="300" height="228" class="alignnone size-full wp-image-184" />
<img src="http://one-event.org.uk/wp-content/uploads/2013/12/SPEAKERS-COVER.jpg" alt="ONE 2014 WEBSITE REV2" width="300" height="228" class="alignnone size-full wp-image-183" />
</div>
And my CSS:
.homepage_images {
display:block;
}
.homepage_images img{
display:inline-block;
float:left;
width:240px;
opacity:0.8;
}
And here is a link to the site, the images that are misaligned are near the bottom of the page
http://www.one-event.org.uk

You have a line break between each line. You haven't put it in the code you posted, but in the code from the site,
<div class="homepage_images">
<a href="http://one-event.org.uk/the-event/activities/for-18s-under/">
<img class="alignnone size-full wp-image-182" width="300" alt="ONE 2014 WEBSITE REV2" src="http://one-event.org.uk/wp-content/uploads/2013/12/CHILDREN.jpg">
</a>
<br>
<a href="http://one-event.org.uk/the-event/activities/">
<br>
<a href="http://one-event.org.uk/the-event/streams/">
<br>
<a href="http://one-event.org.uk/the-event/speakers/">
</div>
you have a line break between each div. Removing that fixes the problem.
Basically change it to what you posted;
<div class="homepage_images">
<img width="300" class="alignnone size-full wp-image-182" alt="ONE 2014 WEBSITE REV2" src="http://one-event.org.uk/wp-content/uploads/2013/12/CHILDREN.jpg">
<img width="300" class="alignnone size-full wp-image-181" alt="ONE 2014 WEBSITE REV2" src="http://one-event.org.uk/wp-content/uploads/2013/12/ACTIVITIES-COVER.jpg">
<img width="300" class="alignnone size-full wp-image-184" alt="ONE 2014 WEBSITE REV2" src="http://one-event.org.uk/wp-content/uploads/2013/12/STREAMS-COVER.jpg">
<img width="300" class="alignnone size-full wp-image-183" alt="ONE 2014 WEBSITE REV2" src="http://one-event.org.uk/wp-content/uploads/2013/12/SPEAKERS-COVER.jpg">
</div>

Somehow br tag added after each anchor tag in that div. just check from where that tag is getting added and make necessary changes.

Related

Image in SVG not displayed in README.md GitHub

i'm making a markdown file in which is present an SVG.
Inside this SVG i wanna include an image, but it doesn't work.
Whenever i remove the image, it works fine.
You got any idea? Thank you so much in advance!
This is the svg code:
<svg fill="none" viewBox="0 0 508 125" width="800" height="200" xmlns="http://www.w3.org/2000/svg">
<foreignObject width="100%" height="100%">
<div xmlns="http://www.w3.org/1999/xhtml">
<div class="dialogue-card" id="dialogue-box">
<image xlink:href="https://github.com/Goth-Rei-Codes/goth-rei-codes/blob/main/Images/propic.png" />
<div class="propic-container">
<div class="name-container">
<div class="dialogue-text">
<p>Welcome to my profile!</p>
</div>
<div class="arrow-down" id="next-dialogue"></div>
</div>
</div>
</div>
</div>
</foreignObject></svg>

How to create image-map in jssor slider

How to use image-map on jssor. its not working, the link disappears. I have tried the given code.
<div id="jssor_4" style="position:relative;margin:0 auto;top:0px;left:0px;width:1500px;height:300px;overflow:hidden;visibility:hidden;">
<div data-u="slides" style="cursor:default;position:relative;top:0px;left:0px;width:1500px;height:300px;overflow:hidden;">
<div>
<img data-u="image" src="/images/banner-animasi1.jpg" usemap="#image-map1" style="width:100%" />
</div>
</div>
<!-- Bullet Navigator -->
<div data-u="navigator" class="jssorb108" style="position:absolute;bottom:0px;right:12px;" data-autocenter="1" data-scale="0.5" data-scale-bottom="0.75">
<div data-u="prototype" class="i" style="width:16px;height:16px;">
<svg viewbox="0 0 16000 16000" style="position:absolute;top:0;left:0;width:100%;height:100%;">
<circle class="b" cx="8000" cy="8000" r="5800"></circle>
</svg>
</div>
</div>
</div>
</div>
<map name="image-map1">
<area target="_self" alt="Tentang kami" title="Tentang kami" href="/about" coords="2666,758,3540,922" shape="rect">
</map>
Any suggestion or help will be appreciated. Thanks

Laravel images are not displayed

I want to display the images in my view. The images are located in public folder in folder name img.
I've tried following solutions:
<img href="{{URL::to('img/zajeciadodatkowe.png')}}" alt="Image" height="200" width="200">
<img src="{{URL::to('img/zajeciadodatkowe.png')}}" alt="Image" height="200" width="200">
<img href="{{URL::asset('img/zajeciadodatkowe.png')}}" alt="Image" height="200" width="200">
<img src="{{URL::asset('img/zajeciadodatkowe.png')}}" alt="Image" height="200" width="200">
<img href="{{asset('img/zajeciadodatkowe.png')}}" alt="Image" height="200" width="200">
<img src="{{asset('img/zajeciadodatkowe.png')}}" alt="Image" height="200" width="200">
This problem occured when I put the laravel app onto development server.
Someone has any suggestions?
Use the asset() helper:
<img src="{{ asset('img/zajeciadodatkowe.png') }}">
And make sure the zajeciadodatkowe.png image is in public/img directory.

410 Gone - Images are on right directory

On my site some of my products picture are not shown.
When i right click to inspect element and click my pictures url there is written
410 GONE
When i refresh the site image is shown.
I have lots of products so pictures too on my site and thats a big problem for me.
Thanks for helping.
<div class="productGallery"> <img id="product" width="450" height="405" src="http://www.mydomain.com.tr/files/data/OrgImage/v2/<c:out value="${prdPictureOrj}"/>_1b.jpg" data-zoom-image="http://www.mydomain.com.tr/files/data/OrgImage/v2/<c:out value="${prdPictureOrj}"/>_1b.jpg" />
<c:if test="${prdDemo != ''}"><a onclick="OpenTv();" class="watch"></a></c:if>
<div id="productGallery">
<img onerror="this.src='assets/images/nophoto-140x125.jpg'" id="img_01" src="http://www.mydomain.com.tr/files/data/OrgImage/v2/<c:out value="${prdPictureOrj}"/>_1b.jpg" width="70" height="70" />
<img onerror="this.src='assets/images/nophoto-140x125.jpg'" id="img_01" src="http://www.mydomain.com.tr/files/data/OrgImage/v2/<c:out value="${prdPictureOrj}"/>_2b.jpg" width="70" height="70" />
<img onerror="this.src='assets/images/nophoto-140x125.jpg'" id="img_01" src="http://www.mydomain.com.tr/files/data/OrgImage/v2/<c:out value="${prdPictureOrj}"/>_3b.jpg" width="70" height="70" />
<a href="#" data-image="http://www.mydomain.com.tr/files/data/OrgImage/v2/<c:out value="${prdPictureOrj}"/>_4b.jpg" data-zoom-image="http://www.mydomain.com.tr/files/data/OrgImage/v2/<c:out value="${prdPictureOrj}"/>_4b.jpg"> <img onerror="this.src='assets/images/nophoto-140x125.jpg'" id="img_01" src="http://www.mydomain.com.tr/files/data/OrgImage/v2/<c:out value="${prdPictureOrj}"/>_4b.jpg" width="70" height="70" />
<a onclick="OpenTv();" class="tv_icon"></a></a>
</div>
</div>

How to make 2 tables on 1 page?

I want two 'menus' on my page, but when I add a div next to my leftmenu (where I didn't use div but pictures) I get ugly space between my pictures.
My current code is:
<html>
<head>
<title>Welcome to Nielyboyken</title>
</head>
<body bgcolor="grey">
<br>
<a href="http://zeldauniverse.net">
<img src="http://i1.minus.com/jbg3tjE57KYsx1.png" />
</a>
<a href="">
<img src="http://i.minus.com/ip2vEndNDv7vj.png" />
</a><text-align:"right">
<iframe src="http://free.timeanddate.com/clock/i3qoeq8q/n48/szw135/szh135/hoc000/hbw12/hfc000/cf100/hgr0/hcw1/fas20/facfff/fdi88/mqc0033cd/mqs3/mql5/mqw2/mqd74/mhc0033cd/mhs4/mhl4/mhw2/mhd76/mmcf90/mml4/mmw1/mmd74/hhc666/hmc666" frameborder="0" width="137" height="137"></iframe>
</font>
<div style="width:1340px; height:20px; background-color:black;">
Contact
[Register]
[Login]</font>
</div>
<center>
<font style="font-family: Fixedsys;font-size: 35px;color:blue">Welcome to my personal site!</font>
</center>
<center><font style="font-family:Fixedsys,;color:white">Welcome! Notice that this is not a forum site but just a personal site.</font></center>
<div id="LeftMenu">
<table>
<img src="http://i5.minus.com/iI7VEHhLP3WyV.png" /> <br>
<a target="_blank" href="http://minus.com/lJMgzKG1FFv2v">
<img src="http://i.minus.com/jJMgzKG1FFv2v.png" border="0"/>
</a>
<div style="width:50px; height:50px; color:red;" </div> <br>
<a href="http://zeldauniverse.net">
<img src="http://i.minus.com/ibfBWr7hEsMtsT.png" />
</a> <br>
<img src="http://i.minus.com/iJMgzKG1FFv2v.png" /> <br>
<a href="http://youtube.com">
<img src="http://i.minus.com/ib0OadHbWfnpew.png" />
</a> <br>
<img src="http://i.minus.com/iJMgzKG1FFv2v.png" /> <br>
<a href="http://twitter.com">
<img src="http://i.minus.com/iMNcGJ5Bjwvx4.png" />
</a> <br>
<img src="http://i.minus.com/iJMgzKG1FFv2v.png" /> <br>
<a href="http://facebook.com">
<img src="http://i.minus.com/ibhDDFKmGlL4rk.png" />
</a> <br>
<img src="http://i.minus.com/iJMgzKG1FFv2v.png" /> <br>
<img src="http://i4.minus.com/i6nJ7Pg8kUfqo.png" /> <br>
<img src="http://i.minus.com/iJMgzKG1FFv2v.png" /> <br>
<a href="page2test.html" >
<img src="http://i.minus.com/iFNcJv4UvSdye.png" />
</a> <br>
<img src="http://i.minus.com/iJMgzKG1FFv2v.png" /> <br>
<a href="aboutzu.html">
<img src="http://i.minus.com/ishbphpEbNRi2.png" />
</a> <br>
<img src="http://i.minus.com/iJMgzKG1FFv2v.png" /> <br>
<a href="http://twitter.com/nielyboyken">
<img src="http://i.minus.com/ihJnSHKv3vAco.png" />
</a> <br>
<img src="http://i.minus.com/iJMgzKG1FFv2v.png" /> <br>
<a href="http://www.zeldauniverse.net/forums/members/5390370-nielyboyken.html">
<img src="http://i.minus.com/ibdZgDlK1H5NLP.png" />
</a> <br>
<img src="http://i.minus.com/iJMgzKG1FFv2v.png" /> <br>
<a href="youtube.com/nielyboyken">
<img src="http://i.minus.com/iGZahFuxuc349.png" />
</a> <br>
<img src="http://i.minus.com/iJMgzKG1FFv2v.png" />
</table>
</div>
</body>
</html>
Does someone know how to fix it?
You should use CSS. HTML is going to leave white space unless you explicitely define where you want them in your DIVs. Much easier to use a CSS template, and format with that. You will have ability to "stick" things in place with CSS.
http://www.w3schools.com/css/
OR
You could use a 1x 2 table. and then insert each element inside the table. Then they would be side by side. Define Column properties, etc...
You should really Google the formatting of this stuff before you ask on here...

Resources