Skip to main content
M
mike92720724
Participant
January 5, 2021
Question

Image alignment, 5.5 vs. 2019

  • January 5, 2021
  • 3 replies
  • 188 views

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.

    This topic has been closed for replies.

    3 replies

    Nancy OShea
    Community Expert
    Nancy OSheaCommunity Expert
    Community Expert
    January 5, 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
    B
    Community Expert
    Ben MCommunity Expert
    Community Expert
    January 5, 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.

    Nancy OShea
    Community Expert
    Nancy OSheaCommunity Expert
    Community Expert
    January 5, 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
    Terms & ConditionsAccessibility statement
    Using the community Terms of use Privacy Cookie preferences Do not sell or share my personal information ad choicesAdChoices