Makeing images static i.e. don't scale with the web broswer window

**Maat Himself** · 03-18-2012, 09:07 PM

Hello everyone! Greetings to you all, I am known as Maat, and recently I got tired of using pre-made web templates for my personal site, and decided to create one myself!

All has gone good so far, save a few things. The thing that I hate the most right now is my nav bar, which is individual pictures with roll over images too, scales per user's web browser. They wont stay put like my banner!

Here is my web site...
www.maathimself.com

If you take your browser, and make the box smaller than what my nav bar is on my site, as you see the buttons move. How do I go about fixing, kind sirs and or madams?

If needed I can post the my html code, if that will help for any of you to look at.

Thank you advance to those who will lend a helping hand! =D

`Maat

**Eye for Video** · 03-18-2012, 10:37 PM

Start by validating your code here:
http://validator.w3.org/
Then... lots of ways to accomplish this.
Review how to use <div>s and not tables here:
http://www.w3schools.com/css/css_boxmodel.asp
Then set a fixed width to a main_container <div> wide enought to hold all your navigation... put all content in that.
Best wishes,
EfV

**Maat Himself** · 03-18-2012, 10:40 PM

Thank you sir! I shall give this a go.

**Maat Himself** · 03-23-2012, 08:58 PM

Ok, so I am confused. What code exactly do I want that will tell the nav buttons to not move? All I have manged to do thus far is create a box model with a white background and orange border. Don't get me wrong, that's awesome! I'm gonna use that alot, But I just don't understand what you mean or where to put the <div> and "main_container" and what not. =O

**_Krik_** · 03-23-2012, 09:42 PM

I believe he is recommending that you wrap all the contents of the site in a div and then use CSS (style) to set a fixed width to that div.

Also you could just set a fixed width to the "body" element or even set a fixed width to the "div" that is currently wrapping the nav bar and that table (as the div does not have an "id" attribute I can't get more specific). Or even just wrap the nav bar in a div and set a width for it. In basic create some kind of parent element that has a fixed width value.

Should note as the banner is 1280px the width of any wrapping element will need to be the same. And on that note you should really plan for most visitors (80%+) to have a total viewable area of less than 1200 pixels (browser window will be smaller with borders and scrollbars). And in truth about 1/3 of all web site traffic will have a viewable area of 1000px or less. Your site may look good to you but visitors with different computer configurations may not like it.

Also as Eye for Video noted, use div's not table's. The table element is only for tabular data (like spreadsheets) and as you look to just be getting into learning HTML its best to learn it the right way or you'll kick yourself later.

**Eye for Video** · 03-23-2012, 09:54 PM

You MUST validate your code so you can start to identify errors and correct them.
http://validator.w3.org/
First, you have not DOCTYPE declaration:
http://www.w3schools.com/tags/tag_doctype.asp
that's a must have!
Then you have 2 <body> opening tags:
http://www.w3schools.com/tags/att_body_background.asp
next, you have an unclosed element after all the menu code.... you need

Code:

</div>

right after:

Code:

<a href="about.html"><img src="about.gif" border="0" id="Image5" onMouseOver="MM_swapImage('Image5','','/aboutr.gif',1)" onMouseOut="MM_swapImgRestore()"> </a>

Start small and work your way thru a few good HTML tutorials before you attempt to create a Web site...and then validate the code at every step:
http://www.w3schools.com/html/
Best wishes,
Eye for Video

**PBSWebDesign** · 03-24-2012, 12:01 PM

Oh boy why am I not seeing a head tag defined and multiple body tags present?

Code:

<html>
<title>Maat Himself.com</title>
<script type="text/javascript">
function MM_preloadImages() { //v3.0
  var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
    var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
    if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
}

function MM_swapImgRestore() { //v3.0
  var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc;
}

function MM_findObj(n, d) { //v4.01
  var p,i,x;  if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
    d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
  if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
  for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
  if(!x && d.getElementById) x=d.getElementById(n); return x;
}

function MM_swapImage() { //v3.0
  var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)
   if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}
}
</script>
<BODY BACKGROUND="bgp.jpg" onLoad="MM_preloadImages('/wideosr.gif','/picturesr.gif','/musicr.gif','/portr.gif','/aboutr.gif')"> 
<body>
<div style="text-align: center;"><a href="index.html"><img src="banner.gif" border="0"></a></div>
<div style="text-align: center;"><a href="wideos.html"><img src="wideos.gif" border="0" id="Image1" onMouseOver="MM_swapImage('Image1','','/wideosr.gif',1)" onMouseOut="MM_swapImgRestore()"></a><a href="pictures.html"><img src="pictures.gif" border="0" id="Image2" onMouseOver="MM_swapImage('Image2','','/picturesr.gif',1)" onMouseOut="MM_swapImgRestore()"></a><a href="music.html"><img src="music.gif" border="0" id="Image3" onMouseOver="MM_swapImage('Image3','','/musicr.gif',1)" onMouseOut="MM_swapImgRestore()"></a><a href="portfolio.html"><img src="port.gif" border="0" id="Image4" onMouseOver="MM_swapImage('Image4','','/portr.gif',1)" onMouseOut="MM_swapImgRestore()"></a><a href="about.html"><img src="about.gif" border="0" id="Image5" onMouseOver="MM_swapImage('Image5','','/aboutr.gif',1)" onMouseOut="MM_swapImgRestore()"> </a>

<style type="text/css">
p
{
width:1009px;
margin:0px auto;
text-align:center;
background-color:White;
border-style:solid;
border-color:orange;
border-width:5px;
}
p.padding
{
padding:10px;
}
</style>

<body>
<p class="padding">Yeap, still working on it.</p>
</body>

</body>
</html>
<legal>LEgal ****, ****</legal>

Ok quick little html lesson here:

When you create a page you DO NOT make multiple body tags. A page should generally be laid out like this:

Code:

<html>
<head>
    <title></title>
</head>
<body>
</body>
</html>

Ok so this is just a skeleton of the site. All of your content that you want visible goes inside of the ONE body tag. Not multiple tags but just one per page. Mark up your language with divs, and paragraphs, and heading, etc, but dont make multiple body tags

Also make sure you have a head tag defined as well. This is where the title of the page goes along with meta data and scripts/css if you so choose to incorporate those into your page. I recommend making them external files and calling them into the page if you can.

Now as far as your issue goes with the nav bar, set a width for your page first. Then define a set width for the div itself containing said nav bar. This will allow it to stay put. Take a look at one of the websites I built for a client: http://www.jmcanineservices.com Resize the browser and see if you see anything move. You shouldn't. The site is set at a set width of 960px and all the divs inside are set to varying widths to create the layout.

**Maat Himself** · 03-25-2012, 08:20 PM

Thanks for teh Info Mr. PBS!

Ok, I shall try and give this another go! I appreciate the help everyone.

**PBSWebDesign** · 03-25-2012, 11:20 PM

Keep us updated. Dont hesitate to shoot me an email or PM if you need help either. I can guide you through what needs to be done if you get caught on something.

**Maat Himself** · 03-26-2012, 10:42 AM

Originally Posted by PBSWebDesign

Keep us updated. Dont hesitate to shoot me an email or PM if you need help either. I can guide you through what needs to be done if you get caught on something.

Haha, right on! I tip my hat to ye.

**Maat Himself** · 03-26-2012, 11:09 AM

Ok so added "width" to the line with the Nav bar and closed the div aswell, and it KINDA worked! The buttons do NOT move at all now when the browser is resized, however the bar seems to be static on one spot now, which is nowhere near centered! So close yet so far it seems.

Here is the code

Code:

<div style="text-align: center; width:1281px;"><a href="wideos.html"><img src="wideos.gif" border="0" id="Image1" onMouseOver="MM_swapImage('Image1','','/wideosr.gif',1)" onMouseOut="MM_swapImgRestore()"></a><a href="pictures.html"><img src="pictures.gif" border="0" id="Image2" onMouseOver="MM_swapImage('Image2','','/picturesr.gif',1)" onMouseOut="MM_swapImgRestore()"></a><a href="music.html"><img src="music.gif" border="0" id="Image3" onMouseOver="MM_swapImage('Image3','','/musicr.gif',1)" onMouseOut="MM_swapImgRestore()"></a><a href="portfolio.html"><img src="port.gif" border="0" id="Image4" onMouseOver="MM_swapImage('Image4','','/portr.gif',1)" onMouseOut="MM_swapImgRestore()"></a><a href="about.html"><img src="about.gif" border="0" id="Image5" onMouseOver="MM_swapImage('Image5','','/aboutr.gif',1)" onMouseOut="MM_swapImgRestore()"> </a></div>

**Maat Himself** · 03-26-2012, 11:27 AM

UPDATE! After I did the above, I added two more codes...

margin-left: auto; margin-right: auto

Now the nav bar stays put in the middle, and does not move when the browser is re-sized! BUT only in Firefox it seems. IE, everything is all messed up. But I almost don't care! But I suppose it needs to look right on all browsers.

This is my code naow, anything I am doing wrong? Is this not really proper?

Code:

<div style="text-align: center; width:1281px; margin-left: auto; margin-right: auto"><a href="wideos.html"><img src="wideos.gif" border="0" id="Image1" onMouseOver="MM_swapImage('Image1','','/wideosr.gif',1)" onMouseOut="MM_swapImgRestore()"></a><a href="pictures.html"><img src="pictures.gif" border="0" id="Image2" onMouseOver="MM_swapImage('Image2','','/picturesr.gif',1)" onMouseOut="MM_swapImgRestore()"></a><a href="music.html"><img src="music.gif" border="0" id="Image3" onMouseOver="MM_swapImage('Image3','','/musicr.gif',1)" onMouseOut="MM_swapImgRestore()"></a><a href="portfolio.html"><img src="port.gif" border="0" id="Image4" onMouseOver="MM_swapImage('Image4','','/portr.gif',1)" onMouseOut="MM_swapImgRestore()"></a><a href="about.html"><img src="about.gif" border="0" id="Image5" onMouseOver="MM_swapImage('Image5','','/aboutr.gif',1)" onMouseOut="MM_swapImgRestore()"> </a></div>

**Maat Himself** · 03-30-2012, 11:27 PM

Shameless bump

**_Krik_** · 03-31-2012, 12:35 AM

For margin auto to work you have to have other factors set correctly.

First the parent element (in this case <body>), try adding a "width: 100%;". Also you may need to set the "position", "position: absolute;" should work for you in this case, if it is needed.

Then for the navigation bar <div> try adding a "position: relative;".

If that all should not work there are tons of articles on the use of margin auto for centering, if you do a search I am sure you could find some with good example code.

Hope that helps.

I thought I would throw a couple side notes in to save some headaches.

I saw a background="bgp.jpg" in the <body> element/tag, for now, it will work, but HTML 5 does not support the "background" attribute. So for forward compatibility you should set that using CSS. Same goes for the use of "border" in your <img> tags. For the most part, any tag or attribute that can be handled by CSS is being done away with in HTML 5. W3schools (not related to W3C) has list of tags at http://www.w3schools.com/html5/html5_reference.asp if you click a given tag you can find out what attributes are being removed with HTML 5.

Next, a cleaner way of doing "margin-left: auto; margin-right: auto;" is "margin: 0 auto;"

Then I see you using "text-align: center;" on images, it only works on ... text.

And last that <style>, best practices usually dictates you put <style> tags in the <head>.

**Eye for Video** · 03-31-2012, 10:59 AM

Maat,
You are building on a foudation of sand. Attempting to fix the problems with things like 100% and position:absolute does nothing to fix the underlying MAJOR, faults with the page.
As mentioned from the very beginning...validate the code...fix the foundation, don't bother adding more bandaid fixes.
EfV

Thread: Makeing images static i.e. don't scale with the web broswer window

Thread Tools

Display

Makeing images static i.e. don't scale with the web broswer window

Thread Information

Users Browsing this Thread

Bookmarks

Bookmarks

Posting Permissions