Skip to main content
A
Anonymous
March 15, 2022
Answered

extending bars

  • March 15, 2022
  • 2 replies
  • 2905 views

i am unable to extend the menu bar to fill the width and the footer to fill the width and extend to the bottom... any help is apreciated..

    This topic has been closed for replies.
    Correct answer osgood_

    just add margin: 0; to the body css:

     

    body{
    background-color: #F7B331;
    margin: 0;
    }

     

    You have a few errors in your css that may effect the layout:

     

    1) You have an additional closing } after the 'body' css selector.

     

    2) You have an additional closing } after the '.row:after' css selector.

     

    3 There is a colon : missing from the padding stying in the 'footer' css selector.

    2 replies

    Nancy OShea
    Nancy OShea
    Adobe Expert
    March 15, 2022

    Bootstrap 4:  Footer is always at screen bottom on short pages.

     

     

    <!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Bootstrap 4 Demo</title>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">

<!--Bootstrap CSS-->
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">

<style>
/**custom styles**/
body {
 min-height: 100vh;
 padding-top:25vh;
}
.flex-grow { flex: 1; }
</style>
</head>

<body class="d-flex flex-column bg-dark text-light">
<!--BEGIN RESPONSIVE NAVBAR-->
<nav class="navbar navbar-dark navbar-expand-lg bg-primary justify-content-center fixed-top"> 
<a class="navbar-brand" href="#"><img class="img-fluid"  src="https://dummyimage.com/360x65" alt="Your Logo" title="Company Logo or Brand"></a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarsExampleDefault" aria-controls="navbarsExampleDefault" aria-expanded="false" aria-label="Toggle navigation"> <span class="navbar-toggler-icon"></span> </button>
<div class="collapse navbar-collapse" id="navbarsExampleDefault">
<ul class="navbar-nav ml-auto">
<li class="nav-item active"> <a class="nav-link" href="index.html">Home <span class="sr-only">(current)</span></a> </li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown1" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> Dropdown </a>
<div class="dropdown-menu" aria-labelledby="navbarDropdown1">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">Something else here</a>
</div>
</li>
<li class="nav-item"><a class="nav-link" href="about.html">About</a></li>
<li class="nav-item"><a class="nav-link" href="gallery.html">Gallery</a></li>
<li class="nav-item"><a class="nav-link" href="contact.html">Contact</a></li>
</ul>
</div>
</nav>
<!--end navbar-->

<!--BEGIN MAIN CONTENT-->
<main class="container-fluid flex-grow">
<div class="row h-100">

<!--COL 1-->
<div class="col-md-4">
<p class="text-center">
<img class="img-thumbnail" src="https://placeimg.com/400/500/people" alt="placeholder" title="Tooltip here..."></p>
</div>

<!--COL 2-->
<div class="col-md-4  border-warning border-top border-bottom">
<h1 class="p-2">Hello World!</h1>
<h2 class="p-2 text-warning">Welcome to Bootstrap 4 in Dreamweaver.</h2><p class="p-2">On short pages, footer remains at viewport bottom. </p>
<p class="p-2">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ducimus debitis, voluptatem, nulla, dolor qui pariatur quo reprehenderit at labore dicta iure earum! Facilis itaque quidem, placeat! Iste, rerum aut sapiente.</p>
<p class="p-2">
<a class="btn btn-outline-warning" href="https://www.w3schools.com/bootstrap4/" title="Visit W3Schools.com">Bootstrap 4 Tutorials </a></p>
</div><!--/end col 1-->

<!--COL 3-->
<div class="col-md-4">
<p class="text-center">
<img class="img-thumbnail" src="https://placeimg.com/400/500/arch" alt="placeholder" title="Tooltip here..."></p>
</div><!--end col 2-->
</div><!--end row-->
</main><!--end main-->


<!--BEGIN FOOTER-->
<footer class="bg-primary text-white mt-4">
<div class="container-fluid py-3">
<div class="row">
<div class="col-md-4 text-center">
<h5>Footer Column 1</h5>
<p>Lorem ipsum dolar...</p>
</div>
<div class="col-md-4 text-center">
<h5>Footer Column 2</h5>
<p>Lorem ipsum dolar...</p>
</div>
<div class="col-md-4 text-center">
<h5>Footer Column 3</h5>
<p>Lorem ipsum dolar...</p>
</div>
</div><!--end row-->
</div><!--end container-->
</footer><!--end footer-->

<!--supporting scripts, first  jQuery then Popper then Bootstrap--> 
<script src="https://code.jquery.com/jquery-3.2.1.min.js" integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4=" crossorigin="anonymous"></script> 

<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.11.0/umd/popper.min.js" integrity="sha384-b/U6ypiBEHpOf/4+1nzFpr53nxSS+GLCkfwBdFNTxtclqqenISfwAzpKaMNFNmj4" crossorigin="anonymous"></script>
<script src="../js/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.bundle.min.js" integrity="sha384-6khuMg9gaYr5AxOqhkVIODVIvm9ynTT5J4V1cfthmT+emCG6yVmEZsRHdxlotUnm" crossorigin="anonymous"></script>
</body>
</html>

     

    Nancy O'Shea— Product User, Community Expert &amp; Moderator
      O
      osgood_
      Brainiac
      March 15, 2022
      quote

      Bootstrap 4:  Footer is always at screen bottom on short pages.

       

      By @Nancy OShea

       

       

      Good spot. I didnt understand the bit of the post which requires the footer to always be at the foot of the page BUT as the OP is not using Bootstrap your answer doesnt really address their issue so I will attempt to BUT track record on getting this OP to understand is minimal, but Ill give it a shot.

       

      Wrap ALL of your pages code in a <div></div> container and give it the class name of 'pageWrapper'

       

      <div class="pageWrapper">

       

      ALL code from 'header' to and including 'footer' goes here.

       

      </div>

       

      Then wrap all the 'header' code down to and including the last 'column' code in another <div></div> and give it the class name of 'topSection'

       

      <div class="topSection">

       

      ALL 'header' code down to and including the last 'column' code goes here

       

      </div>

       

       

      Then add the below css to your css styles:

       

      .pageWrapper {
      display: flex;
      flex-direction: column;
      height: 100vh;
      }
      .topSection {
      flex: 1;
      }

       

       

      That will then keep the footer at the base of the browser window for pages which have a short amount of content.

       

       

       

       

       

       

      BenPleysier
      BenPleysier
      Adobe Expert
      March 16, 2022
      quote

       

       

      In this space, the path of least resistance is usually preferred. 

       

       


      By @Nancy OShea

       

      That would be sit on your ass and do nothing in my World.


      I would have said `fat ass`. But who am I?

       

      But to get back to what @Nancy OShea says, most newbies start with a template to see how things fit together. I am sure that you used examples when you first started off. Maybe not, someone like you would probably, right from the start, know that anchor elements are the only in-line elements that are allowed to contain block elements.

      Wappler is the DMXzone-made Dreamweaver replacement and includes the best of their powerful extensions, as well as much more!
      O
      osgood_Correct answer
      Brainiac
      March 15, 2022

      just add margin: 0; to the body css:

       

      body{
      background-color: #F7B331;
      margin: 0;
      }

       

      You have a few errors in your css that may effect the layout:

       

      1) You have an additional closing } after the 'body' css selector.

       

      2) You have an additional closing } after the '.row:after' css selector.

       

      3 There is a colon : missing from the padding stying in the 'footer' css selector.

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