Image alignment, 5.5 vs. 2019

New Here ,
Jan 05, 2021 Jan 05, 2021

Copy link to clipboard

Copied

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.

Views

79

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Adobe Community Professional ,
Jan 05, 2021 Jan 05, 2021

Copy link to clipboard

Copied

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, Adobe Product User & Community Professional
Alt-Web Design & Publishing ~ Web : Print : Graphics : Media

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Adobe Community Professional ,
Jan 05, 2021 Jan 05, 2021

Copy link to clipboard

Copied

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.

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Adobe Community Professional ,
Jan 05, 2021 Jan 05, 2021

Copy link to clipboard

Copied

LATEST

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

 

image.png

 

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, Adobe Product User & Community Professional
Alt-Web Design & Publishing ~ Web : Print : Graphics : Media

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines