I need to align label and content in a form but no code I tried worked.
Expected
currently look like
The css code I created is this:
.crm-webform, .crm-webform-label, .crm-webform-fieldset, .crm-webform-input-label, .crm-webform-group, .crm-webform-input, .crm-webform-label-content {font-family: Open sans, 'Open sans', Lato, sans-serif; font-size:14px; color:black; margin: 0px 0px 3px 0px; }
.crm-webform-input {height: 32px; } .crm-webform-icon {height: 22px; line-height: 30px;} #LEAD_UF_CRM_5BEF2B8E126AA { padding: 1px 3px 1px 3px; height:60px; resize: both;
overflow: auto;} label[for=LEAD_UF_CRM_1550937652], label[for=LEAD_UF_CRM_1550937755] {height:0px; color:transparent; opacity:0; margin: 0px 6px 0px 6px;}
.flexible-middle-width, .crm-webform-header-container {background-color:transparent; background-opacity:0.4;}
/*#bx_form_iframe_6 , .crm-webform-block .bx_form_iframe_12 */
.*, * {background-color:transparent; background-opacity:0.4; font-family:Open-sans, Open sans, 'Open sans', Lato, sans-serif; color:black; }
h1, .crm-webform-header {color:black; font-family:Open-sans, 'Open sans', Lato, sans-serif; font-weight: bold; size:26px; letter-spacing: 1px; margin: 6px 0px 0px 0px;}
.crm-webform-input {font-weight:600; } .crm-webform-checkbox-container, .crm-webform-checkbox-radio, .crm-webform-checkbox-name {display:inline; font-family:Open-sans,'Open sans', Lato, sans-serif; font-size:14px; color:black; padding: 0px 4px 0px 9px;}
If you set these attributes to this class .crm-webform-field-string (or create another class as well) it will work:
.crm-webform-field-string {
display: flex;
align-items: center;
}
The rest is only to set a margin-right to the label container.
For example:
margin-right: 30px;
Related
In the first example below, the id="A_2" has a width equal to its content, while the one second, it id="A_4" has a width equal to its parent. How can I change the second snippet to have width equal to its content?
This snippet is from Google
Play Store Code
#H1_1 {
box-sizing: border-box;
color: rgb(51, 51, 51);
font-family: Roboto, UILanguageFont, Arial, sans-serif;
font-size: 28px;
font-weight: 100;
height: 75px;
line-height: 39.2000007629395px;
min-height: 37px;
min-width: 680px;
padding: 5px;
position: relative;
text-align: left;
width: 1088px;
perspective-origin: 544px 37.5px;
transform-origin: 544px 37.5px;
border: 0px none rgb(51, 51, 51);
font: normal normal 100 normal 28px/39.2000007629395px Roboto, UILanguageFont, Arial, sans-serif;
margin: 0px 50px 0px 248px;
outline: rgb(51, 51, 51) none 0px;
padding: 5px;
}/*#H1_1*/
#A_2 {
color: rgb(51, 51, 51);
font-family: Roboto, UILanguageFont, Arial, sans-serif;
font-size: 28px;
font-weight: 100;
line-height: 39.2000007629395px;
text-align: left;
text-decoration: none;
font: normal normal 100 normal 28px/39.2000007629395px Roboto, UILanguageFont, Arial, sans-serif;
}/*#A_2*/
#A_3 {
color: rgb(85, 85, 85);
display: block;
font-family: Roboto, UILanguageFont, Arial, sans-serif;
font-size: 16px;
font-weight: 300;
height: 22px;
line-height: 22.3999996185303px;
padding-bottom: 4px;
text-align: left;
text-decoration: none;
width: 1078px;
font: normal normal 300 normal; 16px/22.3999996185303px Roboto, UILanguageFont, Arial, sans-serif;
padding: 0px 0px 4px;
}
<h1 id="H1_1">
Cricket Fever Get cool games + Cricket apps
</h1>
Here is
My Code
#H1_1 {
display: flex;
height: 60px;
min-height: 37px;
min-width: 680px;
position: relative;
width: 1088px;
align-items: stretch;
justify-content: flex-start;
flex-flow: column nowrap;
font: normal normal bold normal 32px/normal Roboto, UILanguageFont, Arial, sans-serif;
margin: 0px 50px 0px 248px;
padding: 5px;
}/*#H1_1*/
#A_2 {
color: rgb(85, 85, 85);
height: 34px;
text-decoration: none;
align-self: stretch;
border: 0px none rgb(85, 85, 85);
font: normal normal 100 normal 28px/normal Roboto, UILanguageFont, Arial, sans-serif;
}/*#A_2*/
#A_3 {
box-sizing: border-box;
color: rgb(85, 85, 85);
height: 23px;
text-decoration: none;
align-self: stretch;
border: 0px none rgb(85, 85, 85);
font: normal normal 300 normal 16px/normal Roboto, UILanguageFont, Arial, sans-serif;
margin: 3px 0px 0px;
padding: 0px 0px 4px;
}/*#A_3*/
<h1 id="H1_1">
<a id="A_2" href="">Cricket Fever</a> <a id="A_3" href="">Get cool games + Cricket apps</a>
</h1>
If I understand correctly, you want a#A_4 to be as width as it's content... right?
Then remove the display: block from it.
To make the link appear on a new line, simply add a line break to it.
Updated Codepen
The <h1> element has the same width as it content, or bigger if you define it.
There are inline elements and block elements. Inline elements a width equal to its content, the block elements use all the available width.
Since you defined 'A_4' as block, it will use all the available width.
Element <a> is an inline element, so it will have the same width as it content.
Remove the 'display:block' from the <a> elements, and all the fixed width or min-width values. To separate your link for different lines, separate then using <br/> element.
EDIT:
example:
HTML
<h1 id="H1_1">
<a id="A_2" href="">Cricket Fever</a>
<br/>
<a id="A_3" href="">Get cool games + Cricket apps</a>
</h1>
CSS
#H1_1 {
background-color: #000;
margin: 0px 50px 0px 248px;
padding: 5px;
}/*#H1_1*/
#A_2 {
background-color: #666;
color: rgb(85, 85, 85);
height: 34px;
text-decoration: none;
}/*#A_2*/
#A_3 {
background-color: #999;
color: rgb(85, 85, 85);
text-decoration: none;
margin: 3px 0px 0px;
padding: 0px 0px 4px;
}/*#A_3*/
I was toying with some made code on codepen, trying to get used to html/css since I am not really comfortable on the positioning. This must be pretty silly but I can't make it work.
HTML:
<div id="hh">
<h1>Wacom Hover Effect</h1>
</div>
<div id="cl">
Read More
Learn More
Read Article
Download
</div>
CSS:
*, :before, :after{ #include box-sizing('border-box'); }
body{ padding: 1em; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; background: #eee; }
#hh{
position:absolute;
left:50%
}
h1{
position:relative;
left:-50%;
font: 300 3em/1em 'Open Sans', sans-serif;
border: solid 0.00019em #000;
margin-bottom: 0.2em;
padding: 0.4em 0.2em 0.4em 0.2em;
background-color:lightblue;
border-radius:0.2em;
}
#cl{
clear:both;
}
.button,
[class*="button-"]{
position: relative;
display: inline-block;
overflow: hidden;
float:left;
margin: 0 1em 1em 0;
padding: 0 4em;
height: 3.5em;
font: 300 1em/3.5em 'Open Sans', sans-serif;
text:{
decoration: none;
shadow: 0 1px 3px rgba(black, .35);
}
letter-spacing: .08em;
color: #fff;
background: #0090C0;
border: solid 1px #fff;
border-radius: 2px;
#include transition(.35s ease all);
}
}
There is some irrelevant code after that about hovering etc.
The result is this: http://codepen.io/roygbiv/full/FjLcA
So I wanted h1 at center and I found here the method of putting #hh absolute, left:50% and then h1 relative left:-50%. And it screwed up the positioning.
What I want is h1 on center top, then the 4 "a"s under it (not center, just not overlapping).
Putting position: absolute on an element makes all other elements ignore it. This can be solved by putting display: inline-block on the h1 and text-align: center on #hh:
Check new pen: http://codepen.io/anon/pen/kovaC
#hh {
text-align: center;
}
h1{
font: 300 3em/1em 'Open Sans', sans-serif;
border: solid 0.00019em #000;
margin-bottom: 0.2em;
padding: 0.4em 0.2em 0.4em 0.2em;
background-color:lightblue;
border-radius:0.2em;
display: inline-block;
}
inline-block makes the element's box adapt to the width of its text. I presume the desired look of the header is for the blue box to not be 100% width, which is otherwise the case with h1 and other block elements.
i have done the following modification in css and it is working as expected:
#hh{
text-align: center;
margin-left:auto;
margin-right:auto;
width:40%;
}
h1{
font: 300 3em/1em 'Open Sans', sans-serif;
border: solid 0.00019em #000;
margin-bottom: 0.2em;
padding: 0.4em 0.2em 0.4em 0.2em;
background-color:lightblue;
border-radius:0.2em;
}
I'm using a pre-made email template with a simple CSS in the header. It defines all anchor tags to be underlined. I would like to override that in one use-case. When I created a class for that case called 'top-header-links', while it does override text colour, it wont override the underline styling.
<style type="text/css">
p { padding: 0; margin: 0; }
h1, h2, h3, p, li { font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; }
td { vertical-align:top;}
ul, ol { margin: 0; padding: 0;}
a {
color: #455670; text-decoration: underline;
}
.title, .date {
text-shadow: #8aa3c6 0px 1px 0px;
}
.title span {
font-weight: bold;
}
.textshadow {
text-shadow: #ffffff 0px 1px 0px;
}
.trxtshadow-2 {
text-shadow: #768296 0px -1px 0px;
}
.content-item p{
font-size: 12px; line-height: 20px; font-weight: normal; color: #56667d; margin: 0; margin-bottom: 10px;
}
.content-item h3{
margin:0; margin-left: 17px; padding:0; font-size: 18px; font-weight: normal; color:#324258 !important;
}
.footer p{
margin:0; font-size: 10px; font-weight: bold; color: #96a2b3; font-family: Arial; line-height: 18px;
}
.top-header p{
margin: 0; font-size: 10px; font-weight: normal; color: #777777; line-height: 15px !important;
}
.top-header-links p{
margin: 0; font-size: 10px; color: #aaaaaa; text-decoration:none !important;
}
</style>
</head>
<body marginheight="0" topmargin="0" marginwidth="0" leftmargin="0" background="" style="margin: 0px; background-color: #eee; background-image: url(''); background-repeat: repeat;" bgcolor="">
<table cellspacing="0" cellpadding="0" align="center" width="500">
<tbody>
<tr>
<td valign="middle" align="center" height="78" style="vertical-align: middle;" class="top-header">
<multiline label="Open in your Web Browser link" class="top-header-links">
<p >Are you having trouble viewing this Newsletter? Click Here to open this newsletter in your web browser. To let us know your mail client is not compatible with our newsletter, <a href="mailto:info#beyondzeroemissions.org.au"</a>Click Here.</p>
</multiline>
</td>
</tr>
</tbody>
</table>
This should do the trick:
.top-header-links a{
margin: 0; font-size: 10px; color: #aaaaaa; text-decoration:none !important;
}
The image slider menu items are shifted downward 5px on every page the blog page, where they are positioned correctly. I can see the shift in Firebug but do not know where in CSS to fix.
http://drkateklemer.com
Thanks!
Your problem is in line 662 of your style.css for the organic natural summer theme. Change the margins to 0px, going from this:
#contenthome h1, #content h1 {
color: #333333;
font-size: 32px;
font-family: Arial, Helvetica, sans-serif;
font-weight: bold;
text-transform: normal;
letter-spacing: -1px;
margin: 5px 0px 5px 0px;
padding: 0px;
line-height: 32px;
}
To this:
#contenthome h1, #content h1 {
color: #333333;
font-size: 32px;
font-family: Arial, Helvetica, sans-serif;
font-weight: bold;
text-transform: normal;
letter-spacing: -1px;
margin: 0px;
padding: 0px;
line-height: 32px;
}
Note: Tested using Developer Tools for Chrome.
wordpress is loading the images into the content block, i dont think it your css just how images are accessed through your template
#contenthome h1, #content h1 {
color: #333333;
font-size: 32px;
font-family: Arial, Helvetica, sans-serif;
font-weight: bold;
text-transform: normal;
letter-spacing: -1px;
margin: 0px 0px 0px 0px;
padding: 0px;
line-height: 32px;
}
So I have a fairly simple vertical CSS menu based off of UL.
<ul class="vertnav">
<li>Item1</li>
<li>Item2</li>
<li>Selected</li>
</ul>
I want three basic colors (say tan for default LI, orange for VERTNAVDOWN, and red for A:HOVER. However I can't seem to get the vertnavdown class to inherit right, and the .vertnav li a:visited overrides it every time. if I use !important to force it through I can't seem to also get the hover to work.
Any suggestions? I thought I understood inheritance in CSS but I guess I don't.
.vertnav{
list-style: none;
margin: 0px;
width: 172px;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 11px;
padding: 0px 0px 0px 0px;
margin: 0px 0px 0px 0px;
text-align: left;
height: 45px;
}
.vertnav li{
margin: 0px;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 11px;
border-bottom: 0px none;
border-right: 0px none;
border-top: 1px solid #fff;
border-left: 0px none;
text-align: left;
height: 45px;
width: 172px;
padding: 0px 0px 0px 0px;
margin: 0px 0px 0px 0px;
}
.vertnav li a{
display: block;
text-align: left;
color: #666666;
font-weight: bold;
background-color: #FFEEC1;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 11px;
text-decoration: none;
padding-top: 10px;
padding-right: 0px;
padding-bottom: 0px;
padding-left: 15px;
height: 45px;
}
.vertnav li a:visited{
display: block;
text-align: left;
color: #666666;
background-color: #FFEEC1;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 11px;
font-weight: bold;
text-decoration: none;
padding-top: 10px;
padding-right: 0px;
padding-bottom: 0px;
padding-left: 15px;
height: 45px;
}
.vertnav li a:hover{
color: white;
background-color: #ffbf0c;
font-family: Verdana, Arial, Helvetica, sans-serif;
height: 45px;
text-decoration: none;
font-weight: bold;
}
.vertnavdown a
{
display:block;
color: #FFF;
background-color: #ff9000;
}
.vertnavdown a:hover
{
background-color: #ffbf0c;
}
^^^^^^^^^^^^^ Edited to add CSS. ^^^^^^
It would help if you could post the css as well.
What you normally need is something like this
<ul id="nav">
<li><a>one</a></li>
<li class="active"><a>two</a></li>
</ul>
the css would be:
#nav li{
color: red;
}
#nav li a:visited{
color: green;
}
#nav li.active a{
color: blue;
}
you need to be more specific with the active css naming.
.vertnav li a:visited is very specific, and in CSS, more specific overrides less specific, even if the less specific CSS comes later in the inheritance chain.
.vertnavdown on it's own will always be overridden by .vertnav li a:visited -- the best solution is to be more specific with your description of .vertnavdown.
Changing .vertnavdown a and .vertnavdown a:hover to
.vertnav ul li a.vertnavdown .vertnav ul li a.vertnavdown:hover will fix your problem.
EDIT:
Smacks head Apologies, I should have noted that you were trying to fix a problem with the :visited links ... Since you haven't specified a style for a.vertnavdown:visited it inherits the style of .vertnav a:visited.
The solution then is to add a.vertnavdown:visited to whatever style declaration you want it to inherit from. That should fix the problem.
Try with .vertnav li a:visited .vertnavdown