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.
Related
I have button which has icon in it. I am trying to display text on the left and icon on the right using CSS float: right; but icon and text is still shown centered.
Here is HTML:
<!DOCTYPE html>
<html>
<head>
<base href="https://demos.telerik.com/kendo-ui/button/index">
<style>html { font-size: 14px; font-family: Arial, Helvetica, sans-serif; }</style>
<title></title>
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2018.2.516/styles/kendo.common-bootstrap.min.css" />
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2018.2.516/styles/kendo.bootstrap.min.css" />
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2018.2.516/styles/kendo.bootstrap.mobile.min.css" />
<script src="https://kendo.cdn.telerik.com/2018.2.516/js/jquery.min.js"></script>
<script src="https://kendo.cdn.telerik.com/2018.2.516/js/kendo.all.min.js"></script>
</head>
<body>
<div id="example">
<div class="demo-section k-content">
<div>
<h4>Basic Button</h4>
<p>
<button id="primaryTextButton" class="k-button" title="Example of tool tip!" >Primary Button
<span class="k-icon k-i-info">
</button>
</span>
</p>
</div>
<script>
$(document).ready(function () {
});
</script>
<style>
.demo-section p {
margin: 0 0 30px;
line-height: 50px;
}
.demo-section p .k-button {
margin: 0 10px 0 0;
}
.k-primary {
min-width: 150px;
}
.k-button {
min-width: 400px;
}
.k-icon{
padding: 10px;
font-size: 32px;
}
</style>
</div>
</body>
</html>
What I am missing here? What do you I need to change to the the icon show on the right?
Try wrapping a div around your button and apply overflow: auto to it.
<div style="overflow: auto;"><button id="reportBtn_33301" type="button" class="k-button k-button-icontext" title=" data-role="button" role="button" aria-disabled="false" tabindex="0">
<span class="k-icon k-i-info"></span>
Example
</button></div>
<span class="k-icon k-i-info"></span>
'span' tag default display property is inline element.
You need to change it to display inline-block to work. Then the float will work
Change it to display block with some small width, so that it fits in button, then try giving float property to it.
Read this : https://developer.mozilla.org/en-US/docs/Web/CSS/display
I just got into html and css recently and am kinda stuck on this one. Im working on a login box and I cannot get the login box and the submit button to be perfectly aligned with each other.
The only way that kind of worked was if I wrote them both on one line like this, then they would be (horizontally) perfectly aligned but I wasnt able to change the space between them:
First attempt (code without the Dot after <):
<.input type="text" id="username">submit
Then I worked it out in some other way. It consists of an input type text and an input type submit in my html file.
In my CSS file im first calling the the Class in which all my login Inputs are nisted (.logsec for login section) and then the id of my input type text and input type submit.
The Class is called logsec (for Login section) and my input type submit is called id=Button and my input type text is called id=subinput.
HTML CODE:
<html lang="en">
<link rel="stylesheet" href="css/style.css">
<link rel="stylesheet" href="css/animate.css">
<link rel="stylesheet" href="css/font.css">
<head>
<meta charset="utf-8">
<title>Main</title>
</head>
<body>
<div class="container">
<div class="brandname">
<h1 <id="title" class=""><span id="logo">Test</h1>
</div>
<div class="logsec">
<div class="box-header">
<p> login</p>
</div>
<input type="submit" id="button" value="submit" style="float:right"/>
<input type="text" id="subinput" style="width:100%;"/>
<p class="recover">Recover Password</p>
<h3> <p class="signup">signup </h3>
<footer> <p Class="footer">LOGIN</p></footer>
</div>
</body>
</html>
CSS CODE:
body {
background-color: grey;
font-size: 30px;
text-align: center;
}
.brandname {
margin-top: 300px;
}
.recover {
font-size: 15px;
text-align: center;
}
.signup {
font-size: 15px;
text-align: center;
}
/*///////////////////// LOGIN BUTTON ///////////////////////////////////////*/
.logsec [id=button] {
vertical-align: top;
Would really love if someone could help me out here.
Im terrible at it but i would Hope someone can help me.
Thanks Guys.
There were some errors in your code, one of which ".logsec [id=button]" was stopping the button lining up. I removed the float and used inline-block instead. Google it, I'm sure the W3C has some tutorials. Anyway, here's the working code:
CSS
body {
background-color: grey;
font-size: 30px;
text-align: center;
}
.brandname {
margin-top: 300px;
}
.recover {
font-size: 15px;
text-align: center;
}
.signup {
font-size: 15px;
text-align: center;
}
#subinput {
display: inline-block;
}
HTML
<div class="container">
<div class="brandname">
<h1 id="title"><span id="logo">Test</span></h1>
</div>
<div class="logsec">
<div class="box-header">
<p> login</p>
</div>
<input type="text" id="subinput"/>
<input type="submit" id="button" value="submit"/>
<p class="recover">Recover Password</p>
<h3> <p class="signup">signup </h3>
<footer> <p Class="footer">LOGIN</p></footer>
</div>
Here it is working in a fiddle (I hope, not sure how long the code saves for)
FIDDLE
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.
I'm out of ideas here, but I'm sure I'm missing something obvious. I want the video to float left and the paragraph above the contact form all to float right. The paragraph is cooperating but the form is out there on it's own.
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<meta charset="UTF-8">
<meta name="description" content- "best=" " junk=" " car=" " buyers=" "
in=" " austin"="">
<meta name="author" content="Lucky">
<title>ATX Junk Cars</title>
<style>
iframe {
clear: left;
float: left;
}
<p> {
float: right;
display: inline-block;
vertical-align: middle;
float: right;
padding-left: 50px;
padding-top: 50px;
}
</style>
</head>
<body>
<h1> ATX Junk Cars &nbs p;
&n bsp;
<hr size="2" width="100%"> </h1>
<iframe src="https://www.youtube.com/embed/dNWh2w5VSn4" allowfullscreen="" width="700" frameborder="0" height="450"></iframe>
<p>If you're ready to turn that old car in your driveway into cash, we want to hear from you. Tell us who you are, how we can reach you, and most important, tell us about that car. For the fastest response, call or send a text to 512-229-5424. If it's 2:00 in the morning or you just don't like phones, send us a message with the form below.</p>
<br>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Contact Form</title>
<style>
body {
background-color: #330000;
color: ffcc00;
</style>
<style>
label {
display:block;
margin-top:20px;
letter-spacing:2px;
</style>
<style>
/* Centre the page */
.body {
display:block;
margin:0 auto;
width:576px;
}
/* Centre the form within the page */
form {
margin:0 auto;
width:459px;
}
/* Style the text boxes */
input, textarea {
width:439px;
height:32px;
background:#efefef;
border:1px solid #dedede;
padding:10px;
margin-top:3px;
font-size:0.9em;
color:#3a3a3a;
}
textarea {
height:213px;
background:url(images/textarea-bg.jpg) right no-repeat #efefef;
}
</style>
<header class="body"></header>
<section class="body">
<label>Who are you?</label>
<input name="name" placeholder="Name">
<label>How do we call you?</label>
<input name="phone" placeholder="Phone number with area code" type="phone">
<label>Do you have keys and a clear title?</label>
<input name="keys" placeholder="Keys, title or both?" type="keys">
<label>Does it start, run and drive?</label>
<input name="runs" placeholder="Yes or no?" type="runs">
<label>Anything not working on it?</label>
<textarea name="problems" placeholder="Dents, check engine lights, broken things?"></textarea>
<input id="submit" name="submit" value="Submit" type="submit">
</section>
<footer class="body"></footer>
</body>
</html>
Add style="float:right;" as below:
<section class="body" style="float:right;">
<label>Who are you?</label>
<!-- your form code -->
</section>
ok i have the following html code
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="css/reset.css" type="text/css"/>
<link rel="stylesheet" href="css/style.css" type="text/css"/>
<title>marriage</title>
</head>
<body>
<div id="container">
<div id="logo">
<h1>marriage logo</h1>
</div> <!-- end logo -->
<div id="input">
<input type="text" name="search" id="search" />
<input type="submit" value="search .." />
<p>search for words like: calm, honest ... etc</p>
</div> <!-- end input -->
<div id="questions">
<h2>Why our website ?</h2>
<p>because you find your soulmate as easy as possible, just type the word you looking
for in your soulmate and press enter to start searching</p>
</div> <!-- end questions -->
<div id="side">
<p>New User or signup if not</p>
</div> <!-- end sidebar -->
<div id="footer">
Copyrighted © 2012
</div> <!-- end footer -->
</div> <!-- end of container -->
</body>
</html>
and here is the scss file for styling and I'm using 960 grid system for layout
#import "compass";
#import "960/grid";
$ninesixty-columns: 12;
html, body {
#include background-image(linear-gradient(#fcfad0, #FFF));
width: 100%;
height: 100%;
}
#container {
#include grid_container;
#logo {
#include grid(6);
// #include clearfix;
h1 {
background: url(images/logo.jpg) no-repeat;
width: 480px;
height: 250px;
text-indent: -9999px;
a {
text-decoration: none;
}
}
}
}
the background image in <h1> tag is not showing with the html file, i don't know why .. is there something missing here ?
h1 {
background: url(images/logo.jpg) no-repeat;
width: 480px;
height: 250px;
}
I see you use Compass. So you have configured the directory containing the images (ie images_dir) in your configuration file.
Instead of to call directly your image, you shoud use the image-url() helper, like this (without specifying the directory images):
background: image-url(logo.jpg) no-repeat;
Also, if you want to hide the text, you can use the mixin #hide-text. And finaly, perhaps that the #replace-text-with-dimensions mixin is what you want:
h1 {
#include replace-text-with-dimensions(logo.jpg, 0, 0);
}
However, I imagine you want to make the logo clickable. In this case, the code will be:
<h1 id="logo">marriage logo</h1>
and:
#logo {
a {
#include replace-text-with-dimensions(logo.jpg, 0, 0);
display: block;
}
}