Aligning text centre of image below bootstrap - html

I wish too have text directly below my images so I tried the following but it did not work. I want the text direclty below and to the centre of the picture
<div class="our_partners">
<div class="container">
<div class="row">
<div class="col-lg-12 col-md-12">
<ul>
<li><img src="<?php echo esc_url(wp_get_attachment_url( $image1, 'full' )); ?>" alt="">
<span>High Speed Wifi</span> </li>
<li><img src="<?php echo esc_url(wp_get_attachment_url( $image2, 'full' )); ?>" alt="">
<span> Latest Av Technology</span>
</li>
<li><img src="<?php echo esc_url(wp_get_attachment_url( $image3, 'full' )); ?>" alt="">
<span> Online Booking</span>
</li>
<li><img src="<?php echo esc_url(wp_get_attachment_url( $image4, 'full' )); ?>" alt="">
<span> Concierge Service</span>
</li>
<li><img src="<?php echo esc_url(wp_get_attachment_url( $image5, 'full' )); ?>" alt=""></li>
</ul>
</div>
</div>
</div>
</div>
You can see the result here
and you can see it live here if you scroll down to services
http://ubtanz.solitudesoftware.co.uk/

Give img
.our_partners ul li a img {
padding: 29px 0;
max-width: 100%;
max-height: 100%;
width: auto;
height: auto;
}
Remove margin-right: 15px; to margin-right: 0;
.our_partners ul li a {
margin-right: 0;
}
to li
.our_partners ul li {
display: inline-block;
margin: 0px 5px;
}
and
span {
display: block;
text-align: center;
}

.our_partners ul li a {
margin: auto;
}
.our_partners ul li a img {
padding: 10px 0;
max-width: 100%;
max-height: 100%;
}
.our_partners ul li a {
width:230px;
text-align:center;
}
Throw this in your custom.css - makes it centered.

I'd recommend using the margin-right: 15px property on the list element, and not the anchor element because it makes more sense. You are separating between the list elements and not the anchors.
With that change in mind, all you need to do now is set the span element to take 100% of the available width, and center align its content.
.our_partners li {
margin-right: 15px;
}
.our_partners a li span {
text-align: center;
display: inline-block;
width: 100%;
}
and remove your current margin set from the anchor element:
.our_partners ul li a {
margin-right: 15px; // <- remove this line
}

Easy way, use <br/>:
<ul>
<li>
<img src="..." alt=""><br/>
<span>High Speed Wifi</span>
</li>
(...)
A better way, threat one of the part as a block, by default, a img and span tags are inline:
<ul>
<li>
<img src="..." alt="">
<span>High Speed Wifi</span>
</li>
(...)
Externalize the css style in a class. You could even wrap the linked image into a block span:
# foo.css:
span.span-block { display: block; }
...
# 42.html
<span class="span-block"><a ...><img .../></a></span>
...

Put the text inside the <a></a> tag, like so:
<li>
<a href="#"><img src="...s2-3.png" alt="">
<span style="display:block;">High Speed Wifi</span>
</a>
</li>
EDIT To ensure that all images are aligned, you can set the last image up as:
<li>
<a href="#"><img src="...cons-2.png" alt="">
<span style="display:block;"> </span>
</a>
</li>
Further, you can obviously set a style on the <span> element in your css file, to cut down on repetition.

Related

How to add a link to image

I am trying to create a link that is displayed on an image which should take me to a different view. I can only add a link below the image which doesn’t look very presentable. I am using basic html. Please can someone assist me?
<div class="card">
<img src="#Url.Content("~/Content/B01.jpg")" alt="Avatar" style="width:100%">
<div class="container">
<br>
<div>
#Html.ActionLink("Back to List", "Index")
</div>
A link is just an <a> element wrapping the clickable part, which is probably most often text but can just as easily be an <img> element. You can create one manually and use the Url.Action helper to define the URL:
<a href="#Url.Action("Index")">
<img src="#Url.Content("~/Content/B01.jpg")" alt="Avatar" style="width:100%">
</a>
This code worked for me. You had to create a link to the next view and add the image afterwards. You can also use style tags to manipulate the links to your liking.
<li>
<a href="#Url.Action("Display name", "Controller")" title="your title" class="links">
<br />
<img alt="image alt" src="#Url.Content("~/Content/B01.jpg")"
style="width:500px;height:250px;border:0;"><br /><br /> <font size="4">Display a name</font>
</a>
</li>
You can also include a style
</ul>
<style type="text/css">
ul.links {
list-style-type: none;
}
ul.links li {
display: inline-block;
padding-left: 10px;
margin-left: 10px;
padding-bottom: 10px;
}
ul.links li:first-child {
border-left: 0;
padding-left: 10px;
margin-left: 10px;
}
</style>
<br />
<ul class="links"></ul>
<style>
ul.links {
list-style-type: none;
}
ul.links li {
border-left: 0;
padding-right: 30px;
margin-left: 0px;
}
</style>

Positioning an image below another image when a mouse hovers over an image

I'm trying to make image two appear below image one when a mouse hovers over image one.
<ul>
<li>
<img id="img1" src="imageone.png">
<br>
<img id="img2" src="imagetwo.png">
</li>
</ul>
Help is appreciated!
So far I have this CSS which does not seem to work
#img2 {
display: none;
position: absolute;
}
#img1:hover + #img2,
#img2:hover {
display:block;
}
The + selects siblings that are immediately after. Your images are not, because they are separated with a <br>.
Use ~ instead:
#img1:hover ~ #img2
You are very close.
First, remove the <br> tag since it breaks the adjacent sibling selector.
The hover works as long as you over over the first image.
If you apply display: block to the img, then you don't need the <br> tag.
Depending on your layout, the tilde (~) selector could also work but it depends on whether you have other images in the layout (I am thinking a photo gallery).
ul {
list-style: none;
}
#img2 {
display: none;
}
#img1:hover + #img2 {
display: block;
}
<ul>
<li>
<img id="img1" src="http://placehold.it/150x50">
<img id="img2" src="http://placehold.it/150x50">
</li>
</ul>
use the tilde instead of the + sign, because you have a br inbetween
#img2 {
display: none;
position: absolute;
}
#img1:hover ~ #img2,
#img2:hover {
display:block;
}
<ul>
<li>
<img id="img1" src="imageone.png">
<br>
<img id="img2" src="imagetwo.png">
</li>
</ul>
You may be after something like this:
.parent{
position: relative;
}
.holder{
position: fixed;
width: 100px;
height:100px;
background-color: #efefef;
}
.img{
width: 100px;
height:100px;
background-color: #ffefef;
}
#img2{
display: none;
}
.holder:hover #img2{
display: block;
}
<ul>
<li class="parent">
<div class="holder">
<img class="img" id="img1" src="imageone.png">
<br>
<img class="img" id="img2" src="imagetwo.png">
</div>
</li>
</ul>

Showing a span element only when hovering over an image

I have a wordpress recently viewed products widget. I would like the name of the product to show up over the image, when you hover over it.
I have it working elsewhere, the difference is than with this widget, the li do not have a class attached. I know the line I need to fix is:
.product_list_widget ul li .attachment-shop_thumbnail:hover span.product_title {
I just don't know what it should be changed to, to show the span when the image is hovered!
For the first time I got a fiddle to work!
Any ideas?
.recent_view_prod ul.product_list_widget li {
width: 22%;
margin-right: 2%;
}
.recent_view_prod ul.product_list_widget li img {
width: 100%;
float: left;
}
.recent_view_prod ul.product_list_widget li {
display: inline-block;
}
.recent_view_prod span.product-title {
display: none;
}
.product_list_widget ul li .attachment-shop_thumbnail:hover span.product_title {
display: block!important;
z-index: 100;
position: absolute;
font-size: 1vw;
line-height: 1.5em;
text-align: left;
padding-left: .5em!important;
padding-right: .5em!important;
color: white;
background-color: rgba(160, 163, 162, 0.8);
left: 0px;
bottom: 25px;
width: 75%;
border-top-right-radius: 5px;
border-bottom-right-radius: 5px;
}
<div class="wpb_widgetised_column wpb_content_element recent_view_prod">
<div class="wpb_wrapper">
<div id="woocommerce_recently_viewed_products-3" class="widget woocommerce widget_recently_viewed_products">
<h3 class="widget-title element-title">Recently Viewed Products</h3>
<ul class="product_list_widget">
<li>
<a href="http://uc.petekirkwood.co.uk/shop/opulent-bloom-card-holder/" title="Opulent Bloom Card Holder">
<img width="180" height="135" src="http://uc.petekirkwood.co.uk/wp-content/uploads/2015/06/TedBaker_CardHolderOpulentBloom_2-180x135.jpg" class="attachment-shop_thumbnail wp-post-image" alt="TedBaker_CardHolderOpulentBloom_2"> <span class="product-title">Opulent Bloom Card Holder</span>
</a>
<span class="amount">£19.95</span>
</li>
<li>
<a href="http://uc.petekirkwood.co.uk/shop/store-ms/" title="Store-M's Nesting Food Boxes">
<img width="180" height="135" src="http://uc.petekirkwood.co.uk/wp-content/uploads/2015/06/StoreMs1-180x135.jpg" class="attachment-shop_thumbnail wp-post-image" alt="StoreMs1"> <span class="product-title">Store-M's Nesting Food Boxes</span>
</a>
<span class="amount">£11.95</span>
</li>
<li>
<a href="http://uc.petekirkwood.co.uk/shop/happy-jackson-crackers-tin/" title="Happy Jackson Crackers Tin">
<img width="180" height="135" src="http://uc.petekirkwood.co.uk/wp-content/uploads/2015/06/HappyJCrackersTIn-180x135.jpg" class="attachment-shop_thumbnail wp-post-image" alt="HappyJCrackersTIn"> <span class="product-title">Happy Jackson Crackers Tin</span>
</a>
<span class="amount">£6.99</span>
</li>
<li>
<a href="http://uc.petekirkwood.co.uk/shop/happy-jackson-snack-box-set/" title="Happy Jackson Snack Box Set">
<img width="180" height="135" src="http://uc.petekirkwood.co.uk/wp-content/uploads/2015/06/SnackBoxSetx4_2-180x135.jpg" class="attachment-shop_thumbnail wp-post-image" alt="SnackBoxSetx4_2"> <span class="product-title">Happy Jackson Snack Box Set</span>
</a>
<span class="amount">£9.99</span>
</li>
</ul>
</div>
</div>
</div>
If you want to use css only solution, you could use adjacent selector:
img.attachment-shop_thumbnail.wp-post-image:hover + span {
display: block;
position:absolute;
}
This targets element immediately after your img element, and you don't need to know the class of your span for that.
Only requirement, you'll need to stick to, is that span has to be immediately after imgin your markup.
Another alternative might be sibling combinator selector:
img.attachment-shop_thumbnail.wp-post-image:hover ~ span {
display: block;
position:absolute;
}
which only require your span element to be after img but not necessary immediately.
Here is the JSFiddle with that.
You should use following selector:
ul.product_list_widget li .attachment-shop_thumbnail:hover span.product-title {
//styles as above
}
Your <ul> tag has class "product_list_widget" so following selector:
.product_list_widget ul li .attachment-shop_thumbnail:hover + span.product-title
wouldn't work, because that would require <ul> to be inside element that has class "product_list_widget".

Images in list do not float correctly

I'm trying to make a list of images, 2 per row.
The uneven rows (1, 3, 5, etc.) should have a small image first, and a wide one second. The even rows (2, 4, 6, 8, etc.) should have the wide image first and the smaller one second.
I'm now at row 3, and I cannot get the small image to the left for whatever reason. As you can see in the image below it floats to the right.
My code is very basic, and Dreamweaver displays it correctly in its Split function.
HTML:
<div id="portfolio-screen"></a>
<ul>
<li><img src="images/portfolio-jaar1.png" width="228"/></li>
<li><img src="images/portfolio-pr1_2.png" width="500"/></li>
<li><img src="images/portfolio-pr1_4.png" width="500"/></li>
<li><img src="images/portfolio-pvs1.png" width="228"/></li>
<li><img src="images/portfolio-jaar2.png" width="228"/></li>
<li><img src="images/portfolio-pr2_2.png" width="500"/></li>
</ul>
</div>
CSS
#portfolio-screen {margin-top: 8px; width: 768px; height: 602px; background-color:#37322d; overflow: auto;}
#portfolio-screen li {margin-top: 8px; margin-left: 8px; float: left;}
For some reason it is not allowed to post images, so I have supplied a link to one: http://oi51.tinypic.com/b63vkk.jpg
You can try something like this - the CSS height for the images could be removed for your size needs.
HTML
<div id="portfolio-screen">
<ul>
<li>
<img src="images/portfolio-jaar1.png" class="imgSmall" />
</li>
<li>
<img src="images/portfolio-pr1_2.png" class="imgLarge" />
</li>
<li>
<img src="images/portfolio-pr1_4.png" class="imgLarge" />
</li>
<li>
<img src="images/portfolio-pvs1.png" class="imgSmall" />
</li>
<li>
<img src="images/portfolio-jaar2.png" class="imgSmall" />
</li>
<li>
<img src="images/portfolio-pr2_2.png" class="imgLarge" />
</li>
</ul>
</div>
CSS:
img {
height:20px;
}
.imgSmall {
width:228px;
}
.imgLarge {
width: 500px;
}
#portfolio-screen {
margin: 0;
padding: 0;
width: 768px;
height: 602px;
background-color:#37322d;
}
#portfolio-screen ul {
margin: 0;
padding: 15px;
width: 768px;
}
#portfolio-screen li {
margin-top: 8px;
margin-left: 8px;
display: inline-block;
}
#portfolio-screen li:nth-child(odd) {
margin:0;
}
JS Fiddle: http://jsfiddle.net/5qREV/
First, you have a broken </a> in there.
Secondly, make sure your unorder list has Margin and padding of 0
Lastly, mess with JSfiddle:
http://jsfiddle.net/Riskbreaker/NT4DS/10/
Instead of floats try inline-block

how to align text under image in css menu

I want to align menu text at the bottom of image how to i achieve it?
Expected output:
Image Image Image Image
[menutext] [menutext][menutext] [menutext]
Actual output :
Image[menutext] Image[menutext] Image[menutext] Image[menutext]
my Css Code:
#vilaniHeader
{
margin: 0;
padding: 0;
height: 80px;
background-color: Black;
}
#vilaniHeader h1
{
padding-left: 15%;
font: Arial;
font-size: 30px;
color: #ffffff;
font-weight: bold;
float: left;
}
#vilaniHeader #menu
{
color: #ffffff;
font: Arial;
font-size: 18px;
font-weight: bold;
padding-top: 30px;
padding-left: 30%;
}
#vilaniHeader #menu ul
{
list-style: none;
margin: 0;
padding: 0;
padding-right: 300px;
padding-bottom: 300px;
}
#vilaniHeader #menu li
{
display: inline;
margin: 0 15px 0 15px;
float: none;
text-align:center;
}
#vilaniHeader #menu a
{
text-decoration: none;
color: #ffffff;
}
#vilaniHeader #menu .menuHome
{
color: red;
clear:both;
padding-top:50px;
background-image:url:("Styles/menuHome.png") ;
vertical-align:text-top;
}
and My HTML code
<div id="vilaniHeader">
<h1>
Comany name
</h1>
<div id="menu">
<ul>
<li class="menuHome"><img src="Styles/menuHome.png" />Home</li>
<li><a href="About.aspx">Car</li>
<li><a href="About.aspx">Mobile</li>
<li><a href="About.aspx">OldThings</li>
<li><a href="About.aspx">Matrimoni</li>
</ul>
</div>
</div>
I want menu text should be align at the bottom of the image plese help me to do that.
I came up with this solution building upon the answer here from tejash. My answer validates and is search engine friendly.
I prefered to use links within a div but I imagine this will work with an ul
I use a background image that does not show if CSS is disabled
I use a span set displayed as block because a div inside an a tag does not validate
I use a class to place the image but use ids if you want different pics for each link
Change the width + heights to suit your needs
HTML
<div id="nav">
<span class="image"></span><span>About Us</span>
<span class="image"></span><span>Investors</span>
</div>
CSS
#nav a {
display:block;
float: left;
width:100px;
}
.image {
display:block;
background: url("myimage.jpg") no-repeat scroll center center transparent;
height:40px;
width:100px;
}
Make the img a block element so it takes the full width / line-breaks afterwards.
#menu li { display:block; }
That’s all.
I would suggest add some wrapper on text and make image and wrapper both display:block;
You can use span tag as an wrapper for text.
HTML
<ul>
<li><a><img src="Styles/menuHome.png" /><span>Home</span></a></li>
</ul>
CSS
li img, li span
{
display:block;
}
If you want your text to overlay your image, but at the bottom, you should try to play around with the line-height property. That will cause your text to move down, so it will be in the center of it's line.
I have two solutions for you. style1 works for items with text smaller than the image. style2 works for items with text wider than the image. Easiest is to make sure that the images are always wider or smaller than the text, so that you need only one style.
CSS:
#menu {
list-style:none
}
#menu li {
float:left;
text-align:center
}
#menu .style1 img, #menu .style2 span {
overflow:hidden
}
#menu .style1 span, #menu .style2 img {
display:block
}
HTML:
<div id="vilaniHeader">
<h1>Comany name</h1>
<ul id="menu">
<li class="style1"><img src="Styles/menuHome.png" width="10" alt="" /> <span>Home</span></li>
<li class="style2"><img src="Styles/menuHome.png" width="100" alt="" /> <span>Car</span></li>
</ul>
</div>
I'm not a span-fan but it seems like you can't do it without here.
BTW, why don't you just add a br?
CSS:
#menu {
list-style:none
}
#menu li {
float:left;
text-align:center
}
HTML:
<div id="vilaniHeader">
<h1>Comany name</h1>
<ul id="menu">
<li><img src="Styles/menuHome.png" width="10" alt="" /><br />Home</li>
<li><img src="Styles/menuHome.png" width="100" alt="" /><br />Car</li>
</ul>
</div>
I guess that's the most easy and reliable solution.
You can do this way, obviously replacing the image sample I used. For the link to work, you can use a jQuery click event on LI, so it searches for the link inside the clicked LI and then opens the desired link.
http://jsfiddle.net/WcePK/
HTML
<ul>
<li class="menuHome"><img src="Styles/menuHome.png" />Home</li>
<li style="background-image: url('http://jsfiddle.net/img/logo.png')">Car</li>
<li style="background-image: url('http://jsfiddle.net/img/logo.png')">Mobile</li>
<li style="background-image: url('http://jsfiddle.net/img/logo.png')">OldThings</li>
<li style="background-image: url('http://jsfiddle.net/img/logo.png')">Matrimoni</li>
</ul>
CSS
LI {
float: left;
margin: 5px;
padding: 50px 10px 10px;
min-width: 100px;
background-repeat: no-repeat;
background-position: center 10px;
background-color: #366D93;
text-align: center;
cursor: pointer
}