I tried making a chat service, and it worked but now im with a problem.
I want to align these two form elements, so they are on one line. So the the 'send' button gets moved a little higher so it is in place.
I tried this:
position: relative;
I added that to the css. But no result.
I don't know how to solve this problem. Since im not an css genuis.
code:
html:
<p> </p>
<div id="chattextarea" id="postform">
<form action="" method="POST">
<textarea name="styled-textarea" id="styled" onfocus="this.value=''; setbg('#e5fff3');" onblur="setbg('white')" placeholder="Enter an chat message here...">Enter an chat message here...</textarea>
<input type="hidden" name="chatid" value="<?php echo $chatid ?>">
<input type="submit" value="Send" id="chatmessagesend">
</form>
</div>
</div>
css:
#postform {
position: relative;
}
Picture:
Thansk in advance
try using:
#chattextarea{
vertical-align: top;
}
You are missing an opening div. Also, this will work:
<p> </p><div>
<div id="chattextarea" id="postform">
<form action="" method="POST">
<textarea name="styled-textarea" id="styled" onfocus="this.value=''; setbg('#e5fff3');" onblur="setbg('white')" placeholder="Enter an chat message here...">Enter an chat message here...
</textarea>
<input type="hidden" name="chatid" value="<?php echo $chatid ?>">
<input type="submit" value="Send" id="chatmessagesend">
</form>
</div>
</div>
* { margin:0;padding:0; }
#postform {
position: relative;
}
form > #chatmessagesend { vertical-align: top; }
Related
So i'm currently building a set of 3 buttons via forms, and having a weird issue i've never seen before with the following code:
<div class='logout'>
<form action='action.php' method='post'>
<input type='submit' value='H'>
<input type='text' name='mode' value='0' hidden>
</form>
</div>
<div class='Mini'>
<form action='action.php' method='post'>
<input type='submit' value='M'>
<input type='text' name='mode' value='MINI' hidden>
</form>
</div>
<div class='Close'>
<form action='action.php' method='post'>
<input type='submit' value='C'>
<input type='text' name='mode' value='DISPLAY' hidden>
</form>
</div>
in its current state none of the forms are shown, but when the > is dropped from the close form tags they become fully functional
CSS is as follows
.logout{
position:Absolute;
left:90%;
top:0%;
}
.Mini{
position:Absolute;
left:87%;
top:0%;
z-index: 1;
}
.Close{
position:Absolute;
left:-130%;
top:0%;
z-index: 1;
}
Your code working perfect. May be some css of div overwrite your form and make it display:none or hidden. If you remove > it will break some css and html. so you will be able to see all forms.
Here is the code run it and check :
<div class='logout'>
<form action='action.php' method='post'>
<input type='submit' value='H'>
<input type='text' name='mode' value='0' hidden>
</form>
</div>
<div class='Mini'>
<form action='action.php' method='post'>
<input type='submit' value='M'>
<input type='text' name='mode' value='MINI' hidden>
</form>
</div>
<div class='Close'>
<form action='action.php' method='post'>
<input type='submit' value='C'>
<input type='text' name='mode' value='DISPLAY' hidden>
</form>
</div>
As you can see here --> FIDDLE
Your elements show up. I am assuming it's CSS ... There is nothing wrong with your HTML itself. You need to look at your CSS styles and figure out why things aren't displaying. Most likely it's going to be the div -->
<div class='logout'>
That's your issue.
I have written this html:
Add Comment
<div id="addcomment">
<form name="comment" action="" method="post">
<input type="text" name="addcomment" size="80" />
<input type="submit" value="Comment">
</form>
What I want is when I click the "Add comment" then form should be displayed in place of "Add comment" just like on "stackoverflow". How can I make this happen??
Here's a quick and dirty proof, optimize from here:
CSS:
#addcomment {
display : none;
}
.addcomment:active {
display : none;
}
.addcomment:active + #addcomment {
display : block;
position : absolute;
top : 5px;
}
http://jsfiddle.net/7uax74qd/
Use javascript for it...
Add Comment
<div id="addcomment" style="display:none;">
<form name="comment" action="" method="post">
<input type="text" name="addcomment" size="80" />
<input type="submit" value="Comment">
</form>
THEN IN JAVASCRIPT write a function and call that in anchor tag..
function show()
{
document.getElementById('add').style.display='none';
document.getElementByid('addcomment').style.display='block';
}
Below is my code, first of all:
How do I get rid of the big margin to the right that occurs between the labels and the input fields? I tried setting the margin-right to -150px which made it smaller but that just seems like an idiotic solution..
How can I remove the need to write <br /> to make them hop down a line automatically? I was told never to use <br />, it also seems messy.
HTML:
<div id="groupmepopup" class="popup">
<h4>Fill in your information so that you can be added.</h4>
<form action="" method="POST">
<label>In-game username:</label>
<input name="username" type="text"></input><br />
<label>Email:</label>
<input name="email" type="text"></input><br />
<label>Game:</label>
<input name="game" type="text"></input><br />
<input name="mySubmit" type="submit" value="Submit"></input>
</form>
</div>
CSS:
label {
display: block;
float: left;
width: 120px;
margin-right: 5px;
text-align: right;
}
You can try something like this
<div id="groupmepopup" class="popup">
<h4>Fill in your information so that you can be added.</h4>
<form action="" method="POST">
<p>
<label>In-game username:</label>
<input name="username" type="text"></input>
</p>
<p>
<label>Email:</label>
<input name="email" type="text"></input>
</p>
<p>
<label>Game:</label>
<input name="game" type="text"></input>
</p>
<p></p>
<input name="mySubmit" type="submit" value="Submit"></input>
</form>
</div>
and then the css
p label {
display: block;
float: left;
width: 120px;
margin-right: 5px;
}
p input{
float:right;
}
p{
clear:both;
}
form{
width:20em;
}
http://jsfiddle.net/V92PT/1/
But the fields part on table
like this
<div id="groupmepopup" class="popup">
<h4>Fill in your information so that you can be added.</h4>
<form action="" method="POST">
<table><tr><td><label>In-game username:</label></td>
<td> <input name="username" type="text"></input></td ></tr>
<tr><td> <label>Email:</label></td>
<td> <input name="email" type="text"></input></td></tr>
<tr><td> <label>Game:</label></td>
<td>
<input name="game" type="text"></input>
</td></tr>
</table>
<input name="mySubmit" type="submit" value="Submit"></input>
</form>
</div>
or add another <br/> after <label>In-game username:</label>
or use <p></P> for each row
Hy,
This are my HTML Code:
<h2>Advertising over Push Notifications</h2>
<h3>Login</h3>
<label for="infoLabel_CheckUserLoginWeb"></label>
<form id="form_CheckUserLoginWeb" name="form_CheckUserLoginWeb" method="POST" onsubmit="" action="">
E-Mail: <input type="text" size="30" name="email_CheckUserLoginWeb" id="email_CheckUserLoginWeb" ></br>
Passwort: <input type="text" size="30" name="passwort_CheckUserLoginWeb" id="passwort_CheckUserLoginWeb" ></br>
<input type="submit" value="Login" id="submit_CheckUserLoginWeb" name="submit_CheckUserLoginWeb" />
</form>
and i want that the text "Benutzername...." will be shown in the red area, i don't want a new wordwrap.
i want this:
<h3> elements have margins by default. Add CSS to remove it:
h3{
margin: 0;
}
You could insert a id into h3 and add CSS to remove it. Note: if you modify the tag h3 without an id or class, all h3 tags in your code will be modified.
HTML
<h3 id="login">Login</h3>
CSS
h3#login{
margin-bottom: 0;
}
Demo
HTML
<h2>Advertising over Push Notifications</h2>
<h3 class="login">Login</h3>
<span>Benutzername....</span>
<label for="infoLabel_CheckUserLoginWeb"></label>
<form id="form_CheckUserLoginWeb" name="form_CheckUserLoginWeb" method="POST" onsubmit="" action="">E-Mail:
<input type="text" size="30" name="email_CheckUserLoginWeb" id="email_CheckUserLoginWeb">
</br>Passwort:
<input type="text" size="30" name="passwort_CheckUserLoginWeb" id="passwort_CheckUserLoginWeb">
</br>
<input type="submit" value="Login" id="submit_CheckUserLoginWeb" name="submit_CheckUserLoginWeb" />
</form>
css
.login {
margin: 0;
}
Add additional div in html like this: DEMO
HTML
<div class="error">
<label for="infoLabel_CheckUserLoginWeb"></label>
</div>
then define a rule in css:
CSS
.error { float:left; height:20px; width: 100%;}
.login {margin:0;}
I feel silly asking such a trivial question but, oh well, it's been bugging me for a while.
I have a form that's properly styled. When the user submits, if there is errors, the form will render again, but this time, the fields that have errors are but in between a <div class="field_with_errors">
Know the problem is this creates an extra space after the text, notice the extra space after Contrasena. How can I get rid of this space?
<div class="field_with_errors"><input id="user_email" name="user[email]" size="30" type="text" value=""></div>>
Here is a full HTML example, so that you can see exactly what I am talking:
<html><head>
<title>foo</title>
</head>
<body>
<header>
</header>
<section class="container">
<div class="formbox">
<h1>Registrarse</h1>
<form accept-charset="UTF-8" action="/users" class="new_user" id="new_user" method="post"><div style="margin:0;padding:0;display:inline"><input name="utf8" type="hidden" value="✓"><input name="authenticity_token" type="hidden" value="nP/JKdZYGviu1y/+nyxyvKBUHuJzsAbkZRQgX87UIy8="></div>
<!-- = render 'shared/error_messages', :object => f.object -->
<div class="text">
<label for="user_email">Email</label>
<br>
<div class="field_with_errors"><input id="user_email" name="user[email]" size="30" type="text" value=""></div>
</div>
<div class="text">
<div class="field_with_errors"><label for="user_password">Contrasena</label></div>
<br>
<div class="field_with_errors"><input id="user_password" name="user[password]" size="30" type="password" value=""></div>
</div>
<div class="text">
<label for="user_password_confirmation">Confirmacion</label>
<br>
<input id="user_password_confirmation" name="user[password_confirmation]" size="30" type="password" value="">
</div>
<div class="actions">
<input class="button_green" id="user_submit" name="commit" type="submit" value="Registrarse">
</div>
</form>
</div>
</section>
<footer>
</footer>
</body></html>
Try this: Remove the <br /> tags from the HTML that's being output and style field_with_errors like this:
.field_with_errors {
display: block;
clear: both;
}
You could also try:
div.field_with_errors + br {
display: none
}
This hides br tags that immediately follow divs of class field_with_errors.
If you're using SCSS you can do this:
.field_with_errors {
+ br {
display: none;
}
input, select {
border: 1px solid red;
}
}
For this question
.text br {
display: none;
}
default rails 3 is
.field br {
display: none;
}