If this is your first visit, be sure to
check out the FAQ by clicking the
link above. You may have to register
before you can post: click the register link above to proceed. To start viewing messages,
select the forum that you want to visit from the selection below.

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

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!

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

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&#37;+) 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.

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

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.

----------------------------------------------------------------------------------------------
WYSIWYG editors will never beat my hand written code!!!! Learn to do it in notepad and learn how to actually control your website! Current Project http://www.jmcanineservices.com

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.

----------------------------------------------------------------------------------------------
WYSIWYG editors will never beat my hand written code!!!! Learn to do it in notepad and learn how to actually control your website! Current Project http://www.jmcanineservices.com

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.

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?

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.

Maat,
You are building on a foudation of sand. Attempting to fix the problems with things like 100&#37; 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