Getting link buttons on the same line - css

I feel like this should be easily searchable but I couldn't find it.
I want link buttons that are next to eachother horizontally:
<form action="http://google.com">
<input class="button" type="submit" value="google">
<input class="button" type="submit" value="yahoo">
</form>
this works, except that they both link to yahoo. I need each button to link differently.
<form action="http://google.com">
<input class="button" type="submit" value="google">
</form>
<form action="http://yahoo.com">
<input class="button" type="submit" value="yahoo">
</form>
this links to different url's however it's rendering one on top of the other.
How do I make them on the same row?


You could do it by set display: inline-block; to form.
form {
display: inline-block;
}
<form action="http://google.com">
<input class="button" type="submit" value="google">
</form>
<form action="http://yahoo.com">
<input class="button" type="submit" value="yahoo">
</form>


This should do the trick.
<head>
<style type="text/css">
form {
float: left;
}
</style>
</head>
<body>
<form action="http://www.google.com">
<input class="button" type="submit" value="google">
</form>
<form action="http://www.yahoo.com">
<input class="button" type="submit" value="yahoo">
</form>
</body>


Something like this would be the quick and easy way:
<div style="overflow: hidden;">
<form action="http://google.com" style="display: inline-block;">
<input class="button" type="submit" value="google">
</form>
<form action="http://yahoo.com" style="display: inline-block;">
<input class="button" type="submit" value="yahoo">
</form>
</div>

Related

HTML buttons on the same line

I have this html code which made in browser three buttons.How can I put the buttons on the same line?(they appear on different lines).
<form action="file:///C:/Users/andre/Desktop/home.html"/>
<input type="submit" value="Home" />
</form>
<form action="file:///C:/Users/andre/Desktop/players.html"/>
<input type="submit" value="Players" />
</form>
<form action="file:///C:/Users/andre/Desktop/league.html"/>
<input type="submit" value="League" />
</form>

input[type=submit]{cursor:pointer}
form input{float:left;margin:5px}
<form action="file:///C:/Users/andre/Desktop/home.html"/>
<input type="submit" value="Home" />
</form>
<form action="file:///C:/Users/andre/Desktop/players.html"/>
<input type="submit" value="Players" />
</form>
<form action="file:///C:/Users/andre/Desktop/league.html"/>
<input type="submit" value="League" />
</form>

form tag's default display value is block. If you make it inline-block, it will solve that problem.
<form style="display: inline-block;" action="file:///C:/Users/andre/Desktop/home.html">
<input type="submit" value="Home" />
</form>
<form style="display: inline-block;" action="file:///C:/Users/andre/Desktop/players.html">
<input type="submit" value="Players" />
</form>
<form style="display: inline-block;" action="file:///C:/Users/andre/Desktop/league.html">
<input type="submit" value="League" />
</form>

Just add following code
<style>
form { display : inline-block; }
</style>

Wordpress Search Form - Replace "Search" text with icon

I'm trying do a few customizations to the wordpress default search form and I would like to replace the text "Search" in the value="Search" string with an icon.
Currently I have the following form:
<form role="search" method="get" id="searchform" class="searchform" action="//example.com/">
<div class="box">
<div class="container-1">
<input type="text" value="" name="s" id="s" placeholder="Search..." />
<input type="submit" id="searchsubmit" value="Search" />
</div>
</div>
</form>
How can I put in the following icon instead? <i class="fa fa-search"></i>

Here is a bit of a workaround, I replaced the input with button, removed value completely
<form role="search" method="get" id="searchform" class="searchform" action="//example.com/">
<div class="box">
<div class="container-1">
<input type="text" value="" name="s" id="s" placeholder="Search..." />
<button type="submit" id="searchsubmit" />
<span class="icon"><i class="fa fa-search"></i></span>
</button>
</div>
</div>
</form>
Form seems to work just fine ..

Search Form Same Line

I cannot seem to make the search button and input box be aligned on the same line...currently the textbox is above the search button...any tips?
<!-- Search Bar -->
<div class="headline headline-md"><h2>Search</h2></div>
<div class="input-group margin-bottom-40">
<form method="get" action="#Url.ArticulateSearchUrl(Model)">
<input type="text" name="term" class="form-control" placeholder="Search">
<span class="input-group-btn"><button type="submit" class="btn-u"><i class="fa fa-search"></i></button></span>
</form>
</div>
<!-- End Search Bar -->

The problem is that the <div>s the <h2> and the <form> are display:block and fill the width of their container
You can convert your HTML to
<div class="headline headline-md"><h2>Search</h2></div>
<form method="get" action="#Url.ArticulateSearchUrl(Model)">
<input type="text" name="term" class="form-control" placeholder="Search">
<span class="input-group-btn"><button type="submit" class="btn-u"><i class="fa fa-search"></i></button></span>
</form>
and add this CSS
.headline-md,h2,form{
display:inline-block;
}
.headline-md{
width:80px;
margin-right:15px;
}
I added !important to force the new CSS rules. I added a code snippet to demonstrate the code.
.headline-md,h2,form{
display:inline-block !important;
}
.headline-md{
width:80px !important;
margin-right:15px !important;
}
<div class="headline headline-md"><h2>Search</h2></div>
<form method="get" action="#Url.ArticulateSearchUrl(Model)">
<input type="text" name="term" class="form-control" placeholder="Search">
<span class="input-group-btn"><button type="submit" class="btn-u"><i class="fa fa-search"></i></button></span>
</form>

I figured it out. This did the trick:
<!-- Search Bar -->
<div class="headline headline-md"><h2>Search</h2></div>
<div class="input-group margin-bottom-40">
<form class="input-group" method="get" action="#Url.ArticulateSearchUrl(Model)">
<div class="input-group-btn">
<input type="text" name="term" class="form-control" placeholder="Search">
<span><button type="submit" class="btn-u"><i class="fa fa-search"></i></button></span>
</div>
</form>
</div>
<!-- End Search Bar -->

Zoom in Zoom out problems in CSS

Hi here i am pasting code of my page in that i had one background image. In that i need to put buttons. When i am doing zoom in and zoom out buttons are moving from position.
<html>
<head>
<style type="text/css">
body
{
background:SteelBlue url('BG_BLUE_NEW.jpg') no-repeat center center;
}
.login
{
margin-top:300px;
height:300px
}
</style>
</head>
<body>
<div class="container">
<div class="login">
<form style="padding-left:370px;margin-bottom:0px;">
<INPUT TYPE="button" style="background-color:SteelBlue;width:100px;height:30px;font-size:150%;margin-bottom:10px" VALUE="Submit" onClick="window.open('http://www.google.com','_blank');"><br>
<INPUT TYPE="button" style="background-color:SteelBlue;width:100px;height:30px;font-size:150%;margin-bottom:10px" VALUE="Submit" onClick="window.open('http://www.google.com','_blank');"><br>
<INPUT TYPE="button" style="background-color:SteelBlue;width:100px;height:30px;font-size:150%;margin-bottom:10px" VALUE="Submit" onClick="window.open('http://www.google.com','_blank');"><br>
<INPUT TYPE="button" style="background-color:SteelBlue;width:100px;height:30px;font-size:150%;margin-bottom:10px" VALUE="Submit" onClick="window.open('http://www.google.com','_blank');"><br>
<INPUT TYPE="button" style="background-color:SteelBlue;width:100px;height:30px;font-size:150%;margin-bottom:10px" VALUE="Submit" onClick="window.open('http://www.google.com','_blank');"><br>
</form>
</div>
</div>
</body>
</html>

Take a look at thsi:
<html>
<head>
<style type="text/css">
body
{
background:SteelBlue url('BG_BLUE_NEW.jpg') no-repeat center center;
}
.login
{
width:100px; /*<- important edit*/
margin: 0 auto; /*<- important edit*/
margin-top:300px;
height:300px
}
</style>
</head>
<body>
<div class="container">
<div class="login">
<form style="margin-bottom:0px;"><!-- removed padding -->
<INPUT TYPE="button" style="background-color:SteelBlue;width:100px;height:30px;font-size:150%;margin-bottom:10px" VALUE="Submit" onClick="window.open('http://www.google.com','_blank');"><br>
<INPUT TYPE="button" style="background-color:SteelBlue;width:100px;height:30px;font-size:150%;margin-bottom:10px" VALUE="Submit" onClick="window.open('http://www.google.com','_blank');"><br>
<INPUT TYPE="button" style="background-color:SteelBlue;width:100px;height:30px;font-size:150%;margin-bottom:10px" VALUE="Submit" onClick="window.open('http://www.google.com','_blank');"><br>
<INPUT TYPE="button" style="background-color:SteelBlue;width:100px;height:30px;font-size:150%;margin-bottom:10px" VALUE="Submit" onClick="window.open('http://www.google.com','_blank');"><br>
<INPUT TYPE="button" style="background-color:SteelBlue;width:100px;height:30px;font-size:150%;margin-bottom:10px" VALUE="Submit" onClick="window.open('http://www.google.com','_blank');"><br>
</form>
</div>
</div>
</body>
</html>
What's going on here:
I set a specified with (100px) on the .login div to hold the inputs which also have a 100px width.
Then I applied margin:0 auto which reads: set the margin above and below to 0, left and right to 'auto' (grow-to-fill)
after that I removed the padding-left on the <form> element
You can see it in action here

How to persist this whole page same with adding background color using div tag

I had a page which has one background image on that i am keeping some buttons. But the background of the whole page is white. That's not good i want background color and i need to persist this whole thing same.
<html>
<body>
<div class="outer" style="background-image:url('BG_BLUE_NEW.jpg'); background-repeat:no-repeat;background-position:center;height:768px;width:1100px;margin-top:-50px:padding-left:0px"></div>
<div class="login" style="margin-top:-430px;float: left;height: 290px;">
<form style="padding-left:250px;">
<INPUT TYPE="button" style="background-color:SteelBlue;width:100px;height:30px;font-size:150%;margin-bottom:10px" VALUE="Submit" onClick="window.open('http://www.google.com','_blank');"><br>
<INPUT TYPE="button" style="background-color:SteelBlue;width:100px;height:30px;font-size:150%;margin-bottom:10px" VALUE="Submit" onClick="window.open('http://www.google.com','_blank');"><br>
<INPUT TYPE="button" style="background-color:SteelBlue;width:100px;height:30px;font-size:150%;margin-bottom:10px" VALUE="Submit" onClick="window.open('http://www.google.com','_blank');"><br>
<INPUT TYPE="button" style="background-color:SteelBlue;width:100px;height:30px;font-size:150%;margin-bottom:10px" VALUE="Submit" onClick="window.open('http://www.google.com','_blank');"><br>
<INPUT TYPE="button" style="background-color:SteelBlue;width:100px;height:30px;font-size:150%;margin-bottom:10px" VALUE="Submit" onClick="window.open('http://www.google.com','_blank');"><br>
</form>
</div>
</body>
</html>

try this ,
http://www.w3schools.com/css/tryit.asp?filename=trycss_background_shorthand
background-color
background-image
background-repeat
background-attachment
background-position
background:#ffffff url('img_tree.png') no-repeat right top;
<html>
<body>
<div class="outer" style="background: blue url('BG_BLUE_NEW.jpg') center; height:768px;width:1100px;margin-top:-50px:padding-left:0px"></div>
<div class="login" style="margin-top:-430px;float: left;height: 290px;">
<form style="padding-left:250px;">
<INPUT TYPE="button" style="background-color:SteelBlue;width:100px;height:30px;font-size:150%;margin-bottom:10px" VALUE="Submit" onClick="window.open('http://www.google.com','_blank');"><br>
<INPUT TYPE="button" style="background-color:SteelBlue;width:100px;height:30px;font-size:150%;margin-bottom:10px" VALUE="Submit" onClick="window.open('http://www.google.com','_blank');"><br>
<INPUT TYPE="button" style="background-color:SteelBlue;width:100px;height:30px;font-size:150%;margin-bottom:10px" VALUE="Submit" onClick="window.open('http://www.google.com','_blank');"><br>
<INPUT TYPE="button" style="background-color:SteelBlue;width:100px;height:30px;font-size:150%;margin-bottom:10px" VALUE="Submit" onClick="window.open('http://www.google.com','_blank');"><br>
<INPUT TYPE="button" style="background-color:SteelBlue;width:100px;height:30px;font-size:150%;margin-bottom:10px" VALUE="Submit" onClick="window.open('http://www.google.com','_blank');"><br>
</form>
</div>
</body>
</html>

Use CSS:
body
{
background: color: #f00; /*your color here*/
}
This will make the body element's background whichever color you choose for all the pages.

body {
background-color: #ff0000
}

Resources