Announcement

Collapse
No announcement yet.

Having images side by side and not overlapping?

Collapse
X
 
  • Filter
  • Time
  • Show
Clear All
new posts

  • eJM
    replied
    Originally posted by Saqibm View Post
    Jim - I hope this isn't too cheeky but you couldn't leave the page up there for a couple of days could you? Just so I can keep coming back to it whilst I sort my own website out.
    It makes a good mini-tutorial, so I will leave it up for anyone who stumbles upon it - especially for those who find this thread in the future. I've always hated broken links. Glad it could be useful.

    Jim

    Leave a comment:


  • Saqibm
    replied
    Kerry-Anne - Yes that is exactly what I asked for and it your solution worked perfectly as you can see (I've implemented it on the website already).

    Jim - I just looked at what you did and although its not what I asked for that is a GREAT solution for smaller browsers and a fantastic recommendation. I didn't even realised I could do that. I'm am going to work on trying to implement that on to the website now. (The link to the homepage I'm not too fussed about, the navbar has all the links needed.

    Both of you guys thanks so much!

    Jim - I hope this isn't too cheeky but you couldn't leave the page up there for a couple of days could you? Just so I can keep coming back to it whilst I sort my own website out.


    EDIT: No worries I've managed to save the page with the script to my desktop.

    Leave a comment:


  • eJM
    replied
    Originally posted by Kerry-Anne View Post
    That it will, but that's what the OP asked for
    Well, I guess I interpreted it differently. I figured having them overlap and not causing a scroll bar for that huge portion of internet users who still have narrower screens was better than limiting the usefulness of the site to those with browsers that could go 1244px or wider only.

    Jim

    Leave a comment:


  • peterska2
    replied
    Originally posted by eJM View Post
    That won't allow the images to overlap so there is no horizontal scroll bar for those with narrower browser windows. Although the right image won't wrap to another line, the total width of the images is 1200px. Anyone using a browser width of about 1244px or less will get a horizontal scroll bar. I hate those things.


    R'gards,

    Jim
    That it will, but that's what the OP asked for

    Leave a comment:


  • eJM
    replied
    Originally posted by Kerry-Anne View Post
    The easiest way is to put them into a table with two cells. One which aligns left for the left image and one that aligns right for the right image.
    That won't allow the images to overlap so there is no horizontal scroll bar for those with narrower browser windows. Although the right image won't wrap to another line, the total width of the images is 1200px. Anyone using a browser width of about 1244px or less will get a horizontal scroll bar. I hate those things.


    R'gards,

    Jim

    Leave a comment:


  • eJM
    replied
    Having your images side-by-side will always cause the difficulty you are having. I would set the right side image as a background pushed to the right side, the background color as black and then call the left side image with HTML in the container.

    I can explain it a little better if you view my example. I borrowed your images, edited them to make part of the left side image transparent (the right side of the left image) and the right side image was edited just to make it a smaller file size (page load times are important). Now when the browser window is narrower, the right side image floats under the left side image. Because I made part of the left image transparent, the effect looks pretty cool.

    I didn't take the time to be real picky about image quality, but it doesn't look too bad. The page also validates for xHTML 1.0 Transitional - the same doctype that vBulletin uses. The page works in wide or narrow browser windows - all the way down to almost 800px wide.

    One problem I noticed was the inability to make the logo a link to your home page. It's after 2am now and I'm too tired to figure that one out.

    Here's the example page: Overlapping Header Images

    Best R'gards,

    Jim

    Leave a comment:


  • peterska2
    replied
    The easiest way is to put them into a table with two cells. One which aligns left for the left image and one that aligns right for the right image.
    Code:
    <table border="0" cellpadding="0" cellspacing="0" width="100%">
    <tr>
    <td align="left">
    <IMG SRC="http://darkline.org.uk/left.jpg" BORDER="0" alt="" />
    </td>
    <td align="right">
    <IMG SRC="http://darkline.org.uk/right.jpg" BORDER="0" alt="" />
    </td>
    </tr>
    </table>

    Leave a comment:


  • Saqibm
    started a topic Having images side by side and not overlapping?

    Having images side by side and not overlapping?

    Hi there,

    Pretty new to website design and HTML coding.

    My website is as follows:

    www.darkline.org.uk

    In the header I have the following code which shows one image on the left of the header, and on the right:

    <IMG SRC = "http://darkline.org.uk/left.jpg"
    BORDER = 0
    align = left
    >
    <IMG SRC="http://darkline.org.uk/right.jpg"
    BORDER = 0
    align = right
    >

    This works fine and is useful as when the users screen is a different size the images will move to fit the screen.

    The problem arises when the smaller the users screen is, the images come closer together which is fine as that is the intention, however if the users screen is too small the right image will fall underneath the right image when I want them to stay on the same line.

    What I would like them it to do is to get as close as they can and then stretch the width of the page if the screen is too small but stay on the same line.

    Can anyone help with the coding to do this? Is it possible?

    In your browser if you make the browser narrower, imitating a smaller screen you can see the images come closer together and what I mean with right image falling below the left.

    Any help would be appreciated!

    Saqib
widgetinstance 262 (Related Topics) skipped due to lack of content & hide_module_if_empty option.
Working...
X