www.webdeveloper.com
Results 1 to 13 of 13

Thread: Centering an Image Larger than a Browser Window

  1. #1
    Join Date
    Sep 2012
    Posts
    13

    Centering an Image Larger than a Browser Window

    Here is my website;

    barbaricsoftworks.com

    In screen resolution and zooming situations where the main image (logo and flags) is wider than the browser, it decides it doesnít want to center it and starts aligning it to the left. This causes the image to not line up with the background and text.

    If everything looks fine, just zoom in and youíll see what I mean.

    Iím sure altering the design and using a smaller image would eliminate the problem most of the time, but I would prefer not to do that. Iíve seen people talk about similar problems on forums, but Iíve never been able to figure out how to apply those solutions to my Dreamweaver generated code.

    This is my first website ever, and any help would be appreciated. Thank you in advance.

  2. #2
    Join Date
    Sep 2012
    Posts
    1

    Lightbulb

    Hi,
    You can use CSS to not let the image to be wider then the browser/ you can do it with the css property max-width.

    for example:
    img {max-width: 100%;}

  3. #3
    Join Date
    May 2005
    Location
    Gold Coast (MS)
    Posts
    2,217
    CSS Errors

    HTML Errors

    Code:
    .bigPicture {
    display: block;
    width: 1365px;
    height: 1049px;
    margin: 0 auto;
    margin-top: -16px;
    border: 0
    }
    You have two IDs for the map tag. Only one is allowed.

    Code:
    <p><img class="bigPicture" src="bigPicture.jpg" alt="" usemap="#Map" id="Image1" />
        <map name="Map" id="Map">
          <area shape="rect" coords="120,133,254,522" href="http://barbaricsoftworks.com/jay" target="_self" alt="Jay’s Portfolio" onmouseover="MM_swapImage('Image1','','jay.jpg',1)" onmouseout="MM_swapImgRestore()" />
          <area shape="rect" coords="1113,136,1247,522" href="http://barbaricsoftworks.com/sam" target="_self" alt="Sam’s Portfolio" onmouseover="MM_swapImage('Image1','','sam.jpg',1)" onmouseout="MM_swapImgRestore()" />
          <area shape="rect" coords="121,629,254,1014" href="http://barbaricsoftworks.com/games" target="_self" alt="Games" onmouseover="MM_swapImage('Image1','','games.jpg',1)" onmouseout="MM_swapImgRestore()" />
          <area shape="rect" coords="1113,630,1246,1015" href="http://barbaricsoftworks.com/contact" target="_self" alt="Contact" onmouseover="MM_swapImage('Image1','','contact.jpg',1)" onmouseout="MM_swapImgRestore()" />
          <area shape="poly" coords="683,996,283,722,283,12,1085,11,1085,723" href="http://barbaricsoftworks.com/" target="_self" alt="News" onmouseover="MM_swapImage('Image1','','home.jpg',1)" onmouseout="MM_swapImgRestore()" />
        </map>
      </p>
      <h1>News</h1>

    Alternative:

    Code:
    .bigPicture {
    width: 1365px;
    margin: 0 auto;
    margin-top: -16px;
    }
    Code:
    <div class="bigPicture">
    <img src="bigPicture.jpg" alt="" style="width:1365px; height:1049px; border:0;" usemap="#Map" id="Image1" />
        <map name="Map" id="Map">
          <area shape="rect" coords="120,133,254,522" href="http://barbaricsoftworks.com/jay" target="_self" alt="Jay’s Portfolio" onmouseover="MM_swapImage('Image1','','jay.jpg',1)" onmouseout="MM_swapImgRestore()" />
          <area shape="rect" coords="1113,136,1247,522" href="http://barbaricsoftworks.com/sam" target="_self" alt="Sam’s Portfolio" onmouseover="MM_swapImage('Image1','','sam.jpg',1)" onmouseout="MM_swapImgRestore()" />
          <area shape="rect" coords="121,629,254,1014" href="http://barbaricsoftworks.com/games" target="_self" alt="Games" onmouseover="MM_swapImage('Image1','','games.jpg',1)" onmouseout="MM_swapImgRestore()" />
          <area shape="rect" coords="1113,630,1246,1015" href="http://barbaricsoftworks.com/contact" target="_self" alt="Contact" onmouseover="MM_swapImage('Image1','','contact.jpg',1)" onmouseout="MM_swapImgRestore()" />
          <area shape="poly" coords="683,996,283,722,283,12,1085,11,1085,723" href="http://barbaricsoftworks.com/" target="_self" alt="News" onmouseover="MM_swapImage('Image1','','home.jpg',1)" onmouseout="MM_swapImgRestore()" />
        </map>
    
      <h1>News</h1>
    </div>

  4. #4
    Join Date
    Sep 2012
    Posts
    13
    Thanks or the eye opener Major Payne, the amount of errors Dreamweaver puts into its code is truly staggering.

    I probably applied your fixes incorrectly, but neither of them seemed to fix my problem.

    http://barbaricsoftworks.com/indexFixAttemptV5

    http://barbaricsoftworks.com/indexFixAttemptV6

  5. #5
    Join Date
    May 2005
    Location
    Gold Coast (MS)
    Posts
    2,217
    Well, it isn't a problem. I have a 22-inch monitor. If I maximize my browser so its viewport is full screen, your image stays centered up to the time the horizontal scroll bar appears. Continue zooming in causes the image to shift to the right because the actual center of the image is shifting right making it appear as if it is not centered. As long as you have an horizontal scroll bar by zooming in, you will shift the actual center of image off screen to the right. You'll have to move the horizontal scroll bar to re-center the image in viewport.

  6. #6
    Join Date
    Sep 2012
    Posts
    13
    So, you’re saying getting rid of the horizontal scroll bar will fix it? How do I do that?

  7. #7
    Join Date
    Sep 2012
    Posts
    13
    I tried hiding the horizontal scroll bar, but that didn’t help.

    http://barbaricsoftworks.com/indexFixAttemptV7

  8. #8
    Join Date
    Jan 2004
    Location
    chertsey, a small town s.w. of london, england.
    Posts
    1,467
    Hi there Barbaric,

    try it like this...
    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
       "http://www.w3.org/TR/html4/strict.dtd">
    <html lang="en">
    <head>
    
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <meta name="language" content="english"> 
    <meta http-equiv="Content-Style-Type" content="text/css">
    <meta http-equiv="Content-Script-Type" content="text/javascript">
    
    <title>Barbaric Softworks</title>
    
    <style type="text/css">
    @font-face {
       font-family:'freefonts'; 
       src: url(http://barbaricsoftworks.com/HamletOrNot.ttf) format("truetype"); 
     }
    body {
        margin:0;
        background-color:#000;
     }
    img {
        border:0;
     }
    #container {
        width:1365px;
        margin:auto; 
    }
    #Image1 {
        display:block;
     }
    #content {
        width:642px;
        padding:0 38px 40px;
        margin:auto;
        background-image:url(http://barbaricsoftworks.com/repeatingBackground.jpg);
     }
    h1 {
        position:relative;
        top:-36px;
        margin:0;
        font-family:'freefonts','palatino linotype','book antiqua',Palatino,serif;
        font-size:48px;
        color:#000;
        text-align:center;
    }
    .newText {
        font-family:'freefonts','palatino linotype','book antiqua',Palatino,serif;
        font-size:26px;
        color:#000;
        text-align:justify;
        line-height:1.4;
    }
    #blastcasta {
        font-size:50px;
        text-align:center;
     }
    a:link,a:visited,a:active  {
        color: #f00;
        text-decoration:none;
    }
    a:hover {
        color:#900;
    }
    #copyright {
        font-family:'freefonts','palatino linotype','book antiqua',Palatino,serif;
        font-size:26px;
        text-align: center;
    }
    </style>
    
    <script type="text/javascript">
       var preloads=[];
    
    function preload(){
    
    for(var i=0;i<arguments.length;i++) {
       preloads[preloads.length]=new Image();
       preloads[preloads.length-1].src=arguments[i];
    
      }
    
     }
    preload(
       'http://barbaricsoftworks.com/jay.jpg','http://barbaricsoftworks.com/sam.jpg',
       'http://barbaricsoftworks.com/games.jpg','http://barbaricsoftworks.com/contact.jpg',
       'http://barbaricsoftworks.com/home.jpg'
     );
    
    function init(){
       ars=document.getElementById('Map').getElementsByTagName('area');
    for(c=0;c<ars.length;c++) {
        ars[c].number=c;
    ars[c].onmouseover=function() {
       document.getElementById('Image1').src=preloads[this.number].src;
    this.onmouseout=function() { 
       document.getElementById('Image1').src='http://barbaricsoftworks.com/bigPicture.jpg';
        }
       }
      }
     }
       window.addEventListener?
       window.addEventListener('load',init,false):
       window.attachEvent('onload',init);
    </script>
    
    <script type="text/javascript" src="http://www.poweringnews.com/newsjavascript.aspx?
    feedurl=http%3A//warlordandchieftain.tumblr.com/&amp;maxitems=-1&amp;showfeedtitle=0&amp;
    showtitle=1&amp;showdate=1&amp;showsummary=1&amp;showauthor=0&amp;showactionsbox=0&amp;
    showrsslink=0&amp;showcopyright=0&amp;opennewwindow=0&amp;inheritstyles=1&amp;
    bgcolor=%23FFFFFF&amp;titlefontsize=10&amp;summaryfontsize=10&amp;
    fontfamily=Arial%2CHelvetica&amp;titlecolor=%230000CC&amp;summarycolor=%23000000&amp;
    sepstyle=none&amp;sepcolor=%23A0A0A0&amp;objectid=newsblock72413944">
    </script>
    
    </head>
    <body>
    
    <div id="container">
    
    <img  id="Image1" src="http://barbaricsoftworks.com/bigPicture.jpg" alt="" usemap="#Map">
    <map name="Map" id="Map">
     <area shape="rect" coords="120,133,254,522" href="http://barbaricsoftworks.com/jay"  alt="Jay's Portfolio">
     <area shape="rect" coords="1113,136,1247,522" href="http://barbaricsoftworks.com/sam" alt="Sam's Portfolio" >
     <area shape="rect" coords="121,629,254,1014" href="http://barbaricsoftworks.com/games" alt="Games">
     <area shape="rect" coords="1113,630,1246,1015" href="http://barbaricsoftworks.com/contact" alt="Contact">
     <area shape="poly" coords="683,996,283,722,283,12,1085,11,1085,723" href="http://barbaricsoftworks.com/index.html" alt="News">
    </map>
    
    <div id="content">
    
    <h1>News</h1>
    
     
    <div id="newsblock3337545" class="newText">
    <div id="newsblock72413944">
    
    <div id="blastcasta"><br>
    <a href="http://www.blastcasta.com/"><b>News Widgets &amp; Tickers</b><br>
    Powered by BlastCasta</a>
    </div>
    
    </div><!-- end #newsblock72413944 -->
    
    </div><!-- end #newsblock3337545 -->
    
    <div id="copyright"> &copy; 2012 Barbaric Softworks,  all rights reserved</div>
    
    </div><!-- end #content -->
    
    </div><!-- end #container -->
    
    
    </body>
    </html>
    
    coothead

  9. #9
    Join Date
    Sep 2012
    Posts
    13
    It worked! Thank you so much! If I ever need to hire a web developer, I’ll hire you.

    I see what you tried to do there at the bottom, but that font doesn't have a copyright symbol.

  10. #10
    Join Date
    Jan 2004
    Location
    chertsey, a small town s.w. of london, england.
    Posts
    1,467
    Hi there Barbaric,

    the HTML entities &copy; or &#169; for © will work regardless of your special font.

    coothead

  11. #11
    Join Date
    Sep 2012
    Posts
    13
    That’s how it should work, but the copyright symbol just doesn’t show up for me in that font. *shrug* The .png is good enough for my purposes.

    So when I looked at the code more closely, I saw that you really reworked a lot of stuff, a lot of it not even related to the problem. It looks like you just went through the whole page fixing and improving the code and making it more professional. That’s just above and beyond the kind of help I was expecting when I decided to post on here. I tried to hire my web developer friends to fix bugs I’ve been struggling with on the site, but something always came up. Then I make a post to anonymous internet strangers and BAM! DONE AND THEN SOME!

    So, thanks a bunch Coothead!

    http://barbaricsoftworks.com/

  12. #12
    Join Date
    Sep 2012
    Posts
    13
    I just opened the site in IE again and noticed that your changes fixed all three of my IE compatibility issues; the enable scripts prompt, the red outlines on link images, and the main image being shifted down. Wow.

    So only one more thing on the site remains to be done that I haven’t been able to figure out. Sorry this isn’t strictly related to the original topic, but there are some smart people on this thread. My whole design concept of the huge image at the top of the site will seem a lot more sensible with this implemented;

    I am trying to figure out a way to have my internal links load the pages starting partway down the large image at the top. I’m trying to get my site to behave as if there was an anchor a little more than halfway down the shield image, a few pixels above the word Barbaric. Right now I have anchors on the very first text on every page, but I don’t want to skip over the big image entirely. And I also don’t want to always make the user scroll down all the way from the top to get to the text. I want to raise the anchors about 540 pixels upward, or do something else to that effect. Is this possible? I tried inserting a named anchor into a hotspot in Dreamweaver, and the site pretty much imploded.

  13. #13
    Join Date
    Sep 2012
    Posts
    13

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

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
  •  
HTML5 Development Center



Recent Articles