Please, consider the following CSS code:
body {
font-family: 'Open Sans', sans-serif;
font-size: 16px;
font-weight: normal;
}
.main-headline {
font-family: 'Open Sans', sans-serif;
font-size: 3.1875em;
font-weight: 700;
text-align: center;
margin-bottom: 0em;
margin-top: 5em;
}
.h1-sub {
font-family: 'Open Sans', sans-serif;
font-size: 1.3125em;
font-weight: 400;
text-align: center;
margin-top: 0.3125em;
.container_12 .grid_12 {
width:58.75em;
}
And HTML:
<header class="container_12 grid_12 alpha omega">
<div class="grid_12 alpha omega">
<hgroup>
<h1 class="main-headline">Some text</h1>
<p class="h1-sub grid_12 alpha omega">Some text</p>
</hgroup>
</div>
</header>
The problem is:
.h1-sub class takes weird width. There is a body font-size 16px and container: 58.75em which should be equal 940px. But instead it I receive 1234px in width. I've made a conclusion that my width calculates from .h1-sub font-size which is 1.3125em or 21px.
Does 1em value can be inherit not only from body font-size?
Notice that nothing happened to .main-headline class where is font-size has been overridden also.
This line of CSS:
.container_12 .grid_12 { width:58.75em; }
Is trying to select anything with a class of .grid_12 inside .container_12.
That is therefore trying to give the width to the p tag. If that's not what you're trying to do, you need to just declare:
.container_12 { width:58.75em; }
Also you forgot to close the .h1_sub styles with a } at the end:
.h1-sub {
font-family: 'Open Sans', sans-serif;
font-size: 1.3125em;
font-weight: 400;
text-align: center;
margin-top: 0.3125em; }
Here is a working fiddle: http://jsfiddle.net/B893S/
Related
I have the below style:
.field.field--name-name.field--type-string.field--label-hidden.field__item.quickedit-field {
position: relative;
z-index: 200;
display: block;
float: left;
max-width: 200px;
background: #a02853;
font-family: 'Open Sans', Arial, "Helvetica Neue", Helvetica, sans-serif;
color: #FFF;
text-decoration: none;
text-transform: uppercase;
font-weight: bold;
line-height: 100%;
padding: 5px;
font-size: small;
I want to apply this to div in /blog/* pages alone. How to do this?
The div I'm trying to apply this to:
<div data-quickedit-field-id="taxonomy_term/2695/name/en/default" class="field field--name-name field--type-string field--label-hidden field__item quickedit-field">Term1</div>
we have several solutions for this question. first of all you have to set unique class into body tag and call the body class before .field.field--name-name.field--type-string.field--label-hidden.field__item.quickedit-field
Secondly, you have to use a specific id for element and you use it in style but I don't recommend using it.
I have stumbled across a problem that I can not seem to solve in any way, maybe I am using divs in a wrong way?
.greeting h1 {
font-family: 'Raleway', sans-serif;
font-weight: lighter;
font-size: 100px;
text-align: center
}
.greeting h2 {
font-family: 'Raleway', sans-serif;
font-weight: lighter;
font-size: 35px;
line-height: 0px;
text-align: center
}
<div class="greeting">
<h1>Hi.</h1>
<h2>Select a group</h2>
</div>
This is the outcome:
I want to decrease the space between my <h1> and <h2>, and I found out that the way to do that was to set line-height in h1 to 0px.
But as I do that my entire page moves up like so:
I want to keep the text at the same position as it was before I change the line-height. I am suspecting that I am using the div class function wrong. This is more of theoretical question.
headings h1 to h6 have margin by default, so you need to reset it, setting: margin:0.
.greeting h1 {
font-family: 'Raleway', sans-serif;
font-weight: lighter;
font-size: 100px;
text-align: center;
margin: 0
}
.greeting h2 {
font-family: 'Raleway', sans-serif;
font-weight: lighter;
font-size: 35px;
text-align: center;
margin: 0
}
<div class="greeting">
<h1>Hi.</h1>
<h2>Select a group</h2>
</div>
HTML heading tags have some default CSS values applied in most browsers. Following are the values of h1 and h2 that are applied to them by default, so you need to override the margin-bottom of h1 and margin-top of h2 if you want to decrease the spacing between your h1 and h2.
h1 {
display: block;
font-size: 2em;
margin-top: 0.67em;
margin-bottom: 0.67em;
margin-left: 0;
margin-right: 0;
font-weight: bold;
}
h2 {
display: block;
font-size: 1.5em;
margin-top: 0.83em;
margin-bottom: 0.83em;
margin-left: 0;
margin-right: 0;
font-weight: bold;
}
.greeting h1 {
font-family: 'Raleway', sans-serif;
font-weight: lighter;
font-size: 100px;
text-align: center;
margin-bottom: 0;
}
.greeting h2 {
font-family: 'Raleway', sans-serif;
font-weight: lighter;
font-size: 35px;
line-height: 0px;
text-align: center;
margin-top: 0;
}
<div class="greeting">
<h1>Hi.</h1>
<h2>Select a group</h2>
</div>
Just add the following lines
.greeting h1 {
margin:0px;
line-height:35px;
}
.greeting h2 {
margin:0px;
line-height:35px;
}
If you just want you to assign the margin only for this block you do not need to define it globally you can just do the same this using inline CSS
<h1 style="margin-bottom: 0">Hi</h1>
<h2 style="margin-top: 0">Select a group</h2>
I have a h1 in my header and in another section of the document. I'm told this effects SEO but I digress, i'm just learning by copying other peoples pages and attempting to style them as they did without looking at their code.
So my h1 styles fine but when i target h1 inside a section class the style doesn't apply.
h1 {
text-align: center;
font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
font-size: 1.7em;
font-weight: 400px;
margin: 1px auto 13px;
}
.header h1 {
border-top: 3px double #232323;
padding-top: 10px;
font-family: inherit;
}
<body>
<h1>This is a header</h1>
<section class="header">
<h1>This is a header</h1>
</section>
</body>
My guess is that the class.h1 rule is overriding the h1 rule. If this is the case, how can I apply my top border to my h1, while still inheriting the h1 properties.
Apologies if I am murdering any CSS nomenclature.
The inherit keyword specifies that a property should inherit its value from its parent element. So the parent is section, and there is no rules for font on section. Remove the inherit.
h1 {
text-align: center;
font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
font-size: 1.7em;
font-weight: 400;
margin: 1px auto 13px;
}
.header h1 {
border-top: 3px double #232323;
padding-top: 10px;
}
<body>
<h1>This is a header</h1>
<section class="header">
<h1>This is a header</h1>
</section>
</body>
There doesn't seem to be much wrong with your code. Indeed if you declare global h1 properties they will be used for all h1's on your site.
If you create specific rules then those will apply to any h1 which meets that rule but the other properties will be inherited (if they are different).
I updated the fiddle here: http://jsfiddle.net/lharby/ukhua6jm/2/
Example:
h1 {
/* global porperties */
text-align: center;
font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
font-size: 1.7em;
font-weight: 400px;
margin: 1px auto 13px;
}
.photography h1 {
border-top: 3px double #232323; /* new property */
padding-top: 10px;
font-size: 2em; /* overwrite existing property */
}
Use !important on the rules that you want to use to override whatever rules the <section> applies to your <h1>.
For instance, if you want to apply the fonts on your original h1 to the one inside the section:
h1 {
text-align: center;
font-family: Helvetica Neue, Helvetica, Arial, sans-serif !important;
font-size: 1.7em;
font-weight: 400px;
margin: 1px auto 13px;
}
Demo: http://jsfiddle.net/gcj6xLL0/
This might be a stupid question, but it has been troubling me a lot.
I have made 4 boxes and each box should have the text starting from a same line, but sometimes (when the text is less), it starts from the bottom.
Here's the image displaying it:
Ideally, it should start from the top and go till the bottom. Like this:
What changes should I make in my CSS code?
CSS :-
.show-text {
margin-left: 264px;
float: left;
font-size: 15px;
width: 15em;
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
line-height: 18px;
color: #606060;
}
.show-text-col-2 {
display: inline-block;
margin-left: 20px;
font-size: 15px;
width: 15em;
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
line-height: 18px;
color: #606060;
}
.show-text-col-3 {
display: inline-block;
margin-left: 20px;
font-size: 15px;
width: 15em;
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
line-height: 18px;
color: #606060;
}
.show-text-col-4 {
display: inline-block;
margin-left: 20px;
font-size: 15px;
width: 15em;
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
line-height: 18px;
color: #606060;
}
My JSFiddle :- http://jsfiddle.net/xa0obvyr/
Because you are using inline-block, you need to specify vertical alignment if the default value doesn't suit you. In this case, you need
show-text-col-4 {vertical-align: top;}
However, your setup is less than ideal. Rather than floating the first time with a large left margin, I'd recommend you use a centered wrapper element instead, and style each of the columns in the same way.
This is what you need? with one CSS class and automatic 1/4 width of each column.
Please check the demo: http://jsfiddle.net/sk1rqxeo/
.show-text-col {
float: left;
font-size: 12px;
font-family: Arial, Helvetica, sans-serif;
line-height: 18px;
color: #606060;
width:24.5%;
display: inline-block;
}
You will need to set width to <p> tag
FIDDLE DEMO
.show-text-col-3 p{
width:200px;
}
I have something like this:
My css is:
td{
font-size: medium;
font-family: Arial, Helvetica, sans-serif;
color: #271D01;
text-align: justify;
line-height: 1.3em;
font-weight: bold;
font-variant: small-caps;
min-width: 100px;
}
And my gsp:
...
<g:each var="it3" in="${program[it2.id]}">
<td id="c1">
<div id="c1_div"><u><g:formatDate format="HH:mm" date="${it3.prog_start}"/> - <g:formatDate format="HH:mm" date="${it3.prog_end}"/></u></div>
<div> </div>
<div>${it3.prog_title}</div>
</td>
</g:each>
...
How can i fix the hour-range in the div, so that no matter what size 'it3.prog_title' takes, the hour will display always in the same position, and also the title starting in same position. I'm expecting to do this via-css.
Have you tried vertical-align on the table cell?
td{
font-size: medium;
font-family: Arial, Helvetica, sans-serif;
color: #271D01;
text-align: justify;
line-height: 1.3em;
font-weight: bold;
font-variant: small-caps;
min-width: 100px;
vertical-align: top;
}
You would want to set vertical-align: top on your TD's, and then just setup classes for your div's to have a margin-top or top style to get the spacing you want between div's. This would also get rid of your spacer div and use CSS to position it how you want. And while I'm at it, removed the <u> tag as well and replaced it with CSS.
CSS:
td {
font-size: medium;
font-family: Arial, Helvetica, sans-serif;
color: #271D01;
text-align: justify;
line-height: 1.3em;
font-weight: bold;
font-variant: small-caps;
min-width: 100px;
vertical-align: top;
}
.time {
margin-top: 10px;
text-decoration: underline;
}
.title {
margin-top: 20px;
}
GSP:
...
<g:each var="it3" in="${program[it2.id]}">
<td id="c1">
<div id="c1_div" class="time"><g:formatDate format="HH:mm" date="${it3.prog_start}"/> - <g:formatDate format="HH:mm" date="${it3.prog_end}"/></div>
<div class="title">${it3.prog_title}</div>
</td>
</g:each>
...
You could make the hour-range relatively positioned to the top of the <td>