Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 8 of 8

Thread: Help!

  1. #1
    New to the CF scene
    Join Date
    May 2011
    Posts
    4
    Thanks
    3
    Thanked 0 Times in 0 Posts

    Unhappy Help!

    Hello,

    I am new to these forums, so if I don't supply enough info or do something wrong, please let me know.

    My problem.

    My current problem is simple, yet complicated to fix. I have been designing the website for my company for the last few days, and ever since I started, the same problem has been coming up.

    I've tried to ignore it, but it makes the web page look so ugly.

    The problem: My banner keeps going 'over' the body of the webpage when zoomed in (or when viewed on a mobile device).

    This is my website on a normal browser with a high resolution:
    http://tinyurl.com/mes-normal

    This is my website on a normal browser with a low resolution (small screen):
    http://tinyurl.com/mes-not-normal

    This is my website on a mobile device:
    http://tinyurl.com/mes-phone

    (You can also go to my site here: http://www.maranoaelectrical.com.au

    I have never seen this problem before on any websites, and have searched google for hours and hours and no one seems to have this problem.

    I have tried all sorts of solutions:

    •Making a CSS with the banner as the background
    •Normally placing an image
    •Placing the Image in a table
    •Placing the image in an AP
    •Placing the image in a <div>

    It's just frustrating.

    If someone could help me as soon as possible, that would be great, as it is for a popular business and I have had many emails requesting that my site be complete, and I can't complete it until I solve this problem as the banner is on every page.

    Thank you so much!

    Additional Details:
    1.I know it's not a browser based problem, as I have tried it on all browsers, and it works fine as long as the resolution is HIGH
    2.The only solution I have come up with is a temporary one, and that is merely zooming out. But some viewers need the page to be zoomed in, so yeah, go figure.

  • #2
    New Coder
    Join Date
    Apr 2011
    Posts
    46
    Thanks
    4
    Thanked 8 Times in 8 Posts
    Is it possible to put your codes here??

  • #3
    New to the CF scene
    Join Date
    May 2011
    Posts
    4
    Thanks
    3
    Thanked 0 Times in 0 Posts

    Code Slices

    Ok here are the ones I've tried....

    - Image inside a <div>
    Code:
    <div><img src="http://www.maranoaelectrical.com.au/img/logo_1/banner.jpg" alt="Banner" width="1260" height="202"></div>
    - Banner inside an AP
    Code:
    <div id="apDiv2"><img src="http://www.maranoaelectrical.com.au/img/logo_1/banner.jpg" width="1261" height="202"></div>
    - Banner CSS (Link to CSS File)
    Code:
    <p class="bannerimg">&nbsp;</p>
    - Banner in a table
    Code:
    <table width="200" border="0" align="center">
      <tr>
        <td><img src="http://www.maranoaelectrical.com.au/img/logo_1/banner.jpg" width="1261" height="202"></td>
      </tr>
    </table>
    If you want the entire code for my current page, just go to http://www.maranoaelectrical.com.au/index.php and look at the source, although it has nothing special.

    Thank you!

  • #4
    New Coder
    Join Date
    Apr 2011
    Posts
    19
    Thanks
    2
    Thanked 2 Times in 2 Posts
    Maybe it would be better if you use percentage(%) in your height and width.
    Example:

    <img src="source.jpg" width="10%" height="10%">

    so that the picture will automatically fits into the screen resolution.

    I hope i gave you some idea..

  • Users who have thanked newbb for this post:

    M.E.S (05-05-2011)

  • #5
    New Coder
    Join Date
    Apr 2011
    Posts
    46
    Thanks
    4
    Thanked 8 Times in 8 Posts
    Quote Originally Posted by newbb View Post
    Maybe it would be better if you use percentage(%) in your height and width.
    Example:

    <img src="source.jpg" width="10%" height="10%">

    so that the picture will automatically fits into the screen resolution.

    I hope i gave you some idea..

    Ok. I've just tried newbb's suggestion and it really works! Just in case, put your image in a <div> and set the <div> height to the same height as your image.

    Here's the code:

    <div width="100%" height="202"><img src="http://www.maranoaelectrical.com.au/img/logo_1/banner.jpg" width="100%" height="202"></div>

    The red ones are the one you need to add.

  • Users who have thanked Dr3am3rz for this post:

    M.E.S (05-05-2011)

  • #6
    New to the CF scene
    Join Date
    May 2011
    Posts
    4
    Thanks
    3
    Thanked 0 Times in 0 Posts

    Thank you!

    Thank you so so much!
    I'll try it now and see how it goes.

    Thank you! Arrh you guys are awesome!

    Will get back on how I go

  • #7
    New Coder
    Join Date
    Apr 2011
    Posts
    46
    Thanks
    4
    Thanked 8 Times in 8 Posts
    No problem =)

  • Users who have thanked Dr3am3rz for this post:

    M.E.S (05-05-2011)

  • #8
    New to the CF scene
    Join Date
    May 2011
    Posts
    4
    Thanks
    3
    Thanked 0 Times in 0 Posts
    It WORKED! IT'S BRILLIANTTTTTTTTT!
    THANK YOU SO MUCH!

    Again, thank you.


  •  

    Tags for this Thread

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •