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">
Related
Is there a way to set the panel bar to a specific height (ie. 300px), and make that specific section scrollable if it's too long?
Assuming that you have your panelbar defined as a ul, something like:
<ul id="panelbar">
<li class="k-state-active">
<span class="k-link k-state-selected">My Teammates</span>
<div style="padding: 10px;">
<div class="teamMate">
<img src="../../content/web/panelbar/andrew.jpg" alt="Andrew Fuller">
<h2>Andrew Fuller</h2>
<p>Team Lead</p>
</div>
<div class="teamMate">
<img src="../../content/web/panelbar/nancy.jpg" alt="Nancy Leverling">
<h2>Nancy Leverling</h2>
<p>Sales Associate</p>
</div>
<div class="teamMate">
<img src="../../content/web/panelbar/robert.jpg" alt="Robert King">
<h2>Robert King</h2>
<p>Business System Analyst</p>
</div>
</div>
</li>
<li>
Projects
...
</li>
</ul>
You should define a CSS style as:
#panelbar {
height: 300px;
overflow-y: scroll;
}
See an example here: http://trykendoui.telerik.com/#OnaBai/ifus
The solution above scrolls the entire control. Here's how to scroll the panel's items.
Click here for the Dojo example
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.
I want to align the images beside the text, and also they need to be click-able. How can I do this? Do I need to make unordered list?
Here is the whole page: http://jsfiddle.net/dzadze/68WrB/
<div>
<a class="pic_link" href="#">
<img src="http://f.cl.ly/items/3Q1e0G1Y2b2Q2U0N1g1q/fb.png">
</a>
Следете не <br>на FACEBOOK
<a href="#" class="pic_link">
<img src="http://f.cl.ly/items/413J3G3e152p1g3W0t0l/ftp.png">
</a>
<a href="#">FTP Логин
</a>
<a class="pic_link" href="#">Што е Photobook</a>
Процес на изработка
</div>
Not the only solution but adding this to your css seems to work :
footer a{
display: inline-block;
}
It sounds like using CSS floating would be a good place to start, based on what you've said.
I am implementing an input text with an onkeyup that calls a JavaScript function. I have to put that text over an image, so I was thinking to use innerHtml inside a div that is on the image.
The div:
<div id="image3" style="position:absolute; overflow:hidden; left:519px; top:423px; width:474px; height:205px; z-index:4">
<div id="uno" style="z-index:20">
<img src="images/base-personalizzazione.png" alt="" title="" border=0 width=474 height=205>
</div>
</div>
The input:
<input name="formtext1" id="ft1" style="position:absolute;width:571px;left:319px;top:194px;z-index:6" onkeyup="go(this.value)">
The JavaScript:
<script type="text/javascript">
function go(asd){
document.getElementById('uno').innerHTML=asd;
}
</script>
When I write inside input text image will disappear and text appear with background white. Can you help my work out why this happens and what I can do about it?
Setting the innerHTML removes what used to be in the div.
One way to fix this would be to change the html to
<div id="image3" style="position:absolute; overflow:hidden; left:519px; top:423px; width:474px; height:205px; z-index:4">
<div id="uno" style="z-index:20">
<div id="input"></div>
<img src="images/base-personalizzazione.png" alt="" title="" border=0 width=474 height=205>
</div>
</div>
Then use innerhtml on the input div instead.
On this site> http://upcycledonline.com/test/Site/defaultUpCyc.html when I view it in chrome the rightEdge image looks like it is pushed down by something. I have rearranged the code several times and tried the image in different places with no luck. Help please!
Should I throw it in a div and try to make it do something that way?
You can change the markup? If so, do this:
<div id="header" style="overflow:auto">...</div>
<img src="leftEdge.png" style="float: left;">
<div style="float:left;">
<img src="topEdge.png" style="float: left;">
<div id="content">...</div>
<img src="bottomEdge.png" style="float: left;">
</div>
<img src="rightEdge.png" style="float: left;">
Note that:
Nothing inside the new floated div should itself be floated.
You need that overflow:auto on the header
You will have to adjust the height of the content div