Skip to main content
M
Mohamed19
Participant
July 28, 2020
Question

How can I move photos around

  • July 28, 2020
  • 2 replies
  • 280 views

I used Dreamweaver 2020, windows 10.

What can i do to move photos around?

    This topic has been closed for replies.

    2 replies

    Nancy OShea
    Community Expert
    Nancy OSheaCommunity Expert
    Community Expert
    July 29, 2020

    Move your code, not the image.

     

     

    <!doctype html>
<html lang="end">
<head>
<meta charset="utf-8">
<title>CSS Grid Evenly Distributed Layout</title>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
html { font-size: 16px }
body {
font-family: "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", "DejaVu Sans", Verdana, "sans-serif";
font-size: 1.5rem;
margin: 0 auto;
max-width: 56em;
padding: 1em 0;
}
.grid {
/* Grid Fallback */
display: flex;
flex-wrap: wrap;
/* Supports Grid */
display: grid;
grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
grid-auto-rows: minmax(150px, auto);
grid-gap: 1em;
}
.module {
/* Demo-Specific Styles */
background: #eaeaea;
display: flex;
align-items: center;
justify-content: center;
height: 200px;
/* Flex Fallback */
margin-left: 5px;
margin-right: 5px;
flex: 1 1 200px;
}

/* If Grid is supported, remove the margin we set for the fallback */
@supports (display: grid) {
.module {
margin: 0;
}
}
</style>
</head>

<body>
<div class="grid">

<div class="module">2</div>
<div class="module">3</div>
<div class="module">4</div>
<div class="module">5</div>
<div class="module">6</div>
<div class="module">7</div>

<div class="module">1</div>

<div class="module">8</div>
<div class="module">9</div>
<div class="module">10</div>
<div class="module">11</div>
<div class="module">12</div>
<div class="module">13</div>
<div class="module">14</div>
<div class="module">15</div>
</div>
</body>
</html>

     

     

     

     

     

    Nancy O'Shea— Product User & Community Expert
    M
    Mohamed19Author
    Participant
    July 29, 2020

    Thanks for your response

    Jon Fritz
    Community Expert
    Jon FritzCommunity Expert
    Community Expert
    July 29, 2020

    Dreamweaver is not a page layout program like InDesign. You don't have the option to drag images around a page to create a layout. The program, for better or worse, assumes you understand HTML and CSS, and to a lesser extent Bootstrap and Javascript. Without an understanding of the basics, it's going to be tough to get your layout to do what you want.

    If you understand how to work with HTML and CSS, look into Flexbox and Grid to create your layouts, then fill in the spaces with your images and text. 

    Flexbox: https://www.w3schools.com/css/css3_flexbox.asp

    Grid: https://www.w3schools.com/css/css_grid.asp


    If you want to work with one of the buillt-in Responsive Bootstrap Starter pages: 
    https://helpx.adobe.com/dreamweaver/using/bootstrap.html

    That will get you started, but Bootstrap is a very, very large framework and to get the most out of it, you'll need to learn everything you can about the pre-built CSS classes within the framework. Whatever version you ultimately use, there is a ton of info online to explain what everything is and how to work with it.

      Terms & ConditionsAccessibility statement
      Using the community Terms of use Privacy Cookie preferences Do not sell or share my personal information ad choicesAdChoices