I have two images contained in one div and am trying to align the second image next to the first. If I assign each image a class, how can I get the second image to be aligned with the first using css? Or is it best to have a div for each image?
<div class="standard">
<img src="images/room02.jpg"/>
<img src="images/room04.jpg"/>
</div>
You don't need a separate div or class for each image. It all depends on how you want to align them. Just see this guide for more information: http://www.inmotionhosting.com/support/edu/website-design/insert-images-website/align-float-images-css
Related
I would like to convert my html report to docx. I put 2 images side by side on my docx page.
For my first try, I just use this html below and I can achieve what I need:
<div>
<img width="256px" height="256px" src="imga1.png"/>
<!-- I use this to simulate margin-right -->
<span> </span><span> </span><span> </span><span>
</span>
<img width="256px" height="256px" src="image2.png"/>
<div>
Now I would like to add a header for each image and that creates complication.
As an assumption, my first text header will not exceed 256px (because it is the image's size). And 256px corresponds to 16 "&emsp".
Then I compute my text header image by using a canvas 2d context method in javascript (text metrics).
After that I substract 256px by my computed text width and compute the number of "&emsp" that I need to fit the first image.
With this method, I can put my header for my 2 images but it is not efficient because my text second header image is not always aligned to the second image.
I am looking methods to put my image header all aligned to images.
I am creating a website for the first time with Bootstrap3 and have a page with 3 images which will be links to galleries. These images are not thumbnails.
I have alternative images (B+W) for hovering and so my code currently changes the image from colour to B+W on hover.
I want to be able to also include a text overlay on hover so people will know to click through to the gallery. So, I'm looking to add text on hover to the B+W image. Alternatively, I would make the colour image less opaque and add text to that, if it's easier!
Here's my html code currently.
<img src="landscape.jpg" alt="Landscape" onMouseOver="this.src='landscapebw.jpg'" onmouseout="this.src='landscape.jpg'" class="img-circle img-responsive">
Thanks in advance.
try adding a title attribute :
<img src="landscape.jpg" alt="Landscape" onMouseOver="this.src='landscapebw.jpg'" onmouseout="this.src='landscape.jpg'" class="img-circle img-responsive">
I would like to put an image on another image like it is done in Facebook, Google+ and now Twitter.
Large back image with a smaller one on the left side dropping off the large one, if that makes sence
There's several ways you can do this, 1 of them is using position (so you're on the right track).
Place 2 images inside an element that has position:relative and place the top image position:absolute, like so:
<div style="position:relative">
<img alt="" src="foreground.jpg" />
<img alt="" style="position:absolute; left:40px; top:20px" src="background.jpg" />
</div>
Check out this DEMO
Another way would be to have the background image set as a background on the <div> and place the image you want on top directly inside that div. Check out this 2nd DEMO
I'm working on a gallery type application - one template puts together a popup dialog for a larger view of thumbnail images when clicked. The server path to the image is included as a template variable.
Gallery.Templates.Popup = "\
<div class='popup'>\
<img class='popup-image' src='{{image-path}}' />\
<div class='name'>{{name}}</div>\
<div class='caption'>{{caption}}</div>\
<div class='dimensions'>{{dimensions}}</div>\
<div class='price'>{{price}}</div>\
</div> \
";
This works very well EXCEPT for the first time the image is loaded. The dialog is constructed and shown but at the time the html string is attached to the dom, it lacks the image. The problem it is causing is in positioning the dialog:
The dialog box is positioned in the middle of the screen like this:
left = window.width /2 - dialog.width/2
But since the image is not present, the dialog.width variable is incorrect. Again, this only happens the first time a thumbnail is clicked, I'm guessing the image is cached for subsequent clicks.
Would this be handled by prefetching the images somehow? If so, do they need to be attached to the dom in order to be cached or can I just load them in an array?
Many Thanks !
If you can get the image size ahead of time from the server, you could use that to help you size the '.popup' div appropriately.
It sounds like a bad idea to prefetch images if they aren't needed and I can't think of a way to ensure that a specific image is loaded before it's html is generated programmatically.
I need to add a text on each of the image and I have the image gallery constructed using img tags. Can't I append div tags under img tags. Similar to the one shown here :
<img id="img1" class="img1_1" src="hello1_1">
<div class="textDesc">HELLO1_1</div>
</img>
Though the div is appended to img tag , but I cant see the text "HELLO1_1" on the image.
Please can anyone help me?
If you need the source code I can share it with you.
Here is the link to test the scenario :
http://jsfiddle.net/XUR5K/9/
An image tag can not have child elements. Instead, you need to position the DIV on top of the image using CSS.
Example:
<div style="position: relative;">
<img />
<div style="position: absolute; top: 10px;">Text</div>
</div>
That's but one example. There's plenty of ways to do this.
The img element has a self closing tag, so you can't give it child elements and expect it to work. Its content model is defined as empty. Source.
I suspect any children you specify won't be rendered because an img element is a replaced element, as mentioned in the W3C spec.
Rules of good tone.
Use null source in IMG tag.
Use CSS content:"" for WebKit browsers.
Insert element through JavaScript. Clear in HTML does not affect.
Also you can use pseudo elements.
Example: https://github.com/Alexei03a/canvas-img