Why can't I use CSS to move button? - html

This is my code and I'm unable to style it using 'button {margin-top:10px}
<input type="text"></input><button type="button"><img src="searchlogo.png" id="search"></button>
It isn't aligning flush with the text input? Any tips?

To see how does margin working please see this demo
CSS
.b1{
background:orange;
color:white;
border:none;
}
.b2{
background:orange;
color:white;
border:none;
margin-top:100px;
}
HTML
<input type="text"></input><button class="b1">Button Title</button>
<br/>
<input type="text"></input><button class="b2">Button Title</button>
<br/>
<input type="text"></input><button class="b1">Button Title</button>

I suspect you have an overriding rule somewhere in your css somewhere that prevents your css code from doing what you intend to do.
You should specify the element that you want to implement the margin on instead of broadly calling on button for the margin-top: 10px; rule.
Try this:
On your HTML:
<button class="my-button"><img src="image.jpg" alt="image" /></button>
On your CSS:
button.my-button {
margin-top: 10px;
}

<asp:Button ID="Button1" runat="server" OnClick="Button1_Click" Text="Button" CssClass="button" />
<head runat="server">
<title></title>
<style type="text/css">
.button
{
margin-top: 20px;
}
</style>

Related

Making elements inside of a div go under each other

I am trying to make a small box where people can log in to my site, but im not the best at CSS. I want to have it like this
paragraph "username"
input(text)
parargraph "password"
input (password)
button(submit)
with small spaces between but I cant understand how to make them stay under each other :(
could a nice codegod help me?
CSS:
.login {
float: right;
height: 300px;
width: 300px;
background-color: white;
}
.login p{
float: left;
margin: auto 0;
clear: both;
}
.login input{
float: left;
}
.login button{
float:
}
.login input{
text-align: center;
}
button.loginBtn{
}
HTML:
<!DOCTYPE html>
<html>
<head>
<title>Matombrining</title>
<link rel="stylesheet" type="text/css" href="Css/Stil.css"/>
</head>
<body>
<header class="banner">
</header>
<nav>
<ul>
<li>Hjem</li>
<li>Info</li>
<li>Hvorfor</li>
<li>Login</li>
</ul>
</nav>
<main class="mainContent">
<h1>Hovedinfo</h1>
<div class="login">
<h1>login boks</h1>
<p>Brukernavn</p>
<input type="text" class="userIn" id="userIn"></input>
<p>Passord</p>
<input type="password" class="passIn" id="passIn"></input>
<button type="submit" class="loginBtn" id="loginBtn">Logg inn</button>
</div>
</main>
Sorry if this code looks bad, havent played around with coding for a long time hehe.. Help is very much appreciated!!!
What you are asking is (almost) default behaviour, just the input and button need to be turned in to block elements to have them go onto their own line. have a look at the following example: http://jsfiddle.net/kr8cyobk/
<div class="login">
<h1>login boks</h1>
<label>Brukernavn
<input type="text" class="userIn" id="userIn" />
</label>
<label>Passord
<input type="password" class="passIn" id="passIn"></input>
</label>
<button type="submit" class="loginBtn" id="loginBtn">Logg inn</button>
</div>
And this is all the css you need for that login form:
input, button {
display: block;
}
Note that I took the liberty of making your inputs self closing (<input />) and turning those p tags in the semantically more correct labels so you have the added advantage of making them clickable, and things like screenreaders and crawlers can make more sense of your page.

CSS setting background white

I'm trying to set up the background white for #7 as seen here:
http://jsfiddle.net/eab6ytom/1/
I dont want a line going through my text where it says 7.Input Type "submit"/"reset"
Relevant code to this portion:
<div class="subHeader">
<h3>7.Input Type "submit"/"reset"</h3>
<div class="submit">
<div class="subBorder">
<div class="subBordColor">
<p> <input type="submit" value="Submit Information" />
<input type="reset" value=" Clear " />
</p>
</form>
</div>
</div>
</div>
</div>
h3{
position:absolute;
border-style: solid;
border-color: blue;
margin-left:-300px;
margin-top:200px;
font-size:12px;
background-color:white;
}
.subBordColor{
border-style:solid;
border-color:blue;
padding:10px;
}
.subBorder{
border-style:groove; border-width:10px;
border-top-color:#A0A0A0;
border-right-color:#A0A0A0 ;
border-bottom-color:#A0A0A0 ;
border-left-color:#A0A0A0 }
}
The background color works fine. The reason that the line goes through the box is that it's on top of it. The z order of elements is determined by the element order by default; the last element is on top.
You can add z-index: 1; to the h3 rule to place it on top of the other element.

My buttons won't center

For some reason, the buttons on the page I'm working on won't center.
Here's what I've got for HTML:
<!DOCTYPE html>
<html>
<head>
<link type="text/css" rel="stylesheet" href="chaos.css"/>
<script type="text/javascript" src="jquery-1.10.0.min.js"></script>
<script type="text/javascript" src="Chaos.js"></script>
<title>MTG Chaos Roller</title>
</head>
<body>
<div class="button">
<input type="submit" value="Roll Chaos">
<input type="submit" value="Roll EnchantWorldLand">
<input type="submit" value="Roll PersonaLand">
<input type="submit" value="Roll WackyLand">
</div>
</body>
</html>
CSS:
body {
background-color: black;
};
.button {
text-align: center;
};
I dunno. It seems to work on other people's stuff. I'm sure it'll become clear once it's explained what I'm doing wrong.
You've incorrect CSS. You don't need to terminate CSS with semi-colon(;).
Use this. Demo
body {
background-color: black;
}
.button {
text-align: center;
}
Try:
body {
background-color: black;
text-align: center;
}
Currently you are setting the buttons to center the text inside of them, when you change it to the above, you are ensuring that elements on the page will be centered.

HTML textarea positioning with css

i am currently trying to position a textarea with CSS and to make it look nice. However it's not working.
Relevant CSS:
#BoardInput {
padding:0px;
width:100%;
height:100%;
}
#BoardSmiley {
min-width:100px;
width:20%;
padding:10px;
border-right:thin solid #4E6011;
border-bottom:thin solid #4E6011;
background-color:#C6E466;
}
#BoardCode {
border:thin solid #4E6011;
background-color:#C6E466;
padding:3px;
}
Relevant HTML:
<div id="BoardCode">
<button onclick="addBBCode('[FETT]','[/FETT]');">Fett</button>
<button onclick="addBBCode('[KURSIV]','[/KURSIV]');">Kursiv</button>
<button onclick="addBBCode('[UNTERSTRICHEN]','[/UNTERSTRICHEN]');">Unterstrichen</button>
<button onclick="addLink();">Link</button>
<button onclick="addImage();">Bild</button>
</div>
<form action="index.php?s=board&action=addedit&where=<?=$Result['Overview']['PostID']?>" method="POST">
<table id="Board">
<tr>
<td>
<textarea id="BoardInput" name="Text"></textarea>
<input type="hidden" name="ThreadID" value="<?=$Result['Overview']['ThreadID']?>" />
</td>
<td id="BoardSmiley">
<?php
$BoardTemplate->showSmileys();
?>
</td>
</tr>
<tr colspan="2">
<td><input type="submit" value="OK" />
</tr>
</table>
</form>
The problem is that i want the "Code" Box at the top, the Smileys-Box at the right and the textarea at the left. And i want them to be fully adjusted to each other. However the textarea is 1px more intented to the right than the Code box above and 2px more intented to the top than the Smileys-Box on the right.
What am i doing wrong here?
EDIT:
jsFiddle: jsfiddle.net/SSxSN and an image:
Use:
resize:none;
in your css code in textarea.
Add negative margins for left and bottom, like this:
#BoardInput {
padding:0px;
width:100%;
height:100%;
margin: 0 0 -8px -1px;
}
http://jsfiddle.net/SSxSN/1/

display div next to label without breaking line

I would like to drow a label and input text next to it.
the input text must be inside a div - later I would like to add element to the div.
I am using float in order to display the div next to the label/
here is me html:
<!DOCTYPE html PUBLIC "-//W3C//Dtd XHTML 1.0 transitional//EN" "http://www.w3.org/tr/xhtml1/Dtd/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" dir="rtl" >
<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8" />
<title></title>
</head>
<body>
label: <div style="float:left;"><input type="text" /></div>
</body>
</html>
Ihe problem is that I get the div before the text.
http://jsfiddle.net/2wNbR/
How can I fix it?
UPDATE
I actually want to use an autocomplete plugin I've wrote instead of the input text. The autocomplete uses a div. I don't want to create a "prerequisite" to the label so solution like add <span style="float:right"></span> around the label are not good.
UPDATE2
I thought it is not necessary but I see it is importent.
Here is the full example: http://jsfiddle.net/2wNbR/16/
.Autocomplete {
direction: ltr;
}
.Autocomplete, .Autocomplete .Arrow, .Autocomplete .CodeField,
.Autocomplete .SmartField, .Autocomplete .Selector {
float:left;
}
.Autocomplete .Arrow {
background-image:url(drop.gif);
background-position:top right;
height:17px;
width:17px;
cursor:pointer;
}
.Autocomplete .OptionsListHolder {
height:0px;
width:0px;
}
.Autocomplete .OptionsList
{
position:relative;
z-index:999;
top:0px;
right:0px;
border: 1px solid #888888;
font-weight: normal;
font-size: 12px;
font-family: Arial (Hebrew);
}
.Autocomplete .CodeField
{
width:40px;
border: 1px solid #888888;
height:13px;
}
.Autocomplete .SmartField
{
width:auto;
border: 1px solid #888888;
height:13px;
font-weight: normal;
font-size: 12px;
font-family: Arial (Hebrew);
}
Customer:
<div class="Autocomplete">
<input type="text" class="CodeField" />
<div class="Selector">
<input type="text" class="SmartField" />
<div class="Arrow"></div>
<div class="OptionsListHolder">
<select class="OptionsList" size="8">
<option>opt 1</option>
<option>opt 2</option>
<option>opt 3</option>
<option>opt 4</option>
<option>opt 5 - long item text</option>
</select>
</div>
</div>
</div>
<br>
text to check if the OptionsList is override this text
<div style="display:inline-block;"><input type="text" /></div>
And you also might want to check the <label> html element.
Just put a <span> around the label and float that too, remember to clear it.
<span style="float: left;">label: </span><div style="float:left;"><input type="text" /></div>
label: <span><input type="text" /></span>
or
<div style="float:left">label:</div><div><input type="text" /></div>
will help but if you can say the purpose you will more likely get an appropriate answer
I'm guessing that the poster is actually using coldfusion and using <cfinput> rather than <input> -- if this is the case, here's the scenario:
You have a <cfinput> tag with an autosuggest= value and you want to put a text label to the left of the input field.
<cfinput with autosuggest uses ajax and automatically adds styled ajax divs to, including the cf.css which adds the float:left; style.
One way you can work around this is by surrounding your label and the cfinput in a table, with each in their own <td>'s..
so <table border=0><tr><td>label:</td><td><cfinput autosuggest="value1,value2,etc" name="inputname"></td></tr></table>
That should do it!