Posted by Jonathan N. Little on 12/19/07 13:28

IGot2P wrote:
> Jonathan N. Little wrote:
>
>> richard wrote:
>>
>>> On Tue, 18 Dec 2007 11:51:55 -0600, IGot2P <IGot2P@crsales.com> wrote:
>>>
>>>> Ok, basically all I want to do is to put two image/links side by
>>>> side and NOT above each other. Point your browser to
>>>> http://www.rivervalleylodgeandcampground.com/lodge.html and you will
>>>> see that all four bottom image/links are vertical but I want two
>>>> lines of two. How do I do this? .....and yes I know that in IE there
>>>> is an error because my translucent overlay is not coming to the
>>>> bottom of the screen when an image is enlarged.
>>>>
>>>> Happy Holiday,
>>>>
>>>> Don
>>>
>>>
>>> Simplest way would be to do a table. Otherwise use div and "float".
>>
>>
>> No and no. The simplest way is to stop displaying the images as blocks!
>>
>>
>> img.featurectr {
>>
>> border-width: 0px; <-- try "border: 0;"
>>
>> margin: 15px auto; <-- if you change images back to inline use
>> padding not margin
>>
>> display: block; <-- delete this
>>
>> }
>
> Thanks for the advice but I had tried padding before and to center for a
> high resolution screen (i.e. 1440 by 900) the padding must be so great
> that only one image will show per line at lower resolutions. Also, I get
> a block of light color jumping at me when I do a mouseover. Again, you
> can check it out at http://www.rivervalleylodgeandcampground.com/lodge.html

Don't understand the padding-left: 230px; at all. Don't you want the
image side by side not as a totem pole? If so keep the image inline and
if you want them to center in their containing paragraphs then
text-align: center; for the "p" elements, actually they are not really
paragraphs and DIV would be better suited.

div.thumbs {
text-align: center; margin: .5em;
}
div.thumbs a:hover {
/* remove hover color on thumbs */
background-color: transparent;
}
div.thumbs a img {
/* remove border on thumbs images */
border: 0;
}

<div class="thumbs">
<a href="images/lodge1_big.jpg" rel="lightbox">
<img src="images/lodge1_small.jpg" alt="Lodge interior" height="187"
width="250"></a>
<a href="images/lodge2_big.jpg" rel="lightbox">
<img src="images/lodge2_small.jpg" alt="Lodge interior" height="187"
width="250"></a>
<div>

<div class="thumbs">
<a href="images/lodge3_big.jpg" rel="lightbox">
<img src="images/lodge3_small.jpg" alt="Lodge interior" height="187"
width="250"></a>
<a href="images/lodge4_big.jpg" rel="lightbox">
<img src="images/lodge4_small.jpg" alt="Lodge interior" height="187"
width="250"></a>
<div>

--
Take care,

Jonathan
-------------------
LITTLE WORKS STUDIO
http://www.LittleWorksStudio.com

[Back to original message]