Forum Moderators: not2easy
I suppose it doesn't HAVE to be CSS, just something clean & simple.
Thanks in advance!
so you have <img src="blah.jpg" id="centeredimage">
in your css file, or in your style header
<style>
#centeredimage{
width:20%;
left:40%;
top:10%; /* (or however high you want it) */
}
</style>
1. There are only 2 values here: first choose a width of the image (the value u have to play with to get it to the right size)
2. ok now: if you are familiar with css, this means that the image's width will take up 20% of the screen. The height will adjust proportionatly, so dont mess with it. Now, you can also use percentages to establish where the far left pixel of the image will be positiioned. I chose 40%, because 40% + 20% +40% = 100%. So, it has to be 40% from the left of the screen.
If this isn't a perfectly clear explanation, just mess with the width and left percentages. If you leave off the percentage sign, it will use pixels instead.
The reason this is a decent method is because it will render the same in ANY resolution (grab the edge of your window and watch the image stay the same proportions no matter what size you make your window)
I tried doing that, and I could adjust the width of it, but it just stayed connected to the left side. Also, when I resized my window it shrunk the image.
The image that I have now is already the best size, I just need to pull it to the center.
.centered{
position: relative;
left: 50%;
padding-left: -50%;
}
If padding-left: -50% doesn't work, try margin-left: -50%. I've never done this, but I recall reading about it somewhere.
The trick is supposed to work by setting the left edge of the image to be half-way across the containing box, and then off-setting the image by half of its own width in the other direction. I'm not sure off the top of my head whether margin or padding get their widths set as % of the object they apply to to % of the containing box that object is inside.
Hope that helps
You sure you got that "left:40%;" in there? Btw, try without the % just to see if it will come of that edge.
um, also, is your image in a div? that shouldn't matter either.
OH!
Use this too:
<Style>
#centeredimage{
position:absolute;
left:40%;
top:10%;
width:20%;
}
And, sorry, when you resize your window to smaller, its SUPPOSED to make your image smaller ;) So, if you had EVERYTHING in %, then no matter what size your page is, everything is in its right place. Its a style decision. Basically, if your page can been easily seen in 800*600, then you know it can scale up comfortably, and if anyone is using 640 *480, well... they need to hop back into their time machine and stop messing with the space-time continuum ; )
So, yes, if you make your window 400 *320, its going to look silly :) like a "mini-webpage" :)
<img src="mylogo.gif" hspace="60">
... will put 60 pixels space to the left and right of the image.
Or put the logo into a data cell spanning the top row of your existing table and align=center.
CSS is sexier though. ;)
<added>a vspace can replace the double <p> </p> following the image.</added>
Now here's the bad news: IE5 does not support this, so presently it's of purely academic interest, but try it in Mozilla or Opera to see how it should work.
Here's a css method that works in IE5 and and Netscape 4, similar to toadhalls's above:
Images are inline-level by default so if you style a div "text-align: center;" your image will sit neatly in the middle of it. This is what I would do with your logo.
Same as for hspace.
<img src="logo.gif" hspace="60" vspace="60">
... will put a 60 pixel space (margin) around the image.
That puts a space above the image...Anything that will put it below? The next thing below it is a table, and I can't seem to move the table down. If you can't tell, i'm very new at all programming languages :)
Thanks!
Also, instead of you can just tell it to align=right, etc.
div "text-align: center;"
