Highlighted

Wrapping text around image

New Here ,
Nov 09, 2020

Copy link to clipboard

Copied

Hello,

How Can I wrap text around a photo on a webpaage? I'm using CSS.

I looked up some of the web articled and they point to clicking on "Justify" on Properties but this option is no longer there in the latest version.

Thanks

 

Adobe Community Professional
Correct answer by Jon Fritz II | Adobe Community Professional

Dreamweaver's interface doesn't have a button for "Wrap Text", but it can be done from within the CSS Designer Window, you just need to know what setting to change and how to find it.

If you're working outside of the Bootstrap framework in DW, use the steps below. If you are using Bootstrap, someone else should be along to tell you the class name needed to add float:left or float:right to your existing images.

1. Click the image you want wrapped by text in Design View

2. In the Properties window, give the image a unique ID (no spaces, no special characters)

3. Open the CSS Designer under Window > CSS Designer
4. In the CSS Designer, click the <style> tag or the name of the external CSS file under Sources. 

     a. If you don't have an external CSS file, clcik the + and choose Define in Page. That will create a <style> option
     b. If you do have one, or don't want to use Embedded CSS, choose Attach Existing CSS File
5. In the CSS Designer, click the + next to Selectors. This should automatically fill in a selector with the ID from step 2.

6. Hit Enter/Return to create the Selector

7. In the CSS Designer, click the + next to Properties,

8. Make sure the "Show Set" box is unchecked

9. Scroll down to Float (about 1/4 of the way through the list) and click either left or right (there is no float:center)
10. You will also likely need to add a little left and right margin to the image (a little above Float in the list) to keep the text from touching the image


This can be done in a few keystrokes using DW's code hinting, but it does require a basic knowledge of css properties. Nancy's links will likely serve you better than my lists of steps in DW's poorly conceived CSS Designer.

Views

63

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

Wrapping text around image

New Here ,
Nov 09, 2020

Copy link to clipboard

Copied

Hello,

How Can I wrap text around a photo on a webpaage? I'm using CSS.

I looked up some of the web articled and they point to clicking on "Justify" on Properties but this option is no longer there in the latest version.

Thanks

 

Adobe Community Professional
Correct answer by Jon Fritz II | Adobe Community Professional

Dreamweaver's interface doesn't have a button for "Wrap Text", but it can be done from within the CSS Designer Window, you just need to know what setting to change and how to find it.

If you're working outside of the Bootstrap framework in DW, use the steps below. If you are using Bootstrap, someone else should be along to tell you the class name needed to add float:left or float:right to your existing images.

1. Click the image you want wrapped by text in Design View

2. In the Properties window, give the image a unique ID (no spaces, no special characters)

3. Open the CSS Designer under Window > CSS Designer
4. In the CSS Designer, click the <style> tag or the name of the external CSS file under Sources. 

     a. If you don't have an external CSS file, clcik the + and choose Define in Page. That will create a <style> option
     b. If you do have one, or don't want to use Embedded CSS, choose Attach Existing CSS File
5. In the CSS Designer, click the + next to Selectors. This should automatically fill in a selector with the ID from step 2.

6. Hit Enter/Return to create the Selector

7. In the CSS Designer, click the + next to Properties,

8. Make sure the "Show Set" box is unchecked

9. Scroll down to Float (about 1/4 of the way through the list) and click either left or right (there is no float:center)
10. You will also likely need to add a little left and right margin to the image (a little above Float in the list) to keep the text from touching the image


This can be done in a few keystrokes using DW's code hinting, but it does require a basic knowledge of css properties. Nancy's links will likely serve you better than my lists of steps in DW's poorly conceived CSS Designer.

Views

64

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
Nov 09, 2020 0
Adobe Community Professional ,
Nov 09, 2020

Copy link to clipboard

Copied

Use CSS Floats.

https://www.w3schools.com/css/css_float.asp

 

Nancy O'Shea, ACP
Alt-Web Design & Publishing

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
Reply
Loading...
Nov 09, 2020 0
New Here ,
Nov 09, 2020

Copy link to clipboard

Copied

Thank you, Can I do this from the Design view? without going to the Code view.

 

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
Reply
Loading...
Nov 09, 2020 0
Adobe Community Professional ,
Nov 09, 2020

Copy link to clipboard

Copied

Code hints and auto code completion are much, much faster than CSS Designer panels. 

 

Nancy O'Shea, ACP
Alt-Web Design & Publishing

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
Reply
Loading...
Nov 09, 2020 0
New Here ,
Nov 10, 2020

Copy link to clipboard

Copied

I really appreciate the help but I'm not too comfortable with code as of yet.

 

Is there a way to do this without using code?

 

thanks 

 

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
Reply
Loading...
Nov 10, 2020 0
Adobe Community Professional ,
Nov 10, 2020

Copy link to clipboard

Copied

Without understanding code (HTML, CSS and to some extent JavaScript), it's unlikely you'll get the results you're hoping for. Nobody here can teach this to you.  Spend a few days reading chapters, do some exercises and take quizzes at the end.  Trust me.  It's time well-spent.
- https://www.w3schools.com/html/
- https://www.w3schools.com/css/
- https://www.w3schools.com/js/

 

Good luck!

 

Nancy O'Shea, ACP
Alt-Web Design & Publishing

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
Reply
Loading...
Nov 10, 2020 0
Adobe Community Professional ,
Nov 10, 2020

Copy link to clipboard

Copied

Dreamweaver's interface doesn't have a button for "Wrap Text", but it can be done from within the CSS Designer Window, you just need to know what setting to change and how to find it.

If you're working outside of the Bootstrap framework in DW, use the steps below. If you are using Bootstrap, someone else should be along to tell you the class name needed to add float:left or float:right to your existing images.

1. Click the image you want wrapped by text in Design View

2. In the Properties window, give the image a unique ID (no spaces, no special characters)

3. Open the CSS Designer under Window > CSS Designer
4. In the CSS Designer, click the <style> tag or the name of the external CSS file under Sources. 

     a. If you don't have an external CSS file, clcik the + and choose Define in Page. That will create a <style> option
     b. If you do have one, or don't want to use Embedded CSS, choose Attach Existing CSS File
5. In the CSS Designer, click the + next to Selectors. This should automatically fill in a selector with the ID from step 2.

6. Hit Enter/Return to create the Selector

7. In the CSS Designer, click the + next to Properties,

8. Make sure the "Show Set" box is unchecked

9. Scroll down to Float (about 1/4 of the way through the list) and click either left or right (there is no float:center)
10. You will also likely need to add a little left and right margin to the image (a little above Float in the list) to keep the text from touching the image


This can be done in a few keystrokes using DW's code hinting, but it does require a basic knowledge of css properties. Nancy's links will likely serve you better than my lists of steps in DW's poorly conceived CSS Designer.

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
Reply
Loading...
Nov 10, 2020 1
Adobe Community Professional ,
Nov 10, 2020

Copy link to clipboard

Copied

If you're using the latest Bootstrap responsive framework, there are several float utility classes available.  That said, floats can be erratic. Separate columns are often better for responsive web design (RWD).

 

Copy & paste this working code into a new, blank document.  Save as float-test.html and preview your work in real browsers of various sizes.

 

image.png

<!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>
<div class="container">
<h1>Bootstrap 4.5 in Dreamweaver</h1>
<h2 class="text-info">2 Columns</h2>
<div class="row">
<!--Left side-->
<div class="col">
<img class="img-thumbnail" src="https://dummyimage.com/400x350" alt="placeholder"> 
</div>
<!--Right side-->
<div class="col">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nostrum, rerum, modi blanditiis quas repudiandae odio aperiam eaque fugit soluta ullam dignissimos nulla esse corrupti nemo! Totam commodi et facere earum.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nostrum, rerum, modi blanditiis quas repudiandae odio aperiam eaque fugit soluta ullam dignissimos nulla esse corrupti nemo! Totam commodi et facere earum.</p>
</div><!--/col-->
</div><!--/row-->
<hr>
<h2 class="text-info">1 Column with Float</h2>
<div class="row">
<div class="col">
<p><img class="img-thumbnail float-md-right" src="https://dummyimage.com/400x350" alt="placeholder">The image is floated-right on larger devices and stacked vertically on smaller devices. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sequi quaerat praesentium velit ipsum inventore et non, eum sed eligendi vero quas magni odit animi veniam porro temporibus minus fugit reprehenderit.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sequi quaerat praesentium velit ipsum inventore et non, eum sed eligendi vero quas magni odit animi veniam porro temporibus minus fugit reprehenderit.</p>
</div><!--/col-->
</div><!--/row-->
</div><!--/container-->

<!--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, ACP
Alt-Web Design & Publishing

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
Reply
Loading...
Nov 10, 2020 0
New Here ,
Nov 12, 2020

Copy link to clipboard

Copied

Thank you for all of your help.

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
Reply
Loading...
Nov 12, 2020 0
New Here ,
Nov 12, 2020

Copy link to clipboard

Copied

This worked. Thank you very much.

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
Reply
Loading...
Nov 12, 2020 0
Adobe Community Professional ,
Nov 12, 2020

Copy link to clipboard

Copied

Which solution worked for you? 

Please mark it as the correct answer.

 

Nancy O'Shea, ACP
Alt-Web Design & Publishing

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
Reply
Loading...
Nov 12, 2020 0