CSS Button positioning - html

Basically when I want to move "About me" button Contact button moves but About me button doesn't move at all.
Here's html
<div id="damn">
<img src="illtrythis.jpg" alter=" ">
</div>
</head>
<form>
<input type="submit" class="aboutme" value="About me" >
<input type="submit" class ="contact" value="Contact">
</form>
</html>
Sorry for bad code,
I'm having problem with putting CSS into "code here so heres a screenshot.

Related

Semantic UI input box showing through hamburger menu

I have a hamburger menu that is showing working fine except that with semantic ui input boxes show through. Please see the pictures.This is before. [This is when the menu is selected][2]
Thank you!!
HTML:
<div class="find-book-total">
<form action='/find_book_results/' method='GET' value='{{request.GET.q}}'>
<div class="ui icon input">
<input type='text' name='q' value='{{request.GET.q}}' placeholder="Search books" />
<i class="search icon"></i>
</div>
<div class="">
<input type='submit' name='submit' value='Search' class="ui blue button"/>
</div>
</form>
It wont let me upload the css because the code is too long. I used this code as a base for my css

Foundation - Trying to align a search bar and search button next to each other

So im working with Foundation and I am trying to align the Search bar and search button next to each other. I've tried putting them into a container, and floating them left and right respectively, but that didn't work.
This is what it looks like now: https://gyazo.com/59a22c3c9cd849b1dd9fec6bb9df6bd5
And this is the HTML:
<div class="top-bar-right">
<ul class="menu">
<form method="GET" action="">
<li><input type="text" align="middle" name="search" value="{{ request.GET.search }}"placeholder="Search by Title"></input></li>
<li><button type="button input" class="button">Search</button></li>
</form>
</ul>
</div>
but I want them to be side by side.
Thanks for the help!
EDIT: Forgot to add my html!
One way would be using span ,
li is block element,
So using span will help you make your elements inline.
Copy and Save the code below as an Html file, eg - demo.html
and open it on Browser.
Try this -
<html>
<body>
<div class="top-bar-right">
<form method="GET" action="">
<span>
<input type="text" align="middle" name="search" value="{{ request.GET.search }}"placeholder="Search by Title">
</input>
</span>
<span>
<button type="button input" class="button">
Search
</button>
</span>
</form>
</div>
</body>
</html>
Note -
I've removed your ul tag , it had a css class "menu" , not sure if your code uses it for something.
By default each line item (li) fills the width of its container. To display them side by side, you should use display: inline-block on line items.
You can do this with Foundation's inline-labels-and-buttons:
<div class="top-bar-right">
<ul class="menu">
<li>
<form method="GET" action="">
<div class="input-group">
<input class="input-group-field" type="text" name="search" value="{{ request.GET.search }} " placeholder="Search by Title">
<div class="input-group-button">
<input type="submit" class="button" value="Submit">
</div>
</div>
</form>
</li>
</ul>
</div>
JSFiddle example

Going back to the page before by pressing the button in the browser

I have two html pages.
I enter to the first page, press the button and go to the second page.
The problem is that when Im in the second page (signin.html) and I press the back button from the browser I dont go to the first page (welcome.html) I go to some other previous page. I need to be able to go back by pressing that button, how can I achive that?
html 1 welcome.html
<HTML>
<HEAD>
<TITLE>
Welcome page
</TITLE>
</HEAD>
<BODY>
<div>
<div class="button">
<input name="account" type="button" value="I am a service provider" onclick="window.location.replace('/member/sign-in.html')"/>
</div>
</BODY>
</HTML>
html 2 signin.html
<HTML>
<HEAD>
<TITLE>
Member sign in
</TITLE>
</HEAD>
<BODY>
<form id="myform" action="/my-code/signInMember.php" method="post">
<div>
<label for="spEmail">E-mail:</label>
<input type="email" id="spEmail" name="spEmail" required/>
</div>
<div>
<label for="spPswd">Password:</label>
<input type="password" id="spPswd" name="spPswd" required/>
</div>
<div class="button">
<button type="submit" name="submit">Sign in</button>
</div>
<div class="button">
<input name="submit" type="button" value="sign up for free" onclick="window.location.replace('/member/create-account.html')"/>
</div>
<div/>
</form>
</BODY>
</HTML>
Any ideas? I was looking around and everybody say to add a button to go back (with php or javascript) but I dont want that. I want to press the browser button and then go back, no with a button in the page itself.
Thanks, any help will be appreciated.
onclick event rather than using "window.location.replace('/member/sign-in.html')" use "window.location.href='/member/sign-in.html'" or "window.location.href='member/sign-in.html'" according to your path of destination html.
thanks, I changed as suggested:
<form>
<input TYPE="button" VALUE="Offer this service"
onclick="window.location.href='/member/signin.html'">
</form>
And it worked!

How to append a search button inside a search input field using bootstrap

I am using a template, the name is Treble One Page Rsponsive Theme from Wrapbootstrap which uses Twitter Bootstrap. I am implementing the template and encountered this small error which drove me crazy.
There is a search bar, consists of <input> tag and <button> tag. Previously it was fine, until I make it inside a <form>, the search bar started to act weird. The <input> field is centered, but the <button> appended into outside the field making the whole things uncentered.
Here is the image, to be clear:
picture
And here is my code:
<div class="row">
<div class="span8 offset2">
<div class="input-append">
<form method="get">
<input class="span5" id="appendedInputButton" type="text" placeholder="Search By Name" name="searchTerm" value="Search">
<button class="btn btn-primary sicon-search sicon-white" type="submit"><i>Search</i></button>
</form>
</div>
</div>
</div>
I've googled this template.
This code works on original template as expected:
<div class="row">
<div class="span8 offset2">
<form class="input-append" method="get">
<input class="span5" id="appendedInputButton" type="text" placeholder="Search By Name" name="searchTerm" value="Search" />
<button class="btn btn-primary sicon-search sicon-white" type="submit"><i>Search</i></button>
</form>
</div>
</div>
Main idea is to convert "input-append" div into form, instead of adding new form element within it.

iFrame: Div not getting displayed

I have a simple situation as shown below:
<body>
<iframe id='my_iframe' name='my_iframe' style='display:none;'></iframe>
<form id="fileupload" method="POST" enctype="multipart/form-data" action="upload_test.php" target='my_iframe'>
<input name="theText1" id="theText1" type="text" />
<input name="theFile1" id="theFile1" type="file" />
<button style="width:40px;height:10px;" name="button1" id="submit" type="submit" />
</form>
<div style='width:100px;height:100px;' id='target_div'>Test Text</div>
</body>
Problem: The Div is not visible. It does show if I move it above the iframe. I have never used an iframe before. Can't figure this one out. Any suggestions?
After some fiddling with JSFiddle (pun intended), it appears that the button tag is not self-closing. Changing <button ...... /> to <button ....></button> seemed to have made the div tag appear correctly ("Test Text" was being placed inside of the button, which makes me conclude that the button tag is not self-closing).
JSFiddle