I'm trying to get the textboxes to float over the canvas in the appropriate spot.
If I use the id's to implement the css, it doesn't work. But If I specify the html element in the CSS instead, it works. (though, then I cannot manipulate the unique textboxes) (Demonstrated by the canvas tag)
Little Help?
<style type="text/css">
canvas { position:absolute;
z-index:-1;
top:0px;
left:100px;
}
.wrapper{ height:100%;
width:100%;
}
.username { position:absolute;
top:200px;
left:150px;
visibility:hidden;
z-index:1;
}
.password { position:absolute;
top:300px;
left:150px;
visibility:hidden;
z-index:2;
}
</style>
</head>
<body>
<div id="wrapper">
<canvas id = "gamescreen" height = "800" width = "800"></canvas>
<input type="text" name="username" id="username" />
<input type="password" name="password" id="password" />
</div>
</body>
The problem is that the . selector works on classes. If you want to select elements using their id you need to use # infront of the id. Example:
CSS
#example {
background: black;
}
HTML
<div id="example></div>
What you've implemented are CSS classes. Declare your div with class="wrapper" etc to apply those styles. You should also probably specify a finer-grained class for those particular styles, such as input.username, input.password and div.wrapper. Or if you want it done just for the specific element and aren't planning to reuse those styles anywhere else, change the . prefix to a # to match the id of the element rather than its class.
Related
I need to style my select with css, so it looks like the image below, there is 2 things i cant figure out, when option is selected remove the classic blue background, how to indent the text, text-indent is not working for me, and how to lower the option box.
<select name="txtCountry">
<option>Select Country</option>
<option value="1">Georgia</option>
<option value="2">Afghanistan</option>
</select>
Select tags are near-enough impossible to customise, and are at the mercy of your browser as to how they are styled (albeit height and width).
You would be much better to construct and style your own using CSS if you are looking for a customisable option in which is cross-browser compatible.
I have used jQuery in order to complete this functionality. It also makes use of spans in order to replace the option tags, allowing for further styling (no external library needed, although there are many available):
$('.item').hide();
$('.item').click(function () {
var x = $(this).text();
$(this).siblings(".selected").text(x);
$(this).slideUp().siblings(".item").slideUp();
});
$('.Drop').click(function () {
$(this).parent().toggleClass("opened");
$(this).siblings(".item").slideToggle();
});
$('.selected').click(function () {
$(this).parent().removeClass("opened");
$(this).siblings(".item").slideUp();
});
div {
height:30px;
width:200px;
background:lightgray;
position:relative;
}
.item, .selected {
display:block;
height:30px;
width:100%;position:relative;
background:gray;
transition:all 0.6s;
line-height:30px;
}
.selected {
background:none;
display:block;
}
.item:hover {
background:lightgray;
}
.Drop {
position:absolute;
top:0;
right:0;
height:100%;
width:30px;
background:tomato;
transition:all 0.4s;
transform:rotate(0deg);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div> <span class="selected">1</span>
<span class="Drop"></span>
<span class="item">1</span>
<span class="item">2</span>
<span class="item">3</span>
<span class="item">4</span>
<span class="item">5</span>
<span class="item">6</span>
</div>
Note
This is not a finished product, but is for demo only.
<form name="fc">
<div class="input-text">
<input type="text" id="postquestion" name="postquestion" style="font-size:12px;"class="ps" value="" placeholder="What's Your Question..?" data-mini="true" />
<input type="submit" value="Ask" class="ask" data-inline="true" data-mini="true"data-theme="b"/>
</div>
</form>
this code is not working
.ask
{
margin-top:-10px;
}
i'm newbie to css , please help me. http://jsfiddle.net/shreeramns/4dRuP/
input is an inline-element, thus it cannot have any margin applied. You need to make it a block-level element:
.ask
{
display: inline-block;
margin-top:-10px;
}
Furthermore, you shouldn't use negative margins if possible, use positioning instead.
you may have to use float:left for both of the button and textbox
.ask{
margin-top:-10px;
display:inline;
position:relative;
float:left;
}
.ps{
float:left;
display:inline;
}
Preview >> http://jsfiddle.net/vmyc8/
Heres my problem how can i make my header looks better
Following is the coding ...!!
1 Index.php
<div class="header">
<div class="headerFont">Yo! Yo! Honey Singh..!!
</div>
<div class="Login">
<form>
Email :<input type="text">
Password :<input type="password">
<input type="submit" value="Login" >
<input type="button" value="register">
</form>
</div>
</div>
2 Web-Style.css
.header{
top:0;
left:0;
padding:10px;
background:#00688B;
width:100%;
height:footer-<length>;
box-shadow:2px 2x 5px #08298A;
border:1px solid black;
text-shadow:2px 2px black;
}
.header a{
color:white;
}
.headerFont{
font-family:MATURA MT ;
font-size:22px;
display:table-cell;
}
.Login{
display:block;
position:absolute;
top:15px;
right:50px;
}
3 Mobile-Style.css
.header {
width: auto;
}
Now i need to know how can i get button like the website[PIC] -> http://i.stack.imgur.com/vlx09.png
How do i make button visible on mobile but not on pc borwsers ..???
Create the button you want on the mobile version of the website.
Add CSS that makes the button invisible (eg, display: none).
Use CSS with media queries to show the button on mobile devices.
More details here:
http://mobile.smashingmagazine.com/2010/07/19/how-to-use-css3-media-queries-to-create-a-mobile-version-of-your-website/
you can do this using javascript and checking the requesting browser's type.
You can detect mobile broswer's request using javascript like following.
if ((screen.width < 480) || (screen.height < 480)) {
location.replace('/mobile/');
/*Get buggon element by id and show it else hide it*/
}
or may be you can use following javascript to detent mobile browser and then hide the button.
https://github.com/miohtama/detectmobile.js
This question already has answers here:
How to align input forms in HTML
(17 answers)
Closed 2 years ago.
I have a HTML form like:
<html>
Name:<input type="text"/></br>
Email Address:<input type="text"/></br>
Description of the input value:<input type="text"/></br>
</html>
Now the labels all begin in the same column but the text boxes are beginning in different positions as per the label's text length.
Is there a way to align the input fields such that, all the ":" and the text boxes, will begin in the same position, and the preceding text will be right aligned until the ":" ?
I am okay with using CSS if that can help achieving this.
Working JS Fiddle
HTML:
<div>
<label>Name:</label><input type="text">
<label>Email Address:</label><input type = "text">
<label>Description of the input value:</label><input type="text">
</div>
CSS:
label{
display: inline-block;
float: left;
clear: left;
width: 250px;
text-align: right;
}
input {
display: inline-block;
float: left;
}
You could use a label (see JsFiddle)
CSS
label { display: inline-block; width: 210px; text-align: right; }
HTML
<html>
<label for="name">Name:</label><input id="name" type="text"><br />
<label for="email">Email Address:</label><input id="email" type="text"><br />
<label for="desc">Description of the input value:</label><input id="desc" type="text"><br />
</html>
Or you could use those labels in a table (JsFiddle)
<html>
<table>
<tbody>
<tr><td><label for="name">Name:</label></td><td><input id="name" type="text"></td></tr>
<tr><td><label for="email">Email Address:</label></td><td><input id="email" type = "text"></td></tr>
<tr><td><label for="desc">Description of the input value:</label></td><td><input id="desc" type="text"></td></tr>
</tbody>
</table>
</html>
http://jsfiddle.net/T6zhj/1/
Using display table-cell/row will do the job without any width needed.
The html :
<html>
<div>
<div class="row"><label>Name:</label><input type="text"></div>
<div class="row"><label>Email Address:</label><input type = "text"></div>
<div class="row"><label>Description of the input value:</label><input type="text"></div>
</div>
</html>
The Css :
label{
display: table-cell;
text-align: right;
}
input {
display: table-cell;
}
div.row{
display:table-row;
}
Set a width on the form element (which should exist in your example! ) and float (and clear) the input elements. Also, drop the br elements.
I know that this approach has been taken before, But I believe that using tables, the layout can be generated easily, Though this may not be the best practice.
JSFiddle
HTML
<table>
<tr><td>Name:</td><td><input type="text"/></td></tr>
<tr><td>Age:</td><td><input type="text"/></td></tr>
</table>
<!--You can add the fields as you want-->
CSS
td{
text-align:right;
}
in my case i always put these stuffs in a p tag like
<p>
name : < input type=text />
</p>
and so on and then applying the css like
p {
text-align:left;
}
p input {
float:right;
}
You need to specify the width of the p tag.because the input tags will float all the way right.
This css will also affect the submit button. You need to override the rule for this tag.
I have just given width to Label and input type were aligned automatically.
input[type="text"] {
width:100px;
height:30px;
border-radius:5px;
background-color: lightblue;
margin-left:2px;
position:relative;
}
label{
position:relative;
width:300px;
border:2px dotted black;
margin:20px;
padding:5px;
font-family:AR CENA;
font-size:20px;
}
<label>First Name:</label><input type="text" name="fname"><br>
<label>Last Name:</label><input type="text" name="lname"><br>
I don't have experience as a web designer, but in effort to learn more about CSS, I'm doing the stylesheet for my own page. I am aware the way I'm doing it now probably sucks, is not the recommended way, but please help me understand why this isn't working.
I have this form:
<form action="/register" method="POST" id="registration_form">
<p>
<label for="username">Username</label>
<input type="text" id="username" name="username"/>
</p>
<p>
<label for="password">Password</label>
<input type="password" id="password" name="password"/>
</p>
</form>
I have included Eric Meyer's CSS reset, before including my own stylesheet, and I have this rule in my CSS:
#registration_form label {
width: 100px;
}
I also tried to put:
label {
width:100px;
}
I tried changing the value to more than 100px, but still it doesn't get applied. If it helps, I have a layout, which contains something like this:
<body>
<div id="navigation">
...
</div>
<div id="pagebox">
{% block body %}{% endblock %}
</div>
</body>
This is a jinja2 template, and the content of body is added by some different view, when it's rendered. Here are the styles for these id's:
#navigation {
text-align:center;
}
#navigation ul li {
display:inline;
margin-left:50px;
}
#pagebox {
margin-left:50px;
margin-right:50px;
height:600px;
background-color: #20f000;
}
Why isn't my label style getting applied?
I believe that <label> has the display:inline by default, so width and height do not affect it. Try adding display: inline-block to it.
Added: As member Geoff Adams noted in the comments, there are some browser compatibility issues with display: inline-block. In this specific scenarion it should work, but see here for more information.
The label element is an inline element, so the width style doesn't apply to it.
You could make the label and input element float inside the p elements. Applying overflow to the p element makes it work as a container for the floating elements:
#registration_form p {
overflow: hidden;
}
#registration_form p label {
float: left;
width: 100px;
}
#registration_form p input {
float: left;
}