Hi Everyone,
I want to position a picture in the exact centre of my web page. The thing is that I am creating web pages on the fly, using jsp, so I am not going to know the dimensions of an image. Is there any way of always positioning an element (in this case a picture) in the very centre of a page? Any help will be really appreciated.
Thanks
Regards
DavidWell avoiding the obvious point that all images should have dimentions, there is no way that I know to do this.
You could centre it just fine by adding style="text-align:center" to the body tag, but wihtout knowing at least the image height then I can't help you. If you did know the image dimentions then you could do this:
<img src=http://www.webdeveloper.com/forum/archive/index.php/"abc.gif" style="position:absolute;top:50%;margin-top:-(HALF THE IMAGE HEIGHT)px;" alt="Image specific alternate text">
You should always have dimentions and alt tags for images. So this problem should never really occur.Depending on the page and what the image is, you could try setting it as a background image?We have the exact same issue.. pull an image from a database and you may not klnow it's dimensions so u can't declare them. Try these, not sure if they'll do the trick, depending on what you have control of:
img.center-me {margin-right: auto; margin-left: auto;}
#wrapper1 {width: 100%}
<div id="wrapper1">
<img src=http://www.webdeveloper.com/forum/archive/index.php/"images/pic.jpg" class="center-me">
</div>
OR old-school it
<div width="100%" align="center">
<img src=http://www.webdeveloper.com/forum/archive/index.php/"images/pic.jpg">
</div>
edit: i just realized u want this in the middle of the page, not the content area.... hmm.. you'd have to do a background, or make another div that wraps all elements on the page and center it inside that DIV using background: url() 50% 50% no-repeat, of course this isn't exact center, this is 50% from the edge of the image. You could put it in a DIV that wraps all other content, make the DIV with picture z-index:1, make all other content's wrapper be z-index: 2 so it above...?
maybe some combo of the above?If you want to set it as a background image then do this:
background:url(blah.jpg) center center;
But there will be no alternate text if the image doesn't load or the user has images disabled.
If this image is actually content then you should put it in an img tag but if not then by all means use a background.I thought IE doesn't support auto margins? Atleast, it's never worked as I've been told it should with my attempts.
It's been my experience that IE4 does not support negative margins and text-align will not work on images in Gecko only text.
Why can't you place the images width and height in the database with the src? This way you can just retreive the dimensions and have them applied to the CSS width and height properties of a class or id? In other words use DOM, or if possible JSP, to dynamically set the width and height properties of the centering container div's class.Well if text-align:center doesn't work in Gecko and margin:auto doesn't work in IE then it looks like we have a solution doesn't it? Use both styles and one will apply to standards compliant browsers and the other will apply to IE.
margin:auto does work with IE 6 by the way.
Originally posted by tonyh
It's been my experience that IE4 does not support negative marginsNeither does Opera 5 or 6.
Originally posted by tonyh
Why can't you place the images width and height in the database with the src?I was pondering this myself. You could just have a column for the source, the alt text, the width and the height.Originally posted by tonyh
Why can't you place the images width and height in the database with the src? This way you can just retreive the dimensions and have them applied to the CSS width and height properties of a class or id?
In the circumstance I was referring to, a content management system keeps track of content and images uploaded by a user for placement on a web site, but the user never really knows what the image size is, she just picks whatever pic and uploads it. So neither the user nor the database ever know the size.Originally posted by TimeBandit
In the circumstance I was referring to, a content management system keeps track of content and images uploaded by a user for placement on a web site, but the user never really knows what the image size is, she just picks whatever pic and uploads it. So neither the user nor the database ever know the size.
In otherwords you've created a database for an image archiving system that grows by users uploading images to it? And it's completely automated? Got a link? This sounds intrigueing.
Would it be possible to write a server-side script that determines the dimensions of the images within your tables and populate the columns itself?
Hold on, are you saying that the database itself isn't used when generating the site? That all the database does is allow web dvelopers to Download images for their own use? If this is the case, then the problem is the designers not yours. If a designer can't find out the dimensions of the images they Download , there is something truly wrong... or is this databse vital to dynamically generating code?well you could probably find the dimensions of the image when it's imported and use thatOriginally posted by tonyh
In otherwords you've created a database for an image archiving system that grows by users uploading images to it? And it's completely automated? Got a link? This sounds intrigueing.
I didn't create it, but am a part of it's creation. It is a Content Management System for creating websites. It's called Tacklebox?
We create the basic layout for a site as a sort of "shell" and then it's content areas are dynamically generated by whatever the user has inserted into it through the EasyEdit interface. This inserted info is saved in a database.
Currently, when a user uploads an image, often no one knows the exact size. They're just everyday folks who use it, they don't want or need to know the size unless they bump up against design limitations that we may have specced for them. For instance we may say "hey in this area over here, if your image is any bigger than X it'll break the layout." Then they need to check.
Tacklebox info (<!-- m --><a class="postlink" href="http://www.brookgroup.com/site/tacklebox.html">http://www.brookgroup.com/site/tacklebox.html</a><!-- m -->)
Tacklebox in action (<!-- m --><a class="postlink" href="http://www.energy.gov/">http://www.energy.gov/</a><!-- m -->)Originally posted by TimeBandit
Currently, when a user uploads an image, often no one knows the exact size. They're just everyday folks who use it, they don't want or need to know the size unless they bump up against design limitations that we may have specced for them. For instance we may say "hey in this area over here, if your image is any bigger than X it'll break the layout." Then they need to check.
Then as part of the upload process your code, either server-side or in concert with js/dom on the client, needs to determine the pixel dimensions of the graphics and store them in your CMS database record. For those types of images acceptable as content for common web pages (GIF, JPEG, PNG) the dimensions are readily available in the image headers.Originally posted by ray326
For those types of images acceptable as content for common web pages (GIF, JPEG, PNG) the dimensions are readily available in the image headers.
Thanks! We've been curious how we could determine this.
I want to position a picture in the exact centre of my web page. The thing is that I am creating web pages on the fly, using jsp, so I am not going to know the dimensions of an image. Is there any way of always positioning an element (in this case a picture) in the very centre of a page? Any help will be really appreciated.
Thanks
Regards
DavidWell avoiding the obvious point that all images should have dimentions, there is no way that I know to do this.
You could centre it just fine by adding style="text-align:center" to the body tag, but wihtout knowing at least the image height then I can't help you. If you did know the image dimentions then you could do this:
<img src=http://www.webdeveloper.com/forum/archive/index.php/"abc.gif" style="position:absolute;top:50%;margin-top:-(HALF THE IMAGE HEIGHT)px;" alt="Image specific alternate text">
You should always have dimentions and alt tags for images. So this problem should never really occur.Depending on the page and what the image is, you could try setting it as a background image?We have the exact same issue.. pull an image from a database and you may not klnow it's dimensions so u can't declare them. Try these, not sure if they'll do the trick, depending on what you have control of:
img.center-me {margin-right: auto; margin-left: auto;}
#wrapper1 {width: 100%}
<div id="wrapper1">
<img src=http://www.webdeveloper.com/forum/archive/index.php/"images/pic.jpg" class="center-me">
</div>
OR old-school it
<div width="100%" align="center">
<img src=http://www.webdeveloper.com/forum/archive/index.php/"images/pic.jpg">
</div>
edit: i just realized u want this in the middle of the page, not the content area.... hmm.. you'd have to do a background, or make another div that wraps all elements on the page and center it inside that DIV using background: url() 50% 50% no-repeat, of course this isn't exact center, this is 50% from the edge of the image. You could put it in a DIV that wraps all other content, make the DIV with picture z-index:1, make all other content's wrapper be z-index: 2 so it above...?
maybe some combo of the above?If you want to set it as a background image then do this:
background:url(blah.jpg) center center;
But there will be no alternate text if the image doesn't load or the user has images disabled.
If this image is actually content then you should put it in an img tag but if not then by all means use a background.I thought IE doesn't support auto margins? Atleast, it's never worked as I've been told it should with my attempts.
It's been my experience that IE4 does not support negative margins and text-align will not work on images in Gecko only text.
Why can't you place the images width and height in the database with the src? This way you can just retreive the dimensions and have them applied to the CSS width and height properties of a class or id? In other words use DOM, or if possible JSP, to dynamically set the width and height properties of the centering container div's class.Well if text-align:center doesn't work in Gecko and margin:auto doesn't work in IE then it looks like we have a solution doesn't it? Use both styles and one will apply to standards compliant browsers and the other will apply to IE.
margin:auto does work with IE 6 by the way.
Originally posted by tonyh
It's been my experience that IE4 does not support negative marginsNeither does Opera 5 or 6.
Originally posted by tonyh
Why can't you place the images width and height in the database with the src?I was pondering this myself. You could just have a column for the source, the alt text, the width and the height.Originally posted by tonyh
Why can't you place the images width and height in the database with the src? This way you can just retreive the dimensions and have them applied to the CSS width and height properties of a class or id?
In the circumstance I was referring to, a content management system keeps track of content and images uploaded by a user for placement on a web site, but the user never really knows what the image size is, she just picks whatever pic and uploads it. So neither the user nor the database ever know the size.Originally posted by TimeBandit
In the circumstance I was referring to, a content management system keeps track of content and images uploaded by a user for placement on a web site, but the user never really knows what the image size is, she just picks whatever pic and uploads it. So neither the user nor the database ever know the size.
In otherwords you've created a database for an image archiving system that grows by users uploading images to it? And it's completely automated? Got a link? This sounds intrigueing.
Would it be possible to write a server-side script that determines the dimensions of the images within your tables and populate the columns itself?
Hold on, are you saying that the database itself isn't used when generating the site? That all the database does is allow web dvelopers to Download images for their own use? If this is the case, then the problem is the designers not yours. If a designer can't find out the dimensions of the images they Download , there is something truly wrong... or is this databse vital to dynamically generating code?well you could probably find the dimensions of the image when it's imported and use thatOriginally posted by tonyh
In otherwords you've created a database for an image archiving system that grows by users uploading images to it? And it's completely automated? Got a link? This sounds intrigueing.
I didn't create it, but am a part of it's creation. It is a Content Management System for creating websites. It's called Tacklebox?
We create the basic layout for a site as a sort of "shell" and then it's content areas are dynamically generated by whatever the user has inserted into it through the EasyEdit interface. This inserted info is saved in a database.
Currently, when a user uploads an image, often no one knows the exact size. They're just everyday folks who use it, they don't want or need to know the size unless they bump up against design limitations that we may have specced for them. For instance we may say "hey in this area over here, if your image is any bigger than X it'll break the layout." Then they need to check.
Tacklebox info (<!-- m --><a class="postlink" href="http://www.brookgroup.com/site/tacklebox.html">http://www.brookgroup.com/site/tacklebox.html</a><!-- m -->)
Tacklebox in action (<!-- m --><a class="postlink" href="http://www.energy.gov/">http://www.energy.gov/</a><!-- m -->)Originally posted by TimeBandit
Currently, when a user uploads an image, often no one knows the exact size. They're just everyday folks who use it, they don't want or need to know the size unless they bump up against design limitations that we may have specced for them. For instance we may say "hey in this area over here, if your image is any bigger than X it'll break the layout." Then they need to check.
Then as part of the upload process your code, either server-side or in concert with js/dom on the client, needs to determine the pixel dimensions of the graphics and store them in your CMS database record. For those types of images acceptable as content for common web pages (GIF, JPEG, PNG) the dimensions are readily available in the image headers.Originally posted by ray326
For those types of images acceptable as content for common web pages (GIF, JPEG, PNG) the dimensions are readily available in the image headers.
Thanks! We've been curious how we could determine this.