I would like to ensure that my chords above words are separated nicely by multiple white space.
The issue is that when I use pre, it comes out pre-formatted and hence not what I wanted.
Also, with , the code looks very ugly.
What is the best method to solve this?
<pre>Chorus:
Em A
A common love for each other
F#m Bm
A common gift to the Saviour
</pre>
Em A D D7
A common bond holding us to the Lord
Here is the link to the url: http://teach.sg/blog/a-common-love/
There are some white space characters like will be useful. You can use for tab. You can also use CSS for this.
I have an alternative solution, please see if it is suitable for your purposes:
I have nested all chords in a <span class = 'chord'> element, and then used CSS style rules to move the chords up and to the left a little bit. There is a little bit of ugly whitespace with this method, but it is more concise and definitely much more elegant than spamming space characters.
.chord {
position: relative;
font-size: 0.8em;
bottom: 1.5em;
right: 2em;
width: 0.5em;
}
p {
line-height: 2em;
}
<body>
<p>A common love <span class='chord'>Em</span> for each other <span class='chord'>A</span>
</p>
<p>A common gift <span class='chord'>F#m</span> to the Saviour <span class='chord'>Bm</span>
</p>
<p>A common bond <span class='chord'>Em</span> holding us <span class='chord'>A</span> to the Lord <span class='chord'>D-D7</span>
</p>
</body>
JSFiddle here.
Related
I have this two inline block text side by side but one them has one more paragraph and it mess up the text.
As you can see the "who we are" paragraph has weird height and i want to be potion same as "what we do" paragraph so it looks like this
This is my code
#wrapper {
width: 100%;
border: 1px solid blue;
text-align: left;
}
#content {
width: 25%;
margin-left: 15%;
font-size: 16px;
display: inline-block;
}
<div id="wrapper">
<div id="content">
<h1>What We Do</h1>
<span>
<p>I'm a paragraph. Click here to add your own text and edit me. It’s easy. Just click “Edit Text” or double click me to add your own content and make changes to the font. Feel free to drag and drop me anywhere you like on your page. I’m a great place for you to tell a story and let your users know a little more about you.</p>
<p>This is a great space to write long text about your company and your services. You can use this space to go into a little more detail about your company. Talk about your team and what services you provide. Tell your visitors the story of how you came up with the idea for your business and what makes you different from your competitors. Make your company stand out and show your visitors who you are.
</p>
</span>
</div>
<div id="content">
<h1>Who We Are</h1>
<span>
<p>I'm a paragraph. Click here to add your own text and edit me. It’s easy. Just click “Edit Text” or double click me to add your own content and make changes to the font. Feel free to drag and drop me anywhere you like on your page. I’m a great place for you to tell a story and let your users know a little more about you.</p>
<p>This is a great space to write long text about your company and your services.</p>
<p>This is a great space to write long text about your company and your services. You can use this space to go into a little more detail about your company. Talk about your team and what services you provide. Tell your visitors the story of how you came up with the idea for your business and what makes you different from your competitors. Make your company stand out and show your visitors who you are.
</p>
</span>
</div>
</div>
what do i need to do. i think there is already an topic for this but i don't know whats its called because English is not my first language.
Add the vertical align property to your #content element in your CSS code:
#content{
width:25%;
margin-left:15%;
font-size:16px;
display: inline-block;
vertical-align: top;
}
#wrapper {
width: 100%;
border: 1px solid blue;
text-align: left;
}
#content {
width: 25%;
margin-left: 15%;
font-size: 16px;
display: inline-block;
vertical-align: top; /* <-------------------- your huckleberry */
}
<div id="wrapper">
<div id="content">
<h1>What We Do</h1>
<span>
<p>I'm a paragraph. Click here to add your own text and edit me. It’s easy. Just click “Edit Text” or double click me to add your own content and make changes to the font. Feel free to drag and drop me anywhere you like on your page. I’m a great place for you to tell a story and let your users know a little more about you.</p>
<p>This is a great space to write long text about your company and your services. You can use this space to go into a little more detail about your company. Talk about your team and what services you provide. Tell your visitors the story of how you came up with the idea for your business and what makes you different from your competitors. Make your company stand out and show your visitors who you are.
</p>
</span>
</div>
<div id="content">
<h1>Who We Are</h1>
<span>
<p>I'm a paragraph. Click here to add your own text and edit me. It’s easy. Just click “Edit Text” or double click me to add your own content and make changes to the font. Feel free to drag and drop me anywhere you like on your page. I’m a great place for you to tell a story and let your users know a little more about you.</p>
<p>This is a great space to write long text about your company and your services.</p>
<p>This is a great space to write long text about your company and your services. You can use this space to go into a little more detail about your company. Talk about your team and what services you provide. Tell your visitors the story of how you came up with the idea for your business and what makes you different from your competitors. Make your company stand out and show your visitors who you are.
</p>
</span>
</div>
</div>
There are two solutions:
Solution One (Add vertical-align: top; in content class):
#content{
width:25%;
margin-left:15%;
font-size:16px;
display: inline-block;
vertical-align: top;
}
Second Solution:
Add inline css in first content div
<div id="content" style="float:left;">
A simple solution for this would be the following:
#content {
width: 25%;
margin-left: 15%;
font-size: 16px;
float:left;
}
You do not need to define width:100% for #wrapper, div is a block level element. You also don't need text-align:left; since text-align:left is the default rule for all element unless an upper level has a different align rule. display:inline-blocks is treated as a table cell, which by default has its value as "baseline", you can read from here http://www.w3schools.com/cssref/pr_pos_vertical-align.asp
Also, you should not be putting <p> inside of <span>, <span> is an inline block element and <p> is a block level element; Here is what I would do, it's simple and works and it is not based on hacks.
You may be more interested in the quick fix but its important to know the rules because hacks eventually collapse.
Hope this helps.
#wrapper {
border: 1px solid blue;
}
#wrapper:after {
content: '';
display:block;
clear:both;
}
#content {
width: 25%;
margin-left: 15%;
font-size: 16px;
float:left;
}
<div id="wrapper">
<div id="content">
<h1>What We Do</h1>
<div>
<p>I'm a paragraph. Click here to add your own text and edit me. It’s easy. Just click “Edit Text” or double click me to add your own content and make changes to the font. Feel free to drag and drop me anywhere you like on your page. I’m a great place for you to tell a story and let your users know a little more about you.</p>
<p>This is a great space to write long text about your company and your services. You can use this space to go into a little more detail about your company. Talk about your team and what services you provide. Tell your visitors the story of how you came up with the idea for your business and what makes you different from your competitors. Make your company stand out and show your visitors who you are.
</p>
</div>
</div>
<div id="content">
<h1>Who We Are</h1>
<div>
<p>I'm a paragraph. Click here to add your own text and edit me. It’s easy. Just click “Edit Text” or double click me to add your own content and make changes to the font. Feel free to drag and drop me anywhere you like on your page. I’m a great place for you to tell a story and let your users know a little more about you.</p>
<p>This is a great space to write long text about your company and your services.</p>
<p>This is a great space to write long text about your company and your services. You can use this space to go into a little more detail about your company. Talk about your team and what services you provide. Tell your visitors the story of how you came up with the idea for your business and what makes you different from your competitors. Make your company stand out and show your visitors who you are.
</p>
</div>
</div>
</div>
I have what feels to be a unique problem here, I have two pipes ("|"s) that are styled exactly the same, use the exact same classes, and yet are two different colors. Here is the markup:
<span class="block">© <?php echo date(Y); ?> Apple Hill Farm </span>
<span class="block">and Country Club</span>
<span class="spaces"> | </span>
<span class="block">
Website Design and Development
</span>
by <span class="block">
BlahBlah Web Solutions
</span>
<span class="spaces"> | </span>
<span class="block">
Site Map
</span>
The elements I'm talking about are the "spaces" class elements. Here is the styling:
.spaces {
color: #625a49;
}
(I tried to directly style the text because it wasn't working before) And here is a snapshot of what's going on:
Sorry if it's tough to see with the background. The two pipes ares slightly different, as you can see. Has anyone run into this problem before?
.spaces {
background-color: #625a49;
width: 1px;
height: 14px;
display: inline-block;
vertical-align: middle;
margin: 0 1em;
}
It seems that the issue was just that the color was slightly different based on the size of the window/where the pipe ended up on the screen, because I noticed that as the screen resized, the pipes both kind of switched back and forth between the two colors. So I've replaced the pipes with this code, and it's worked out fine.
I have a paragraph tag and I want the text in it to have every other letter orange and the rest of the letters dark orange. The lazy code looks like this:
Html
<p>
<span class='orange'>L</span>
<span class='yellow'>o</span>
<span class='orange'>r</span>
<span class='yellow'>e</span>
<span class='orange'>m</span>
</p>
Css
.yellow {
color: darkorange;
}
.orange {
color: orange;
}
Fiddle (Second color turned to blue for noticeability)
How can I make this code look less lazy? I know when you read this question the first time you probably think "Impossible. Can only be done with sorcery.", but I think this should probably be very simple. I'll cope with anything, even a way to make an image repeat across the text.
In CSS you cannot target individual letters of character data content, only elements and a small subset of pseudoelements. You do need markup therefore. You should however never use presentational names in classes, that is the job of CSS. So use the anonymous semanticless inline element <span> without further details, and then just use advanced CSS selectors:
<p>
<span>L</span>
<span>o</span>
<span>r</span>
<span>e</span>
<span>m</span>
</p>
And CSS:
p {
color:orange;
}
p span:nth-child(odd) {
color:yellow;
}
Seen here in action.
I've read that headers shouldn't be used as subtexts to other headers for HTML5 in order to have a nice outline.
for example:
<h1>Frustration</h1><br />
<h2>The life of developers</h2>
Rather, it could be written like this instead:
<h1>Frustration
<br />
<span style="font-size: 0.67em">The life of developers</span>
</h1>
The problem is that I have no control on the line-height of the subtext. It takes on the line-height of the H1 and that always seem a little too far.
I realize could do something like:
h1+.subtitle
to target the same thing, but I'd just like to know whether there is any way for the second option above to let me manipulate a paragraph with two different line-heights.
EDIT:
I'm using the latest version of Firefox.
As I continue to look for a solution, I'm beginning to wonder if this is a silly question to be asking, seeing as the browser has no reason to think the user would want separate line-heights within the same tag--especially when there are alternatives like using block elements with a negative margin-top.
You could do this:
<h1>
<span class="mainText">Frustration</span>
<span class="subText">The life of developers</span>
</h1>
h1 .mainText {
display: block; /* this prevent the need for the <br/> */
/* additional style for the main header text */
}
h1 .subText {
/* styling for the subtext */
}
You could also do this (which is easier I guess):
<h1>text
<div>subtext</div>
</h1>
h1 div {
font-size: 0.67em
}
The subtext will have a lower line height. See this jsfiddle for the latter one: http://jsfiddle.net/wLD35/
I was browsing related issues for my question but I can't seem to find the answer for it. Anyways, I want to know if I can still use the p or div tags instead of header tags when I have already used both (p and div tags) as plain text on my site. The reason is that I only want to have one header tag h1 present in my site. I tried to tweak some parts and got lost along the way. Sadly, after a couple of testing, it did not work... I was wondering if it's possible or if there's any other HTML tag that I can use other than header tag. Any response from you guys will be very much appreciated. =)
You can make a <p> look however you like, for example:
<p class="header">This is a header</p>
with
p.header { font-size: 200%; font-weight: bold; }
but I would recommend against it. The reason is that HTML is (ostensibly) semantic so if you declare:
<h3>This is a header</h3>
you're actually saying (semantically) that the given text is a heading of some sort. Remember you have <h1> through <h6> and you can pick and choose which of them you use. There is no need to use <h1> to use <h2> and so on.
This is also useful for those visually impaired as something styled as a heading won't be indicated as such to those using screen readers but a heading will be. You should cater for accessibility issues where possible.
You should not style a div, span, or p to look like a heading and then use it in place off an h1-h6. That is exactly contrary to the spirit behind the rule of thumb that you shouldn't have more than one h1 on a page.
<span> is a useful addition, as well.
You can use P and DIV tags over and over. If you need to, style them to look like H1's.
p.title {
font-size:18px;
font-weight:bold;
}
p.header2 {
background: url("bg.jpg");
}
--
<p class="title">My Title</p>
<p>And this paragraph will simply be regular text.</p>
<p class="title header2">My Other Title, with a Background Image</p>
<p>And this paragraph will also be regular text.</p>
Don't forget to remember SEO on your site. Presumably this is why you only want one H1 tag?
<span> <strong> and <em> are others you can use inside your <p> tags.
i would use <div> or <span> tags and use ids or classes to control the style. use ids if there is only once instance or classes if you want to repeat this style. you can also use multiple classes on one element
for example
<div id="text">Text Here</div>
<span class="red">This would be red</span>
<div class="red big">This would be big and red</div>
with css
#text{ font-size: 20px; }
.red{ color: red; }
.big{ font-size: 40px; }
hope this helps
You can use multiple h1's or h2's and just target them like this:
<div id="header"><h1>Title of page/h1></div>
<div id="main"><h1>Title of article</h1></div>
#header h1{ color:red;}
#main h1{ color:blue;}
It's not quite what you're asking. I suspect Google is a bit smarter than single H1 approaches.