homepage Welcome to WebmasterWorld Guest from 54.196.225.45
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Become a Pro Member
Home / Forums Index / Code, Content, and Presentation / HTML
Forum Library, Charter, Moderators: incrediBILL

HTML Forum

    
div style float left and Magic Magnify Zoom question
div style float left Magic Magnify Zoom
danepak




msg:4342595
 7:13 am on Jul 22, 2011 (gmt 0)

Hi,

I'm very very new to HTML, so I was hoping that I could get a bit of help with this problem.

I'm working on a website done in Wordpress.

I'm trying to set up two images next to each other.
That's done with
<div style="float: left; width: 383px;
margin: 5px; padding: 15px; border: 1px solid black;">
<img src="image.jpg" alt="some_text"/>
</div>
<div style="float: left; width: 383px;
margin: 5px; padding: 15px; border: 1px solid black;">
<img src="image.jpg" alt="some_text"/>
</div>

However, as I'm using the Magic Magnifier plugin, I'm struggling to find out where to insert this.

The Magic Magnifier line by itself would be:
<a class="MagicMagnify" href="http://highresversionofimage.jpg"><img class="alignnone" src="http://lowresversionofimage.jpg" alt="" width="383" height="576" /></a>

But where do I insert this in the code, so it works with div style?

And also, how do I make the header on the next line look normal?
After the two images, there should be a new line underneath.
But instead it's squeezed in next to the right hand image.

<h2>Header text here</h2>

Basically, I would like:
Image with zoom / image with zoom (both on one line)
Header text here (on the next line)

 

lucy24




msg:4342607
 7:43 am on Jul 22, 2011 (gmt 0)

And also, how do I make the header on the next line look normal?
After the two images, there should be a new line underneath.
But instead it's squeezed in next to the right hand image.

<h2>Header text here</h2>

That part's straightforward. If both of your images are floats, they will float next to anything that follows. That's what the "float" concept means. So either make the second image a non-float, or set {clear: both} in your CSS boilerplate for all headers.

danepak




msg:4342611
 8:01 am on Jul 22, 2011 (gmt 0)

Hi Lucy,
Thanks for you reply.

When I set the 2nd image to float: none, it pushed it down to the next line.

danepak




msg:4342634
 9:24 am on Jul 22, 2011 (gmt 0)

What I meant was that it pushed the 2nd image on to the next line.

Magic Toolbox




msg:4342648
 10:04 am on Jul 22, 2011 (gmt 0)

Must you put the images in divs? You could put them next to each other in cells of tables like so:

<table>
<tr>
<td>
<img src="image1.jpg" alt="some_text"/>
</td>
<td>
<img src="image2.jpg" alt="some_text"/>
</td>
</tr>
</table>


To add Magic Magnify, you should link to the full size version of the image and add a class of MagicMagnify. For example:

<table>
<tr>
<td>
<a href="image1-big.jpg" class="MagicMagnify"><img src="image.jpg" alt="some_text"/></a>
</td>
<td>
<a href="image2-big.jpg" class="MagicMagnify"><img src="image2.jpg" alt="some_text"/></a>
</td>
</tr>
</table>


To style the table how you want it, you can add a class to the table and then add CSS formatting. For example:

<table class="imageboxes">
<tr>
<td>
<a href="image1-big.jpg" class="MagicMagnify"><img src="image.jpg" alt="some_text"/></a>
</td>
<td>
<a href="image2-big.jpg" class="MagicMagnify"><img src="image2.jpg" alt="some_text"/></a>
</td>
</tr>
</table>


and this CSS:

.imageboxes {
width: 383px;
margin: 5px;
padding: 15px;
border: 1px solid black;
}

danepak




msg:4342700
 1:55 pm on Jul 22, 2011 (gmt 0)

Thanks Magic Toolbox.
This is perfect!

Magic Toolbox




msg:4342730
 3:29 pm on Jul 22, 2011 (gmt 0)

Great!

There was a small error in the CSS. If you want to style each table cell, you should specify the td like this:

.imageboxes td {
width: 383px;
margin: 5px;
padding: 15px;
border: 1px solid black;
}


Also, make sure you are using the latest version of the WordPress module for Magic Magnify which is updated every couple of months: [magictoolbox.com...]

danepak




msg:4342940
 12:10 am on Jul 23, 2011 (gmt 0)

Thanks Magic Toolbox,

If I change the width to something else (like 100px), the image sizes doesn't change for some reason.
Am I doing something wrong here?

lucy24




msg:4342953
 1:58 am on Jul 23, 2011 (gmt 0)

If I change the width to something else (like 100px), the image sizes doesn't change for some reason.
Am I doing something wrong here?

No, your browser is doing something right. Images are displayed at actual size unless the <img> declaration itself gives a different size. It can be expressed either in pixels (should always be the real size) or in percentages. That means percentage of the containing box, not percentage of the image's real size. But then you have to perform further jiggery-pokery to make sure the image never comes out larger than its real size-- which is very rarely successful unless it's some kind of decorative blur.

If you want to display images at something other than their actual size in pixels, proceed with extreme caution. Among other things, you're forcing the user to download a larger image than they'll be seeing, and you're relying upon the browser to resize gracefully, which is not always the case.

danepak




msg:4342956
 2:02 am on Jul 23, 2011 (gmt 0)

Thanks Lucy,
But why would the 'width: 383px' line then be included in the first place, if it doesn't actually change anything, if altered?

lucy24




msg:4342985
 5:31 am on Jul 23, 2011 (gmt 0)

In most browsers, cell width is overridden by content width. That means if you set your cell to 200 px wide and all it contains is a bunch of short words or a 100-px picture, fine. But if you've got a 300-px picture or a hyphenless "antidisestablishmentarianism", the cell will become as wide as it needs to be. Conversely, some browsers will flatly refuse to make a cell 200px wide if it has no content (where "no content" means a single &nbsp; for safety's sake) while all surrounding cells have stuff in them.

In general, forcing cell widths is very iffy. It's one of the rare places where inline CSS sometimes makes a difference.

:: idly wondering if the table-haters would be happier if only CSS would call it, say, "grid layout" ;) ::

danepak




msg:4342998
 7:40 am on Jul 23, 2011 (gmt 0)

OK, thanks, Lucy :-)

Global Options:
 top home search open messages active posts  
 

Home / Forums Index / Code, Content, and Presentation / HTML
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved