Image alignment, 5.5 vs. 2019

Report · Jan 05, 2021

After holding out for years, the machine with CS5.5 finally died and I had to upgrade, unwillingly, to DW2019.

In CS5.5, when you placed an image, you could align it with a little set of boxes on the lower left for Vertical and Horizontal spacing, and on the lower right a drop-down with align left, right, center, default etc.

I can find none of these or anything similar. How do I put my images on the right of the text, for example, with a 3px space between image and text? This was very easy in the old version and seems impossible in the improved one.

PS: I can;t even spell HTML.

Report · Jan 05, 2021

Is there some reason you can't use the latest version of DW 2021?

Unfortunately, if you've been using CS5 which is 10 years out of date, you have much catching up to do. The W3C specifications call for CSS to align elements, not HTML. And modern DW has been re-built to accommodate modern code.

My advice is to learn all you can about CSS (styles) and it's relationship with HTML (content).

And then use CSS Flexbox and/or CSS Grids for your layouts.

Read the chapters, do code exercises and take quizzes at the end.
- https://www.w3schools.com/html/
- https://www.w3schools.com/css/
- https://www.w3schools.com/css/css3_flexbox.asp
- https://www.w3schools.com/css/css_grid.asp

If you care to show us your code, maybe we can provide more specific code examples to get you started.

Nancy O'Shea— Product User, Community Expert & Moderator
Alt-Web Design & Publishing ~ Web : Print : Graphics : Media

Report · Jan 05, 2021

The best thing you can do is share your code and we can help you to get to what you want to achieve. As noted already, the web has changed a lot since 5.5 and development is cross-device and not necessarily and black and white as it used to be. With that said, simple alignment can be done via the properties window (Window --> Properties) and clicking on the CSS button. From there you can do a simple alignment.

Report · Jan 05, 2021

Or simply use a 2-column Bootstrap Layout. Bootstrap is responsive and mobile-first so it fits all devices.

Copy & paste this code into a new, blank document to preview locally.

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Bootstrap 4.5 Starter Page</title>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">

<!--Bootstrap 4.5 on CDN-->
<link rel="stylesheet" href="
https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css">
</head>

<body>
<header class="container-fluid bg-info text-light">
<div class="row">
<div class="col">
<h1>Bootstrap 4.5 in Dreamweaver</h1>
</div>
</div>
</header>

<main class="container my-3">
<div class="row">
<div class="col-md-6">
<img class="img-fluid" src="https://dummyimage.com/500x350" alt="placeholder">
</div>

<div class="col-md-6">
<h2 class="text-info">Heading 2</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsum tenetur ipsa tempore sed, a cupiditate mollitia aliquid delectus corporis accusamus pariatur atque voluptates deserunt debitis, odit omnis suscipit dolore natus.</p>
</div>
</div>

<hr>
<div class="row">
<div class="col-md-6">
<h2 class="text-info">Heading 2</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsum tenetur ipsa tempore sed, a cupiditate mollitia aliquid delectus corporis accusamus pariatur atque voluptates deserunt debitis, odit omnis suscipit dolore natus.</p>
</div>

<div class="col-md-6">
<img class="img-fluid" src="https://dummyimage.com/500x350" alt="placeholder">
</div>
</div>
</main>

<footer class="container-fluid text-center bg-info text-light p-4">
<p>Some footer text here...</p>
</footer>

<!--Supporting scripts: first jQuery, then popper, then Bootstrap JS, etc...--> 
<script src="https://code.jquery.com/jquery-3.5.1.min.js" integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=" crossorigin="anonymous"></script> 
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script> 
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js"></script>
</body>
</html>

Nancy O'Shea— Product User, Community Expert & Moderator
Alt-Web Design & Publishing ~ Web : Print : Graphics : Media

Adobe Community

Image alignment, 5.5 vs. 2019