Here is our desperate try to make the buttons work. The BUTTON worked before i added the other one. please help. We also had difficulties with making the buttons look different but that is fixed now. (Its just telling me to text some more so thats the reason im writing this. this aint important. How are you doing today?)
.Button {
background-color: darkcyan;
border: none;
color: black;
padding: 15px 32px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
font-family: hacked;
}
.sub {
position: relative;
}
.itmHolder {
position: relative;
}
.itmHolder:nth-child(2),
.itmHolder:nth-child(3) {
position: absolute;
top: 0;
}
.og {
margin-top: 50px;
position: center;
text-align: center;
}
<title>Our Future</title>
</head>
<!--Baggrunds farve-->
<body bgcolor="#212f3c">
<!--Hovedskriften-->
<font size=40><center><h1 style="font-family:blowbrush;">Future</font></center></h1><form action="side2.html">
<div class="og">
<div class="itmHolder">
<div class="sub">
<button type="button" class="Button">About us<form action="side2.html"></button>
<button type="button" class="Button">Buy now<form action="buynow.html"></button>
</div>
</div>
<br></br>
</body>
</html>
<picture>
<!--Billede-->
<br></br>
<br></br>
<center><img src="CSfU23PXAAEA8et.jpg" alt="Matrix" style="width:auto;" border="5"><center/>
<br></br>
<br></br>
<!--Youtube video-->
<center><iframe width="700" height="400"src="https://www.youtube.com/embed/XGSy3_Czz8k?playlist=XGSy3_Czz8k&loop=1"></center></iframe>
</picture>
You havnt closed your form tag and you have it in the wrong place. Adjust your code:
<div class="sub">
<form action="side2.html" method="POST">
<input type="submit" class="Button" value="About us">
</form>
<form action="buynow.html" method="POST">
<input type="submit" class="Button" value="Buy now">
</form>
</div>
OR If you prefer not to use forms, use the <a> tag:
<div class="sub">
<button type="button" class="Button">About us</button>
<button type="button" class="Button">Buy now</button>
</div>
You haven't used the <form> tag in the right way in the below code part
<div class="sub">
<button type="button" class="Button">About us<form action="side2.html"></button>
<button type="button" class="Button">Buy now<form action="buynow.html"></button>
</div>
Try this way
<div class="sub">
<form action="side2.html">
<button type="submit" class="Button">About us</button>
</form>
<form action="buynow.html">
<button type="submit" class="Button">Buy now</button>
</form>
</div>
else try this alternate way
<div class="sub">
About us
Buy now
</div>
Hope this helps.
No need to use buttons to navigate through pages. You can do this instead:
Buy Now
Then style a however much you like.
Buttons are used with JavaScript in case you need to pass an onClick action.
Related
I'm trying to have a paragraph tag in between two buttons with spacing. The small issue is the weird symbol when I add the " " command. I just need to take it out, or I'd like to know if there is an alternate way in adding space.
HTML:
<div class="col-md-12 text-align-center">
<button type="submit" href="../cards" class="fb_btn registerbtn">LOGIN</button>
<span class="color-gray small"> or </span>
<button type="submit" href="cards/register.php" class="fb_btn registerbtn">REGISTER</button>
<p>to claim this coupon</p>
</div>
Suggest you to use padding (left & right) instead of space( ). Check out the preview at https://jsfiddle.net/jwe8h49z/9/
I don't see any grey marks with just your code and boostrap in this codepen. Seems like something else is going on?
Also, as #Erik Philips suggested, a better way would be to use margins.
Here's an example:
<div class="col-md-12 text-align-center" >
<button type="submit" href="../cards" class="fb_btn registerbtn" style="margin-right: 10px;">LOGIN</button>
<span class="color-gray small">or</span>
<button type="submit" href="cards/register.php" class="fb_btn registerbtn" style="margin-left: 10px;">REGISTER</button>
<p>to claim this coupon</p>
</div>
.fb_btn{
padding:5px;
margin-right:5px;
margin-left:5px;
}
<div class="col-md-12 text-align-center">
<button type="submit" href="../cards" class="fb_btn registerbtn">LOGIN</button>
<span class="color-gray small">or</span>
<button type="submit" href="cards/register.php" class="fb_btn registerbtn">REGISTER</button>
<p>to claim this coupon</p>
</div>
Use CSS to add spaces between controls.
This code will work for you --
button{background:#f2901a; color:#fff; border:0; padding:15px; width:120px;}
.color-gray{padding:0 20px; position:relative; }
.color-gray::before{content:'---'; position:absolute; left:0px; top:0px;}
.color-gray::after{content:'---'; position:absolute; right:0px; top:0px;}
.text-align-center{text-align:center;}
<div class="col-md-12 text-align-center">
<button type="submit" href="../cards" class="fb_btn registerbtn">LOGIN</button>
<span class="color-gray small">or</span>
<button type="submit" href="cards/register.php" class="fb_btn registerbtn">REGISTER</button>
<p>to claim this coupon</p>
</div>
Apply CSS Box Modeling and apply margin or padding instead of using  
<style>
button{
margin: 10px;
}
</style>
<div class="col-md-12 text-align-center">
<button type="submit" href="../cards" class="fb_btn registerbtn">LOGIN</button>
<span class="color-gray small">or</span>
<button type="submit" href="cards/register.php" class="fb_btn registerbtn">REGISTER</button>
<p>to claim this coupon</p>
</div>
.form-control {
width: 30%;
float: left;
margin-left: 33%;
}
h1 {
margin-top: 2px;
}
.card-block {
padding-top: 3px;
border-left: 5px solid #CCC;
}
.card {
background: azure;
}
.container {
margin-top: 10px;
}
body {
background: lightgray;
}
#search {
padding-top: 13%;
}
<html>
<head>
<title>Wikipedia Viewer</title>
</head>
<body>
<div id="search">
<h1 class="text-center">Wikipedia Viewer</h1>
<input type="text" class="form-control" name="" placeholder="Search Wikipedia">
<button id="go" class="btn btn-primary"><span class="glyphicon glyphicon-search"></span></button>
<button class="btn btn-primary">Random</button>
</div>
<script type="text/javascript" src="Wikipedia Viewer.js"></script>
</body>
</html>
How can I make that Random button to stay in the same line, even in small screens? It works fine with fontawesome icons but the text length makes it jump to the next line. Also, it would be nice if there is a way to add a fontawesome icon next to it and make it stay in the same line in smaller screens (not required).
Try this
Use btn-sm in button class
<button id="go" class="btn btn-primary btn-sm">
<span class="glyphicon glyphicon-search"></span>
</button>
Wrap the controls in a container and use flexbox:
.container {
display: flex;
}
HTML
<div id="search">
<h1 class="text-center">Wikipedia Viewer</h1>
<div class="container">
<input type="text" class="form-control" name="" placeholder="Search Wikipedia">
<button id="go" class="btn btn-primary"><span class="glyphicon glyphicon-search"></span></button>
<button class="btn btn-primary">Random</button>
</div>
</div>
JSFiddle demo: https://jsfiddle.net/9vev9esr/4/
make the position of button fixed:
button{
position:fixed;
}
This should solve your problem
If i edit the margin-left from 1 div, the form(div) moves also. How can i fix this? I want to have like 3 columns with some text.
#loginwrapper {
width: 240px;
height: 305px;
float: left;
margin-left: 25px;
background: #8FB0BF;
padding: 5px;
}
<div id="loginwrapper">
<div id="login" align="left">
<input name="naarlogin" type="button" id="loginn_btn" value="Klanten Login" />
<br></br>
<input name="naarregister" type="button" id="registerr_btn" value="Registreren" />
<br></br>
<input name="naarlogin" type="button" id="loginn_btn" value="Instructeurs Login" />
<br></br>
<input name="naarregister" type="button" id="registerr_btn" value="Instructeurs Registreren" />
<br></br>
</div>
</div>
If understand correctly, you want to edit each DIV individually?
in that case at the moment you can't as the div id="loginwrapper" is a div that controls all of your code. if you want to edit input manually give them a class and edit them in css
for example
#loginwrapper {
width: 240px;
height: 305px;
float: left;
margin-left: 25px;
background: #8FB0BF;
padding: 5px;
}
.input_one{ <----this is the class name of the input (this can be anything you like)
margin-right: 25px !important
}
<div id="loginwrapper">
<div id="login" align="left">
<input name="naarlogin" type="button" id="loginn_btn" value="Klanten Login" />
<br></br>
<input name="naarregister" type="button" id="registerr_btn" value="Registreren" />
<br></br>
<input name="naarlogin" type="button" id="loginn_btn" value="Instructeurs Login" />
<br></br>
<input name="naarregister" type="button" id="registerr_btn" value="Instructeurs Registreren" />
<br></br>
</div>
</div>
I've created a search form using bootstrap. I've also used jquery to generate a delete search button (x) when text is input, however, I am stuck trying to get it on the same line as the search form (ideally in the box to the right).
As you can see in the second picture, when "1" is entered into the form the button is generated below the search form. I have included my code below, any help would be greatly appreciated.
<form id="PWFS">
<label for="Label">Info</label>
<button type="button" class="btn btn-link btn-xs"<i class="fa fa-question-circle fa-lg"></i></button>
<div class="row">
<div class="col-md-8">
<div class="input-group btn-group">
<span class="input-group-addon" id="basic-addon1"><i class="fa fa-search"></i></span>
<input type="text" class="form-control search" id="search" placeholder="Workflow #">
<span id="searchclear" class="searchclear fa fa-times"></span>
</div>
</div>
<button id="WFFsearch" type="submit">Search</button>
</div>
</form>
</div>
<br>
CSS
.searchclear {
position: relative;
z-index: 10;
right: 5px;
top: 0;
bottom: 0;
height: 14px;
margin: auto;
font-size: 14px;
cursor: pointer;
color: #ccc;
}
Thank you Lal, Phil and adamdc78. I just had to change the position to absolute.
I want to display 3 buttons on the same line in html. I tried two options:
This one:
<div style="width:500px;">
<div style="float: left; width: 130px"><button type="submit" class="msgBtn" onClick="return false;" >Save</button></div>
<div style ="float: none; width: 130px"><button type="submit" class="msgBtn2" onClick="return false;">Publish</button></div>
<div style ="float: right; width: 130px"><button class="msgBtnBack">Back</button></div>
</div>
And this one:
<p style="float: left; width: 130px"><button type="submit" class="msgBtn" onClick="return false;" >Save</button></p>
<p style ="float: none; width: 130px"><button type="submit" class="msgBtn2" onClick="return false;">Publish</button></p>
<p style ="float: right; width: 130px"><button class="msgBtnBack">Back</button></p>
For the second option I used a styling for the paragraph:
<style>
p {display:inline}
</style>
Sadly, none of them were ok, and I can't seem to find out any other option. The first and second button are displayed on same line, but the third is displayed lower...
Can you help me?
Here is the Answer
CSS
#outer
{
width:100%;
text-align: center;
}
.inner
{
display: inline-block;
}
HTML
<div id="outer">
<div class="inner"><button type="submit" class="msgBtn" onClick="return false;" >Save</button></div>
<div class="inner"><button type="submit" class="msgBtn2" onClick="return false;">Publish</button></div>
<div class="inner"><button class="msgBtnBack">Back</button></div>
</div>
Fiddle
Do something like this,
HTML :
<div style="width:500px;">
<button type="submit" class="msgBtn" onClick="return false;" >Save</button>
<button type="submit" class="msgBtn2" onClick="return false;">Publish</button>
<button class="msgBtnBack">Back</button>
</div>
CSS :
div button{
display:inline-block;
}
Fiddle Demo
Or
HTML :
<div style="width:500px;" id="container">
<div><button type="submit" class="msgBtn" onClick="return false;" >Save</button></div>
<div><button type="submit" class="msgBtn2" onClick="return false;">Publish</button></div>
<div><button class="msgBtnBack">Back</button></div>
</div>
CSS :
#container div{
display:inline-block;
width:130px;
}
Fiddle Demo
This will serve the purpose. There is no need for any divs or paragraph. If you want the spaces between them to be specified, use margin-left or margin-right in the css classes.
<div style="width:500px;">
<button type="submit" class="msgBtn" onClick="return false;" >Save</button>
<button type="submit" class="msgBtn2" onClick="return false;">Publish</button>
<button class="msgBtnBack">Back</button>
</div>
You need to float all the buttons to left and make sure its width to fit within outer container.
CSS:
.btn{
float:left;
}
HTML:
<button type="submit" class="btn" onClick="return false;" >Save</button>
<button type="submit" class="btn" onClick="return false;">Publish</button>
<button class="btn">Back</button>
If you are using bootstrap then call a simple btn-group class in the outer div
<div class="btn-group">
View
Edit
Delete
</div>
The following will display all 3 buttons on the same line provided there is enough horizontal space to display them:
<button type="submit" class="msgBtn" onClick="return false;" >Save</button>
<button type="submit" class="msgBtn2" onClick="return false;">Publish</button>
<button class="msgBtnBack">Back</button>
// Note the lack of unnecessary divs, floats, etc.
The only reason the buttons wouldn't display inline is if they have had display:block applied to them within your css.