New to CSS....simple question maybe

I

IGot2P

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
 
R

richard

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".
 
J

Jonathan N. Little

richard said:
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

}
 
D

dorayme

IGot2P said:
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?
 
I

IGot2P

dorayme said:
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
 
I

IGot2P

Jonathan said:
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
 
D

dorayme

IGot2P said:
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),

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Title</title>

<style type="text/css" media="all">
..thumbnailHolder {width: 550px; margin: auto;}
..featurectr {padding: 10px; border: 0;}
</style>

</head>

<body>

<div class="thumbnailHolder">

A Peek Inside (click on images to enlarge)

<a href="images/lodge1_big.jpg" rel="lightbox"><img
class="featurectr"
src="http://www.rivervalleylodgeandcampground.com/images/lodge1_sm
all.jpg" alt="Lodge interior" height="187" width="250"></a><a
href="images/lodge2_big.jpg" rel="lightbox"><img
class="featurectr"
src="http://www.rivervalleylodgeandcampground.com/images/lodge2_sm
all.jpg" alt="Lodge interior" height="187" width="250"></a>
<a href="images/lodge3_big.jpg" rel="lightbox"><img
class="featurectr"
src="http://www.rivervalleylodgeandcampground.com/images/lodge3_sm
all.jpg" alt="Lodge interior" height="187" width="250"></a><a
href="images/lodge4_big.jpg" rel="lightbox"><img
class="featurectr"
src="http://www.rivervalleylodgeandcampground.com/images/lodge4_sm
all.jpg" alt="Lodge interior" height="187" width="250"></a>
</div>

</body>
</html>
 
D

dorayme

dorayme said:
A Peek Inside (click on images to enlarge)

Perhaps wrap this in a <p>, 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:

<div class="thumbnailHolder">

<p>A Peek Inside (click on images to enlarge)</p>

etc

I honestly do not know what is semantically correct here. It is
not exactly a paragraph, it is some instructions for the
pictures. It is not quite a heading... although...? Anyway this
should do.

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

IGot2P

dorayme said:
Perhaps wrap this in a <p>, 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:

<div class="thumbnailHolder">

<p>A Peek Inside (click on images to enlarge)</p>

etc

I honestly do not know what is semantically correct here. It is
not exactly a paragraph, it is some instructions for the
pictures. It is not quite a heading... although...? Anyway this
should do.

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.

Thanks again,

Don
 
D

dorayme

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.
[/QUOTE]

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:

<http://netweaver.com.au/alt/inlineImages/inlinePicWithDescenderSp
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)
 
J

Jonathan N. Little

IGot2P said:
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>
 
I

IGot2P

dorayme said:
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:

<http://netweaver.com.au/alt/inlineImages/inlinePicWithDescenderSp
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)
[/QUOTE]

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
 
D

dorayme

IGot2P said:
dorayme wrote:
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. <g>
 
I

IGot2P

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
 
B

Bergamot

Jonathan said:
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.
 
B

Ben C

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.


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.
 

Ask a Question

Want to reply to this thread or ask your own question?

You'll need to choose a username for the site, which only take a couple of moments. After that, you can post your question and our members will help you out.

Ask a Question

Members online

Forum statistics

Threads
473,744
Messages
2,569,484
Members
44,903
Latest member
orderPeak8CBDGummies

Latest Threads

Top