Skip to main content
R
Reinhard33316485ltf8
Participant
December 8, 2023
Question

I need help, beginning Dreamweave user here...

  • December 8, 2023
  • 3 replies
  • 437 views

It's my first time using this, and coding is really a dozy for me. -_-

I need to know how to pad my text in my div columns within a certain width, along with the largest image to dip slightly below the navbar and above the div content below. I am using Bootstrap for these assets.

 

Also, I would like to apply that to my navbar titles and link buttons as closely as possible. Here's a screenshot on how I would like it to look in the final product attached.

 

Here's my HTML code:

 

<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.1.3/dist/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<link href="Styles/0606-v2styles.css" rel="stylesheet" type="text/css">
<title>Hello, world!</title>
</head>

<body>
<!-- As a heading -->
<nav class="navbar">
<span class="navbar-brand mb-0 h1">Project: Infinitus</span>
<ul class="nav justify-content-end">
<li class="nav-item">
<a class="nav-link active" href="#">Professor</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Title</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Point918</a>
</li>
</ul>
</nav>
<!-- Content here -->

<div class="text-center">
<a href="#"> <img src="https://via.placeholder.com/1080x720"></a>
</div>

<div-container>

<div class="secondary center">
<div class="row">
<div class="col">
<a href="#"><img src="https://via.placeholder.com/480x360" align="right" class="img-fluid"></a>
</div>

<div class="col">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Metus dictum at tempor commodo ullamcorper. Accumsan in nisl nisi scelerisque eu ultrices. Porta nibh venenatis cras sed felis eget velit. Ultrices neque ornare aenean euismod elementum nisi quis. Enim tortor at auctor urna nunc id cursus metus aliquam. Mauris pharetra et ultrices neque ornare aenean euismod elementum. Ultrices tincidunt arcu non sodales neque. Sollicitudin aliquam ultrices sagittis orci a scelerisque purus semper eget. Commodo quis imperdiet massa tincidunt nunc pulvinar sapien et. Dui sapien eget mi proin sed libero enim sed. Mi eget mauris pharetra et ultrices neque ornare. Non sodales neque sodales ut etiam sit. Cursus vitae congue mauris rhoncus aenean vel elit scelerisque mauris.</p>

<p>Donec enim diam vulputate ut pharetra sit. Volutpat ac tincidunt vitae semper quis lectus nulla at volutpat. Phasellus faucibus scelerisque eleifend donec pretium vulputate sapien nec sagittis. At lectus urna duis convallis convallis. A pellentesque sit amet porttitor eget. Amet consectetur adipiscing elit ut aliquam. Sed augue lacus viverra vitae congue. Ipsum dolor sit amet consectetur adipiscing elit duis.</p>
</div>
<div class="row">
<div class="col" align="right">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Metus dictum at tempor commodo ullamcorper. Accumsan in nisl nisi scelerisque eu ultrices. Porta nibh venenatis cras sed felis eget velit. Ultrices neque ornare aenean euismod elementum nisi quis. Enim tortor at auctor urna nunc id cursus metus aliquam. Mauris pharetra et ultrices neque ornare aenean euismod elementum. Ultrices tincidunt arcu non sodales neque. Sollicitudin aliquam ultrices sagittis orci a scelerisque purus semper eget. Commodo quis imperdiet massa tincidunt nunc pulvinar sapien et. Dui sapien eget mi proin sed libero enim sed. Mi eget mauris pharetra et ultrices neque ornare. Non sodales neque sodales ut etiam sit. Cursus vitae congue mauris rhoncus aenean vel elit scelerisque mauris.</p>

<p>Donec enim diam vulputate ut pharetra sit. Volutpat ac tincidunt vitae semper quis lectus nulla at volutpat. Phasellus faucibus scelerisque eleifend donec pretium vulputate sapien nec sagittis. At lectus urna duis convallis convallis. A pellentesque sit amet porttitor eget. Amet consectetur adipiscing elit ut aliquam. Sed augue lacus viverra vitae congue. Ipsum dolor sit amet consectetur adipiscing elit duis. Pharetra pharetra massa massa ultricies mi quis. Sit amet consectetur adipiscing elit. Felis imperdiet proin fermentum leo. Mauris commodo quis imperdiet massa tincidunt. Gravida neque convallis a cras semper auctor neque. Sit amet massa vitae tortor condimentum lacinia. Faucibus purus in massa tempor nec feugiat nisl. Quis vel eros donec ac odio tempor orci dapibus ultrices. Gravida neque convallis a cras semper auctor. Ultricies mi eget mauris pharetra et ultrices neque ornare.</p>
</div>

<div class="col">
<a href="#"><img src="https://via.placeholder.com/480x400" align="center" class="img-fluid"></a>
</div>
</div>
</div>
</div>
</div-container>
<footer class="footer">
<div class="container">
<span class="text-muted">ORU and organization links here.</span>
</div>
</footer>

</body></html>

 

 

 

CSS Style:

 

.navbar {
background-color: orange;
}

body {
background-color: #1D1387
}

.col {
background-color: aliceblue
}

footer {
background-color: #0B5B02
}

 

 

    This topic has been closed for replies.

    3 replies

    Nancy OShea
    Community Expert
    Nancy OSheaCommunity Expert
    Community Expert
    December 8, 2023

    Use built-in Bootstrap utility classes.

    https://getbootstrap.com/docs/4.0/utilities/spacing/

     

    m = margin, p = padding. 

    Sides: t = top, l = left, r = right, b = bottom, x = both left & right, y = both top & bottom.

    Sizes: (based on 0.25 - 3 rem)  0 = 0 rem, 1 = 0.25 rem, 2 = .50 rem , 3 = 1 rem, 4 = 1.5 rem, 5 = 3 rem.

     

    As an example,

    <h3 class="p-t-3">This heading has padding-top of 1 rem on all devices.</h3>

     

    Hope that helps.

     

    Nancy O'Shea— Product User & Community Expert
    B
    Community Expert
    Ben MCommunity Expert
    Community Expert
    December 8, 2023

    If you are not comfortable with coding or find it overwhelming, DW may not be the best solution for you irregardless of the fact that DW is not actively being updated at the moment. You may want to consider options like Wordpress with page builder plugins, or hosted solutions like Wix/Squarespace/Webflow/etc. 

    O
    osgood_
    Legend
    December 8, 2023
    quote

    or hosted solutions like Wix/Squarespace/Webflow/etc. 


    By @Ben M

     

    I will just add in that scenario make sure you're not  "buying" into something you know nothing about. I have had a few clients recently that have gone down the route of DIY using some of the widely acclaimed solutions available only to take 2 steps back in my opinion. Web development is best left in the hands of a professional if you do not have enough knowledge to uncover the hidden pitfalls.  Could do more damage than good to your business unless you are just playing around for fun.

     

    The frustration for me is even when you point those pitfalls out the client  refuses to acknowledge the issues. I guess they are in too deep, financially, once committed, have usually signed a 'contract', and don't want to be informed.

    BenPleysier
    Community Expert
    BenPleysierCommunity Expert
    Community Expert
    December 8, 2023

    Try 

     

     

     

    <!doctype html>
<html lang="en">

<head>
  <base href="/">
  <!-- Required meta tags -->
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

  <!-- Bootstrap CSS -->
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/css/bootstrap.min.css" integrity="sha384-B0vP5xmATw1+K9KRQjQERJvTumQW0nPEzvF6L/Z6nronJ3oUOFUFpCjEUQouq2+l" crossorigin="anonymous">
  <link href="Styles/0606-v2styles.css" rel="stylesheet" type="text/css">
  <title>Hello, world!</title>
  <style>
    header.main {
      background-color: orange;
    }

    body {
      /* background-color: #1D1387 */
    }

    .banner {
      background-color: #1D1387;
    }

    .banner .row {
      padding: 50px;
    }

    footer {
      background-color: #0B5B02
    }
  </style>
</head>

<body>
  <!-- As a heading -->
  <header class="main">
    <div class="container">
      <div class="row">
        <div class="col bg-transparent">
          <nav class="navbar navbar-expand-lg navbar-light justify-content-end">
            <a class="navbar-brand ml-auto" href="#">Navbar</a>
            <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbar1_collapse" aria-controls="navbar1_collapse" aria-expanded="false" aria-label="Toggle navigation">
              <span class="navbar-toggler-icon"></span>
            </button>
            <div class="collapse navbar-collapse justify-content-end" id="navbar1_collapse">
              <div class="navbar-nav">
                <a class="nav-item nav-link active" href="#">Home</a>
                <a class="nav-item nav-link" href="#">About</a>
                <a class="nav-item nav-link" href="#">Contact</a>
              </div>
            </div>
          </nav>
        </div>
      </div>
    </div>
  </header>

  <!-- Content here -->
  <section class="banner">
    <div class="container">
      <div class="row">
        <div class="col">
          <a href="#"> <img src="https://via.placeholder.com/1080x720" class="img-fluid ml-auto mr-auto d-block"></a>
        </div>
      </div>
    </div>
  </section>

  <section class="mt-5">
    <div class="container">
      <div class="row">
        <div class="col">
          <a href="#"><img src="https://via.placeholder.com/480x360" class="float-left img-fluid mr-4"></a>
          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Metus dictum at tempor commodo ullamcorper. Accumsan in nisl nisi scelerisque eu ultrices. Porta nibh venenatis cras sed felis eget velit. Ultrices neque ornare aenean euismod elementum nisi quis. Enim tortor at auctor urna nunc id cursus metus aliquam. Mauris pharetra et ultrices neque ornare aenean euismod elementum. Ultrices tincidunt arcu non sodales neque. Sollicitudin aliquam ultrices sagittis orci a scelerisque purus semper eget. Commodo quis imperdiet massa tincidunt nunc pulvinar sapien et. Dui sapien eget mi proin sed libero enim sed. Mi eget mauris pharetra et ultrices neque ornare. Non sodales neque sodales ut etiam sit. Cursus vitae congue mauris rhoncus aenean vel elit scelerisque mauris.</p>

          <p>Donec enim diam vulputate ut pharetra sit. Volutpat ac tincidunt vitae semper quis lectus nulla at volutpat. Phasellus faucibus scelerisque eleifend donec pretium vulputate sapien nec sagittis. At lectus urna duis convallis convallis. A pellentesque sit amet porttitor eget. Amet consectetur adipiscing elit ut aliquam. Sed augue lacus viverra vitae congue. Ipsum dolor sit amet consectetur adipiscing elit duis.</p>
        </div>
        <div class="row mt-4">
          <div class="col">
            <a href="#"><img src="https://via.placeholder.com/480x400" class="float-right img-fluid ml-4"></a>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Metus dictum at tempor commodo ullamcorper. Accumsan in nisl nisi scelerisque eu ultrices. Porta nibh venenatis cras sed felis eget velit. Ultrices neque ornare aenean euismod elementum nisi quis. Enim tortor at auctor urna nunc id cursus metus aliquam. Mauris pharetra et ultrices neque ornare aenean euismod elementum. Ultrices tincidunt arcu non sodales neque. Sollicitudin aliquam ultrices sagittis orci a scelerisque purus semper eget. Commodo quis imperdiet massa tincidunt nunc pulvinar sapien et. Dui sapien eget mi proin sed libero enim sed. Mi eget mauris pharetra et ultrices neque ornare. Non sodales neque sodales ut etiam sit. Cursus vitae congue mauris rhoncus aenean vel elit scelerisque mauris.</p>
            <p>Donec enim diam vulputate ut pharetra sit. Volutpat ac tincidunt vitae semper quis lectus nulla at volutpat. Phasellus faucibus scelerisque eleifend donec pretium vulputate sapien nec sagittis. At lectus urna duis convallis convallis. A pellentesque sit amet porttitor eget. Amet consectetur adipiscing elit ut aliquam. Sed augue lacus viverra vitae congue. Ipsum dolor sit amet consectetur adipiscing elit duis. Pharetra pharetra massa massa ultricies mi quis. Sit amet consectetur adipiscing elit. Felis imperdiet proin fermentum leo. Mauris commodo quis imperdiet massa tincidunt. Gravida neque convallis a cras semper auctor neque. Sit amet massa vitae tortor condimentum lacinia. Faucibus purus in massa tempor nec feugiat nisl. Quis vel eros donec ac odio tempor orci dapibus ultrices. Gravida neque convallis a cras semper auctor. Ultricies mi eget mauris pharetra et ultrices neque ornare.</p>
          </div>

        </div>
      </div>
    </div>
  </section>
  <footer class="footer">
    <div class="container">
      <span class="text-muted">ORU and organization links here.</span>
    </div>
  </footer>

  <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script>
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/js/bootstrap.min.js" integrity="sha384-+YQ4JLhjyBLPDQt//I+STsc9iw4uQqACwlvpslubQzn4u2UU2UFM80nGisd026JF" crossorigin="anonymous"></script>
</body>

</html>

     

     

    Having said that, why Bootstrap 4? Why not Bootstrap 5.3???

     

    Why use Dreamweaver which is not being updated?

     

     

    Wappler is the DMXzone-made Dreamweaver replacement and includes the best of their powerful extensions, as well as much more!
    Terms & ConditionsAccessibility statement
    Using the community Terms of use Privacy Cookie preferences Do not sell or share my personal information ad choicesAdChoices