I want to have two input with one button for user to enter their username and password, and
I'm using this css code for controlling the input tag in my website in order to appear it properly on all screen size, and it works fine.
.controller {
width: 98%;
margin: 0;
padding: 7px 5px 4px;
color: #555;
font-size: 18px;
font-family: inherit;
border-style: solid;
border-width: 0 1px 1px 0;
}
I want to have some dynamic text which is retrieved from the database below these two inputs for the user. Now my problem is that if the text is long it will not appear properly below the inputs and affects them to not fit the screen, as long as the text is only 5 to 10 words there is no problem.
here is the html file for the inputs
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
</head>
<body>
<form method="post" action="answer">
<ul>
<li>
Login Name:<input type="text" name="id" class="controller"></input>
</li>
<li>
Password:<input type="password" name="pass" class="controller"></input>
</li>
<li>
<input type="submit" value="Login"></input>
</li>
</ul>
</form>
</body>
and here is the CSS code
.controller {
width: 98%;
margin: 0;
padding: 7px 5px 4px;
color: #400;
font-size: 18px;
font-family: inherit;
border-style: solid;
border-width: 0 1px 1px 0;
}
please can anyone advice me what I have to do or give a css code for controlling the problem.
thank you very much for any answer and sorry for my long question.
So, I think that this is what you want to do. After your form,
<div id="response">
<p> Some Long Block Of Text That Will Wrap Around This Div </p>
</div>
then, in the CSS you get something like this going on:
#response
{
width: 75px; /*desired width*/
margin-top: 25px; /*distance from the form above*/
}
#response p
{
/*anything you want to do to that specific <p> */
}
I'm not sure how you are getting the dynamic text, but I'm guessing that it is a script that is getting info from answer and putting it in the html. Just place that info inside of the <p> that's in #response
Related
The following screenshot shows the forms.py code for generating the textarea input box on the right-hand side (which has placeholder text: "Your comment to the world").
The CSS however, is applied only to the pure HTML textarea box (to the left) and I cannot figure out how to get it to be applied to the Django generated textarea input box. You'll notice that the CSS has been automatically applied to the top 'Name' text input field.
The styles.css code is here:
body {
background-color: white;
}
h1 {
color: red;
text-shadow: 3px 2px grey;
font-family: Arial
}
p {
color: black;
font-family: Arial
}
input[type=text] {
width: 20%;
padding: 21px 20px;
margin: 14px 0;
box-sizing: border-box;
font-size: 33;
border: 2px solid red;
border-radius: 4px;
font-family: Arial
}
textarea[type=textarea] {
width: 20%;
padding: 21px 20px;
margin: 14px 0;
box-sizing: border-box;
font-size: 33;
border: 2px solid red;
border-radius: 4px;
font-family: Arial
}
forms.py (as shown above with the rendering of HTML) is below
from django import forms
class CommentForm(forms.Form):
name = forms.CharField(max_length=20,widget=forms.TextInput(attrs={'placeholder':'Your Name Please'}))
comment = forms.CharField(widget=forms.Textarea(attrs={'placeholder':'Your comment to the world'}))
And finally, the sign.html page (with the HTML for the relevant page) is below
{% load static %}
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="{% static 'guestbook/styles.css' %}">
</head>
<body>
<h1>Tell the world how you're doing!</h1>
<h2>Sign the guestbook</h2>
<form action="/action_page.php">
Enter your name:<br>
<!--<input type="text" name="name" placeholder="Your Name here">-->
{{form.name}}
<br>
Enter your comment:<br>
<textarea name="message" type="Textarea" placeholder="Your comment here" rows="10" cols="30"></textarea>
{{form.comment}}
<br><br>
<input type="button" value="Submit">
</form>
<p>If you click the "Submit" button, the form-data will be sent to a page called "/action_page.php".</p>
<p>Go to the guestbook itself</p>
</body>
</html>
Essentially, I would like to know how to simply create an HTML object (that is functional) and apply the CSS to it.
So If I am understanding the question correctly, you are having no issue applying CSS to HTML you hard code, and it is the HTML that is generated with Django's templating system that you are having trouble getting your CSS to stick to yes? I would inspect the rendered HTML of that django generated "comment" field. I think you will find that your CSS rules are not applying because the HTML is not what you expect. In other words, your selector: textarea[type=textarea] is not matching the comment field because it is probably not a textarea, or does not have a type=textarea attribute.
You can add attributes in the widget definition itself if you are having trouble getting a CSS rule to stick, but I use This library a lot. It let's you add attributes in the template.
I need help making the Email Opt-In bar under the Header look at the same on mobile devices as it does on my desktop. Here is the website.
I am not skilled in any kind of coding so any help would be greatly appreciated! :)
Here is the CSS I am currently using:
/* this would be the color and size of the main bar */
#nsu-head {
background-color: #ffcfde;
padding: 34px;
}
/* basic text color and placement */
#nsu-head p {
float: left;
color: #000000;
margin-top: -5px;
padding-right: 10px;
}
/* placement of the invitation text */
#nsu-head p.form_label {
text-transform: uppercase;
padding-left: 50px;
padding-right: 30px;
margin-top: 0;
}
#nsu-form-1 label {
display: none;
}
/* hides the input field labels */
/* input button styling going for a circle with drop shadow */
input#nsu-submit-1 {
/* remove if you don't care about IE8 */
}
.type1 {
width: 100px;
height: 100px;
background: yellow;
border: 3px solid red;
}
/* controls the background color during inactive and hover states */
input#nsu-submit-1.nsu-submit {
background: no-repeat darkMagenta;
border: 1px solid darkMagenta;
}
input#nsu-submit-1.nsu-submit:hover {
background: no-repeat black;
border: 1px solid black;
}
/* placement of post sign up text if no thank-you page */
p#nsu-signed-up-1 {
float: right;
font-size: .9rem;
color: #DDD;
padding-right: 0;
margin-top: -18px;
width: 45%;
}
your code is quite messy, but try doing this:
1) Look for Aweber's code. IN your source code looks like this
<div class="nsu-form" id="nsu-head">
<p class="form_label">Get <span style="font-style:italic;">Free</span> Tips to Be a Healthier Mama!</p>
<!-- Form by Newsletter Sign-Up v2.0.3 - http://wordpress.org/plugins/newsletter-sign-up/ -->
<form class="nsu-form" id="nsu-form-0" action="http://www.aweber.com/scripts/addlead.pl" method="post"><p><label for="nsu-name-0"> </label><input class="nsu-field" id="nsu-name-0" type="text" name="name" placeholder="Name" /></p><p><label for="nsu-email-0"> </label><input class="nsu-field" id="nsu-email-0" type="email" name="email" placeholder="Email" required /></p><textarea name="nsu_robocop" style="display: none;"></textarea><p><input type="submit" id="nsu-submit-0" class="nsu-submit" name="nsu_submit" value="Get it!" /></p></form>
<!-- / Newsletter Sign-Up -->
</div>
it might be different in your Aweber's code, but you'll get the idea. Now, if your plugin allows it to, try to move this part:
<p class="form_label">Get <span style="font-style:italic;">Free</span> Tips to Be a Healthier Mama!</p>
outside <div class="nsu-form" id="nsu-head"> (thus, that paragraph has to be BEFORE this nsu-form line)
Once you have this all, be sure to remove everything you currently have in your code and add it to header-left, like this:
<div id="header-left-section">
YOUR CODE HERE
</div><!-- #header-left-section -->
this will make your theme work as expected. That is: your form on the left and full width on mobile and your nav on the right and full width on mobile.
However, if you also want it to be full width in ANY screen, add this to your CSS:
#header-left-section, #header-right-section{float:none !important; clear:both; display:block}
This should fix every issue you have
I am programing a webpage with html and CSS. My pseudo class :hover stopped working on my webpage, but :focus still works. Hover was working fine, and then I made an unrelated edit (added an image to one of my blocks), and noticed it had stoped working. I deleated my last change and it still did not work.
I have checked everything and ran both the html and css through validators and there are no errors other than something about using character encoding, but I know it worked fine without that. It really makes no sense!
I will show my page and my code. Keep in mind this is my very first webpage, I know that I did not optimize my background images properly, and may have some unnecessary divs, but I feel pretty good about it considering a week ago I did not know what html was. I have heavily commented and organised my CSS, you can find my hover code near the top along with the rest of the none classes/ID's. The hover link is the only link on the webpage on the sidebar.
http://www.adrianhoulewebprojects.com/HomePage.html
Here is my HTML
<!--Home Page for adrianhoulewebpojects.com Version 1.0-->
<!--Written by Adrian Houle-->
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<link rel="stylesheet" type="text/css" href="css/HomePageStyle.css">
<title>Adrian Houle Web Projects</title>
</head>
<body>
<div id="Sidebar">
<h3>Projects</h3>
<ul>
<li>
Under Construction
</li>
<li>Unfinished Project #2</li>
<li>Unfinished Project #3</li>
<li>Unfinished Project #4</li>
<li>Unfinished Project #5</li>
</ul>
</div>
<div class="box">
<div class="HalfSpacer"></div>
<div class="TransBox" id="Header">
<h1>Welcome to<br>AdrianHouleWebProjects.com</h1>
</div>
<div class="Spacer"></div>
<div class="TransBox" id=About>
<h2>About:</h2>
<p>Welcome to my website. I had a bit of time over the holidays and decided to finally get around to learning web programming. The purpose of this website is to give me a place to practice and display what I learn in the form of web projects. I may also be making some blogs that will also serve to showcase my travelling and hobbies.</p>
</div>
<div class="Spacer"></div>
<div class="TransBox" id="NewStuff">
<h2>Coming Soon</h2>
<ul>
<li>
<h3>Australia Travel Blog</h3>
<img src="http://www.adrianhoulewebprojects.com/img/AustralianFlag100by50.gif" alt="Australian Flag" >
<p>2013-2014 Australia Travel Blog coming soon.</p>
</li>
</ul>
</div>
<div class="Spacer"></div>
<div class="TransBox" id="Contact">
<h2>Contact Info:</h2>
<p class="Italic">Please report any compatibility, accessibility, or security issues to:</p>
<p>Adrian Houle</p>
<p>adrianhoule#gmail.com</p>
</div>
<div class="Spacer"></div>
<div class="TransBox" id="Footer">
<p>Website by Adrian Houle</p>
</div>
</div>
<div class="BottomBorder"></div>
</body>
</html>
Here is my CSS
/***************************************** Info *********************************************************/
/*Style Sheet for HomePage of adrianhoulewebprojects.com*/
/*Written by Adrian Houle*/
/*For any issues with my website (compatibility, accessibility, white-hat reports) feel free to contact me at
adrianhoule#gmail.com
/*Page Purpose: Create a homepage that welcomes users to my website and directs them to various projects*/
/***********************************************************************************************************/
/************************************* Table of Contents **************************************************/
/*CSS layout*/
/* -none specific elements*/
/* -classes*/
/* -ID's and children of ID's*/
/* -Other*/
/************************************************************************************************************/
/************************************** CSS code ****************************************************/
/* -none specific elements ***********************************************************************************/
p {
font-size: large;
font-weight: bolder;
}
a {
color: blue;
}
a :hover, :focus{
background-color: yellow;
text-decoration: none;
font-size: larger;
}
/* -classes **************************************************************************************************/
/*Element that contains everything except the sidebar and has the main background image.*/
.box {
display: block;
position: relative;
width: 100%; /*test and adjust to keep it from expading the browser*/
height: 100%;
border: 3px solid black;
right: 0;
top: 0px;
padding: 0;
background-image: url(http://www.adrianhoulewebprojects.com/img/CautionStripes.png);
}
/*Allows for synchronised space adjustment between elements*/
.Spacer {
position :relative;
height: 100px;
}
/*Allows for synchronised space adjustment between elements*/
.HalfSpacer {
position :relative;
height: 30px;
}
/*Every element that contains text belongs to this class*/
/*This class has nothing to do with transgender boxes, or gender boxes in general*/
.TransBox {
width: 70%;
padding: 1em;
z-index: 1;
left: 20%;
position: relative;
background-image: url(http://www.adrianhoulewebprojects.com/img/SteelPlate.jpg);
moz-box-shadow: 0 0 5px 5px #888; /*shadow effect with cross compatibility*/
webkit-box-shadow: 0 0 5px 5px#888;
box-shadow: 0 0 5px 5px #888;
}
.Italic {
font-style: Italic;
}
/* -ID's and children of ID's********************************************************************************/
/*Sidebar, to be fixed to the left hand side of the screen. Must allow conent to the right of it*/
#Sidebar {
height: 100%;
width: 10%;
left: 0px;
top: 0px;
padding: 2%;
display: inline;
position: fixed;
background-image: url(http://www.adrianhoulewebprojects.com/img/SteelPlate.jpg);
border-style: solid;
border-width: 3px;
z-index: 2;
}
#Sidebar ul {
padding-left:0;
}
#Sidebar li {
margin: 10%;
}
/*Header text*/
#Header h1 {
text-align: center;
}
#Footer p {
text-align: center;
}
/* -Other (empty)*****************************************************************************************/
Thank you for any help.
CSS is very touchy about putting extra spaces in it. Combine a with :hover like this:
a:hover, a:focus{
background-color: yellow;
text-decoration: none;
font-size: larger;
}
Also want to make it a:focus unless you want every element to be affected.
Remove the space between a and :hover
a:hover{
background-color: yellow;
text-decoration: none;
font-size: larger;
}
I have a few questions with the code below.
1) I went to the Twitter site to get the code to embed a "Tweet" button but am having two issues - a) the button just shows up as a link and b) the text that I had pre-loaded into the tweet box does not appear
2) I'd like the two yellow buttons to be centered on the page, next to each other. Can someone help with the positioning?
3) Can I get rid of the hyperlink on the text within the button? Right now, the link only works if you click on the text (I'd like it to work if you click anywhere on the button).
Really appreciate the help. Thanks.
<!-- doc type declaration lets browser know which xhtml doc type declaration we are using -->
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>SAMPLE TEXT</title>
</head>
<style type="text/css">
#wtf_title {font-family: "Garamond"; font-weight: bold; font-size: 200%; padding-top:50px}
#intro_text {font-family: "Helvetica", serif; color: black; padding-top:10px;
font-style: italic;}
#reason {font-family: "Helvetica", serif; color: white; padding-top:50px; padding-bottom:50px;}
#credit
{
font-family: "helvetica";
font-size: 20%;
color: black;
}
#button1 {padding-left:20px;}
button{
color:#08233e;
font:2.4em Futura, ‘Century Gothic’, AppleGothic, sans-serif;
font-size:70%;
padding:14px;
background:url(overlay.png) repeat-x center #ffcc00;background-color:rgba(255,204,0,1);
border:1px solid #ffcc00;
-moz-border-radius:10px;-webkit-border-radius:10px;border-radius:10px;
border-bottom:1px solid #9f9f9f;
-moz-box-shadow:inset 0 1px 0 rgba(255,255,255,0.5);-webkit-box-shadow:inset 0 1px 0 rgba(255,255,255,0.5);box-shadow:inset 0 1px 0 rgba(255,255,255,0.5);
cursor:pointer;
}
button:hover{background-color:rgba(255,204,0,0.8);}
button:active{position:absolute;top:100px; left:50px}
</style>
<body>
<div id="wtf_title" >
<center>sample text<br/>
</div>
<hr noshade size=8 width="53%">
<div id="intro_text" >
<center>Sample text
</div>
<button>
<center>sample text
</button>
<button>
<a target="_blank" href="http://www.americanbar.org" class="button2">sample text</a>
</button>
<div id="twitter-share-button"; style="position: absolute; top: 2px;" >
Tweet
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s) [0];if(!d.getElementById(id)) {js=d.createElement(s);js.id=id;js.src="//platform.twitter.com/widgets.js";fjs.parentNode.in sertBefore(js,fjs);}}(document,"script","twitter-wjs");</script>
</div>
<div id="fb_share"; style="position: absolute; top: 2px; left: 90px;" >
<a name="fb_share"></a>
<script src="http://static.ak.fbcdn.net/connect.php/js/FB.Share"
type="text/javascript">
</script>
</div>
<div id="credit"; style="position: absolute; bottom: 5px; left: 32%;" >
This site was created by Varun Shetty and Bobby Corp. Inspired by LBJ and WTF Obama. Bobby loves Lebron; Varun loves the idea of Lebron.
</div>
</body>
</html>
Your HTML is not valid in many places, you really need to put your HTML through a WC3 validator before posting here, it would save you a lot of time and effort.
Here is a jsfiddle to start you out:
http://jsfiddle.net/RPc95/
For making the entire button click-able you either need to create a proper submit / button element or style a href to look like a button.
I'm designing a form layout to be uesd on many pages within an online system. A devout user of tables for this purpose for many years, I'm getting pretty used to using CSS + labels for this now.
One thing I've yet to be able to master is the way different browsers pad & position the label relative to the input field. I'll give a code example, plus a close up image of how it renders in each browser (IE = IE9).
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title>HTML template</title>
<meta content="text/html; charset=iso-8859-1" http-equiv="Content-Type" />
<link rel="stylesheet" type="text/css" href="reset.css" />
<style>
body {
font-family:Verdana,Arial,"Lucida Grande","Lucida Sans Unicode",sans-serif;
font-size:13px;
font-style:normal;
font-weight:normal;
letter-spacing:normal;
margin:20px;
}
input {
font-family:Verdana,Arial,"Lucida Grande","Lucida Sans Unicode",sans-serif;
border:solid 1px #666;
width:150px;
}
.fld {
}
.usr {
border:solid 1px red;
}
p {
}
</style>
</head>
<body>
<p>
<label class="usr" for="email">Email*</label>
<input class="fld required email" type="text" name="email" id="email" value="Capital Letter">
</p>
</body>
</html>
OK - now I can post a pic - here is what it looks like after Ahmed Masud's changes. He was right - the reset.css file I had (from http://html5reset.org/) didn't have padding on the input element. However, even after applying the changes, there is still a variation in the alignment of the base of the text in the label compared to that in the input. Now Firefox is dead-level, and for IE & Chrome the label text is 1px higher.
If I remove the link to reset.css, things change again: Chrome becomes dead-level, IE puts the label 1px higher than the input text, Firefox 1px lower than the input text. See below:
I should point out that this is a very basic layout, simply to try and diagnose the problem. I'll be making it look all better later. But first I need to know how to make all my text line up across all browsers with one CSS solution.
Okay css alignments are slightly a black art with CSS2 so let me tell you what's happening:
1) the reset.css you have probably is NOT resetting the padding of the input element which is why you are getting that off by 1/2 pixel error
Try adding these to your style
So one thing is to remove that padding from input:
input { padding: 0 }
You will now have to set the height of both label and input elements:
.fld { height: 16px; }
.usr { height: 16px; }
The other thing is that you probably want to align fields nicely one below the other. One way to achieve that is to make the label a block with float left property:
.usr { display: block; float: left; }
and the .fld a block as well:
.fld { display: block }
you would want to add some other parameters to p to make rendering something more aesthetic.
Here is what i did to your file:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title>Southrock HTML template</title>
<meta content="text/html; charset=iso-8859-1" http-equiv="Content-Type" />
<link rel="stylesheet" type="text/css" href="reset.css" />
<style>
body {
font-family:Verdana,Arial,"Lucida Grande","Lucida Sans Unicode",sans-serif;
font-size:13px;
margin:20px;
}
input {
border:solid 1px #666;
width:150px;
padding: 0;
height: 16px;
}
.fld { }
.usr {
border:solid 1px red;
height: 16px;
display: block;
float: left;
margin-right: 5px;
width: 7em;
}
p {
clear: both;
margin-bottom: 5px;
}
</style>
</head>
<body>
<p>
<label class="usr" for="email">Email*</label>
<input class="fld required email" type="text" name="email" id="email" value="Capital Letter">
</p>
<p>
<label class="usr" for="email">First Name*</label>
<input class="fld required email" type="text" name="fname" id="fname" value="Capital Letter">
</p>
</body>
</html>
This renders the same way in IE/Safari/FF/Opera
This is one way to align:
<span>
<label>Email</label>
<input type="text" name="email" />
</span>
CSS:
form span {
vertical-align: middle;
display: block;
width: 100%;
}
form label {
display: inline-block;
float: none;
width: 150px;
padding: 0;
margin: 5px 0 0;
text-align: left;
}
form input {
display: inline-block;
float: none;
width:auto;
margin:5px 0 0 10px;
padding:5px 5px;
}