I have an html file where i am loading images from an xml file in to it. i am using jtemplate for that. I am getting the images properly.but i want to display them horizontaly those are coming as vertical. Please help me to do that,This is the sample.
<img …><img …><img …>
By default, images are inline. They will appear in a horizontal row (subject to word wrapping) unless you add additional markup or styling to make it otherwise.
You can't rotate images in HTML or with javascript. You need to use some serverside programming language as PHP to crop or rotate image.
Make sure that the sum of widths of your images is less than the width of the container.
Related
Regarding flexslider
Is there any way to modify it from displaying images to displaying only text? Or is flexslider only for animating images? If so, can you give me a hint what would have to be changed?
Thank You
For each slide in the slideshow I would like to display varying amounts of text only. And I would like to reliably keep the slider controls responsive and in a standard position on the screen as each slide changes. I am not really concerned with displaying the images.
In some of the li examples which can be found in the zippy-share link below, I associate an image file with the "flex-caption" CSS Selector found in flexslider.css file. Using an associated image file for each text paragraph seemed like my best bet to force the slider controls to stay in that standard position as each slide changed. Am I on the right track?
I am not really concerned with displaying image files.
An html version of this problem can be found at the zippy-share link below:
http://www51.zippyshare.com/v/46072947/file.html
take a look at the li examples in the main index.html
You can replace the image with the text you want to put. Please remember to modify the minItem and maxItem to fit your need.
I want to use HTML and display one large image.
On this large image I then wish to display multiple smaller images, all on different places and sizes.
I would prefer doing this using HTML only.
But, if this is not possible, Javascript or something like that is also an option... :-)
If anybody has any idea using PHP, that would also be great.
I have search the web and StackOverflow, and tried MANY possible solutions, but none of them allowed me to display one big image, and then display multiple other images on top of this big image.
Any help would be greatly appreciated.
Kind regards,
Michael
you can use a container div which will contain all the smaller images. You can set background of that particular div.
your html as
<div id="container">
</div>
and css as follows:
div#container{
background-image: url("image.jpg");
background-repeat:no-repeat;
height:100%;
}
Two alternatives:
defining the big image in as background using CSS, then you can put onto it whatever html markup you want to. Such backgorund can also be declared for elements like divs, not only for the whole page.
use absolut positioning inside your style definition. That way you can add big and small images to your markup and then position them on top of each other.
No javascript required for this and php has nothing to do with this.
You can position them as I have done in this JSFiddle: http://jsfiddle.net/xxUpk/
The top:-NNNpx is crude, you could use float and many other ways of positioning them. Also look into z-index to layer them.
you cannot overlay an image over another image in pure HTML only, but what you CAN do is re-locate a image's position onto another tag and just move it accordingly with css.
The purpose of CSS is to help web developers to define and apply graphics and layout, separated from the actual content.
However, it seems like CSS can tweak pretty much anything (graphics wise) on a website - apart from the source attribute of an <img>-tag.
To achieve 100% separation between style and content (which we all want, right?) shouldn't we define image sources in the CSS as well?
I know that CSS can't do this (no support of changing src-attribute for images) but there are work-arounds, such as using <div> with backgrounds instead of <img>. However, by doing that, won't it break search engines?
My question is. Is using instead of <img> to achive 100% separation between style and content a reasonable action?
<img /> tags are intended to be content, not style.
<img /> is supposed to be used for something like a photo accompanying an article.
UI graphics should be done using CSS backgrounds.
An image is content - e.g. diagrams. Style is just to make the page pretty but adds nothing to the content (syntax/semantics) of the document.
Sometimes images are content and not just style... and that's when you use an img tag.
Images can very well be part of the content.
Images that are part of the UI should be defined in CSS where possible.
Images that are part of content should be inline img tags.
It depends when. Sometimes the images are content and not style. Therefore you can use div's with css backgrounds if it's purely for style but use the tag when you want to show a content image.
Then you will truly have a 100% content/style separation.
I am trying to use a div to push the contents of a webpage down by 150px (the space will be used for a header image later that I don't yet have).
However because the div is blank or empty, browsers are in effect, ignoring it.
The html:
<body>
<div id="header_block"></div>
.... rest of document....
The CSS:
#header_block{width:100%;height:150px;min-height:150px}
The rest of the document works fine, but, even when I get the header graphic, its going to be applied as a background image.
Is there any way to stop the browser from ignoring this header_block because it thinks its empty?
What you want to do is give the main <div> a margin-top:150px ; that will push it 150px down from it's position in the flow then you should be good to go insofar as making your background image appear.
you can use trans.gif (a blank small image) using width and height according to your need. Then proper space will set.
Regards,
Arun Kumar
Try this:
#header_block{width:100%; border:1px solid;height:150px;min-height:150px}
So that you will get a look for header_block.
Divs don't hide if you've set their height explicitly via CSS. If it is hiding you've got other problems, likely due to a typo or incorrectly linking a stylesheet.
If you need a placeholder image, I use http://placehold.it/ which I find very convenient.
I have no affiliation with placehold.it
Something like https://placehold.it/300x100 gets you:
Has anyone seen the new google image search. It manages to make the images float in an area. the images fit into this correctly by grouping them in the sizes.
Frog images
I guess there are two ways of doing this:
Scripting by some sort of rule involving the widths and heights of these images
A Css rule for creating the images.
In a scripting scenario we could use a max width of 1000px then group up images to fill this 4 times for our 4 lines of images.
The Css rule would have to make the images float but also re order them.
Does anyone have any other ideas on how this would work?
They re-size images with canvas js. Then set li width, height and then add overflow hidden.
You also can get same result if you set width on all your images in css img.myimg {width:70px}. I don't think it will take longer to render the page then using js code.
I think google doing all these staf on server: try to resize window - it will be reloaded in a sercond with resized images. On the other hand I found a canvas element that also could be used to resize loaded images with js