Centering image in Dreamweaver MX

Jump to First Reply
Posted:
in Mac Software edited January 2014
I have a single image(it isn't large at all) on a page in Dreamweaver MX, which I want to be centered, vertically and horizontally. However, I would like it be remain centered even after someone resizes their browser window or has a different monitor resolution then mine. Currently when I do this it will work fine for me, but on different monitor resolutions it isn't center and resizing throws it all off. Any ideas on how to achieve this? Thanks, and let me know if I haven't made myself clear enough!

Comments

  • Reply 1 of 14
    create a table that's width=100% and hieght=100%

    click inside your newly created table and set your horizontal and vertical alignment to center and middle respectively.

    now place your image into the table. voila.
     0Likes 0Dislikes 0Informatives
  • Reply 2 of 14
    Thats really not the best way of doing it. I don`t know how to in dreamweaver but in HTML you just add align="absmiddle"
     0Likes 0Dislikes 0Informatives
  • Reply 3 of 14
    The table way is the only way, although it's an awful hack.
     0Likes 0Dislikes 0Informatives
  • Reply 4 of 14
    Yes that does work, DW does have an option for Absolute Middle and everything is centered great. Thanks everyone!
     0Likes 0Dislikes 0Informatives
  • Reply 5 of 14
    ast3r3xast3r3x Posts: 5,012member
    Quote:

    Originally posted by Mount_my_floppy

    Thats really not the best way of doing it. I don`t know how to in dreamweaver but in HTML you just add align="absmiddle"



    did they not like your idea? well i did and like it better, i will always remember it...or at least that its possible
     0Likes 0Dislikes 0Informatives
  • Reply 6 of 14
    Quote:

    Originally posted by unremarkable

    The table way is the only way, although it's an awful hack.



    an awful hack? i'm not sure what you mean. it works, and it works well in all browsers without a hitch. not really a hack in my book. plus, how hard is it to code anyways?
     0Likes 0Dislikes 0Informatives
  • Reply 7 of 14
    Well, you know, tables are for tabular data. Css should be able to align something vertically, but it can't. So using the thing-centred-in-a-table is a hack.
     0Likes 0Dislikes 0Informatives
  • Reply 8 of 14
    Quote:

    Originally posted by running with scissors

    an awful hack? i'm not sure what you mean. it works, and it works well in all browsers without a hitch. not really a hack in my book. plus, how hard is it to code anyways?



    I don't think it is hack, it's just using the features of table and DW and it works fine too. After searching around some more and looking in the manual running with scissors' original suggestion looks like the only and best way to do right now. However, I don't know the capabilities of CSS, haven't created any CSS scripts.





    edit: had to add a missing word
     0Likes 0Dislikes 0Informatives
  • Reply 9 of 14
    Quote:

    Originally posted by unremarkable

    Well, you know, tables are for tabular data. Css should be able to align something vertically, but it can't. So using the thing-centred-in-a-table is a hack.



    tabular smabular. tables can and have been used for what ever the hell you want to use them for in html for years before css was a glint in me and your momma's eye. that's how pages are laid out then and now. if that's the established way of doing something, then i'd hardly call it a hack. don't get me wrong, CSS can be great for document layout, but be prepared to spend some fun filled hours creating multiple style documents to get your pages to look right in mulitple browsers. me, i'd rather be drinking a beer.
     0Likes 0Dislikes 0Informatives
  • Reply 10 of 14
    gargoylegargoyle Posts: 660member
    Jeez, the table idea works, I swear some of you like getting the most complex answer possible. So here goes.



    1.) Write a javascript handler to watch for window size changes.



    2.) Generate a function to return the current document width and height (this takes into account the space for toolbars/scrollbars.



    3.) Use above function to calculate the exact centre of the window.



    4.) Devide the width and height of your image by 2, and subtract these values from the exact center points you found in step 3.



    5.) Use javascript and a style sheet to absolutely position your image at the calculated co-ordinates.



    Jobs a goodun!
     0Likes 0Dislikes 0Informatives
  • Reply 11 of 14
    z1onz1on Posts: 5member
    Try this:



    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

    <html>

    <head>

    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">

    </head>

    <style type="text/css">

    #main { position: relative; width: 300px; width: 300px; margin-left: auto; margin-right: auto; margin-top: 50%; margin-bottom: 50%; padding: 1px;}



    </style>

    <body>

    <div id="main">image goes here</div>

    </body>

    </html>
     0Likes 0Dislikes 0Informatives
  • Reply 12 of 14
    mac gurumac guru Posts: 367member
    Quote:

    CSS can be great for document layout, but be prepared to spend some fun filled hours creating multiple style documents to get your pages to look right in mulitple browsers. me, i'd rather be drinking a beer.



    I have no idea what you're talking about, I've NEVER had to create mutiple style docs to get my page to look right in multiple browsers. Obviously you'd have to hack something if you're doing something that's not well supported, but then you're asking for trouble. If you use standard CSS 1 and well supported CSS 2 elements you should be perfectly fine.



    Mac Guru
     0Likes 0Dislikes 0Informatives
  • Reply 13 of 14
    Quote:

    Originally posted by Mac Guru

    I have no idea what you're talking about, I've NEVER had to create mutiple style docs to get my page to look right in multiple browsers. Obviously you'd have to hack something if you're doing something that's not well supported, but then you're asking for trouble. If you use standard CSS 1 and well supported CSS 2 elements you should be perfectly fine.



    Mac Guru




    there's that word hack again, you sure like throwing that around. perhaps i'm a little more particular in the way my stuff lays out than you, but none the less, css is not rendered equally by all the various flavors of browsers. there are always discrepencies even with standard css. the same i guess can be said about straight html based layouts as well, however, they still seems more reliable and need less tweaking.
     0Likes 0Dislikes 0Informatives
  • Reply 14 of 14
    How do you get images to rotate through multiple ones. For example if someone visits your site once, but refreshs the page a different image takes the place of the original. How is this done?
     0Likes 0Dislikes 0Informatives
Sign In or Register to comment.