Added margin-left to label so to move "remember"....

deronsizemore · 2006-08-16 13:42:46

I added a margin-left to label so I could move “remember” out away from the checkbox a little, and in doing so, I’ve moved the labels for my contact form also (ex: Name, Email, Comment). How can I style the label so I can move “remember” away from the checkbox, yet still leave Name, Email, and Comment flush against the left side fo the input boxes?

elduderino · 2006-08-16 13:53:20

Hello,

If you’re using the default comment_form thats table based you could give the tr or td that surrounds the
<code><txp:comment_remember /></code> tag in the form an id such as <code>tr class=“remember”</code> and then just apply style to that in your css using <code>tr.remember</code>

It shouldnt disrupt the other labels then.

(ive customised my comments_form so it doesnt use tables so i might have got the tr td bit a little wrong but hopefully you get the idea-just apply a class to whatevers surrounding the comment_remember tag in your form and style that with css!)

Hope that helps!

Last edited by elduderino (2006-08-16 14:05:38)

deronsizemore · 2006-08-16 14:10:20

Hi,

I took the tables out of mine also. I probably am going about this the wrong way, but it works currently so I’ve stuck with it. Anyway, here is the code I’m using for my contact form:

<label for=“name”>Name:</label>
<txp:comment_name_input />
<label for=“email”>E-Mail:</label>
<txp:comment_email_input />
<label for=“comment”>Message:</label>
<txp:comment_message_input /> 
<txp:comment_remember />   <txp:comment_preview /><txp:comment_submit />
<div id=“comment_disclaimer”>
All fields are required to process the form.
Please refrain from using profanity in your comments. Any comment containing profanity will not be published.
</div>
</code>
 
I tried to use a class for the p tags and style them that way but didn’t work…they were just being overrode by the label style.

elduderino · 2006-08-16 14:56:17

allows you to isolate and apply style to just the label. Its a little clumsy but it works!

Hope it helps!

deronsizemore · 2006-08-16 15:12:09

I’m still a little confused. I am not seeing how I can style just the label with the code you supplied above. When I used it, nothing changed in my html (when I view source) from what I had and the 5px of margin-left I added to label in the css still applied to name, email, comments as well as ‘remember’ checkbox. Any Ideas?

Last edited by deronsizemore (2006-08-16 15:13:49)

elduderino · 2006-08-16 15:27:27

HI,

I managed to apply style to just the name, email and comments labels and excluded the remember ( or forget in my case) using this:

CSS:
<code>
p.label { margin-left: 10px; background-color: red;}
</code>

Last edited by elduderino (2006-08-16 15:33:13)

deronsizemore · 2006-08-16 15:47:19

I think I might have confused you on what I was trying to do in my original post.

Here is the site with comments and everything. <a href=“http://www.kentuckygolfing.com/article/15/this-is-another-test#comment”>http://www.kentuckygolfing.com/article/15/this-is-another-test#comment</a>

If you look at the comment form, you can see that the words “Name”, “Email”, “Comments”, are moved to the right 5px (this is because I’ve got this CSS style: label {margin-left: 5px;} ) I want to make it where the words name, email, comments DO NOT have the margin added. I added the margin-left to label because I wanted to move the words “remember” out away fromt the checkbox a little as it was really close, but in doing so, not only did it move the words “remember” away from the checkbox 5px, but it moved the words Name, Email, and Comments to the right 5px. I’m wondering how I can get these words to align back up left directly inline with the input boxes for each of them and not have that extra 5px margin there (for Name, Email, Comments only).

Am I confusing you…or am I just confused on what you’re telling me? lol :o)

Thanks

EDIT: Or, maybe to explain it a different way. I’m looking to ONLY add the margin-left to the <code><txp: remember /> </code> tag. and leave the Name, Email, Comments magin-left alone.

Last edited by deronsizemore (2006-08-16 17:04:11)

elduderino · 2006-08-16 18:54:41

<QUOTE>
I’m looking to ONLY add the margin-left to the <txp: remember /> tag. and leave the Name, Email, Comments magin-left alone.</QUOTE>

so, using the method i outlined above you need to surround the tag in question with a p class and apply style to it in your css, like so:

<code>
<txp:comment_remember />
</code> and some css:
<code>
p.label { margin-left: 5px;}
</code>

This works on my page. I was just using the margin on the name, email and comments as an example of how you can isolate the elements. Sorry if i confused things!

Last edited by elduderino (2006-08-16 18:55:03)

deronsizemore · 2006-08-16 19:13:04

Ah, I do see what you’re saying now, but the margin that it’s adding is in the wrong place. So, this is what I’ve got now:

<code>
<label for=“name”>Name:</label>
<txp:comment_name_input />
<label for=“email”>E-Mail:</label>
<txp:comment_email_input />
<label for=“comment”>Message:</label>
<txp:comment_message_input />
<txp:comment_remember />
<txp:comment_preview /><txp:comment_submit />
</code>

<code>
p.label {
margin: 15px 0 15px 5px;
}
</code>

The margin on p.label does add 5px to the left, but it adds the 5px to the left of the checkbox and “remember” both. See how “remember” is still nearly touching the checkbox?

<a href=“http://www.kentuckygolfing.com/article/15/this-is-another-test#comment”>http://www.kentuckygolfing.com/article/15/this-is-another-test#comment</a>

NyteOwl · 2006-08-16 23:08:57

You need to apply it only to the label itself within the P. Try

p.label label {
margin: 15px 0 15px 5px;
}

While it works (usually) it’s not considered a good practice to name css classes and id’s the same as html tags as it can be confusing (maybe call the class “keepinfo” or some such).

Last edited by NyteOwl (2006-08-16 23:13:34)

deronsizemore · 2006-08-16 23:52:59

Awesome, Thanks! I didn’t realize I could do that in the stylesheet, so I probably never would have tried it.

Mary · 2006-08-17 00:22:23

Er…

input#remember, input#forget {
margin-right: 5px;
}

?

Textpattern CMS

Textpattern CMS support forum

#1 2006-08-16 13:42:46

Added margin-left to label so to move "remember"....

#2 2006-08-16 13:53:20

Re: Added margin-left to label so to move "remember"....

#3 2006-08-16 14:10:20

Re: Added margin-left to label so to move "remember"....

#4 2006-08-16 14:56:17

Re: Added margin-left to label so to move "remember"....

#5 2006-08-16 15:12:09

Re: Added margin-left to label so to move "remember"....

#6 2006-08-16 15:27:27

Re: Added margin-left to label so to move "remember"....

#7 2006-08-16 15:47:19

Re: Added margin-left to label so to move "remember"....

#8 2006-08-16 18:54:41

Re: Added margin-left to label so to move "remember"....

#9 2006-08-16 19:13:04

Re: Added margin-left to label so to move "remember"....

#10 2006-08-16 23:08:57

Re: Added margin-left to label so to move "remember"....

#11 2006-08-16 23:52:59

Re: Added margin-left to label so to move "remember"....

#12 2006-08-17 00:22:23

Re: Added margin-left to label so to move "remember"....

Board footer