I have this image http://s23.postimg.org/on361znhn/Transform_Marketing.png
and I want to put 3 colored and centered (learn more) texts under each image. I tried this:
<p>
<span style="float:left;margin-left:100px;margin-right:40px"> Learn More</span>
<span style="float:left;margin-left:170px;margin-right:40px"> Learn More</span>
<span style="float:left;margin-left:120px;margin-right:40px"> Learn More</span>
</p>
but the link is not working. I want an option to change (learn more) text colour and font size and have it centered under each image.
Thank you for help.
to center each text below its image, the below code should help:
<div style="text-align:center; margin-right:5px; margin-left:5px;">
<img src="img1.png"><br />learn more
</div>
<div style="text-align:center; margin-right:5px; margin-left:5px;">
<img src="img2.png"><br />learn more
</div>
<div style="text-align:center; margin-right:5px; margin-left:5px;">
<img src="img3.png"><br />learn more
</div>
Hope it helps.
Update (in case only one image):
You have to know the image width, adjust the text positions below the image using photoshop (you should use the same font & size you are using on the website).
Adjust the margins of your spans to center the text manually.
Related
I'm trying to have a Bootstrap section that's 1/2 UL & 1/2 image. The code works fine at full screen, but when I start reducing the size of the screen the image begins to shrink & show the section's background (see images). hot can I go about having the image always remain full cover in 1/2 of the section until it reaches the break point # small width? Thanks for any help you can give!!
Full Screen works fine | Image begins to "break" around medium | Works fine again at small screen
<section class="bg-primary-cut" id="cuts">
<div class="container-fluid">
<div class="row">
<div class="col-lg-4 col-lg-offset-2">
<h2 class="section-heading-cuts text-uppercase">Pup List</h2>
<hr class="light">
<ul class="ul-cuts">
<li>Short one </li>
<li>Short one </li>
<li>a little bit longer one </li>
<li>short one </li>
<li>also a tad bit longer </li>
<li>last shortie </li>
</ul>
</div>
<div class="col-lg-6">
<img class="media-object img-responsive" src="https://unsplash.it/1200/600?image=1062" height="500">
</div>
</div>
</div>
</section>
Set the height of the image to 100% so it will fill. Although it may skew it out of proportion.
OR you can see at which point it starts to break and set different styles for that breakpoint with media queries to override bootstraps sm/md/lg breakpoints.
I'm working on a page where a lot of images are being presented in a grid. I am using the Foundation grid for this. I have three types of sizes: landscape, portrait and square. In the design, the landscape and portrait blocks are exactly the same size(just turned 90deg). And that's where the problem begins..
I rather not use pixels to setup the dimensions of my images here, so is there a clean way I can make the sizes of 'landscape' and 'portrait' the same without using pixels?
Here is my HTML:
<div class="products">
<div class="product landscape medium-12 large-8 xlarge-6 columns overview">
<img src="img/mes_liggend.jpg">
<h4>Title</h4>
<p>Subtitle is longer</p>
</div>
<div class="product portrait medium-12 large-8 xlarge-6 columns overview">
<img src="img/mes_staand2.jpg">
<h4>Title</h4>
<p>Subtitle is longer</p>
</div>
<div class="product square medium-12 large-8 xlarge-6 columns overview">
<img src="img/gude5.jpg">
<h4>Title</h4>
<p>Subtitle is longer</p>
</div>
Can't be done without some reference size. You can try some CSS like this:
.products img {
width: 100%;
height: auto;
max-height: 100rem;
}
But your portrait images will narrow up (look squashed).
I am trying to understand what I'm doing wrong,
I have two elements, image withing anchor with no style.
some how the anchor dose not cover the image area.
example: http://jsfiddle.net/L4ShV/1/
<a href="javascript:void(0)" id="downloadLink" >
<img src="http://toonimo.com/testing/clients_tests/somoto/flv_player/images/nlp/free_download_btn.jpg" border="0" style="width: 373px;height: 120px;" />
</a>
<div>
<h1>a dimantions:</h1>
width: <span id='width_c'></span><br>
height: <span id='height_c'></span><br>
<br>
when clearly its not possible!
How can i get the Real height?
</div>
<script>
var el = document.getElementById('downloadLink');
document.getElementById('width_c').innerHTML = el.offsetWidth;
document.getElementById('height_c').innerHTML = el.offsetHeight;
</script>
any reason or solution for this problem?
That is a normal behaviour of anchor as it expects for block-level elements. You can float a to cover the image.
<a href="javascript:void(0)" id="downloadLink" style="float:left">
I've looked around and tried the suggestions to center an image, and it usually works just fine, but I've got a situation where something isn't right.
If you go to the test page:
http://www.503rephotography.com/_temp/ - you will see the image is pushed to the right a little bit, and if you increase or decrease the size of your screen, you will see it may shift a little further away from the center position.
I'm new to CSS and may have something messed up that is making this not work; I used some tips on here to make the div with the content on the page be somewhat centered. Now I'm just trying to center an image within that div box. Any help is much appreciated!!
You have to create a div container with margin-left:auto: and margin-right:auto; to center the content.
<div id="container">
<div id="header">
<h1 id="logo">
<a href="http://www.503rephotography.com">
<img src="images/logo.png" alt="503 rephotography">
</a>
</h1>
<ul class="navbar">
<li class="button">SERVICES</li>
<li class="button">PORTFOLIO</li>
<li class="button">CONTACT 503</li>
</ul>
</div>
<div id="topbar"></div>
<div id="content">
<img src="http://www.503rephotography.com/_temp/slides/1.jpg">
<div class="sub">
<p>Content will go here....why can't I get this div box to be centered???</p>
</div>
</div>
</div>
Try this fiddle see if it's what you need: http://jsfiddle.net/ftPa3/
I have a numbered list, like this:
<ol>
<li>some text <img src="..." /></li>
</ol>
The image right of the text is below the text, not right of it. I tried a span and float:left, but this did not work. How could I align the image right of the text?
Thanks!
use floating for the text and the image and specify the width of the image and text divs for example
<ol>
<li>
<div style="float:left;width:200px;" >your text here..</div>
<div style="float:right;width:100px;"><img src="abc.jpg" /></div>
<div style="clear:both;"></div>
</li>
assume that your li width is minimum 300px