New to CSS....simple question maybe

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

Re: New to CSS....simple question maybe

Post removed (X-No-Archive: yes)

Re: New to CSS....simple question maybe

richard wrote:
> On Tue, 18 Dec 2007 11:51:55 -0600, IGot2P 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

}


--
Take care,

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

Re: New to CSS....simple question maybe

In article ,
IGot2P 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.
>

Since you know the width of the pics, you could just do inline
them in a container whose width is plenty big for two of them
side by side but not for three. They will wrap, two by two down...

Need the markup for this?

--
dorayme

Re: New to CSS....simple question maybe

dorayme wrote:
> In article ,
> IGot2P 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.
>>
>
>
> Since you know the width of the pics, you could just do inline
> them in a container whose width is plenty big for two of them
> side by side but not for three. They will wrap, two by two down...
>
> Need the markup for this?

Yeah, it would be appreciated. How 'bout both the CSS and XHTML?

Thanks a bunch,

Don

Re: New to CSS....simple question maybe

In article ,
IGot2P wrote:

> dorayme wrote:
> > In article ,
> > IGot2P 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.
> >>
> >
> >
> > Since you know the width of the pics, you could just do inline
> > them in a container whose width is plenty big for two of them
> > side by side but not for three. They will wrap, two by two down...
> >
> > Need the markup for this?
>
> Yeah, it would be appreciated. How 'bout both the CSS and XHTML?
>

Take a look at:

http://netweaver.com.au/alt/IGot2P.html

and adapt to suit.

--
dorayme

Re: New to CSS....simple question maybe

dorayme wrote:
> In article ,
> IGot2P wrote:
>
>
>>dorayme wrote:
>>
>>>In article ,
>>> IGot2P 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.
>>>>
>>>
>>>
>>>Since you know the width of the pics, you could just do inline
>>>them in a container whose width is plenty big for two of them
>>>side by side but not for three. They will wrap, two by two down...
>>>
>>>Need the markup for this?
>>
>>Yeah, it would be appreciated. How 'bout both the CSS and XHTML?
>>
>
>
> Take a look at:
>
> http://netweaver.com.au/alt/IGot2P.html
>
> and adapt to suit.

Unfortunately netweaver.com.au times out before it ever
connects.....will try again later.

Don

Re: New to CSS....simple question maybe

Jonathan N. Little wrote:

> richard wrote:
>
>> On Tue, 18 Dec 2007 11:51:55 -0600, IGot2P 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

Re: New to CSS....simple question maybe

In article ,
IGot2P wrote:

> dorayme wrote:
> > In article ,
> > IGot2P wrote:
> >
> >
> >>dorayme wrote:
> >>
> >>>In article ,
> >>> IGot2P 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.
> >>>>
> >>>
> >>>
> >>>Since you know the width of the pics, you could just do inline
> >>>them in a container whose width is plenty big for two of them
> >>>side by side but not for three. They will wrap, two by two down...
> >>>
> >>>Need the markup for this?
> >>
> >>Yeah, it would be appreciated. How 'bout both the CSS and XHTML?
> >>
> >
> >
> > Take a look at:
> >
> > http://netweaver.com.au/alt/IGot2P.html
> >
> > and adapt to suit.
>
> Unfortunately netweaver.com.au times out before it ever
> connects.....will try again later.

Really? Where are you? I don't like the sound of this! Please let
me know about it when you can.

Here is the mark up I used, you can paste it into your text
editor and call it anything.html and run it over your browser
(like Safari or Firfox),

"http://www.w3.org/TR/html4/strict.dtd">

A Peek Inside (click on images to enlarge)

class="featurectr"
src="http://www.rivervalleylodgeandcampground.com/images/lod ge1_sm
all.jpg" alt="Lodge interior" height="187" width="250"> href="images/lodge2_big.jpg" rel="lightbox"> class="featurectr"
src="http://www.rivervalleylodgeandcampground.com/images/lod ge2_sm
all.jpg" alt="Lodge interior" height="187" width="250">
class="featurectr"
src="http://www.rivervalleylodgeandcampground.com/images/lod ge3_sm
all.jpg" alt="Lodge interior" height="187" width="250"> href="images/lodge4_big.jpg" rel="lightbox"> class="featurectr"
src="http://www.rivervalleylodgeandcampground.com/images/lod ge4_sm
all.jpg" alt="Lodge interior" height="187" width="250">

Re: New to CSS....simple question maybe

In article
,
dorayme wrote:

>
> A Peek Inside (click on images to enlarge)

Perhaps wrap this in a

, come to think of it, I notice Opera
behaves differently to Safari when this is unwrapped.

But now I cannot reproduce what I first saw in Opera.

Anyway try:

Re: New to CSS....simple question maybe

dorayme wrote:
> In article
> ,
> dorayme wrote:
>
>
>>A Peek Inside (click on images to enlarge)
>
>
> Perhaps wrap this in a

, come to think of it, I notice Opera
> behaves differently to Safari when this is unwrapped.
>
> But now I cannot reproduce what I first saw in Opera.
>
> Anyway try:
>
>

Re: New to CSS....simple question maybe

In article ,
IGot2P wrote:

> > The server is slow? Perhaps because i was accessing it. I am
> > loading lots of stuff to it at the moment.
> >
> > Here is an alternative server address:
> >
> > http://members.optushome.com.au/droovies/alt/IGot2P.html
> >
> > and
> >
> > http://members.optushome.com.au/droovies/alt/IGot2P_original .html
> >
> > If you can't get onto this one, I will eat my school hat, it is
> > just within reach...
>
> I can access both of the last URLs but still cannot reach your original.
> I am in Iowa in the US. It is after midnight here but I will try your
> suggestions tomorrow when time permits.
>

OK. Here is a message for when you wake up, a favour please:

If you still can't access those files at the former address,
maybe it has something to do with that there is also a fetching
of your pics at your server... I don't know. What about:

ace.html>

which uses no 'off server' images, does this load on your browser
in Iowa? (It is not relevant to your question, just it worries me
if this server is not reliable as I use it to make big files
available to overseas companies and appreciate early warnings of
trouble)

--
dorayme

Re: New to CSS....simple question maybe

IGot2P wrote:
> Jonathan N. Little wrote:
>
>> richard wrote:
>>
>>> On Tue, 18 Dec 2007 11:51:55 -0600, IGot2P 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;
}

width="250">

width="250">

width="250">

width="250">

--
Take care,

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

Re: New to CSS....simple question maybe

dorayme wrote:
> In article ,
> IGot2P wrote:
>
>>> The server is slow? Perhaps because i was accessing it. I am
>>> loading lots of stuff to it at the moment.
>>>
>>> Here is an alternative server address:
>>>
>>> http://members.optushome.com.au/droovies/alt/IGot2P.html
>>>
>>> and
>>>
>>> http://members.optushome.com.au/droovies/alt/IGot2P_original .html
>>>
>>> If you can't get onto this one, I will eat my school hat, it is
>>> just within reach...
>> I can access both of the last URLs but still cannot reach your original.
>> I am in Iowa in the US. It is after midnight here but I will try your
>> suggestions tomorrow when time permits.
>>
>
> OK. Here is a message for when you wake up, a favour please:
>
> If you still can't access those files at the former address,
> maybe it has something to do with that there is also a fetching
> of your pics at your server... I don't know. What about:
>
> > ace.html>
>
> which uses no 'off server' images, does this load on your browser
> in Iowa? (It is not relevant to your question, just it worries me
> if this server is not reliable as I use it to make big files
> available to overseas companies and appreciate early warnings of
> trouble)
>

Currently I am at my office in a different community with a different
Internet provider and I can access ALL your URLs. I did try to access
them earlier this morning from my home (where I was also at last night)
and could not. I find it somewhat hard to believe that a different
Internet provider would make the difference thus I will try it from home
again in a few hours. Might just also run a trace route from home and
see what I get.

The code in your example looks good and I will give it a try when time
permits. It is currently 10:30 AM here, what time would that be at your
location?

Don

Re: New to CSS....simple question maybe

In article ,
IGot2P wrote:

> dorayme wrote:

> > OK. Here is a message for when you wake up, a favour please:
> >
> > If you still can't access those files at the former address,
> > maybe it has something to do with that there is also a fetching
> > of your pics at your server... I don't know. What about:

> Currently I am at my office in a different community with a different
> Internet provider and I can access ALL your URLs. I did try to access
> them earlier this morning from my home (where I was also at last night)
> and could not. I find it somewhat hard to believe that a different
> Internet provider would make the difference thus I will try it from home
> again in a few hours. Might just also run a trace route from home and
> see what I get.
>
> The code in your example looks good and I will give it a try when time
> permits. It is currently 10:30 AM here, what time would that be at your
> location?

Well, it says 3.30 am. I know it was here when I got up at 5 am.
I get up early to get through work and mean to keep away from
newsgroups! But I always fail.

--
dorayme

Re: New to CSS....Thanks Jonathan and dorayme

Hey, thanks a bunch to both of you. I somewhat combined both of your
answers and all seems to work fine. OTOH, I do still have the problem
with the lightbox script. It works fine in Firefox but in IE the
translucent part does not come down all the way to the bottom of the
screen. Tonight I will look at the script and the related CSS and see
what I can find. Of course, you are both welcome to help resolve the
problem if you so desire. :-)

Thanks again and have a great holiday,

Don

Re: New to CSS....simple question maybe

Jonathan N. Little wrote:
>
>
> img.featurectr {
> border-width: 0px; <-- try "border: 0;"

Why? border-width:0; removes the border. Changing it to the border
shorthand property doesn't make any difference, it's just a few less
keystrokes.

> margin: 15px auto; <-- if you change images back to inline use
> padding not margin

FYI, margin works on inline images, too. The auto value won't center it,
of course, but margin:15px; will still put space between images. Using
padding instead only affects collapsing margins, at least in this case.

--
Berg

Re: New to CSS....simple question maybe

On 2007-12-20, Bergamot wrote:
> Jonathan N. Little wrote:
>>
>>
>> img.featurectr {
>> border-width: 0px; <-- try "border: 0;"
>
> Why? border-width:0; removes the border. Changing it to the border
> shorthand property doesn't make any difference, it's just a few less
> keystrokes.
>
>> margin: 15px auto; <-- if you change images back to inline use
>> padding not margin
>
> FYI, margin works on inline images, too. The auto value won't center it,
> of course, but margin:15px; will still put space between images. Using
> padding instead only affects collapsing margins, at least in this case.

Or rather not in this case-- there's never any margin collapsing between
margins on inline boxes or inline blocks.

It's only vertical margins on normal-flow blocks that collapse.