PDA

View Full Version : Absolute position with class?

Squintz
07-30-2002, 07:47 PM
Is there a way to use differnt classes for images and set differnt positions for each class?

For example say i want to have <IMG.Header src = "imagename"> to position the image at the top of my page and span 100% in width then i wanted to position <IMG.left src= "Image name"> directly below the header and about 10% width and 100% length...

I want to do this so that i can make CSS sheets that are reusable...This way i can tell my customers "theese are the formats you can use and the all i would have to do is list the images in the HTML

<HTML>
<Body>
<img.Header src = "Firstimage">
<img.Left src = "SecondImage">
//and so on
with out having to re enter all the div paramaters each time...
</Body>
</HTML>
I would use pics of the same size for each class

<---Note im a newbie at web designin so if there is a better way of doing this let me know
MCookie
07-30-2002, 08:39 PM
Squintz, you can use the same image multiple times by giving it an id instead of a class. And you can size them with css. But it won't look good. See for yourself..

<html><head>
<title>Untitled</title>
<style type="text/css">
<!--
body {
margin:0px;
padding:0px;
}
img {
border:0px;
}
#imageone {
position:absolute;
left:40px;
top:40px;
width:10%;
height:200%;
}
#imagetwo {
position:absolute;
left:400px;
top:40px;
width:50%;
height:100%;
}
-->
</style>
</head>
<body>
<img id="imageone" src="thisisanimage.jpg" alt="" title="" />
<img id="imagetwo" src="thisisanimage.jpg" alt="" title="" />
</body>
</html>
Squintz
07-30-2002, 09:24 PM
Why will it look ugly?
MCookie
07-30-2002, 10:17 PM
Well, maybe I don't understand what you want to do, but stretching or shrinking company logos in opposite directions won't make you their favorite designer. Most images look best at their original size.
Squintz
07-31-2002, 11:58 AM
no. i dont want to stretch the same photo in differnt directions what i want to do it to be able to go into Paint Shop Pro and create a image say 200 x 400 and then be able to use an external style sheet to position it... This way i can do an entire layout using the style sheet and when it come to customizing that layout for the customer all i will have to do is enter the picture src and the ID like you show'd me...

Thanx your input helped me even if you didnt uderstand why i wanted to do it...
MCookie
07-31-2002, 12:38 PM
In that case, forget about the code I posted..
Just leave the image sizes in the IMG tags (where they belong) instead of in the stylesheet...

<html><head>
<title>Untitled</title>
<style type="text/css">
<!--

#image1{
position:absolute;
left:100px;
top:100px;
}

-->
</style>
</head>
<body>

<img id="image1" src="logo.jpg" width="400" height="150" alt="We Are The Company" title="Hi!" />

</body>
</html>