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>
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'm styling the section headings for a website and I can't quite get a span symbol and a H1 heading to align properly. This is how it looks on the site -
Annoyingly, when I've come to include the code in this snippet the two elements seem to align. When I check the console the span element seems to have a buffer around the symbol which prompts it slightly out of line as you can see in the image. I'm using bootstrap for the site, could this be a hidden rule that I'm missing?
.secthead span {
font-weight: bolder;
font-size: 80px;
font-family: 'Gotham-Medium', sans-serif;
}
.secthead h1 {
font-size: 50px;
font-family: 'Gotham-Medium', sans-serif;
color: #000;
text-align: left;
padding: 0 0 20px 20px;
}
.secthead h1, span {
display: inline-block;
}
<div class="secthead"><span style="color: rgb(255,128,55);">+</span><h1>Who We Are</h1></div>
Just use vertical-align: middle; in both tag & remove padding from bottom in h1 tag. check updated snippet below..
.secthead span {
font-weight: bolder;
font-size: 80px;
font-family: 'Gotham-Medium', sans-serif;
}
.secthead h1 {
font-size: 50px;
font-family: 'Gotham-Medium', sans-serif;
color: #000;
text-align: left;
padding: 0 0 0px 20px;
}
.secthead h1, span {
display: inline-block;
vertical-align: middle;
}
<div class="secthead"><span style="color: rgb(255,128,55);">+</span><h1>Who We Are</h1></div>
You could use a height and line-height.
.secthead span {
font-weight: bolder;
font-size: 80px;
font-family: 'Gotham-Medium', sans-serif;
}
.secthead h1 {
margin: 0;
font-size: 50px;
font-family: 'Gotham-Medium', sans-serif;
color: #000;
text-align: left;
padding: 0 0 20px 20px;
line-height: 92px;
}
.secthead h1, .secthead span {
height: 92px;
display: inline-block;
vertical-align:top;
height: 92px;
}
<div class="secthead">
<span style="color: rgb(255,128,55);">+</span>
<h1>Who We Are</h1>
</div>
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>
This is what my CSS looks like on the page.
<!DOCTYPE html>
<html>
<head>
<style>
p.addresscenter {
background-color: none;
color: #333;
font-family: Lato, sans-serif;
font-size: 15px;
font-weight: 400;
font-style: normal;
line-height: 1.2;
margin: 0;
text-align: center;
white-space: pre;
}
p.endtagbold {
background-color: none;
color: #000000;
font-family: Lato, sans-serif;
font-size: 16px;
font-weight: 600;
font-style: normal;
line-height: 1.2;
margin: 0;
padding-top:16px;
}
p.hoursofoperationcenter {
background-color: none;
color: #333;
font-family: Lato, sans-serif;
font-size: 15px;
font-weight: 400;
font-style: normal;
line-height: 1.3;
margin: 0;
text-align: center;
white-space: pre;
}
p.infop {
background-color: none;
color: #OOOOOO;
font-family: Lato, sans-serif;
font-size: 16px;
font-weight: normal;
font-style: normal;
line-height: 1.5;
margin: 0;
padding-bottom:30px;
}
p.infostextbox {
background-color: none;
color: #OOOOOO;
font-family: Lato, sans-serif;
font-size: 16px;
font-weight: 550;
font-style: normal;
line-height: 1.5;
margin: 0;
padding-bottom:16px;
}
p.topmenu {
background-color: none;
font-family: Lato, sans-serif;
font-size: 15px;
font-weight: 500;
font-style: normal;
line-height: 1.4;
margin: 0;
text-align: center;
}
p.towncounty {
background-color: none;
color: #000000;
font-family: Lato, sans-serif;
font-size: 16px;
font-weight: 700;
font-style: italic;
line-height: 1.4;
margin: 0;
padding-top:16px;
}
</style>
</head>
<body>
<p class="topmenu">Text with id tags here.</p>
There is a set of columns here made with these tags
<div class="one-half first">Text</div>
<div class="one-half"> Text </div>
Then there is more text which is formulated by <p class=""></p> and then finally the <!--nextpage--> attribute occurs somewhere in the middle.
After the <!--nextpage--> tag I have more text with <p class=""></p>
The entire page ends with
</body>
</html>
On my other pages that are not split the css shows up fine. For whatever reason the css is not showing up on page 2 after the <!--nextpage--> . What do I have to do to make sure the css shows up before and after the <!--nextpage--> attribute.
I'm not sure if I understand everything well, but You should try to place <!--nextpage--> between the tags, and not inside of them.
For example:
<p>asdasd</p><!--nextpage--><p>asdasd</p>
Is ok, while:
<p>asdasd<!--nextpage-->asdasdasd</p>
is not ok. I hope this is the case, if not, please do not downvote and update You question with full code. Then I will try to update my answer.
Few more words. When You click next page, then the paragraph element has started on the page before. So on the actual page there is no paragraph start, but only: asdasdasd</p> which is causing problems, and is not a valid html.
Best regards.
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;
}