Centering an Image Larger than a Browser Window

This site is best viewed in a modern browser with JavaScript enabled.

Centering an Image Larger than a Browser Window

Barbaric

Here is my website;

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.

Yossis

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%;}

Major_Payne

CSS Errors

HTML Errors

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

<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&#8217;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&#8217;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:

.bigPicture {
width: 1365px;
margin: 0 auto;
margin-top: -16px;
}

<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&#8217;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&#8217;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>

Barbaric

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

Major_Payne

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.

Barbaric

So, you’re saying getting rid of the horizontal scroll bar will fix it? How do I do that?

Barbaric

I tried hiding the horizontal scroll bar, but that didn’t help.

http://barbaricsoftworks.com/indexFixAttemptV7

coothead

Hi there Barbaric,

try it like this...

[color=navy]<!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>
[/color]

coothead

Barbaric

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.

coothead

Hi there Barbaric,

coothead

Barbaric

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/

Barbaric

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.

Barbaric

Made a new thread;

http://www.webdeveloper.com/forum/showthread.php?264801-Anchor-partway-down-a-large-image