trying to get the nth-child/first-child working
on the first label within the form below
but can't get it right
At the moment I'm using
form label {
display: block;
font-size: 20px;
font-size: 2rem;
line-height: 18px;
cursor: pointer;
margin:0 auto;
color:#FFF;
text-transform:uppercase;
padding:40px 0 10px;
font-weight: normal!important;
}
label:first-child {
padding-top:0;
}
but have used
form code div.field span.lspan label:nth-of-type(1)
form code div.field span.lspan label:first-child
.lspan label:first-child
form label:first-child
they set all labels in the form to padding 0
<form method="POST" action="" class="">
<div class="field">
<span class="lspan"><label for="sender_name">Name</label></span>
<span class="inspan"><input class="hinput" type="text" name="sender_name" value=""></span>
</div>
<div class="field">
<span class="lspan"><label for="sender_name">Email</label></span><span class="inspan"> <input class="hinput" type="text" name="email" value=""> </span></div>
<div class="field">
<span class="lspan"><label for="subject">Subject</label></span><span class="inspan"><input class="hinput" type="text" name="subject" value=""></span></div>
<div class="field">
<span class="lspan"><label for="sender_name">Message</label></span><span class="inspan"> <textarea class="htextarea" name="message"></textarea></span></div>
<div class="field">
</div>
<div class="field" style="margin-top:15px">
<input type = "submit" class="csubmit" name = "submit" value="Submit" style="" />
</div>
</form>
Thanks
Roy
All the <label> tags in your code are a first-child of their respective <span> element.
If you only want to target the first appearance of a <label> in your code use this:
form div:first-child label {
padding: 0;
}
This will target any label within the <div> element, that is the first-child of the form.
Remember, that you can use :first-child on any subselektor and not just on the outermost right!
Related
I would like to modify the first and last child in the class search. Here is my attempt but it doesn't work.
This is my html.
<div id="search">
<form method="GET" action="http://images.google.com/images">
<div>Search</div>
<div><input type="text" name="q" class="searchInput"></div>
<div>
<input type="submit" value="Search Image" class="searchButton">
</div>
<div> Try it </div>
</form>
</div>
Neither of them works
.search div:first-child,
.search div:last-child {
font-size: large;
color: red;
}
.search form>div:first-child,
.search form>div:last-child {
font-size: large;
color: red;
}
May I ask what's the problem thank you.
#search div:first-child,
#search div:last-child {
font-size: 30px;
color: red;
}
<div id="search">
<form method="GET" action="http://images.google.com/images">
<div>Search</div>
<div><input type="text" name="q" class="searchInput"></div>
<div>
<input type="submit" value="Search Image" class="searchButton">
</div>
<div> Try it </div>
</form>
</div>
You are using .search
Instead of that use #search because you are using an id.
Working on converting some of the forms on our website to be housed within our new emailing platform (Pardot, a part of Salesforce). Using their CSS editor to create the forms, but I don't have much experience in CSS. I got all the labels for a checkbox to align vertically, but they're in a diagonal line instead of a vertical line. Any tips on how to fix that?
I also attached an image of what the form looks like on the website.
Here's the CSS:
pardot-form input[type="checkbox"] {
background-color: #fff;
color: #666;
font-family: "Open Sans", sans-serif;
font-size: 14px;
line-height: 1.75em;
height:18px;
width:18px;
padding:0;
margin-top:5px;
display:block;
float:left;
}
Will this work for you? I pulled some basic form elements from an existing Pardot form.
form.form input[type="checkbox"] {
background-color: #fff;
color: #666;
font-family: "Open Sans", sans-serif;
font-size: 14px;
line-height: 1.75em;
height: 18px;
width: 18px;
padding: 0;
margin-top: 5px;
display: inline;
}
<form class="form">
<p class="form-field company col-sm-12 Main_Alarm_Equipment_Used pd-checkbox required required-custom ">
<label class="field-label" for="1">Which mailing lists would you like to sign up for? (Check all that apply)*</label>
<span class="value"> <span>
<input type="checkbox" name="2" id="2" value="598212" onchange="">
<label class="inline" for="2">General Information</label>
</span> <span>
<input type="checkbox" name="3" id="3" value="598214" onchange="">
<label class="inline" for="3">Membership</label>
</span> <span>
<input type="checkbox" name="4" id="4" value="598216" onchange="">
<label class="inline" for="4">Alumni</label>
</span> <span>
<input type="checkbox" name="5" id="5" value="598218" onchange="">
<label class="inline" for="5">Show</label>
</span> <span>
<input type="checkbox" name="6" id="6" value="598220" onchange="">
<label class="inline" for="6">Band</label>
</span> </span> </p>
</form>
Here is the problem, I have a single-page application where I lay out a form:
Due to my novice CSS skill, I have not been able to left align the help text (in blue). Here is my HTML code:
label {
width: 15%;
display: inline-block;
text-align: right;
padding-right: 10px;
}
span.short_help {
font-size: 70%;
color: cornflowerblue;
padding-left: 10px;
}
<form>
<div>
<label for="Authentication">Authentication:</label>
<input type="text" name="Authentication" id="-Authentication" />
<span class="short_help">Authentication type, I, II, or III</span>
</div>
<br/>
<div>
<label for="Branch">Branch:</label>
<input type="text" name="Branch" id="Branch" />
<span class="short_help">Which regional branch.</span>
</div>
<br/>
<div>
<label for="Persistent">Persistent:</label>
<input type="checkbox" name="Persistent" id="Persistent" />
<span class="short_help">Persistent connection</span>
</div>
<br/>
</form>
If I fixed up the input field to make the controls the same width so the help text align, then the check box will be centered:
Here is what I added to the CSS above:
input {
width: 15%;
}
How can I have both the controls and the blue text left aligned?
Instead of setting a width on all input fields, wrap a div arround it with a class. In my example .input
Now you can set the width of the field without affecting the input width.
* {
box-sizing: border-box;
}
form {
max-width: 600px;
}
label, .input, span {
display: inline-block;
vertical-align: middle;
margin-left: -4px;
}
label {
width: 20%;
}
.input {
width: 30%;
}
span {
color: cornflowerblue;
}
<form>
<div>
<label for="Authentication">Authentication:</label>
<div class="input">
<input type="text" name="Authentication" id="-Authentication" />
</div>
<span class="short_help">Authentication type, I, II, or III</span>
</div>
<br/>
<div>
<label for="Branch">Branch:</label>
<div class="input">
<input type="text" name="Branch" id="Branch" />
</div>
<span class="short_help">Which regional branch.</span>
</div>
<br/>
<div>
<label for="Persistent">Persistent:</label>
<div class="input">
<input type="checkbox" name="Persistent" id="Persistent" />
</div>
<span class="short_help">Persistent connection</span>
</div>
<br/>
</form>
Add an element to wrap around the inputs and make them the desired size:
<div>
<label for="Authentication">Authentication:</label>
<span class="spacer">
<input type="text" name="Authentication" id="-Authentication" />
</span>
<span class="short_help">Authentication type, I, II, or III</span>
</div>
<br/>
<div>
<label for="Branch">Branch:</label>
<span class="spacer">
<input type="text" name="Branch" id="Branch" />
</span>
<span class="short_help">Which regional branch.</span>
</div>
<br/>
<div>
<label for="Persistent">Persistent:</label>
<span class="spacer">
<input type="checkbox" name="Persistent" id="Persistent" />
</span>
<span class="short_help">Persistent connection</span>
</div>
And add CSS to format it:
span.spacer {
display: inline-block;
width: 15%;
}
I didn't quite get it, do you only want to align the checkbox or the blue text
To align the checkbox to the left, change
input {
width: 15%;
}
to
input[type="text"] {
width: 15%;
}
the input driver you can align your text to the left so
input
{
text-align: left;
width: 15%;
}
but the tag span can not be proque is an online element for more doubt read this site that talks about the span tag:
https://developer.mozilla.org/en-US/docs/Web/HTML/Element/span
You can also contain the span in a div and somehow achieve alignment
I have been trying to style my "contact us" slider window but for my lack of knowledge (started website designing only a month back for my own project) I am kinda stuck.
The functionality is working great, but there are a few issues:
"contact us" text and a image that I am trying to get in a line is
not working.
in collapse mode, div containing text "contact us" is getting
reduced width wise.
Please excuse my not-so-technical language, since I am new to the concept.. Please refer my website koncreteplanet.com.. also, I have created a jsfiddle to give a glimpse of the code I am using (https://jsfiddle.net/jjff2o2x/). Thanks in advance!!
Javascript code:
jQuery("#ContactUs_header").click(function () {
jQuery('#slideContactUsbox').slideToggle('slow');
});
HTML / PHP code:
<div class="row">
<div class="col-md-8">
</div>
<div class="col-md-4" id="contactus-panel">
<div class="contactus-panel">
<div id="ContactUs_header" class="contactus_footer" >
<p>Contact Us</p>
<img align="right" width=auto height="40px" src= "<?php echo bloginfo('template_directory') . "/image/handshake.png" ; ?>">
</div>
<div id="slideContactUsbox" class="contactus-extended">
<div class="container" style="width:300px;align:left;" id="MailUs-Panel">
<form name="Form-MailUs" id="Form-MailUs" method="post" action=<?php echo (get_template_directory_uri() . "/contactus/html_form_send.php"); ?> >
<div class="">
<input type="text" class="form-control mailflds" name="first_name" id="first_name" maxlength="50" size="30" placeholder="Name">
</div>
<br>
<div>
<input type="text" class="form-control mailflds" name="email" id="email" maxlength="80" size="30" placeholder="E-Mail">
</div>
<br>
<div>
<input type="text" class="form-control mailflds" name="telephone" id="telephone" maxlength="30" size="30" placeholder="Mobile / Landline Number">
</div>
<br>
<div>
<textarea name="comments" id="comments" class="form-control mailflds" maxlength="1000" cols="25" rows="6" placeholder="Enter your comments"></textarea>
</div>
<br>
<div>
<Button class="btn btn-primary btn-block btn-custom" id="Submit_MailUs" name="Submit_MailUs">Submit</Button>
</div>
<div id="ack-mailus-err" style="color:red;font-family:garamond;font-size:18px;text-align:center;">
</div>
</form>
</div>
<div id="ack-mailus" style="color:green;font-family:garamond;font-size:18px;text-align:center;">
</div>
</div>
</div> <!-- end of contactus panel -->
</div>
</div>
CSS code
.contactus-panel{
position:fixed;
bottom:0;
z-index:9999;
}
.contactus_footer{
position:relative;
/*z-index: 10; */
/*float:right; */
text-align: left;
line-height: 1.5;
cursor: pointer;
padding: 5px 2px 4px 15px;
font-family:'Raleway', garamond, sans-serif;
font-size:20px;
background-color: #084000;
-webkit-border-radius: 10px 10px 0 0;
-moz-border-radius: 10px 10px 0 0;
border-radius: 10px 10px 0 0;
position: relative;
width: 100%;
vertical-align:center;
float:left;
}
.contactus_footer a {
color: #fff;
}
.contactus-extended{
background-color:#fff;
padding-top:20px;
padding-bottom:20px;
}
slideToggle() is jQuery method. Please using jQuery.
https://jsfiddle.net/pgqnjdvp/
I was able to resolve both parts of the issue.. can't believe it was that simple.. for part 2: I just added width exclusively to the container and it ceased to exist... also resolved part 1 of the issue.. added float and vertical-align:middle to both the text and img element styling too in addition to the div class and got the desired result.
I'd like to add login to right top corner, just like most forums have. I split my container on left/right, but the right side wouldn't work.
<div id="header">
<div class="container">
<div class="leftbox">
LOGO image
</div>
<div class="rightbox">
<form class="form-signin">
<h2 class="form-signin-heading">Please sign in</h2>
<input type="email" id="inputEmail" class="form-control" placeholder="Email address" required autofocus>
<input type="password" id="inputPassword" class="form-control" placeholder="Password" required>
<div class="checkbox">
<label>
<input type="checkbox" value="remember-me"> Remember me
</label>
</div>
<button class="btn btn-lg btn-primary btn-block" type="submit">Sign in</button>
</form>
</div>
css
body {
background-color: #E3E3E3;
font-size: 12px;
}
h1,
h2,
h3,
h4,
h5,
h6 {
color: #4f4f4f;
font-family: "BebasNeue", sans-serif;
margin: 0;
font-weight: normal;
}
/* header/navbar*/
#header{
background-color: #2C2C2C;
color: #FFFFFF;
padding-top: 30px;
}
#header.leftbox{
float:left;
display: inline;
}
#header.rightbox{
float:right;
display: inline;
width: 200px;
}
here is my jsfiddle: https://jsfiddle.net/otj12jno/
You've made one mistake. There should be a space between id and class in css.
#header.leftbox{}
This code calls element which id="header" and class="leftbox"
#header .leftbox{}
This code calls element which class="leftbox" and his parent (or grandparent etc.) has id="header"
It might be easier to use position: absolute on the button class and then set position as follows:
#signinbtnClass {
position : absolute;
top : 0 px // or below the header or banner image
left :10px;
}