New to CSS....simple question maybe

Discussion in 'HTML' started by IGot2P, Dec 18, 2007.

  1. IGot2P

    IGot2P Guest

    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
     
    IGot2P, Dec 18, 2007
    #1
    1. Advertising

  2. IGot2P

    richard Guest

    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".
     
    richard, Dec 18, 2007
    #2
    1. Advertising

  3. 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
     
    Jonathan N. Little, Dec 18, 2007
    #3
  4. IGot2P

    dorayme Guest

    In article <fk91b8$hjo$>,
    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
     
    dorayme, Dec 18, 2007
    #4
  5. IGot2P

    IGot2P Guest

    dorayme wrote:
    > In article <fk91b8$hjo$>,
    > 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
     
    IGot2P, Dec 19, 2007
    #5
  6. IGot2P

    dorayme Guest

    In article <fka631$94g$>,
    IGot2P <> wrote:

    > dorayme wrote:
    > > In article <fk91b8$hjo$>,
    > > 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
     
    dorayme, Dec 19, 2007
    #6
  7. IGot2P

    IGot2P Guest

    dorayme wrote:
    > In article <fka631$94g$>,
    > IGot2P <> wrote:
    >
    >
    >>dorayme wrote:
    >>
    >>>In article <fk91b8$hjo$>,
    >>> 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
     
    IGot2P, Dec 19, 2007
    #7
  8. IGot2P

    IGot2P Guest

    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
     
    IGot2P, Dec 19, 2007
    #8
  9. IGot2P

    dorayme Guest

    In article <fka8nd$a37$>,
    IGot2P <> wrote:

    > dorayme wrote:
    > > In article <fka631$94g$>,
    > > IGot2P <> wrote:
    > >
    > >
    > >>dorayme wrote:
    > >>
    > >>>In article <fk91b8$hjo$>,
    > >>> 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),

    <!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>

    --
    dorayme
     
    dorayme, Dec 19, 2007
    #9
  10. IGot2P

    dorayme Guest

    In article
    <>,
    dorayme <> wrote:

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

    --
    dorayme
     
    dorayme, Dec 19, 2007
    #10
  11. IGot2P

    IGot2P Guest

    dorayme wrote:
    > In article
    > <>,
    > dorayme <> wrote:
    >
    >
    >>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 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
     
    IGot2P, Dec 19, 2007
    #11
  12. IGot2P

    dorayme Guest

    In article <fkaddo$d42$>,
    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:

    <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)

    --
    dorayme
     
    dorayme, Dec 19, 2007
    #12
  13. 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;
    }

    <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
     
    Jonathan N. Little, Dec 19, 2007
    #13
  14. IGot2P

    IGot2P Guest

    dorayme wrote:
    > In article <fkaddo$d42$>,
    > 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:
    >
    > <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)
    >


    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
     
    IGot2P, Dec 19, 2007
    #14
  15. IGot2P

    dorayme Guest

    In article <fkbgua$s86$>,
    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. <g>

    --
    dorayme
     
    dorayme, Dec 19, 2007
    #15
  16. IGot2P

    IGot2P Guest

    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
     
    IGot2P, Dec 19, 2007
    #16
  17. IGot2P

    Bergamot Guest

    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
     
    Bergamot, Dec 20, 2007
    #17
  18. IGot2P

    Ben C Guest

    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.
     
    Ben C, Dec 20, 2007
    #18
    1. Advertising

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

It takes just 2 minutes to sign up (and it's free!). Just click the sign up button to choose a username and then you can ask your own questions on the forum.
Similar Threads
  1. ruca

    Very simple question (maybe) :)

    ruca, Jun 2, 2004, in forum: ASP .Net
    Replies:
    4
    Views:
    353
    Robert Koritnik
    Jun 3, 2004
  2. Nick Dangr

    Maybe a simple question?

    Nick Dangr, Jan 20, 2006, in forum: HTML
    Replies:
    0
    Views:
    378
    Nick Dangr
    Jan 20, 2006
  3. Guest
    Replies:
    5
    Views:
    623
  4. Ville Vainio
    Replies:
    11
    Views:
    618
    Hamish Lawson
    Aug 10, 2004
  5. ruca

    Very simple question (maybe) :)

    ruca, Jun 2, 2004, in forum: ASP .Net Web Controls
    Replies:
    4
    Views:
    143
    Robert Koritnik
    Jun 3, 2004
Loading...

Share This Page