Skip to main content
S
skybluekid1964
Participant
June 17, 2017
Answered

Inserting 'form' in bootstrap css....affects a 'div' position in the index

  • June 17, 2017
  • 2 replies
  • 740 views

Hi,

Please bear with me, am a TOTAL novice to dreamweaver, and this is my first post on the forum 😞

I'm using 'bootstrap' with 'css' styling to create a website.

After inserting a 'form' into a 'section' within css styling on a contact page, it affects the positioning of a 'div' that is also styled in css on the same page.

The position of the 'div' on my index page, is centred and works fine.

When I copy the code to the HTML page with the form in it, the contact page, the 'div' hangs to the left of the page. And obviously if I move the position within that page it alters the position on my index page.

The above comments, may not make any sense, and you'll most probably need more information than I have provided, but I'm new to this and it's my first attempt at a website and dreamweaver.

Really appreciate any help and patience in this matter.

This topic has been closed for replies.
Correct answer Nancy OShea

How much do you understand about CSS Floats and float clearing?

All About Floats | CSS-Tricks

CSS Layout - float and clear

Bootstrap positions elements with Floats and contains a built-in class for float clearing called clearfix.

https://v4-alpha.getbootstrap.com/utilities/clearfix/

Nancy

2 replies

Nancy OShea
Community Expert
Nancy OSheaCommunity ExpertCorrect answer
Community Expert
June 17, 2017

How much do you understand about CSS Floats and float clearing?

All About Floats | CSS-Tricks

CSS Layout - float and clear

Bootstrap positions elements with Floats and contains a built-in class for float clearing called clearfix.

https://v4-alpha.getbootstrap.com/utilities/clearfix/

Nancy

Nancy O'Shea— Product User & Community Expert
BenPleysier
Community Expert
BenPleysierCommunity Expert
Community Expert
June 17, 2017

Please show the code for the problem page.

Wappler is the DMXzone-made Dreamweaver replacement and includes the best of their powerful extensions, as well as much more!
S
skybluekid1964Author
Participant
June 17, 2017

Index page:-

<!doctype html>

<html>

<head>

<meta charset="UTF-8">

<meta http-equiv="X-UA-Compatible" content="IE=edge">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<title>The Blackamoor</title>

<link href="css/bootstrap.css" rel="stylesheet" type="text/css">

<link href="css/styles.css" rel="stylesheet" type="text/css">

<link rel="stylesheet" type="text/css" href="css/font-awesome.css">

<!--The following script tag downloads a font from the Adobe Edge Web Fonts server for use within the web page. We recommend that you do not modify it.-->

<script>var __adobewebfontsappname__="dreamweaver"</script>

<script src="http://use.edgefonts.net/actor:n4:default;alfa-slab-one:n4:default.js" type="text/javascript"></script>

<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->

<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->

<!--[if lt IE 9]>

<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>

<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>

<![endif]-->

</head>

<body style="padding-top: 70px">

<aside class="asideleft"> </aside>

<nav class="navbar navbar-default navbar-fixed-top">

  <div class="container-fluid">

    <!-- Brand and toggle get grouped for better mobile display -->

    <div class="navbar-header">

      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#topFixedNavbar1" aria-expanded="false"><span class="sr-only">Toggle navigation</span><span class="icon-bar"></span><span class="icon-bar"></span><span class="icon-bar"></span></button>

      <a class="navbar-brand" href="#">The Blackamoor</a></div>

    <!-- Collect the nav links, forms, and other content for toggling -->

    <div class="collapse navbar-collapse" id="topFixedNavbar1">

      <ul class="nav navbar-nav navlist">

        <li class="navlistitem active"><a href="index.html">Home</a> </li>

        <li class="navlistitemn"><a href="whatson.html">What's On</a></li>

        <li class="navlistitem"><a href="outbackbar.html">Outback Bar</a></li>

        <li class="navlistitem"><a href="havanaclub.html">Havana Club</a></li>

        <li class="navlistitem"><a href="gallery.html">Gallery</a></li>

        <li class="navlistitem"><a href="drinkoffers.html">Drink Offers</a></li>

        <li class="navlistitem"><a href="contactus.html">Contact Us</a></li>

      </ul>

    </div>

    <!-- /.navbar-collapse -->

  </div>

  <!-- /.container-fluid -->

 

</nav>

<div class="socialmediadiv"> <i class="fa fa-facebook-square fa-5x" aria-hidden="true"></i> <i class="fa fa-twitter-square fa-5x" aria-hidden="true"></i> <i class="fa fa-instagram fa-5x" aria-hidden="true"></i> <i class="fa fa-snapchat-square fa-5x" aria-hidden="true"></i> </div>

<footer>Copyright 2017</footer>

<script src="js/jquery-1.11.3.min.js"></script>

<script src="js/bootstrap.js"></script>

</body>

</html>

Contact Page:-

<!doctype html>

<html>

<head>

<meta charset="UTF-8">

<meta http-equiv="X-UA-Compatible" content="IE=edge">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<title>The Blackamoor</title>

<link href="css/bootstrap.css" rel="stylesheet" type="text/css">

<link href="css/styles.css" rel="stylesheet" type="text/css">

<link href="css/font-awesome.css" rel="stylesheet" type="text/css">

<!--The following script tag downloads a font from the Adobe Edge Web Fonts server for use within the web page. We recommend that you do not modify it.-->

<script>var __adobewebfontsappname__="dreamweaver"</script>

<script src="http://use.edgefonts.net/actor:n4:default;alfa-slab-one:n4:default.js" type="text/javascript"></script>

<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->

<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->

<!--[if lt IE 9]>

<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>

<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>

<![endif]-->

</head>

<body style="padding-top: 70px">

<section class="sectionright">

  <h2>Contact</h2>

  <form action="http://www.theblackamoor.co.uk/formmail.php" id="form1" name="form1" method="post">

    <label for="Name">Name:</label>

    <br>

    <input name="Name" type="text" required class= "formstyle" id="Name" form="form1">

    <br>

    <label for="email">Email:</label>

    <br>

    <input name="Email" type="Email" required class= "formstyle" id="Email" form="form1">

    <br>

    <label for="Comments">Comments:</label>

    <br>

    <textarea name="Comments" cols="5" required class= "formstyle" id="Comments" form="form1"></textarea>

    <br>

    <input name="submit" type="submit" id="submit" form="form1" value="Submit">

    <br>

     

  </form>

</section>

<nav class="navbar navbar-default navbar-fixed-top">

  <div class="container-fluid">

    <!-- Brand and toggle get grouped for better mobile display -->

    <div class="navbar-header">

      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#topFixedNavbar1" aria-expanded="false"><span class="sr-only">Toggle navigation</span><span class="icon-bar"></span><span class="icon-bar"></span><span class="icon-bar"></span></button>

      <a class="navbar-brand" href="#">The Blackamoor</a></div>

    <!-- Collect the nav links, forms, and other content for toggling -->

    <div class="collapse navbar-collapse" id="topFixedNavbar1">

      <ul class="nav navbar-nav navlist">

        <li class="navlistitem"><a href="index.html">Home</a> </li>

        <li class="navlistitemn"><a href="whatson.html">What's On</a></li>

        <li class="navlistitem"><a href="outbackbar.html">Outback Bar</a></li>

        <li class="navlistitem"><a href="havanaclub.html">Havana Club</a></li>

        <li class="navlistitem"><a href="gallery.html">Gallery</a></li>

        <li class="navlistitem"><a href="drinkoffers.html">Drink Offers</a></li>

        <li class="navlistitem active"><a href="contactus.html">Contact Us</a></li>

      </ul>

    </div>

    <!-- /.navbar-collapse -->

  </div>

  <!-- /.container-fluid -->

 

</nav>

<div class="socialmediadiv"> <i class="fa fa-facebook-square fa-5x" aria-hidden="true"></i> <i class="fa fa-twitter-square fa-5x" aria-hidden="true"></i> <i class="fa fa-instagram fa-5x" aria-hidden="true"></i> <i class="fa fa-snapchat-square fa-5x" aria-hidden="true"></i> </div>

<footer>Copyright 2017</footer>

<script src="js/jquery-1.11.3.min.js"></script>

<script src="js/bootstrap.js"></script>

</body>

</html>

css styling:-

@charset "UTF-8";

body {

  background-color: rgba(151,150,150,1.00);

  background-image: url(../images/Blackamoor%20Background.jpg);

  background-size: cover;

  background-attachment: fixed;

  font-family: actor;

  font-style: normal;

  font-weight: 400;

  height: 100%;

}

h1  {

  font-family: alfa-slab-one;

  font-style: normal;

  font-weight: 400;

  color: rgba(255,255,255,1.00);

  font-size: 1.5em;

  line-height: 2em;

  text-align: center;

  height: 3em;

}

h2 {

  color: rgba(0,0,0,1.00);

  font-family: alfa-slab-one;

  font-style: normal;

  font-weight: 400;

  text-decoration: underline;

  font-size: 1.5em;

  text-align: center;

}

footer {

  color: rgba(255,255,255,1.00);

  text-align: center;

  padding-bottom: 0em;

  bottom: 0em;

  padding-top: 0%;

  clear: both;

  position: fixed;

  left: 0px;

  height: 25px;

  width: 100%;

  background-color: #000000;

  margin-top: 0px;

}

header {

  text-align: center;

  background-image: -webkit-linear-gradient(270deg,rgba(255,255,255,0.41) 16.07%,rgba(255,0,0,1.00) 100%);

  background-image: -moz-linear-gradient(270deg,rgba(255,255,255,0.41) 16.07%,rgba(255,0,0,1.00) 100%);

  background-image: -o-linear-gradient(270deg,rgba(255,255,255,0.41) 16.07%,rgba(255,0,0,1.00) 100%);

  background-image: linear-gradient(180deg,rgba(255,255,255,0.41) 16.07%,rgba(255,0,0,1.00) 100%);

  margin-left: 39%;

  margin-right: 39%;

  margin-top: 3%;

  padding-top: 10px;

  background-attachment: scroll;

  padding-bottom: 10px;

  padding-right: 10px;

  padding-left: 10px;

  min-width: 12em;

  background-size: cover;

  max-width: 0em;

}

nav {

  background-color: rgba(255,255,255,1.00);

  bottom: 0

em;

}

.navlist {

  padding: 0;

  list-style-type: none;

  overflow: hidden;

}

.navlistitem {

  /*float: left;*/

  color: rgba(0,0,0,1.00);

}

.navlistitem a {

  text-decoration: none;

  display: block;

  padding-top: 14px;

  padding-bottom: 14px;

  padding-left: 16px;

  color: rgba(0,0,0,1.00);

  padding-right: 16px;

}

.navlistitem a:hover {

  color: rgba(255,0,4,1.00);

  background-color: rgba(254,0,4,1.00);

}

.container-fluid .navbar-header .navbar-brand {

  font-family: alfa-slab-one;

  font-style: normal;

  font-weight: 400;

  color: rgba(0,0,0,1.00);

}

.navbar.navbar-default.navbar-fixed-top .container-fluid #topFixedNavbar1 a:hover {

  background-color: rgba(0,0,0,1.00);

  color: rgba(255,250,250,1.00);

}

.asideleft {

  width: 30%;

  float: left;

  margin-left: 5%;

  margin-top: 29px;

  margin-right: 1%;

  background-image: -webkit-linear-gradient(270deg,rgba(255,255,255,1.00) 0%,rgba(0,0,0,0.46) 100%);

  background-image: -moz-linear-gradient(270deg,rgba(255,255,255,1.00) 0%,rgba(0,0,0,0.46) 100%);

  background-image: -o-linear-gradient(270deg,rgba(255,255,255,1.00) 0%,rgba(0,0,0,0.46) 100%);

  background-image: linear-gradient(180deg,rgba(255,255,255,1.00) 0%,rgba(0,0,0,0.46) 100%);

}

.sectionright {

  width: 55%;

  float: right;

  margin-right: 5%;

  margin-top: 385px;

  margin-left: 1%;

  padding-left: 2.5%;

  padding-top: 2.5%;

  padding-right: 2.5%;

  padding-bottom: 2.5%;

  background-image: -webkit-linear-gradient(270deg,rgba(255,255,255,1.00) 0%,rgba(0,0,0,0.57) 100%);

  background-image: -moz-linear-gradient(270deg,rgba(255,255,255,1.00) 0%,rgba(0,0,0,0.57) 100%);

  background-image: -o-linear-gradient(270deg,rgba(255,255,255,1.00) 0%,rgba(0,0,0,0.57) 100%);

  background-image: linear-gradient(180deg,rgba(255,255,255,1.00) 0%,rgba(0,0,0,0.57) 100%);

}

.formstyle {

  width: 100%;

  color: #000000;

}

#form1 {

  color: rgba(0,0,0,1.00);

}

.sectionright p {

  color: rgba(255,251,251,1.00);

  text-align: center;

  font-family: Gotham, "Helvetica Neue", Helvetica, Arial, sans-serif;

  font-style: normal;

  font-size: 1.25em;

}

.socialmediadiv {

  background-image: -webkit-linear-gradient(270deg,rgba(5,5,5,0.46) 0%,rgba(20,18,18,0.71) 100%);

  background-image: -moz-linear-gradient(270deg,rgba(5,5,5,0.46) 0%,rgba(20,18,18,0.71) 100%);

  background-image: -o-linear-gradient(270deg,rgba(5,5,5,0.46) 0%,rgba(20,18,18,0.71) 100%);

  background-image: linear-gradient(180deg,rgba(5,5,5,0.46) 0%,rgba(20,18,18,0.71) 100%);

  padding-bottom: 12px;

  padding-right: 12px;

  padding-top: 12px;

  padding-left: 12px;

  position: relative;

  top: 59.25em;

  color: rgba(255,255,255,1.00);

  text-align: left;

  float: none;

}

@media (max-width: 650px){

.sectionright {

  margin-left: 0px;

  margin-right: 168px;

}

}

I HOPE THIS HELPS....TIA

BenPleysier
Community Expert
BenPleysierCommunity Expert
Community Expert
June 17, 2017

Copy and paste the following code into a new document

<body class="container-fluid" style="padding-top: 70px">
<nav class="navbar navbar-default navbar-fixed-top">
  <div class="container-fluid">
    <!-- Brand and toggle get grouped for better mobile display -->
    <div class="navbar-header">
      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#topFixedNavbar1" aria-expanded="false"><span class="sr-only">Toggle navigation</span><span class="icon-bar"></span><span class="icon-bar"></span><span class="icon-bar"></span></button>
      <a class="navbar-brand" href="#">The Blackamoor</a></div>
    <!-- Collect the nav links, forms, and other content for toggling -->
    <div class="collapse navbar-collapse" id="topFixedNavbar1">
      <ul class="nav navbar-nav navlist">
        <li class="navlistitem"><a href="index.html">Home</a> </li>
        <li class="navlistitemn"><a href="whatson.html">What's On</a></li>
        <li class="navlistitem"><a href="outbackbar.html">Outback Bar</a></li>
        <li class="navlistitem"><a href="havanaclub.html">Havana Club</a></li>
        <li class="navlistitem"><a href="gallery.html">Gallery</a></li>
        <li class="navlistitem"><a href="drinkoffers.html">Drink Offers</a></li>
        <li class="navlistitem active"><a href="contactus.html">Contact Us</a></li>
      </ul>
    </div>
    <!-- /.navbar-collapse -->
  </div>
  <!-- /.container-fluid -->
</nav>
<div class="row">
  <main class="col-md-6">
  Main Content
  </main>
  <aside class="col-md-6">
  <h2>Contact</h2>
  <form action="http://www.theblackamoor.co.uk/formmail.php" id="form1" name="form1" method="post">
  <label for="Name">Name:</label>
  <br>
  <input name="Name" type="text" required class= "formstyle" id="Name" form="form1">
  <br>
  <label for="email">Email:</label>
  <br>
  <input name="Email" type="Email" required class= "formstyle" id="Email" form="form1">
  <br>
  <label for="Comments">Comments:</label>
  <br>
  <textarea name="Comments" cols="5" required class= "formstyle" id="Comments" form="form1"></textarea>
  <br>
  <input name="submit" type="submit" id="submit" form="form1" value="Submit">
  <br>
  </form>
  </aside>
</div>
<div class="row">
  <div class="socialmediadiv"><i class="fa fa-facebook-square fa-5x" aria-hidden="true"></i> <i class="fa fa-twitter-square fa-5x" aria-hidden="true"></i> <i class="fa fa-instagram fa-5x" aria-hidden="true"></i> <i class="fa fa-snapchat-square fa-5x" aria-hidden="true"></i> </div>
</div>
<footer>Copyright 2017</footer>
  <!-- jQuery (necessary for Bootstrap's JavaScript plugins) --> 
  <script src="js/jquery-1.11.3.min.js"></script>
  <!-- Include all compiled plugins (below), or include individual files as needed --> 
  <script src="js/bootstrap.js"></script>
  </body>

You will have to re-position the media bar, personally I would make it part of the footer. Also re-assign the style rules for the form.

Wappler is the DMXzone-made Dreamweaver replacement and includes the best of their powerful extensions, as well as much more!
Firefly Community Gallery
Adobe Firefly

Remix with Firefly Community Gallery

Thousands of free creations to fall in love with and remix in Firefly.

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