DIV OVERFLOW:hidden ... centered?

chris19-9 · 09-06-2009, 07:08 PM

Hi all,

HOW CAN I DISPLAY IN THE CENTER OF AN IMAGE USING DIV OVERFLOW HIDDEN?

have searched the web for a good few hours now, usually manage to solve problems from google search. i would say i am a novice coder, couldnt write from scratch but can adapt and implement code.

well, i am a graphics person and love the way using DIV OVERFLOW: hidden

Code:

<div style="FLOAT: left; OVERFLOW: hidden; WIDTH: 100px; HEIGHT: 100px;

I have it so i can have blocks of neat squares displaying thumbnails of images as hyperlinks to the main image on another page.

well, i was happy enough when i used this to display book front covers, but now i want to focus on the center of an image or the right.

whereas the div overflow align's (displays) from the LEFT of an image.

HOW CAN I DISPLAY IN THE CENTER OF AN IMAGE USING DIV OVERFLOW HIDDEN?

have been browsing W3C for ages discovering SVG and preserve aspect ratio... err!

I have gone down this road without much understanding or knowledge of if this will work, but i might have been on the right lines,

Code:

<div style="FLOAT: left; OVERFLOW: hidden; WIDTH: 100px; HEIGHT: 100px; MARGIN_LEFT: -200px; MARGIN_RIGHT: -200px; TEXT-ALIGN: center;"><a href="http://

then the

Code:

<img src="image.png" style="WIDTH: 600px; HEIGHT: 460px" >

as you can see trying to MARGIN negative, can these work in div? i have even tried them in the img src style="... but no siuccess.

Please help me center the image when cropping with the OVERFLOW:hidden.

ps, it woudl be great if you could advise as to the codes cross browser and version compatibility.

I am also avoiding effecting the DIV from CSS in the <HEAD> as the place i want to implement my gallery doesnt let me effect the head of a page, i can only place in the body. just i have seen many codes goign to the head and style tags.

If you can solve my trouble many thanks, really want to avoid making images into thumbnails of the parts of the image i want to show.

cheers

chris

also, hopefully i am clear enough in my dilemma. please ask if not. ;o)

Scriptet · 09-06-2009, 08:00 PM

You could add the image as a background image and just center it. Or if you want to keep the image in the markup as you are doing then you would give the image a negative margin, not the div.

So like this:

Code:

<img src="image.png" style="WIDTH: 600px; HEIGHT: 460px; margin-left: 100px; margin-top:100px">

the margin would depend on the size of the image in order to center it. it would be something like imagewidth / 2 - width of div.

chris19-9 · 09-06-2009, 09:28 PM

hey scriptet,

thanks for sharing the code, i tried MARGIN_LEFT: -200px; MARGIN_RIGHT: -200px; inside the img rather than the div, but couldnt understand why it wasnt working.

looking at your code i noticed i had MARGIN_LEFT: -200px; when yours is MARGIN-LEFT: -200px, i had used underscore and not a dash. typical copy paste'r ;o)

Also you have the HEIGHT: and the WIDTH: inside the style attribute<img style="MARGIN-LEFT: -200px; MARGIN-TOP: -200px; height: 460px; width: 600px;"> whereas mine were seperate attributes outside the style <img style="MARGIN-LEFT: -200px; MARGIN-TOP: -200px;" width="600px" height="460px">.

Orange one on the left is which i have cropped (centered) on the lines and links, the orange one on the right of it isnt repositioned using margin-left: -200px etc. you can see the style of it rathen than a dull bit in the top left corner.

I suspected it would be as simple and easy as that, just using the MARGIN-LEFT attributes in the img src, rather than the DIV.

Sriptet or anyone else know how compatible with browsers and IE versions the attributes i have used are?

My Full working code for others in the same boat as me. BTW, say the div overflow: hidden used at http://www.vizthink.com, if it is still there.

Code:

<div style="FLOAT: left; OVERFLOW: hidden; WIDTH: 100px; HEIGHT: 100px;"><a href="http://visualthinkmap.ning.com/photo/photo/show?id=2168552%3APhoto%3A590">
<img style="MARGIN-LEFT: -200px; MARGIN-TOP: -200px; height: 460px; width: 600px;"  src="http://api.ning.com/files/WNPb*TodSvP2aNFRApY2ApiTt8WKYs*w*uiIkA*euwUpA1gojpEdWpSIzIFrrT-ogrcKAMB3J1FLo0AkUhfvZ3VYLTdKG8gV/mediaskillsbybureaudetudesfr.png?width=737&amp;height=567" border="0"></a>
</div>

Again many thanks scriptlet.

I was going to use it in a post for a blog, but just thought... i bet i only get like 4-5 as i will hit my character count through blogger, hmm... will have to use my own server for a page to the whole collection of thumbnails...

well.. as you can see with the code working now my ideas have been allowed to flourish, i could do a print screen of the rest of the thumbs, and give the blog post the impression that they are all there... one more click hopefully isnt that much of an annoyance.

yeah... thanks

Scriptet · 09-07-2009, 12:22 AM

Hi,

The code there is fine, and will work in all browsers, old and new.

If you have a direct link to the page in question, where you used it, I can double check it for you.