PDA

View Full Version : Image positioning problem

Arty Ziff
03-18-2007, 01:37 AM
I'm using this CSS to center an image on a page, it centers it horizontally and vertically even when the window is resized:

html,body,#outermost {
height: 100%;
width: 100%;
margin: 0;
padding: 0;
}
body {
text-align: center; /* IE/Win bug fix */
font-family: Verdana, Arial, Helvetica, sans-serif;
}
#wrapper {
margin: 10px;
}
#outer {
height: 460px;
width: 442px;
z-index: 10;
}
/*
Works in IE5+/Win, Opera 5+, Netscape 6+, Firefox, Konqueror 3, Safari
Does not work in NS4.x or IE/Mac
*/
.valignmid1 {
position: relative;
margin: 0 auto;
}
/* Opera 7.0x is buggy when you put display:table on <body> Opera 7.2+ and 6.x
don't appear to have this problem. We hide this from IE5/Mac, because it
doesn't support display:table-cell and it doesn't have the same bug that allows
this to work in IE5-6/Win (hide from IE/Mac) \*/
.valignmid1 {
display: table;
vertical-align: middle;
}
/* Moz1.4 - Moz1.6 (NS7.1) bug, can't put position:relative on .valignmid2 \*/
.valignmid2 {
width: 100%;
display: table-cell;
vertical-align: middle;
}
* html .valignmid2 {
top: 50%;
left: 0;
position: relative;
}
* html .valignmid3 {
top: -50%;
position: relative;
}

The HTML looks like this:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<meta http-equiv="Content-Style-Type" content="text/css">
<meta http-equiv="Content-Script-Type" content="text/javascript">
<link href="./main.css" rel="stylesheet" type="text/css">
<title></title>
</head>
<body>

<div id="outermost" class="valignmid1">
<div id="wrapper" class="valignmid2">
<div id="outer" class="valignmid1 valignmid3">
<img class="image_main" src="images/main_back.jpg">
</div>
</div>
</div>

</body>
</html>

Now, I'd like to position other images OVER the image main_back.jpg relative to its top left corner, but I can't figure out how.

Any ideas?
Arbitrator
03-18-2007, 02:20 AM
You mean sort of like this (http://jsg.byethost4.com/demos/CF%20110094.html)? (I positioned the overlay at the bottom left for aesthetic purposes.)

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">

<html lang="en-US">
<head>

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

<title>CF 110094</title>

<meta name="Author" content="Patrick Garies">

<style type="text/css">
* {
margin: 0;
}
html {
height: 100%;
background: #222;
color: white;
}
body {
position: absolute;
top: 50%;
left: 50%;
width: 320px;
}
div#frame {
position:
relative;
top: -172px;
left: -170px;
}
img#portrait {
display: block;
border: 10px solid black;
}
div#letter {
position: absolute;
bottom: 20px;
left: 20px;
width: 150px;
height: 150px;
background: url("article_h.png") no-repeat;
}
</style>

</head>
<body>

<div id="frame">
<img id="portrait" alt="Portrait of Tōshirō Hitsugaya" width="320" height="324" src="object.png">
<div id="letter"></div>
</div>

</body>
</html>
luke_cp
03-19-2007, 12:18 PM
Are you trying to make it kind of like a background?
ahallicks
03-19-2007, 01:02 PM
Basically yes... you make the image the background of a div in the CSS, then in the HTML you can put something within that div that will appear on top of the image you have set as the background.
luke_cp
03-19-2007, 07:38 PM
try this code to position it somewhere:
<image src="sampleimage.bmp" width="120" height="120"> and try putting the X and Y cordinates inside the code.


To put the image as a background try one of these codes:
<body background="sample.gif">
<body background="http://www.google.com/sample.gif">

if thats not what you are looking for then please give me an example of what you are talking about, and i can help you further with your problem:thumbsup:
_Aerospace_Eng_
03-19-2007, 08:13 PM
try this code to position it somewhere:
<image src="sampleimage.bmp" width="120" height="120"> and try putting the X and Y cordinates inside the code.


To put the image as a background try one of these codes:
<body background="sample.gif">
<body background="http://www.google.com/sample.gif">

if thats not what you are looking for then please give me an example of what you are talking about, and i can help you further with your problem:thumbsup:

If you are going to help at least study html/css yourself. The image code you provided is incorrect. It should be <img src="someimage.ext" width="120" height="120" alt="Some alt text">

As for the methods of putting a background image on a page. Well both of your examples are deprecated. You should not use the background attribute. You should use CSS.
body {
background-image:url(someimage.ext);
}
Arty Ziff
03-21-2007, 04:55 AM
The original solution by Excavator is very nice, but after the image gets any bigger than 50% of the viewable area, there is a lot of scroll at the bottom of the screen.

See this: http://siliconsatan.com/CSS_test.html
Arbitrator
03-21-2007, 09:04 PM
The original solution by Excavator is very nice, but after the image gets any bigger than 50% of the viewable area, there is a lot of scroll at the bottom of the screen.Change:
body {
position: absolute;
top: 50%;
left: 50%;
width: 442px;
}
div#frame {
position: relative;
top: -258px;
left: -221px;
}

To:
body {
position: absolute;
bottom: 50%;
right: 50%;
width: 442px;
}
div#frame {
position: relative;
bottom: -258px;
right: -221px;
}The logic is that relatively positioned content still has the space that it would have taken up (had it not been positioned) reserved. By moving that reserved space to the top and left from the bottom and right, you prevent the scrolls bars (in a document with left to right text anyway).
Arty Ziff
03-22-2007, 02:39 AM
Building on Arbitrator's original solution, and changing

div#frame {
position: relative;
top: -258px;
left: -221px;
}


to...


div#frame {
position: relative;
margin-top: -258px;
left: -221px;
}


Seems to do the trick...