Trying to make it so when you click on the signup button it links too the bottom
ID: 3679510 • Letter: T
Question
Trying to make it so when you click on the signup button it links too the bottom of the page where the signup form is. i cant figure out what i am doing wrong. here is my code.
<body>
<!----navbar---->
<nav class = "navbar navbar-inverse">
<div class = "container">
<div class = "navbar-header">
<button type="button" class = "navbar-toggle" data-toggle="collapse" data-target="#mainNavBar">
<span class = "icon-bar"></span>
<span class = "icon-bar"></span>
</button>
<!--- Navbar logo---->
<a href="#" class = "navbar-brand">CSE-252</a>
</div>
<!---menue items --->
<div class = "collapse navbar-collapse" id = "mainNavBar">
<ul class = "nav navbar-nav">
<li class = "active"><a href="#">Home</a></li>
<li><a href="#">About</a></li>
</ul>
<!-----Signup button---->
<ul class="nav navbar-nav navbar-right">
<li>
<form class="navbar-form">
<a href="#myCarousel" class="btn btn-primary active">Sign Up</a>
</form>
</li>
<!----signin dropdown----->
<li class="dropdown">
<a class="dropdown-toggle" href="#" data-toggle="dropdown">Sign In <strong class="caret"></strong></a>
<div class="dropdown-menu">
<form method="post" action="login" accept-charset="UTF-8">
<input type="text" placeholder="Username" id="username" name="username">
<input type="password" placeholder="Password" id="password" name="password">
<input type="checkbox" name="remember-me" id="remember-me" value="1">
<label class="string optional" for="user_remember_me"> Remember me</label>
<input class="btn btn-primary btn-block" type="submit" id="sign-in" value="Sign In">
</ul>
</div>
</div>
</nav>
<!-------carousel------>
<div class="container-fluid col-md-10 col-md-push-1" >
<div id="myCarousel" class="carousel slide" data-ride="carousel" >
<!-- Indicators -->
<ol class="carousel-indicators">
<li data-target="#myCarousel" data-slide-to="0" class="active"></li>
<li data-target="#myCarousel" data-slide-to="1"></li>
<li data-target="#myCarousel" data-slide-to="2"></li>
</ol>
<!-- Wrapper for slides -->
<div class="carousel-inner " role="listbox" >
<div class = "row text-center">
<h1>Hello,World!</h1>
</div>
<div class="item active">
<img src="slide_0.jpg">
<div class="carousel-caption">
<p>Clays</p>
</div>
</div>
<div class="item">
<img src="slide_1.jpg">
<div class="carousel-caption">
<p>the grass is greener...</p>
</div>
</div>
<div class="item">
<img src="slide_2.jpg">
<div class="carousel-caption">
<p>metal stamp</p>
</div>
</div>
<div class = "container-fluid">
<p class = "lead text-left">Welcome to out awesome new website</p>
</br>
<p class = "lead text-left">Maecenas id sagittits orci, sit amet suscipit lacus.
Nullam lectus leo, viverra non
mi et,mattis euismod libero, pellentesque consectetur dignissim leo, quis
molestie enim venenatis non. Praesent mauris mauris, tincidunt malesuada
maximus tristique, ultricies in quam</p>
</div>
</div>
</div>
<!-- Left and right controls -->
<a class="left carousel-control" href="#myCarousel" role="button" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="right carousel-control" href="#myCarousel" role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
<!-----Signup area----->
<form id = "signup">
<div class = "container ">
<div class = "col-md-8 col-md-push-4">
<div class="form-group">
<label class="col-md-4 control-label" for="">Name</label>
<div class="col-md-5">
<input id="" name="" type="text" placeholder="Full Name" class="form-control input-md">
</div>
<div class="form-group">
<label class="col-md-4 control-label" for="textinput">Username</label>
<div class="col-md-5 ">
<input id="textinput" name="textinput" type="text" placeholder="Username" class="form-control input-md">
</div>
<div class="form-group ">
<label class="col-md-4 control-label" for="">Email</label>
<div class="col-md-5">
<input id="" name="" type="text" placeholder="Email" class="form-control input-md">
</div>
<br/>
<div class="form-group">
<label class="col-md-4 control-label" for="">Password</label>
<div class="col-md-5">
<input id="" name="" type="text" placeholder="Password" class="form-control input-md">
</div>
<div class="form-group">
<label class="col-md-4 control-label" for="buttondropdown">State</label>
<div class="col-md-5">
<div class="input-group">
<input id="buttondropdown" name="buttondropdown" class="form-control" placeholder="select one " type="text">
<div class="input-group-btn">
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
<span class="caret"></span>
</button>
<ul class="dropdown-menu pull-right">
<li><a href="#">Alabama</a></li>
<li><a href="#">Alaska</a></li>
<li><a href="#">Arizona</a></li>
<li><a href="#">Arkansas</a></li>
<li><a href="#">California</a></li>
<li><a href="#">Colorado</a></li>
<li><a href="#">Connecticut</a></li>
<li><a href="#">Delaware</a></li>
<li><a href="#">Florida</a></li>
<li><a href="#">Georgia</a></li>
<li><a href="#">Hawaii</a></li>
<li><a href="#">Idaho</a></li>
<li><a href="#">Illinois</a></li>
<li><a href="#">Indiana</a></li>
<li><a href="#">Iowa</a></li>
<li><a href="#">Kansas</a></li>
<li><a href="#">Kentucky</a></li>
<li><a href="#">Louisiana</a></li>
<li><a href="#">Maine</a></li>
<li><a href="#">Maryland</a></li>
<li><a href="#">Massachusetts</a></li>
<li><a href="#">Michigan</a></li>
<li><a href="#">Minnesota</a></li>
<li><a href="#">Mississippi</a></li>
<li><a href="#">Missouri</a></li>
<li><a href="#">Montana</a></li>
<li><a href="#">Nebraska</a></li>
<li><a href="#">Nevada</a></li>
<li><a href="#">New Hampshire</a></li>
<li><a href="#">New Jersey</a></li>
<li><a href="#">New Mexico</a></li>
<li><a href="#">New York</a></li>
<li><a href="#">North Carolina</a></li>
<li><a href="#">North Dakota</a></li>
<li><a href="#">Ohio</a></li>
<li><a href="#">Oklahoma</a></li>
<li><a href="#">Oregon</a></li>
<li><a href="#">Pennsylvania</a></li>
<li><a href="#">Rhode Island</a></li>
<li><a href="#">South Carolina</a></li>
<li><a href="#">South Dakota</a></li>
<li><a href="#">Tennessee</a></li>
<li><a href="#">Texas</a></li>
<li><a href="#">Utah</a></li>
<li><a href="#">Vermont</a></li>
<li><a href="#">Virginia</a></li>
<li><a href="#">Washington</a></li>
<li><a href="#">West Virginia</a></li>
<li><a href="#">Wisconsin</a></li>
<li><a href="#">Wyoming</a></li>
<li><a href="#">*</a></li>
<li><a href="#">District of Columbia</a></li>
<li><a href="#">Puerto Rico</a></li>
<li><a href="#">Guam</a></li>
<li><a href="#">American Samoa</a></li>
<li><a href="#">U.S. Virgin Islands</a></li>
<li><a href="#">Northern Mariana Islands</a></li>
</ul>
</div>
</div>
</div>
</div>
</form>
</div>
</div>
<hr>
<footer>
<div class = "container">
<div class = "col-md-2 col-md-pull-10"
<p>© sombody 2014</p>
</footer>
</div>
</body>
Explanation / Answer
I have figure out the problem. You have not used proper tag to jump inside page. i.e when you click on signup button it jump to area where signup code is written
We make jump in page using jump attribute or link attribute.
example
<a href="#bottom">Top</a> here # symbol is important . this code will make you jump to area pointed by "bottom"
Now to define area pointed by "bottom" we will use <a name="bottom"> you can use it anywhere where you want to jump on button click
So here is your corrected code
<body>
<!----navbar---->
<nav class = "navbar navbar-inverse">
<div class = "container">
<div class = "navbar-header">
<button type="button" class = "navbar-toggle" data-toggle="collapse" data-target="#mainNavBar">
<span class = "icon-bar"></span>
<span class = "icon-bar"></span>
</button>
<!--- Navbar logo---->
<a href="#" class = "navbar-brand">CSE-252</a>
</div>
<!---menue items --->
<div class = "collapse navbar-collapse" id = "mainNavBar">
<ul class = "nav navbar-nav">
<li class = "active"><a href="#">Home</a></li>
<li><a href="#">About</a></li>
</ul>
<!-----Signup button---->
<ul class="nav navbar-nav navbar-right">
<li>
<form class="navbar-form">
<a href="#signup" class="btn btn-primary active">Sign Up</a> <!-----change here add #signup in place of #myCarousel---->
</form>
</li>
<!----signin dropdown----->
<li class="dropdown">
<a class="dropdown-toggle" href="#" data-toggle="dropdown">Sign In <strong class="caret"></strong></a>
<div class="dropdown-menu">
<form method="post" action="login" accept-charset="UTF-8">
<input type="text" placeholder="Username" id="username" name="username">
<input type="password" placeholder="Password" id="password" name="password">
<input type="checkbox" name="remember-me" id="remember-me" value="1">
<label class="string optional" for="user_remember_me"> Remember me</label>
<input class="btn btn-primary btn-block" type="submit" id="sign-in" value="Sign In">
</ul>
</div>
</div>
</nav>
<!-------carousel------>
<div class="container-fluid col-md-10 col-md-push-1" >
<div id="myCarousel" class="carousel slide" data-ride="carousel" >
<!-- Indicators -->
<ol class="carousel-indicators">
<li data-target="#myCarousel" data-slide-to="0" class="active"></li>
<li data-target="#myCarousel" data-slide-to="1"></li>
<li data-target="#myCarousel" data-slide-to="2"></li>
</ol>
<!-- Wrapper for slides -->
<div class="carousel-inner " role="listbox" >
<div class = "row text-center">
<h1>Hello,World!</h1>
</div>
<div class="item active">
<img src="slide_0.jpg">
<div class="carousel-caption">
<p>Clays</p>
</div>
</div>
<div class="item">
<img src="slide_1.jpg">
<div class="carousel-caption">
<p>the grass is greener...</p>
</div>
</div>
<div class="item">
<img src="slide_2.jpg">
<div class="carousel-caption">
<p>metal stamp</p>
</div>
</div>
<div class = "container-fluid">
<p class = "lead text-left">Welcome to out awesome new website</p>
</br>
<p class = "lead text-left">Maecenas id sagittits orci, sit amet suscipit lacus.
Nullam lectus leo, viverra non
mi et,mattis euismod libero, pellentesque consectetur dignissim leo, quis
molestie enim venenatis non. Praesent mauris mauris, tincidunt malesuada
maximus tristique, ultricies in quam</p>
</div>
</div>
</div>
<!-- Left and right controls -->
<a class="left carousel-control" href="#myCarousel" role="button" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="right carousel-control" href="#myCarousel" role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
<!-----Signup area----->
<form id = "signup" data-target="#signup"><a name="signup"> <!-------add <a name="signup"> tag here to define spot------>
<div class = "container " data-target="#signup">
<div class = "col-md-8 col-md-push-4">
<div class="form-group">
<label class="col-md-4 control-label" for="">Name</label>
<div class="col-md-5">
<input id="" name="" type="text" placeholder="Full Name" class="form-control input-md">
</div>
<div class="form-group">
<label class="col-md-4 control-label" for="textinput">Username</label>
<div class="col-md-5 ">
<input id="textinput" name="textinput" type="text" placeholder="Username" class="form-control input-md">
</div>
<div class="form-group ">
<label class="col-md-4 control-label" for="">Email</label>
<div class="col-md-5">
<input id="" name="" type="text" placeholder="Email" class="form-control input-md">
</div>
<br/>
<div class="form-group">
<label class="col-md-4 control-label" for="">Password</label>
<div class="col-md-5">
<input id="" name="" type="text" placeholder="Password" class="form-control input-md">
</div>
<div class="form-group">
<label class="col-md-4 control-label" for="buttondropdown">State</label>
<div class="col-md-5">
<div class="input-group">
<input id="buttondropdown" name="buttondropdown" class="form-control" placeholder="select one " type="text">
<div class="input-group-btn">
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
<span class="caret"></span>
</button>
<ul class="dropdown-menu pull-right">
<li><a href="#">Alabama</a></li>
<li><a href="#">Alaska</a></li>
<li><a href="#">Arizona</a></li>
<li><a href="#">Arkansas</a></li>
<li><a href="#">California</a></li>
<li><a href="#">Colorado</a></li>
<li><a href="#">Connecticut</a></li>
<li><a href="#">Delaware</a></li>
<li><a href="#">Florida</a></li>
<li><a href="#">Georgia</a></li>
<li><a href="#">Hawaii</a></li>
<li><a href="#">Idaho</a></li>
<li><a href="#">Illinois</a></li>
<li><a href="#">Indiana</a></li>
<li><a href="#">Iowa</a></li>
<li><a href="#">Kansas</a></li>
<li><a href="#">Kentucky</a></li>
<li><a href="#">Louisiana</a></li>
<li><a href="#">Maine</a></li>
<li><a href="#">Maryland</a></li>
<li><a href="#">Massachusetts</a></li>
<li><a href="#">Michigan</a></li>
<li><a href="#">Minnesota</a></li>
<li><a href="#">Mississippi</a></li>
<li><a href="#">Missouri</a></li>
<li><a href="#">Montana</a></li>
<li><a href="#">Nebraska</a></li>
<li><a href="#">Nevada</a></li>
<li><a href="#">New Hampshire</a></li>
<li><a href="#">New Jersey</a></li>
<li><a href="#">New Mexico</a></li>
<li><a href="#">New York</a></li>
<li><a href="#">North Carolina</a></li>
<li><a href="#">North Dakota</a></li>
<li><a href="#">Ohio</a></li>
<li><a href="#">Oklahoma</a></li>
<li><a href="#">Oregon</a></li>
<li><a href="#">Pennsylvania</a></li>
<li><a href="#">Rhode Island</a></li>
<li><a href="#">South Carolina</a></li>
<li><a href="#">South Dakota</a></li>
<li><a href="#">Tennessee</a></li>
<li><a href="#">Texas</a></li>
<li><a href="#">Utah</a></li>
<li><a href="#">Vermont</a></li>
<li><a href="#">Virginia</a></li>
<li><a href="#">Washington</a></li>
<li><a href="#">West Virginia</a></li>
<li><a href="#">Wisconsin</a></li>
<li><a href="#">Wyoming</a></li>
<li><a href="#">*</a></li>
<li><a href="#">District of Columbia</a></li>
<li><a href="#">Puerto Rico</a></li>
<li><a href="#">Guam</a></li>
<li><a href="#">American Samoa</a></li>
<li><a href="#">U.S. Virgin Islands</a></li>
<li><a href="#">Northern Mariana Islands</a></li>
</ul>
</div>
</div>
</div>
</div>
</a></form> <!-----end tag here----->
</div>
</div>
<hr>
<footer>
<div class = "container">
<div class = "col-md-2 col-md-pull-10"
<p>© sombody 2014</p>
</footer>
</div>
</body>
Related Questions
drjack9650@gmail.com
Navigate
Integrity-first tutoring: explanations and feedback only — we do not complete graded work. Learn more.