I've a wrapper that takes the 100% of the page, and within the wrapper a set of some images (now they are 5, but they'll eventually become 10 or more) which I'd like to randomly place and resize so to fit the wrapper.
<div id="wrapper">
<img src="images/body/cervello.png" id="image" class="brain" />
<img src="images/body/chiappe.png" id="image" class="booty" />
<img src="images/body/cuore.png" id="image" class="heart" />
<img src="images/body/denti.png" id="image" class="teeth" />
<img src="images/body/mano.png" id="image" class="hand" />
<img src="images/body/orecchio.png" id="image" class="ear" />
</div>
body, html {
height: 100%;
}
#wrapper {
height: 100%;
margin: 0px auto;
overflow: hidden;
}
I'm very much a newbie to coding, so not yet able to write my own JS..though I've found this code on a JSFiddle that supposedly does what I need to do (at least for the placement, not for the resizing).
The other problem is indeed trying to calculate the full size of the window and making sure that the resizing of all the images can be accordingly, so to not have them overlapping, getting too big/small etc..
This is pretty much what I'd like to achieve, but with images instead of bubbles..
I hope I've explained somehow what I'd like to achieve..I've tried to be as clear as possible so to help you with understanding my goal :)
Thanks very much in advance for your time!
Related
Hi i have a div like below
<div id="iconArrow"><img src="footer.jpg" width="35" height="27" style="position:fixed;"></div>
i need to add a text "more" on right side of image. please help me check the example image for final output.
after adding codes
It could have something to do with HTML5.
HTML5
<figure>
<img src="footer.jpg" width="35" height="27">
<figcaption>More</figcaption>
</figure>
CSS
figure {
position: fixed;
}
figure > * {
float :left;
}
Here's a jsFiddle
If you want your image to be fixed and you want to add a text beside it I suggest your wrap your image tag in another div with fixed position and do this:
<div id="wrapper" style="position: fixed;width: 35px;height: 27px;">
<img src="footer.jpg" width="35" height="27" /><div style="position: absolute;right: 0">your note</div>
</div>
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 currently working with a page that has a few hidden divs, being called on to be displayed later.
This is the code I have on the page itself causing the problem.
<div align="center" id="check">
Block of plain text right here.<br />
Checking...<br />
<img src="http://sw6.us/template/images/loading.gif" /><br />
<?php
require("databasetest.php");
?>
echo "check_data shown";
</div>
This code here is what I have modifying the "check" div on a style page
.check {
padding-top: 25px;
padding-left: 0px;
color: white;
align: center;
display:none;
}
As you can see the div is instructed to be hidden on page load via the style code. Everything is hidden except for the picture.
I don't believe the PHP is the issue because I included an echo displaying text which is properly hidden along with the HTML before it. I also took out that require command and the image was still not hidden. The image being a .GIF is not the issue either, I have tried using a .png and got the same problem!
Thanks for the help! It is greatly appreciated!
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
I made some changes to one of my web pages (CSS and HTML) and now Firefox is not rendering this textarea properly. It has a sort of jitter effect happening in the middle of the top line. I'm not sure if it has anything to do with the changes I made, but what could be causing this?
<div id="CommentForm">
<form action="/posts/add-comment" method="post">
<input type="hidden" id="Table_Name" name="Table_Name" value="Posts" />
<input type="hidden" id="Table_ID" name="Table_ID" value="47" />
<input type="hidden" id="IsLiveBroadcast" name="IsLiveBroadcast" value="1" />
<textarea name="Comment_Body" id="Comment_Body" rows="1"></textarea>
<div id="error-messages"></div>
<input type="submit" class="floatRight" id="postComment" value="Post your response" />
</form>
<div class="clear"></div>
</div>
And the CSS being applied:
#live_broadcast_post #CommentForm {
margin: 0;
padding: 0;
width: 460px;
height: auto;
background: none;
}
#live_broadcast_post #CommentForm textarea {
font-family: "Lucida Grande",Verdana,"Bitstream Vera Sans",Arial,sans-serif;
font-size: 12px;
padding: 5px;
width: 98%;
}
The strange thing is that this wasn't happening before I made the changes, and now it only affects Firefox, not any other browser I have tested.
Update:
I noticed that when the page loads, it renders correctly. Only after an iframe (also on this page) is finished loading does the rendering change.
Seeing as even the text itself is affected, this looks rather like a OS / graphics card / rendering problem.
I would try it on a different machine first before questioning the markup.
I've been seeing this jitter in some websites, not with Firefox only.
Probably graphics rendering (cards) related.