• 0

Noob question for a simple intro page - centrally align image


Question

Very noob question,

I want to make a really simple intro page ... just a big image in the middle of the page with some button links on

I made it in Dreamweaver and centrally aligned it but if I open up on a smaller browser window, on the bottom it shows the horizontal slider which I don't want it too

I know why, coz my image I'm using is 1200 pixels wide --- but I don't want to use it as a background image as I have links on it used as maps

Anyone help a quick solution?

http://www.hamiltonwatch.com/webapp/catalog2010/index1.html

Link to comment
Share on other sites

10 answers to this question

Recommended Posts

  • 0

Very noob question,

I want to make a really simple intro page ... just a big image in the middle of the page with some button links on

I made it in Dreamweaver and centrally aligned it but if I open up on a smaller browser window, on the bottom it shows the horizontal slider which I don't want it too

I know why, coz my image I'm using is 1200 pixels wide --- but I don't want to use it as a background image as I have links on it used as maps

Anyone help a quick solution?

http://www.hamiltonwatch.com/webapp/catalog2010/index1.html

Can you post yourou HTML code, and CSS if you have written.

Link to comment
Share on other sites

  • 0

No CSS

I just literally did this via Dreamweaver

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>Hamilton Watch - 2010 Collection</title>

<style type="text/css">

body {

background-color: #000;

text-align: center;

margin-top: 0px;

}

</style>

</head>

<body>

<img src="cover3.jpg" width="1280" height="665" border="0" align="middle" usemap="#Map" />

<map name="Map" id="Map">

<area shape="rect" coords="823,276,941,298" href="http://www.hamiltonwatch.com/contents/catalogs/cato_2010.pdf" target="_blank" />

<area shape="rect" coords="822,223,942,245" href="http://www.hamiltonwatch.com/webapp/catalog2010/main/Default.html" target="_blank" />

<area shape="rect" coords="549,625,732,647" href="http://www.hamiltonwatch.com/webapp/en-us/" />

</map>

</body>

</html>

Thanks :)

Link to comment
Share on other sites

  • 0

I'd say your picture is too big. Instead of having 1280 pixels, why not crop it down to that box, then make the background colour of the page black? It achieves the same effect that you have there, while also making the align="middle" attribute have some meaning. The picture should also continue to align to the middle of the browser in different sizes.

That would be my suggestion, at least.

Link to comment
Share on other sites

  • 0

Yea I tried that before, my only gripe was, I wanted to have a widebackground image...there is no other way around it right?

The only way is, to have a large image and have it classified as a background image

But that means then I have to whip up some code/css to put the links on it coz you can't put image map links over a background image

Link to comment
Share on other sites

  • 0

Yep tried that ;p

But then if I do that, still the pages open up from the left side...it doesn't open the page CENTRALLY

Know what I mean?

It's obvious on laptop screens more

Usually when a site loads up, you see the info straight/central no matter the size of the screen

When I use this method for a quick page, it loads it from the left even if I centralize the image on the page

Link to comment
Share on other sites

  • 0

It took me a moment, but I think I understand what you're saying. If I do, then we go back to the original reason for this which is the size of your picture. The browser won't cut off the left side of the picture for the same reason that it won't cut off the right side of the picture. What the CSS does is just tell the browser not to display the horizontal scrollbar. The whole picture is still loaded, you just can't scroll to the right to see it.

If you want your picture to be centralised each time, you need a smaller picture. Simple as.

Link to comment
Share on other sites

This topic is now closed to further replies.
  • Recently Browsing   0 members

    • No registered users viewing this page.