Centering an image in Dreamweaver

I am new to Dreamweaver CS4 and to CSS, despite several years of designing table-based layouts in Front Page. I've put a lot of time into training to understand the box model and I'm making headway. I have created a basic 2 column layout from scratch (no template) with a header, a left sidebar, a main content region and a footer. And with floats adjusted, it all works just fine.
I'm running into a problem with what I would have thought would be the simplest of tasks. Inside the main content div, I want a centered image followed below by some paragraph copy, which will be controlled by its own CSS rule. I'm probably missing something obvious, but I can't for the life of me figure out how to center this image. In Front Page, you selected the image and clicked a "center" button - simple enough. But short of manually altering the HTML code with <center></center> tags, I don't' see an option to center an image.
I searched here and found a couple of answers that weren't exactly this same situation and/or that I didn't quite understand. If anyone can help me with this task without showing too much impatience with my ignorance - I'd sure appreciate it.

A lot has changed in Web Standards since Front Page. FP used old fashioned HTML styles. DW is web standards compliant which requires keeping content (html) separate from styles (CSS).
Use the CSS properties panel to a) create an #ID .class or selector name and b) define it's properties and values.
#ID {property: value}
#header {width: 900px}
.class {property: value}
.center {text-align:center}
selector {property: value}
h1 {font-size: 1em}
Classes are applied to page elements through the HTML properties panel.
Nancy O.
Alt-Web Design & Publishing
Web | Graphics | Print | Media Specialists
http://alt-web.com/
http://twitter.com/altweb
http://alt-web.blogspot.com

Similar Messages

Using Background Image In Dreamweaver

Good evening.
I'm using a non-repeating, centered background image in Dreamweaver. But i'd like it to self-adjust its size depending upon what monitor size its viewing it. Can someone provide some coding for help with this???
Here's where i'm at thus far..
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<link href="welcome10.css" rel="stylesheet" type="text/css" media="screen" />
</head>
<body style="background-color: #000; background-position: center top; background-repeat: no-repeat; background-image: url(images/girls-bg9.jpg); background-attachment: fixed;">
<div id="wrapper">
          <div id="container">
    </div>
</div>
</body>
</html>
css -
@charset "utf-8";
/* CSS Document */
#wrapper{
          width: auto;
          height: 1600px;
#container {
          background-color: #FFF;
          height: 200px;
          margin-right: 100px;
          margin-left: 100px;
          margin-top: 100px;
thanks guys, and gals...

Background-size would do the trick, but keep in mind, most CSS3 does not function in IE9 (though this will), and won't at all in IE8 and down. If you need it to work in those browsers, the best way to do it would be with javascript. I've used the script available on this site with some success...
http://louisremi.github.io/jquery.backgroundSize.js/demo/

I need help Centering a div box to a background image using dreamweaver cs5.5.

I need help Centering a div box to a background image using dreamweaver cs5.5. Everything shift left when viewing on different size monitors? See what I mean at
www.woodlandhospice.com

Have you looked at your page with images disabled?
I urge you to re-think this approach to web design because images of text are not indexed by search engines, screen readers or translators. Given the demographic group your site is targeting, you really need to ensure maximum web accessibility for all users.
Navigation, headings and descriptions all need to be in real text -- not images of text.
Ken is right. Absolute positioning is pure poison for such a simple layout. My advice is to start over with one of the pre-built Starter Pages in DW. Go to File > New > Blank page > HTML. Select a layout from the 3rd column and hit CREATE button.
Nancy O.

Background image in Dreamweaver CS3

When I set my background image in Dreamweaver it shows on the "Design", although when previewed on a browser it does not show. I've checked the directory and it seems fine. What is causing this?

Modify-->Page Properties, Im using css but not for the page background. I tried previewing the page locally and I have tried it on the server. The entire site root folder was uploaded which has the background.

Centering a page in Dreamweaver CS6 Fluid grid

Centering a page in Dreamweaver CS6 Fluid grid.
I figured this would be an easy task and have saved it to last. After watching videos, scanning the web and this forum I have found many answers but none of them seem to work in CS6. I currently have an extra 1-2% margin on the left to get the page closer to the middle but this doesn't work well with all screen sizes and its still not in the middle.
Page can be found here
Any advice would be greatly appreciated!

It looks like you've nested the rest of content within your #header DIV. And header div's width is 94.4% - this results in everything on the site have a ~5% margin on right.
You may want to fix this first to see if it helps you with the result you intend to get. If not, do post back.

Import text image in Dreamweaver

Hi All
I have designed some text headings (which are in colour) with a transparent background in fireworks and exported it (gif) to Dreamweaver. That is all good. But when I place the text image (as a background image) in Dreamweaver the text has (in places) white edges which I dont want. Any ideas why this is happening???
Any advice
Paul

The effect that you're experiencing is known as "jaggies". When exporting from Fireworks, you need to set the Matte colour picker to a similar colour to your background.
A better solution, though, would be to use an embedded web font. You can get a lot of free webfonts from www.fontsquirrel.com. Alternatively, if you're using the Creative Cloud, you have access to a lot of TypeKit fonts.

Centering background image [was: I have inserted an image background...]

Here is the code. body{ background-image:url(backgrounds/MOMANDDAD.JPEG);}. what do i need to do to correct this mistake?
I have made an inline stylesheet on a html and put a background image in it and it will not center in ie8, but is okay in firefox 3.09. what is going on?
thanks mike

In the future, try to keep your subject brief: "Centering background image" would suffice.
Without seeing your site, image and other code, it's hard to guess what you have done so far. Posting a URL to the live page is the best way to get a reply.
Try this in your CSS:
body {
background: url (your_image.jpg) top center no-repeat;}
Nancy O.
Alt-Web Design & Publishing
Web | Graphics | Print | Media Specialists
www.alt-web.com/
www.twitter.com/altweb
HTML Validator - http://validator.w3.org
CSS Validator - http://jigsaw.w3.org/css-validator/
Tutorials - http://w3schools.com/

Not seeing div background image in Dreamweaver! Why?

I'm not seeing div backgrounds in Dreamweaver! When I load the files onto my server I can see them in my browser! But I'm not seeing them in Dreamweaver. Here's my code on my .aspx pg:
<link href="styles/styles.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="container">
<div id="hdr">
</div>
</div>
</body>
And here's a link to the web page on my server:
http://amcenergy.com/ee_site1/index.aspx
I need to put text on top of the div's background image, but it's kinda hard if I can't see the background image in Dreamweaver.
Hope someone can help!
Thanks so much!!

Horizontal-align is not a valid CSS property.
http://jigsaw.w3.org/css-validator/validator?profile=css21&warning=0&uri=http%3A%2F%2Famce nergy.com%2Fee_site1%2Findex.aspx
Try removing it.
Nancy O.
Alt-Web Design & Publishing
Web | Graphics | Print | Media Specialists
www.alt-web.com/
www.twitter.com/altweb
www.alt-web.blogspot.com

Firefox upon opening an image in a new tab, centers the image from top and bottom and surrounds the image with a grey frame. Just started having the problem today, searched Google to no avail.

Firefox upon opening an image in a new tab, centers the image from top and bottom and surrounds the image with a grey frame. Just started having the problem today, searched Google to no avail.

Oh wow, looks like a new feature.
The "page" links in a stylesheet with the address "resource://gre/res/TopLevelImageDocument.css". If you remove that reference, then the image displays in the old style.
'''''Edit: Please skip the rest of this post and check out the next one.'''''
There might be a more elegant solution than that, but you could use a bookmarklet to strip out that link when you want to view the page in its old style. A bookmarklet is a snippet of JavaScript you save on the Bookmarks toolbar for quick access.
First, copy the following code to the clipboard (it's all one long line):
<br>javascript:var ssheet=document.querySelector('link[href="resource://gre/res/TopLevelImageDocument.css"]'); if(ssheet)ssheet.parentNode.removeChild(ssheet); void 0;
Next, if you are not displaying the Bookmarks Toolbar, use View > Toolbars > Bookmarks Toolbar to display it. (If you aren't using the classic Menu bar, press Alt+v to call up the old View menu. Right-clicking the gray area just below the page address also allows you to display the Bookmarks Toolbar.)
Right-click on the Bookmarks Toolbar (or Mac equivalent of right-click!) and choose New Bookmark.
Paste the code into the Location box (the second box).
Then type a useful name in the Name box (e.g., Oldstyle Picture) and click Add.
Now, when you want to tweak the image display, click the button to run the script.
Manual clicking is a hassle, so it might make sense to look into other solutions. (Greasemonkey didn't seem to work; I think it might not run on .jpg files.)

Trouble with opening images from dreamweaver cs6(64bit) to photoshop cs6(64bit).

Hi guys i need help! I have trouble with opening images from dreamweaver cs6(64bit) to photoshop cs6(64bit). I uninstalled and went to preferences/file types editors to set up ps6 as primary but I still get some error.After i click image in dreamweaver,I get this message-Unable to launch...Please be sure that application exists and that there is enough memory to run it..

Can you Launch Photoshop normally from your desktop shortcuts?
I usually keep DW and PS open at all times so I can switch back & forth.
Nancy O.

Saving images for dreamweaver

I would appreciate any help in saving images for dreamweaver.
The images are optimized in Photoshop and are saved as jpeg's with
a quality of 60. Image sizes are 400 by 600 pixels. When viewed on
the web, the images look fuzzy. Can anyone give me any directions?
Are the original images not saved in a high enough resolution after
editing? I would appreciate any help at all.
Thanks.
JC

I had the same problem !!
When you export from fireworks 8, by shure you select in the
optimize panel
"JPEG - Better Quality" and JPEG in the second box. This
solved my problem,
and I hope your problem
www.samdesign.be
"jaycee911" <[email protected]> a écrit
dans le message de news:
f1g2k2$oth$[email protected]..
>I would appreciate any help in saving images for
dreamweaver. The images
>are
> optimized in Photoshop and are saved as jpeg's with a
quality of 60.
> Image
> sizes are 400 by 600 pixels. When viewed on the web, the
images look
> fuzzy.
> Can anyone give me any directions? Are the original
images not saved in a
> high
> enough resolution after editing? I would appreciate any
help at all.
>
> Thanks.
>
> JC
>

Inserting an image causes Dreamweaver to freeze.

Hi,
Spec
Dreamweaver CS5
Windows 7 & Server 2008 R2 (mix of machines)
4GB RAM
Plenty of disk space
Followng these steps...
Open Dreamweaver
Click Insert
Click Image
**FREEZE**
Dreamweaver locks up and never recovers. Only happens on standard user accouts, admins works fine. Given 'everyone' read/write permission to adobe folder in program files, but no difference. The only work around I can see if to save the page > create a site > the insert the image; this then works.
After running the microsoft debugger, attached to the dreamweaver process I get this at the point of the crash
(1044.1328): C++ EH exception - code e06d7363 (first chance)
A few of these infact and then nothing.
Anyone got any ideas. Have tried all latest updates, uninstall > clear prefs files > install no difference. Also the Extension manager keeps say it stopped working when launched.... is this related? As I say only on a standard user, admins all fine.
Thanks for any help on this matter.

Hi,
I quote: "Thanks for any help on this matter."
One of the best solutions in this case in my oppinion is you would get in touch with Adobe Help and Support here: http://www.adobe.com/support/creativesuite/. You could use "Troubleshoot failed installations": http://kb2.adobe.com/cps/828/cpsid_82827.html Recently there is also the possibility to consult via chat.
Hans-G.

How do you add text to an image in dreamweaver cs3?

does anyone know how to add text to an image in dreamweaver cs3? someone help me im stuck

Hello,
pardon, your question is still formulated in too general manner, for me at least, because there are several possibilities for these things. Please take a look on Nancy O.'s templates and tutorials, for example here:
http://alt-web.com/TEMPLATES/CSS-Semi-liq-photo-sheet.shtml
http://alt-web.com/TEMPLATES/Dark-Grid-II.shtml
http://alt-web.com/DEMOS/CSS-Clickable-Table-Cells.shtml and not to forget:
http://alt-web.com/DEMOS/CSS-Sold-Out-Text-over-image.shtml
you will come away with many ideas and suggestions about adding text to an image.
Wish you a joyful "poking around"!
Hans-Günter

How to make slide images with Dreamweaver CS6?

How to make slide images with Dreamweaver CS6? Please teach me.

Hello
in addition to Jon's hint, I'll send you some links to nice sliders (have fun with the different representations ):
http://sandbox.scriptiny.com/javascript-slideshow/
http://jquery.malsup.com/cycle/
http://wowslider.com/best-jquery-slider-crystal-linear-demo.html
http://www.jcoverflip.com/demo
http://www.jacksasylum.eu/ContentFlow/
http://addyosmani.com/blog/jqueryuicoverflow/
You only need to use the source code to implant these shows there where you want. In my eyes it would be the best that you use first a very new and blank DW file to perform (maybe in LiveView) the one or the other.
Hans-Günter

Adding user comments on images using dreamweaver

Hi.
I was wondering is it possible to add a comments section under an image using dreamweaver.
For example on a website, users can view an uploaded image and make comments underneath it. How do I do this in dreamweaver cs6?
Thanks

Hi grampy 84,
I used the keywords "provide commenting on website" on Google, and found a few links that look to be useful. I do not want to recommend any because I have not tried them myself. However, you could go through what's available and ask the experts here for their opinion.
Thanks,
Preran

Centering an image in Dreamweaver

Similar Messages

Maybe you are looking for