I am trying to position a very basic div inline with some text.
When I move the div it leaves blank spaces that I can't remove. Would you be kind to guide me with some css tricks for it?
.chord {
color: orangered;
font-weight: bold;
display: inline;
position: relative;
top: -20px;
left: 20px;
}
<br/> Empty
<div class="chord">Bm</div>spaces, what are we living for?<br/><br/> Abandoned
<div class="chord">G</div>places, I guess we know the score <br/>
Fiddle, in case you want to play with it.
https://jsfiddle.net/rondolfo/r3dphgsL/11/
I did search for an answer and I couldn't find it, but I believe it is a very basic problem for someone that is proficient in css.
Use inline-flex instead of inline, set the width to 0. That will remove the space, but still show the chord text. You can also remove the left adjust and add a space before the div.
.chord{
color: orangered;
font-weight: bold;
display: inline-flex;
position: relative;
top: -20px;
width: 0px;
}
Setup some classes to use as before elements and position them accordingly. You can even make one for each chord as demonstrated below.
.chord{
position: relative;
}
.chord:before{
color: orangered;
font-weight: bold;
display: block;
position: absolute;
content: "";
top: -20px;
}
.chord.b-minor:before {
content: "Bm";
}
.chord.g:before {
content: "G";
}
<br />
Empty <span class="chord b-minor"></span> spaces, what are we living for?<br/><br/> Abandoned<span class="chord g"></span> places, I guess we know the score <br/>
Related
As a part of my study project, I need to change the background of a single word ("adventure") inside a paragraph. I'm not allowed to change HTML code, can use CSS only.
<p class="section_text">
Welcome to adventure!
</p>
The only idea I have is to set a background to a pseudo-element ::after and play with position relative/absolute, but it doesn't feel right.
.section_text {
position: relative; }
.section_text::after {
content: "adventure";
background-color: #04128f;
color: #0f0;
width: 65px;
height: 20px;
position: absolute;
top: 0;
left: 90px; }
Are there any smart ways to do that (it should work in the last version of Chrome)?
P.S. Can not use JS or jQuery neither. Exclamation sign background shouldn't be changed.
Set an intrinsic font-size to the :root selector. ex. :root {font-size: 5vw}. This makes the font responsive to viewport width.
Make the background of <p> the highlight color (ex red) and set its width: max-content.
Next <p> needs position: relative and then z-index: -1
Add two pseudo elements to <p>
p::before {content: 'Welcome to';...}
/*and*/
p::after {content: '!';...}
Assign position: absolute, z-index: 1, and background: white
Finally set right: 0to p::after so the exclamation mark is always at the very end
Note: the property/value content: 'Welcome to\a0'; on p::before selector has \a0 at the end. This is the CSS entity code for a non-breaking space (HTML entity: )
:root {
font: 400 5vw/1 Consolas
}
p {
position: relative;
width: max-content;
z-index: -1;
background: red;
}
p::before {
position: absolute;
content: 'Welcome to\a0';
background: white;
z-index: 1
}
p::after {
position: absolute;
content: '!';
background: white;
z-index: 1;
right: 0
}
<p>Welcome to adventure!</p>
Edit: to change background-color for an arbitrary position word, see zer00ne's answer above. I didn't read the question thoroughly, so I wasn't aware that the OP wants the word adventure not adventure!
The smartest way to change any arbitrary word is to wrap it inside a span tag. Here's the workaround for changing the background of the last word: From your delivered code, display: inline-block for p tag, and don't set width for ::after element.
.section_text {
display: inline-block;
background: #3333;
position: relative;
}
.section_text::after {
content: 'adventure!';
position: absolute;
right: 0;
height: 100%;
z-index: 1;
background: red;
}
<p class="section_text">
Welcome to adventure!
</p>
I'm working on my website and I would like to have a nice quotation. To do that, I'd like to have two big quotation marks images at the beginning and the end of my text, like incorporated in the text, that would move with the text when I resize the window.
I've tried to use a span with a display: block and the image as background but it acts like a div.
If I use a div and margins to place it right, it stays at the same place when I resize the window and is no more align with my text.
What would you advise ?
EDIT
Here is what I would like :
You can try this raw css, you can customized it as you want.
html {
background: gray;
}
blockquote {
background: white;
display: inline-block;
position: relative;
padding: 30px 30px
}
blockquote:before {
content: '"';
position: absolute;
font-size: 48px;
top: 10px;
left: 10px;
}
blockquote:after {
content: '"';
position: absolute;
font-size: 48px;
bottom: -10px;
right: 10px;
}
<blockquote>
This is a sample of a blockquote.
</blockquote>
EDIT:
The above code works with a fixed quotations on the blockquote itself, the ending quotation doesn't move on the end of the paragraph.
This one should do it.
html {
background: gray;
}
blockquote {
background: white;
display: inline-block;
position: relative;
padding: 30px 30px
}
.ql,.qr {
position: relative;
}
.ql:before,.qr:after {
content: '"';
position: absolute;
font-size: 48px;
}
.ql:before {
top: -15px;
}
<blockquote>
<span class="ql"></span> I am a sample of blockquote with a big quotation marks.<span class="qr"></span>
</blockquote>
<blockquote>
<span class="ql"></span> I am a sample of blockquote with a big quotation marks. You see it moves according to the length of what I'm saying.<span class="qr"></span>
</blockquote>
Using a span was the correct choice but you should set it to inline or inline-block (or leave it alone altogether). As you found out, setting it to block made it occupy the entire width.
If you can use something other than an image, you can put a span around the quote character itself and use any unicode or other font family for quotation marks. Then you can put a span just around that and set it however you wish while maintaining an inline textual quote.
How about this..
<p class="your-quote-wrapper">
<span><img src="/quote-icon-left.png"></span>Blabla blabla text<span><img src="/quote-icon-right.png"></span>
</p>
And your span being inline-block
p.your-quote-wrapper{
display:inline-block;
}
I am attempting to create a link that includes a right chevron that has a fairly large font. The problem that I have run into is that the right chevron has a very large margin above it that creates a big gap between it and the line above.
In addition to this - I would like the text that is next to it to be vertically centered on the point of the chevron.
CSS:
.big
{
font-size:80px;
}
a
{
text-decoration:none;
font-size: 30px;
}
HTML:
This is a test
<div>
Let's Go! <span class="big">›</span>
</div>
You can see an example of what I am talking about here
Should I just use a negative margin to close up this gap or is there a more graceful way to accomplish what I am trying to do? How can I center the text on the point of the chevron? I tried vertical-align:middle but had no luck.
You should use :after :pseudo-element instead of adding extra element. This way you won't have to position both individually, you could simply position the a tag relatively and its :after :pseudo-element absolutely. So that the :after :pseudo-element will follow wherever you position the a tag.
a {
text-decoration:none;
font-size: 30px;
position: relative;
top: 20px;
}
a:after {
content: '›';
font-size: 80px;
position: absolute;
bottom: -20px;
right: -30px;
}
This is a test
<div>Let's Go!</div>
Additionally, on Firefox it shows a weird dotted outline, when you click on an a element.
To prevent this, you could set outline: 0 on a:focus.
a {
text-decoration:none;
font-size: 30px;
position: relative;
top: 20px;
}
a:after {
content: '›';
font-size: 80px;
position: absolute;
bottom: -20px;
right: -30px;
}
a:focus {
outline: 0;
}
This is a test
<div>Let's Go!</div>
You could achieve this with relative positioning and line-height definition:
.big {
font-size:80px;
line-height: 30px;
bottom: -10px;
position: relative;
}
a {
text-decoration:none;
font-size: 30px;
}
This is a test
<div>
Let's Go! <span class="big">›</span>
</div>
JSFiddle: http://jsfiddle.net/CaseyRule/ptrxv99n/8/
<style type="text/css">
.big{
font-size:80px;
line-height:30px;
position:absolute;
top:2px;
}
a{
text-decoration:none;
font-size: 30px;
position:relative;
}
</style>
Let's Go! <span class="big">›</span>
I would use an image and set the background property of your anchor tag to use this image. You can adjust the padding to however much space you need to accommodate the chevron image.
a {
text-decoration:none;
font-size: 30px;
padding-right:30px;
background-image: url('/path/to/image.gif');
background-position: right center;
}
This would apply the chevron to all links on your page. You can of course use a CSS class to limit the chevron to specific hyperlinks.
a.chevroned { .... }
Let's Go!
Whole code : http://jsfiddle.net/3TQq6/
I'm making theme for my blog.
In the title part, there is a problem.
<div class="post_title">
<br/>
<h2>[##_article_rep_title_##]</h2>
<span class="post_cate">나만보기</span>
<span class="post_date">[##_article_rep_date_##]</span>
</div>
h2 tag will show the title of the article.
first span tag will show the category of the article.
second span tag will show when the article upload.
They are in one line.
h2 and span starts from left side, second span starts from right side because of float.
When I run the code, two spans have different vertical position.
http://goo.gl/vZwSzz
second span is placed higher than the first span.
I want that two span tags have the same vertical position.
but don't move first span tag. I want to adjust the second to the first.
How can I move the second span?
You can try the following:
DEMO
Remove float: right from .post_date, and then add the following css rules:
.post_title {
position: relative;
}
.post_date {
position: absolute;
bottom: 6px; /* Adjust this to match the height of .post_cate */
right: 0px;
}
There's two ways to do it. One is to keep the float right and position it properly with margin-top pushing the date down:
.post_date {
margin-top: 16px;
}
This positions it when everything is all on one line, but if there's multiple lines the date will be off. The second method is to use position: absolute to align it to the bottom:
.post_title {
position: relative;
}
.post_date {
position: absolute;
right: 0;
bottom: 9px;
}
Results: http://jsfiddle.net/3TQq6/1/
Try this, fiddle
<div class="post_title">
<br/>
<h2>[##_article_rep_title_##]</h2>
<span class="post_cate">나만보기</span>
<span class="post_date">[##_article_rep_date_##]</span>
<br/>
</div>
.post_title h2 {
display: inline;
float: left;
font-size: 15pt;
}
.post_title span {
color: #bababa;
line-height: 30px;
}
.post_cate {
float: left;
}
.post_date {
float: right;
}
There is some text whose formatting I would like to render in HTML. Here is an image:
Note the gray lines with the bullet points and the paragraph numbers. The bullets should be centered on the page and the numbers should be justified right.
I've been trying to think of how to do this in HTML and am coming up blank. How would you capture this formatting?
You can use the :before and :after psuedo-elements to great effect here:
http://jsfiddle.net/yNnv4/1/
This will work in all modern browsers and IE8+. If IE7 support is required, this answer is not for you :)
#container {
counter-reset: nums;
}
p {
position: relative;
margin: 21px 0;
}
p:before {
content: '\2022 \2022';
font-size: 2em;
position: absolute;
top: -8px;
left: 0;
line-height: 1px;
color: #888;
width: 100%;
text-align: center
}
p:after {
content: counter(nums);
counter-increment: nums;
font-size: 1.5em;
position: absolute;
top: -8px;
right: 0;
line-height: 1px;
color: #888;
font-family: sans-serif
}
About the counter properties:
https://developer.mozilla.org/en/CSS_Counters
http://www.w3.org/TR/CSS21/syndata.html#counter
http://www.w3.org/TR/CSS21/generate.html#propdef-counter-increment
It's not possible to (automatically) increment the bullets.
However, it can be done with some dubious repetition:
http://jsfiddle.net/N4txk/1/
p:before { content: '\2022' }
p+p:before { content: '\2022 \2022' }
p+p+p:before { content: '\2022 \2022 \2022' }
/* .... */
(alternatively, :nth-child can be repeated in the same way: http://jsfiddle.net/N4txk/ - but it won't work in IE8; there will only be two bullets)
There is an upper limit on the number of bullets it would be sensible to have, so I think it would be acceptable to copy and paste that as many times as required.
How about something like this?
http://jsfiddle.net/6eTCf/
<div class="separator">
* <div class="page_number">1</div>
</div>
.separator{
margin: 5px 0 5px 0;
color:gray;
position:relative;
text-align: center;
}
.page_number{
position:absolute;
right: 3px;
top: 0;
}
I would float the number right and center the remaining contents (the bullet points). If you give the remaining contents an equal left and right margin larger than the numbers are wide, the contents will be centered.
I would wrap the whole thing in a div, then use relative/absolute positioning between the wrapper and the paragraph number div to get the numbers on the right-hand side like that.
Here's a fiddle showing how to do it.
There are a couple ways I can think of.
Add a <div> between the paragraphs, then add two <p>'s: <p class="dot"></p> and <p class="pnum">1</p>.
Style the <div> to the width of the the paragraphs, and set in the CSS the following:
.dot{ text-align: center; }
.pnum{ float: right; }
There are several ways I can think of:
Float + absolute position (I'll let the purists explain this one)
Old style table (I'll explain this since it's the easiest):
If the total width of the area is, say, 300px
<table><tr>
<td width="30"></td>
<td width="240" align="center">bullets</td>
<td width="30" align="right">number</td>
</tr></table>
Many people prefer using pure CSS, but I like my tables, they just work for me
`#container {
counter-reset: nums;
}
p {
position: relative;
margin: 21px 0;
}
p:before {
content: '\2022 \2022';
font-size: 2em;
position: absolute;
top: -8px;
left: 0;
line-height: 1px;``
color: #888;
width: 100%;
text-align: center
}
p:after {
content: counter(nums);
counter-increment: nums;
font-size: 1.5em;
position: absolute;
top: -8px;
right: 0;
line-height: 1px;
color: #888;
font-family: sans-serif
}`