Closed. This question is not reproducible or was caused by typos. It is not currently accepting answers.
This question was caused by a typo or a problem that can no longer be reproduced. While similar questions may be on-topic here, this one was resolved in a way less likely to help future readers.
Closed 6 years ago.
Improve this question
I'm a bit new to HTML/CSS and I'm having a really hard time figuring out why some of my selectors aren't working.
As with it stands right now, only the .tasklist and .totalleft seem to be in effect. I've tried changing them all to class selectors but that doesn't seem to work either. I think the syntax is correct, as I've tried only doing one at a time and they work, but it's when they are all together that it doesn't work. What I am missing here...? Thanks!
HTML
<body ng-app="app" ng-controller="demoController">
<center><h1>Todos by Angular.js</h1></center>
<div>
<input type="text" ng-model="input" placeholder="What needs to be done?">
<button type="submit" ng-click="add()">Add task</button>
</div>
<input type="checkbox" ng-model="allChecked" ng-change="markAll(allChecked)">Mark all as complete<br>
<ul class="tasklist" >
<li ng-repeat="item in items">
<input type="checkbox" ng-model="item.done">
<label id="done-{{item.done}}">{{item.val}}</label>
<hr>
</li>
</ul>
<br>
<div class="totalleft">
{{numLeft()}} out of {{items.length}} remaining
<button id="clearbutton" type="submit" ng-click="clearItems()" ng-show="showClear()">Clear {{numCompleted()}} items</button>
</div>
</body>
CSS
.tasklist {
list-style-type:none;
padding-left: 0px;
margin-left: 0px;
text-indent: 0px;
}
#done-true {
text-decoration: line-through;
color: grey;
}
.totalleft {
background-color: #E5E5E5;
color: dark grey;
}
#clearbutton{
font-size: 50%;
}
Have you copied that code straight from your text editor? When I copy/paste it into the SO editor I am seeing an extra UTF character:
See the red dots? When I remove them in the editor the styling works. Here is your code without the extra elements:
.tasklist {
list-style-type:none;
padding-left: 0px;
margin-left: 0px;
text-indent: 0px;
}
#done-true {
text-decoration: line-through;
color: grey;
}
.totalleft {
background-color: #E5E5E5;
color: dark grey;
}
#clearbutton{
font-size: 50%;
}
.tasklist {
list-style-type:none;
padding-left: 0px;
margin-left: 0px;
text-indent: 0px;
}
#done-true {
text-decoration: line-through;
color: grey;
}
.totalleft {
background-color: #E5E5E5;
color: dark grey;
}
#clearbutton{
font-size: 50%;
}
<body ng-app="app" ng-controller="demoController">
<center><h1>Todos by Angular.js</h1></center>
<div>
<input type="text" ng-model="input" placeholder="What needs to be done?">
<button type="submit" ng-click="add()">Add task</button>
</div>
<input type="checkbox" ng-model="allChecked" ng-change="markAll(allChecked)">Mark all as complete<br>
<ul class="tasklist" >
<li ng-repeat="item in items">
<input type="checkbox" ng-model="item.done">
<label id="done-{{item.done}}">{{item.val}}</label>
<hr>
</li>
</ul>
<br>
<div class="totalleft">
{{numLeft()}} out of {{items.length}} remaining
<button id="clearbutton" type="submit" ng-click="clearItems()" ng-show="showClear()">Clear {{numCompleted()}} items</button>
</div>
</body>
Related
Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 1 year ago.
Improve this question
I have created a simple HTML button, the button works fine. There is some blank/white space around it. How can I get rid of it? My question might sound silly, but for a beginner like me, I have no idea how to get rid of it.
Thank you.
You can see the white spaces, which I was talking about, in the following screenshot.
Following is the code I have for buttons.
<p>
<a class="button" href="https://facebook.com/">
<button style="background-color:#3b5998; border:none; color:white; border-radius: 3px;">Facebook</button> </a>
<a class="button" href="https://wa.me/1234567898">
<button style="background-color:green; border:none; color:white; border-radius: 3px;">WhatsApp</button>
</a>
</p>
<p>
<a href="tel:01234567890">
<input type="image" align="right" src="https://toppng.com/uploads/preview/hone-icon-866-986-8942-book-online-phone-icon-png-blue-115633551488jsnijarwa.png" name="submit" width="70" height="70" alt="Call Us" value="">
</a>
</p>
I tested your code in opera, it's working as expected here.
https://i.imgur.com/HAl4Xka.png
EDIT: I've fixed the code following the suggestions made in your first post.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
.fb-button, .wa-button {
border:none;
color:white;
border-radius: 3px;
padding: 10px;
text-decoration: none;
}
.fb-button {
background-color:#3b5998;
}
.wa-button {
background-color:green;
}
.container {
padding: 10px;
margin: 0 auto;
max-width: 50%;
text-align: center;
}
form {
margin-top: 30px;
}
</style>
</head>
<body>
<div class="container">
<a class="fb-button" href="https://facebook.com/">Facebook</a>
<a class="wa-button" href="https://wa.me/1234567898">WhatsApp</a>
<form action="tel:01234567890" method="GET">
<input type="image" src="https://toppng.com/uploads/preview/hone-icon-866-986-8942-book-online-phone-icon-png-blue-115633551488jsnijarwa.png" width="70" height="70" alt="Call Us">
</form>
</div>
</body>
</html>
<a> should not contain any other Action Elements (like <button>).
Stop using the inline style attributes. Use a proper CSS file or a <style> tag.
Don't use , use styles instead - if you want to add spacings like margins
Use flex to ease the positioning of your elements
.buttons-group {
display: flex;
align-items: center;
}
.button {
color: white;
border-radius: 3px;
padding: 0.5rem 1rem;
text-decoration: none;
}
.color-fb {
background-color: #3b5998;
}
.color-wa {
background-color: #00aa45;
}
.img-icon {
display: inline-block;
height: 3rem;
}
/* Utility classes */
.u-left-auto {
margin-left: auto;
}
<div class="buttons-group">
<a class="button color-fb" href="https://facebook.com/">Facebook</a>
<a class="button color-wa" href="https://wa.me/1234567898">WhatsApp</a>
<a class="button u-left-auto" href="tel:01234567890">
<img class="img-icon" src="https://toppng.com/uploads/preview/hone-icon-866-986-8942-book-online-phone-icon-png-blue-115633551488jsnijarwa.png" alt="Call Us">
</a>
</div>
Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 7 years ago.
Improve this question
Hi I am trying to make Css inline div with text on the right side of an input field with button all this has to be responsive.
I have attached an image with the layout.
This is what I have done so far.
<form class="form-inline" action="/register-form/" method="post">
<div style="white-space:nowrap">
<label for="id1">Send 10 Free SMS</label>
<input type="text" id="id1"/>
<input class="btn btn-green" style="background: #00c17a none repeat scroll
0px 0px; color: #ffffff; border: 0px none; border-radius: 3px; cursor:
pointer; margin-left: 4px; padding: 14px 40px; font-size: 20px ! important;
font-family: Roboto Condensed; font-weight: bold;" type="submit" value="FREE
TRIAL" />
</div>
</form>
UPDATE - question has been answer bellow - The solution was to use bootstrap .col-md-4 columns. Thank you for all help.
If you are using bootstrap your HTML needs to conform to its structure. This example is defining a row, which contains three equal sized columns. This tells bootstrap how to behave when the content is rendered in differing sized browsers.
.advert {
background: red;
padding: 10px;
}
.col-sm-4 {
text-align: center;
}
#id1 {
margin-top: 15px;
}
label {
margin-top: 10px;
text-align: center;
}
span {
display: block;
font-size: 10px;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap3.3.5/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5jsbootstrap.min.js"></script>
<form class="form-inline" action="/register-form/" method="post">
<div class="container advert">
<div class="row">
<div class="col-sm-4">
<input type="text" id="id1" />
</div>
<div class="col-sm-4">
<label for="id1">Send 10 Free SMS<span>No Credit Card Required</span>
</label>
</div>
<div class="col-sm-4">
<input class="btn btn-green" style="background: #00c17a none repeat scroll 0px 0px; color: #ffffff; border: 0px none; border-radius: 3px; cursor: pointer; padding: 14px 40px; font-size: 20px ! important; font-family: Roboto Condensed; font-weight: bold;" type="submit" value="FREE TRIAL" />
</div>
</div>
</div>
</form>
I recently edited the way a template was designed for MyBB. Fortunately, I made it exactly how I expected it to look, however, the navigation bar seemed broke. After trying to navigate, I realized that I could only click on the lower half of the navigation.
http://gyazo.com/99337bd5252b37e118ce119d5168bcf3
As you can see where I painted the red boxes is the only place where the link activation works. After about 2 hours I found out my problem was due to a "position: relative;". When I remove it, the navigation works fine but my panel div becomes moved all the way to the right and out of position.
<div class="main-bg">
<div class="main-width">
<a name="top" id="top"></a>
<div class="top-bar blue-texture"></div>
<div id="header">
<div id="panel">
{$welcomeblock}
</div>
<div class="logo" >
<img src="{$theme['logo']}" alt="{$mybb- >settings['bbname']}" title="{$mybb->settings['bbname']}" />
</div>
<hr class="hidden" />
</div>
</div>
</div>
<div id="container">
<div class="bg-img">
</div>
<hr class="hidden" />
<div class="menu blue-texture">
<span class="search">
<form action="search.php" method="post">
<input type="hidden" name="action" value="do_search" />
<input type="hidden" name="postthread" value="1" />
<input type="hidden" name="forums" value="all" />
<input type="hidden" name="showresults" value="threads" />
<input type="text" name="keywords" value="search..." onfocus="if(this.value == 'search...') { this.value = ''; }" onblur="if(this.value=='') { this.value='search...'; }" size="22" />
<input type="submit" value="Go" class="search-button" title="Search the forums" />
</form>
</span>
<ul>
<li>Home</li>
<li>Tournaments</li>
</ul>
</div>
There is the complete code on how I have developed this. However, the problem is mainly in the CSS.
#header {
padding: 60px 0 85px;
height: 56px;
text-align: left;
position: relative;
}
#panel {
background: rgba(0,0,0,0.4);
color: #fff;
border: 1px solid #07090b;
border-radius: 6px;
position: absolute;
top:0;
margin-top: 0px;
right: 0;
padding-top: 4px;
font-size: 12px;
padding-right: 12px;
padding-left: 12px;
height: 130px;
}
.menu {
border-radius: 6px;
-webkit-border-radius: 6px;
border: 1px solid #174d7b!important;
height: 50px;
}
I can't find a way to fix the problem however, because there is no way to add position:relative; and make the navigation links still work as they are intended to.
Without actual link or a working snippet it would be hard to find the issue, but please try this css that may solve your problem:
.menu { width: 100%; }
.menu ul li a { display: inline-block; width: auto; float: left; }
Hope this helps
I've been following tutorial on styling checkboxes using only CSS3 and here's what I came up with:
DEMO:
http://cssdeck.com/labs/jaoe0azx
Checkboxes are styled just fine - but when I tab through form controls -> checkbox is being skipped. Any advice why?
HTML:
<form role="form" id="login_form" data-mode="login">
<div class="form-group">
<label for="ue">Username or email:</label>
<input type="email" class="form-control input-lg" name="ue" id="ue" placeholder="" />
</div>
<div class="form-group">
<label for="password">Password:</label>
<input type="password" class="form-control input-lg" name="password" id="password" placeholder="" />
</div>
<div>
<input id="rememberme" type="checkbox" name="rememberme" value="1" class="checkbox_1" tabindex="0" />
<label for="rememberme" class="checkbox_1" tabindex="0">remember me</label>
</div>
<div id="auth_area_login_button">
<button class = "btn btn-lg btn-primary">
Login
</button>
</div>
</form>
CSS:
#import url('//netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css');
#login_form{padding:20px;}
label.checkbox_1 {
display: inline-block;
cursor: pointer;
position: relative;
padding-left: 25px;
margin: 0px;
}
label.checkbox_1:before {
content: "";
display: inline-block;
width: 16px;
height: 16px;
margin-right: 10px;
position: absolute;
left: 0;
bottom: 1px;
background-color: #fff;
border: 1px solid #ccc;
border-radius: 0px;
}
label.checkbox_1:hover:before{border-color:#66afe9;}
input[type=checkbox].checkbox_1 {
display: none;
}
input[type=checkbox].checkbox_1:checked + label.checkbox_1:before {
content: "\2713";
font-size: 15px;
color: #A0A0A0;
text-align: center;
line-height: 15px;
}
EDIT 1:
seems to work in firefox, but not in chrome...
Input must be accessible to receive focus. It works in chrome/chromium if you add following lines.
input[type=checkbox].checkbox_1 {
opacity: 0;
}
input[type=checkbox].checkbox_1:focus + label.checkbox_1:before {
border: 1px solid #66afe9;
}
Since the real checkbox is hide with display:none you can't focus it but you can also don't hide the element just make it be under the :before of the label:
input[type=checkbox].checkbox_1 {
position: absolute;
width: 16px;
height: 16px;
margin: 0;
border: 1px solid transparent;
margin-top: 3px;
}
Check this http://cssdeck.com/labs/pl4ljry7
Tested in Chrome
Because, it is not a checkbox.
Look at the css:
input[type=checkbox].checkbox_1 {
display: none;
}
The checkbox is actually hidden. So, you will not be able to focus it. The stylized square and checkmark shown are through the :before pseudo element on label. Pseudo-elements can't be focused. Nor can the labels.
I know this is an old question, but I came up with a Jquery solution when the CSS solution didn't work for me, and thought others might find this helpful. I wrapped the input in a div with the desired tabindex value and the class "checkbox-add-tabindex". Then, using Jquery, I transferred the tabindex from the div to the input.
HTML:
<div class="checkbox-add-tabindex" tabindex="10">
<input id="rememberme" type="checkbox" name="rememberme" value="1" class="checkbox_1" tabindex="0" />
<label for="rememberme" class="checkbox_1" tabindex="0">remember me</label>
</div>
Jquery:
$(".checkbox-add-tabindex").focus(
function () {
var tabval = $(this).prop("tabindex");
$(this).removeAttr("tabindex");
$(this).children(":first").attr("tabindex", tabval);
$(this).children(":first").focus();
})
Im trying to get away from using the html TABLE tag, but cant figure out how to build, what I want it to look like. I have made a screenshot of me using the table tag,
How would I do this with divs or/and spans etc, and still retain the vertical alignment of the labels (firstname, lastname in this example)?
(font size and color etc is of course irrelevant here)
alt text http://img522.imageshack.us/img522/7857/forme.jpg
thankful for any input,
modano
It's good that you don't want to use the table tag for layout. The thing to keep in mind when switching is to try to make the HTML as semantical as possible. What this means might vary, since there are no real strict rules, but it could look something along these lines:
<form [..]>
<ul>
<li class="hasError">
<em class="feedback">error message here</em>
<div class="attribute">
<label for="firstName">First name:</label>
<em>(required)</em>
</div>
<div class="input">
<input type="text" name="firstName" id="firstName" />
<em class="description">optional description here</em>
</div>
<span class="clearBoth" />
</li>
<li>
<em class="feedback" />
<div class="attribute">
<label for="firstName">Last name:</label>
<em>(required)</em>
</div>
<div class="input">
<input type="text" name="lastName" id="firstName" />
<em class="description">optional description here</em>
</div>
<span class="clearBoth" />
</li>
</ul>
</form>
This achieves the following:
By placing the error feedback message above the divs, you can make an arbitrarily long error message without losing alignment
Each input element (and label) is kept in a single list item, thus grouping them logically. It also reads something like the following in a screen reader: "Form. List of two items. Label [...]". This gives the user a hint of that the form contains two inputs.
By adding the hasError class to a list item, you can easily target the descendant elements with CSS for error specific styling.
A sample CSS file could look something like (note that this is untested):
form li {
width: 300px;
}
form li.hasErrors {
width: 298px;
border: 1px red;
background-color: #C55;
}
form .attribute {
float: left;
clear: left;
width: 60px;
}
form .input {
float: right;
clear: none;
width: 240px;
}
form .feedback {
display: block;
padding-left: 50px;
color: red;
}
form .description {
display: block;
clear: both;
color: #888;
}
.clearBoth { display: block; clear: both; }
A very very good tutorial on creating accessible HTML/CSS forms can be found on A list Apart: Prettier Accessible Forms
Generally a fantastic site for information on how to create good, clean and accessible websites.
Simply give your labels a specific width; this will ensure your fields line up. You can also float your labels and inputs to easily break them into rows. Here's a minimal example:
<style type="text/css">
form { overflow: auto; position: relative; }
input { float: left; }
label { clear: left; float: left; width: 10em; }
</style>
<form>
<label>Field 1</label><input/>
<label>Field 2</label><input/>
<label>Field 3</label><input/>
</form>
I am no CSS expert, but this should get you started. Of course the styles should be in an external style sheet.
<html>
<head>
<style>
html {
font-size: 76%;
}
body {
font-size: 1.0em;
font-family: verdana;
}
div.input {
border: 1px solid white;
clear: left;
width: 25em;
height: 5em;
padding: 2px;
margin-bottom: 1.0em;
}
div.error {
border: 1px solid red;
}
div.label {
float: left;
width: 7em;
}
div.field {
float: left;
}
div.errormessage {
color: red;
}
div.description {
color: #bbb;
}
input.text {
width: 13em;
}
</style>
</head>
<body>
<form>
<div class="input error">
<div class="label">
<div> </div>
<label>First name:<br>(required)</label>
</div>
<div class="field">
<div class="errormessage">error message here</div>
<input type="text" name="FirstName" class="text">
<div class="description">optional description here</div>
</div>
</div>
<div class="input">
<div class="label">
<div> </div>
<label>Last name:<br>(required)</label>
</div>
<div class="field">
<div class="errormessage"> </div>
<input type="text" name="LastName" class="text">
<div class="description">optional description here</div>
</div>
</div>
</form>
</body>
</html>