Re: [css-d] Two images side by side
At 5/21/2007 05:23 AM, jana coyle wrote:
>What I am looking for is to have image#1 and image#2 horizontally
>next to each other
>on the same line. I want the mouse over large image 1 to overlap
>both image 1 and
>image 2 without displacing them.
Kevin,
The reason your images aren't side-by-side is that you've contained
the first one in a DIV: (your markup reformatted here for ease of reading):
A DIV is by default a block-level element and therefore will act like
a pararaph in starting a new row. See:
CSS 2.1 Specification
9 Visual formatting model
http://www.w3.org/TR/CSS21/visuren.html
I made a quick tweak to your markup and styling:
http://juniperwebcraft.com/test/jana-coyle-help2.html
_
_
- I've removed the DIV from around the first image. (I could also
have changed that div to {display: inline;} but removing it seemed simpler.)
- I also removed the P that enclosed the two images which also seemed
to be extraneous.
- I removed the "magnify" span from around the hyperlinked images,
since the anchor element by itself serves as sufficient wrapper.
Here's the CSS I added:
_
/* ensure enough room for the large image */
div#center
{
height: 500px;
}
/* define the bounds of the large absolutely-positioned image */
a.p1
{
position: relative;
}
/* remove the large image from display */
a.p1 img.large
{
display: none;
}
/* display the large image on hover */
a.p1:hover img.large
{
display: inline;
position: absolute;
left: 0;
}
_
Tested in Firefox 2 & IE 7 (Windows).
Regards,
Paul
__
Paul Novitski
Juniper Webcraft Ltd.
http://juniperwebcraft.com
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7 information -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Two images side by side
What I am looking for is to have image#1 and image#2 horizontally next to each other on the same line. I want the mouse over large image 1 to overlap both image 1 and image 2 without displacing them. __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7 information -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Two images side by side
At 5/20/2007 11:39 PM, [EMAIL PROTECTED] wrote: >Do you also have a suggestion for the solution of the original >poster's problem? As I keep saying, it depends on what the OP really wants as the final effect. He said: At 5/19/2007 09:08 PM, Kevin wrote: >I have two images that I would like positoned side by side. I have >setup a mouseover effect on image#1. After setting up this effect >the images are now lined up one ontop of the other. How can I >position the images side by side and still keep the effect on >image#1. Here is a link to my code. >http://www.precisemessenger.com/private/help2.html What does he mean by "still keep the effect on image#1"? The effect that's evident on the cited page is that a large image replaces a smaller one. The way he's styled it, the enlargement of image #1 overlaps the smaller image #2. My guess, in the absence of further elucidation from the OP, is that he wants both images to remain fully visible when one of them is enlarged. If so then this requires a change in fundamental design strategy that precedes detailed markup decisions. The myriad possibilities include: - position each thumbnail in a space large enough that its large version doesn't cover up or displace any other thumbnail. - display each large image on a page separate from the thumbnails. - display each large image in a window distinct from the one containing the thumbnails. - display each large image in a movable block so that the user can move it aside to click on the other thumbnails. - display each large image in a block that disappears on the next click revealing the other thumbnails. There are a ton of ways to deal with this kind of situation. We can't really make useful suggestions until the designer tells us what the design criteria are. None of the cases I've suggested here mandate any particular markup decisions, tables or otherwise. Regards, Paul __ Paul Novitski Juniper Webcraft Ltd. http://juniperwebcraft.com __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7 information -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Two images side by side
Nice non-original sermon. Do you also have a suggestion for the solution of the original poster's problem? Bruce > This topic has been discussed so exhaustively over the past few > years, I'm frankly surprised you're raising it again here as though > it were new terrain to be explored. And here, like the predictable > fish, I've risen to take the bait! > > Regards, > > Paul > __ > > Paul Novitski > Juniper Webcraft Ltd. > http://juniperwebcraft.com > Do you mean "proverbial fish"? __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7 information -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Two images side by side
>At 12:08 AM -0400 5/20/07, Kevin wrote: > >I have two images that I would like positoned side by side. At 5/20/2007 05:11 AM, tedd wrote: >I don't see anything wrong with using a simple table for this. Tedd, I see the question the other way around: Why would you choose to use markup that's mismatched to the meaning of the content? Purely in order to get a desired presentational effect? Ah. Well, either you believe that the semantic integrity of the markup should take priority over presentational convenience or you don't. What's the problem? It's not as though anyone will *actually* shoot you for driving your markup from your presentation... I doubt that you really believe that these two anonymous images constitute tabular data -- you're just squinting so they look like that because you find it convenient to use table markup. If you believe they're data cells that semantically belong in two different columns and then the client changes their mind about the presentation and decides they should go one on top of the other, would you suddenly start believing that they were data cells that belonged in the same column? What happens, for example, when next month the number of images increases and they won't all fit on one row? Do we suddenly 'realize' that all along they belonged in separate rows and columns? Shouldn't our markup decisions be driven primarily by the meaning of the content rather than by presentational circumstance? Anyway, the particular case at hand is a weak excuse to rehash this old argument. There's no need to use table markup merely to position two images side by side. For starters, images are inline by default and will normally present horizontally unless constrained otherwise. Depending on the final effect the designer is after, there are a variety of markup and styling alternatives to explore before shoe-horning those images into table cells. Of course, semantics aside, one of the main practical reasons not to use tables for layout is that doing so constrains future redesign so much. If the markup is versatile and CSS controls presentation, it's possible to change one's mind about the presentation less painfully. Tables are not presentationally versatile. They're perfect for tabular data that inherently belongs in rows and columns; for anything else, it's like choosing rebar and concrete to build something we know perfectly well from past experience is likely to be redesigned. This seems like a good application of Occam's razor -- why complicate the situation more than it requires by using inappropriate and presentationally rigid markup? This topic has been discussed so exhaustively over the past few years, I'm frankly surprised you're raising it again here as though it were new terrain to be explored. And here, like the predictable fish, I've risen to take the bait! Regards, Paul __ Paul Novitski Juniper Webcraft Ltd. http://juniperwebcraft.com __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7 information -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Two images side by side
At 9:47 AM -0400 5/20/07, Roger Roelofs wrote: >>tedd wrote: >>It might not be popular on this list, but I don't see anything wrong >>with using a simple table for this. >> >>Anyone care to object and say why he shouldn't? > >I object! :-) > >First, I don't think it will do what the original poster was after, >tho I could be wrong because the current layout confused me. >Currently the two images are one over the other and a table would >make the hover effect kind of strange. The OP said he wanted images side by side. To me that means one of the left and one of the right (or the other way around if you're dyslectic as I am). But, it doesn't mean stacked vertically as he had them. So, let's stop trying to guess as to what the OP wanted and discuss using tables for this. I've heard a lot about the "only proper use" of tables is for tabular data, but I'm not convinced. Sure, if you use tables for a nested layout of images and text, I understand the problems that it presents to screen readers (i.e., accessibility concerns). However, to keep some elements aligned, using table tags is certainly less cumbersome and requires far less coding than using css to accomplish the same thing -- and it doesn't have to adversely affect accessibility. Also, you can place table attributes in css via "id" and "class" identifiers and remove them from the html. As such, I don't see where the tag is any more, or less, inaccessible than a tag if used properly. As for maintainability, a simple table is much easier to see what's going on than a bunch of floats. One of the biggest repeating problems on this list is trying to align stuff side by side via css instead of using a simple table, is it not? As for being a "clean html freak" -- so am I. However, I want *all* my code to be neat AND be Semantic Markup. To me, tables provide more explanation as to what's going on than floats in trying to get things aligned side by side. Now, I am not promoting wide-spread use of tables for everything (like the old days) -- I'm just saying that with some task, the old tool makes more sense. So, do I hear anyone else object? Please, if I'm wrong, show me the error of my way. Cheers, tedd -- --- http://sperling.com http://ancientstones.com http://earthstones.com __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7 information -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Two images side by side
Tedd, On May 20, 2007, at 8:11 AM, tedd wrote: > At 12:08 AM -0400 5/20/07, jana coyle wrote: >> I have two images that I would like positoned side by side. I have >> setup a mouseover effect on image#1. After setting up this effect >> the images are now lined up one ontop of the other. How can I >> position the images side by side and still keep the effect on >> image#1. Here is a link to my code. >> http://www.precisemessenger.com/private/help2.html > > It might not be popular on this list, but I don't see anything wrong > with using a simple table for this. > > Anyone care to object and say why he shouldn't? I object! :-) First, I don't think it will do what the original poster was after, tho I could be wrong because the current layout confused me. Currently the two images are one over the other and a table would make the hover effect kind of strange. Second, tables are great for tabular data, but I'm not sure two unlabeled pics qualify. If they had headers and other data to go with, then you'd get no argument from me. My (very unscientific) test for whether something is tabular data is to imagine the content pasted into a spreadsheet. If it feels out of place, if you can imagine sending it to another technically competent person and hearing them say 'Why did you do this in Excel', then it doesn't qualify as tabular data. Third, using markup that fits the content makes future maintenance easier. I can't begin to tell you the number of times I've had to alter code I wrote a year or two ago and have spent more time figuring out what the original code was doing than actually enhancing the page. Yes, I confess to being a clean html freak. -- Roger Roelofs __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7 information -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Two images side by side
At 12:08 AM 5/20/2007, jana coyle wrote: >I have two images that I would like positoned side by side. I have >setup a mouseover effect on image#1. After setting up this effect >the images are now lined up one ontop of the other. How can I >position the images side by side and still keep the effect on >image#1. Here is a link to my code. >http://www.precisemessenger.com/private/help2.html I added "style=float:left" to both the id #magnify and the next tag and that worked in both FF and IE7. Ken __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7 information -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Two images side by side
At 12:08 AM -0400 5/20/07, jana coyle wrote: >I have two images that I would like positoned side by side. I have >setup a mouseover effect on image#1. After setting up this effect >the images are now lined up one ontop of the other. How can I >position the images side by side and still keep the effect on >image#1. Here is a link to my code. >http://www.precisemessenger.com/private/help2.html > >Thank you, >Kevin It might not be popular on this list, but I don't see anything wrong with using a simple table for this. Anyone care to object and say why he shouldn't? Cheers, tedd -- --- http://sperling.com http://ancientstones.com http://earthstones.com __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7 information -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Two images side by side
At 5/19/2007 09:08 PM, jana coyle wrote:
>I have two images that I would like positoned side by side. I have
>setup a mouseover effect on image#1. After setting up this effect
>the images are now lined up one ontop of the other. How can I
>position the images side by side and still keep the effect on
>image#1. Here is a link to my code.
>http://www.precisemessenger.com/private/help2.html
The large version of image 1 is overlapping image 2 because you're
applying {position: absolute}. If you keep position as static or
absolute this problem won't occur unless you force it.
(By the way, in both Firefox 2 and IE7 (Windows) the images aren't
side-by-side, they're one on top of the other. I don't know if you
misspoke or if you're looking at them in a very different browser than I am.)
How you should style this will depend on how you want it to look when
each image is enlarged.
Regards,
Paul
__
Paul Novitski
Juniper Webcraft Ltd.
http://juniperwebcraft.com
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7 information -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
