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
Related
This is the code that i have:
<div class="news-container">
<div class="flex_column av_two_third flex_column_div first">
<div class="news-date"><h2>jan 2015</h2></div>
<div class="news-entry">
<div class="news-title"><h2>new title</h2></div>
<div class="news-source">wearhouse</div>
<div class="news-content">excerpt goes here.</div>
</div>
</div>
<div class="flex_column av_one_third flex_column_div">myimage</div>
</div>
how can i get the image to float in the middle vertically of it's div.
i tried adding this code:
.img{
position: absolute;
top: 50%;
margin-top: -100px;
}
but because i have padding of 30px on the news containter it doesn't seem to work properly.
I have my live page at:
http://nodal.rudtek.com/about-us/press-room/news-features/
Try using line-height, usually it works perfectly for me, so chances are it will for you too. Hope it helps.
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 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 am having trouble getting some text to be next to an image. I have it working on one site: http://puckpros.edkatzman.com/
but not on another: http://petra.edkatzman.com/
and I can't see the difference. Can another pair of eyes help?
Here is the jsfiddle: http://jsfiddle.net/tangobango/rK2mG/
HTML:
<div id="primary" class="content-area">
<div id="content" class="site-content" role="main">
<div id="front-page">
<div id="owner-photo ">
<img src="http://petra.edkatzman.com/wp-content/uploads/2013/01/Ed-headshot-small.jpg" alt="Ed Katzman" >
</div>
<div id="owner-description ">
<h1><span class="drop-cap">Hi! </span>My name is Michael Jennings,
the owner and master craftsman of Petra Stoneworks. I have over 25
years experience working with a wide range of both valuable and everyday stone pieces.</h1>
<h3>We specialize in the expert repair of stone objects and the creation
of original pieces. Have a look at the portfolio of our work and contact
us with any questions or to start a discussion of how we might help you.</h3>
</div>
</div>
</div><!-- #content .site-content -->
</div><!-- #primary .content-area -->
CSS:
#front-page {
background-color:#ffffff;
padding-left: 10px;
padding-right: 10px;
padding-bottom: 10px;
padding-top:10px;
overflow: hidden;
}
#owner-photo {
width:246px;
height:246px;
float:left;
}
Thanks for including the jsFiddle. That was very helpful. Your problem is a simple typo.
<div id="owner-photo ">
There is a space in the id attribute. Delete that space and the div should float.
I am not really sure what the outlook is for your page but you might want to move the owner-photo ID onto the image itself and remove the potentially unnecessary div from your code.
The diference are:
First, put float:left in id="owner-photo"
<div id="owner-photo " style="float: left;">
<img src="http://petra.edkatzman.com/wp-content/uploads/2013/01/Ed-headshot-small.jpg" alt="Ed Katzman">
</div>
Second:
I don't know why but, don't use <-h1>, use <-p>.
In the example of http://puckpros.edkatzman.com/
first there is:
<img class="left_image" src="http://puckpros.edkatzman.com/wp-content/themes/PuckPros/images/services.png">
and then:
<p>something</p>
and this is the result:
Hope it helps :)
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.