i have this behavior:
Why the text have that space?
My goal is to left align the text with that one below.
Here what i have done:
CSS
.btn-basic {
font-size: 5.8em;
white-space: nowrap;
border: medium none;
}
.btn-basic p {
font-size: 0.3em;
line-height: 1.0em;
white-space: nowrap;
}
HTML
<div class="btn-basic">
FREE WI-FI
<p>Gratis. Senza limiti. Anche in streaming.</p>
</div>
Because character glyphs have space around them so they don't butt up against other character.
See:
span {
font-size: 144px;
color: white;
background: #000;
font-family: sans-serif;
}
<span>F</span>
<span>G</span>
<span>FG</span>
That 'space' may be different for each glyph (and font family). Combine that with the font-sizing you are using and you get the effect you are currently experiencing.
Unfortunately, there is very little you can do about it.
Related
How to align the text within an h1 box to the bottom of it.
<h1 class="woocommerce-products-header__title page-title">All</h1>
Here's the current css:
h1.woocommerce-products-header__title, h1.entry-title {
font-family: 'Noe Display Bold', Times, serif;
text-transform: uppercase;
font-size: 24px;
letter-spacing: 3px;
border-bottom: 1px solid #000;
padding-bottom: 7px;
line-height: 1;
}
h1.entry-title {
text-transform: none;
}
I am inspecting using Chrome Version 81.0.4044.92 on Ubuntu.
Looks like you are seeing the line height. So your fix might be: line-height: 1.
But when your H1 will wrap long texts this will result in unreadable text.
(I assume you checked the bottom padding)
I'm trying to get lines to surround an h1 but I'm having problems aligning the text with the surrounding lines. I've used embedded before / after attributes but I couldn't get them to work in Gmail so I opted of an inline attribute using borders on the h1. Currently the text "January 2018" is aligning below the surrounding lines. See code below.
h1 {
text-align: center;
color: #ffe800;
font-family: proxima-nova, sans-serif;
font-size: 22px;
font-weight: bold;
text-transform: uppercase;
}
<h1 style="border-left: 150px solid #ffffff; border-right: 150px solid #ffffff; height: 3px; display: block;">January 2018</h1>
Thanks!
I think you need to change your display property from display:block to display:inline
What I am trying to achieve is to have two separate lines of text, with different font sizes, for which each character lines up well with a character from the other line.
Current state here
span {
letter-spacing: 0.12em;
font-family: monospace, ubuntu_monobold, Courier New, monaco, terminal, courier, system;
font-size: 1em;
}
.highlight {
display: inline-block;
width: 0px;
word-spacing: normal;
}
.small {
top: .9em;
padding-bottom: 1px;
opacity: 0.6;
font-size: 70%;
letter-spacing: .45em;
}
<span class="small">gggggggggggggggggggg GGGGGGGGGGGGGGG?GGGGG</span>
<span class="big">GGAAGGCCCCACAGCGTCTTCTGTACTATGAGGGGTCTATTACTGTGCCACCTTCTGACA</span>
jsfiddle
letter-spacing: .45em;
Is what I am using to achieve this.
Now the obvious and "easy" solution is to use a table, with a column for each character, however, there can be lots of characters on one line and this would add a lot of elements to the DOM, which I would like to avoid if possible.
So can someone tell me if this is possible using only CSS ?
Thanks
Right now my header contains two p-tags with different styles:
<p style="color:#FFF; font-size:34px; margin-bottom:10px;">First half</p>
<p style="color:#FFF; font-size:88px;">Second half</p>
Is it possible to convert this into one h1-tag? Or can I have two h1 after each other? The main purpose is that it should work well with seo.
SEO-wise - each web page should contain one H1 tag.
A possible solution for what I believe you're trying to achieve is adding span tags in your H1 enabling you to style each part of your H1 differently:
HTML:
<h1>
<span class="smallerFont">First half</span>
<span class="bigFont">Second half</span>
</h1>
CSS:
h1 {
color: #fff;
}
.smallerFont {
font-size: 34px;
margin-bottom: 10px;
}
.bigFont {
font-size: 88px;
}
1) You should move your styling to a stylesheet.
2) You can easily have several styles in a single h1 ... like this:
HTML:
<h1>First <span class='A'>Second</span></h1>
CSS:
h1 { color:#F00; }
.A { color:#0F0; }
you can use
<h1>
<span >First half</span>
<span class='otherStyle' >Second half</span>
</h1>
Css style:
h1{
color :red;
}
h1> span{ //all the span elements within h1 is applied this style
color : blue;
font-size:34px;
margin-bottom:10px;
}
.otherStyle{
color:yellow;
font-size:88px;
}
Kinda a non-typical way to do this would be to use a combination of ::first-line and white-space: pre-line. This combo works pretty well since white=space: pre-line allows you to determine exactly where the first line ends. Of course, like the other answers, this method keeps you at just one h1 tag—ideal for SEO purposes.
A quick example on how this works:
h1 {
white-space: pre-line;
color: #fff;
font-size: 88px;
}
h1::first-line {
font-size: 34px;
}
body {
background: black;
}
<h1>First half
Second half
</h1>
That HTML looks a little weird. That's because we're forcing a newline with white-space: pre-line. It preserves any line breaks in the code (except, apparently, the last one). This makes new lines important, as demonstrated below.
h1 {
white-space: pre-line;
border: 1px black solid;
}
<h1>First half
Second half</h1>
<h1>
First half
Second half
</h1>
Still, it makes our first line end wherever we want it to, allowing us to target it with the ::first-line pseudo-element. Unfortunately, the styles supported by the ::first-line pseudo-element are fairly limited, but you can still do quite a bit. Sadly, this makes your margin-bottom hard to replicate. My closest attempt came from using line-height, which worked, but left a larger gap between the h1 and the next element. Still, it could be fixed with a little bit of negative margins, but then you could potentially run into other issues.
Though it's probably not the best way to go about doing this, it is a fun and interesting approach to solving the problem.
h1 {
white-space: pre-line;
color: #fff;
font-size: 88px;
line-height: 120px;
}
h1::first-line {
font-size: 34px;
line-height: normal;
}
/* Formatting styles */
* {
margin: 0;
padding: 0;
}
body {
background: black;
padding-top: 10%;
display: flex;
justify-content: center;
align-items: flex-start;
}
h1,
div {
max-width: 475px;
border: 1px white solid;
flex: 1;
/* Makes h1 the same font-weight
of p for better comparison */
font-weight: normal;
}
<h1>First half
Second half
</h1>
<div>
<p style="color:#FFF; font-size:34px; margin-bottom:10px;">First half</p>
<p style="color:#FFF; font-size:88px;">Second half</p>
</div>
How can I make a conversation dialogue appear like this:
Person 1: "Hello"
Person 2: "Hi"
I have my dialogue colored with black and yellow
As you can see, the point where the quote starts doesn't match up, so it does look messy that way, I want to make it indent it a little bit and also want the nameblocks have the same width (which will apply to all the names that will be in a dialogue, doesn't matter if it's a long or short name)
And you see that "you" on the third line? Can I make it appear right under the point where the quote starts automatically, if it's possible?
Here's my dialogue:
<p class="smallmargin"><span> <span class="dialogue1"><span class="person1">Harvey: </span> "What are your choices when someone puts a gun to your head?"</span> <span class="dialogue2"></span></span><br />
<span class="dialogue2"><span class="person2">Mike: </span> "What are you talking about? You do what they say or they shoot you." </span> <br />
<span class="dialogue1"><span class="person1">Harvey: </span> "Wrong. You take the gun, or you pull out a bigger one. Or, you call their bluff. Or, you do any one of a hundred and forty six other things."</span></p>
Here's my CSS mark up:
p.smallmargin {
margin: 0px;
padding: 0px;
line-height:160%;
}
.dialogue1 {
background-color: #FFB100;
color: black;
font-size: 15px;
font-family: 'Arial Black';
}
.dialogue2 {
font-weight: bold;
font-family: 'Arial Black';
font-size: 15px;
color: #FFB100;
background-color:black;
}
.person1 {
font-weight: bold;
font-family: 'Arial Black';
font-size: 15px;
color: #FFB100;
background-color:black;
text-transform: uppercase;
}
.person2 {
font-weight: bold;
font-family: 'Arial Black';
font-size: 15px;
color: black;
background-color: #FFB100;
text-transform: uppercase;
}
By the way, I know I can add but that means that I have to add that to every dialogue manually and that would be a tiresome job.
As #Mig suggests, You should refactor your classes so that you can set common styles to dialogues and names without duplicating CSS code.
Now for the layout, you can get the table structure without actual HTML tables, using CSS display:table-row and table-cell:
HTML
<span class="dialogue one">
<span class="person">Harvey:</span>
<span class="text">"What are your choices when someone puts a gun to your head?"</span>
</span>
CSS
.dialogue{
display: table-row;
}
.text, .person {
display: table-cell;
}
Demo fiddle
You could also use inline-blocks and a combination of padding and negative margin:
.dialogue{
display: inline-block;
padding-left: 100px;
}
.person{
width: 100px;
margin-left: -100px;
display: inline-block;
}
Here's the demo fiddle for this
You just got to use the power of css classes well :D
So instead of dialogue1 dialogue2 use class dialogue for each line and classes odd / even to change the colors. Then you use the class person instead of person1/2.
Now you say :
.dialogue .person { display: inline-block; width: 30px; }
To avoid the line return of the text spoken I think you should put that text inside a span with class text and :
.dialogue .text { display: table-cell; }
Thank you Ben but I would go further like that:
http://codepen.io/migswd/pen/xbfmw
I know some developers may disagree with my opinion and suggest div or span tags with CSS, but I'd use table tag, like this:
<table class="myChat">
<tr class="row1">
<td class="cell1">Username1</td>
<td class="cell2">text of username1</td>
</tr>
<tr class="row2">
<td class="cell1">Username2</td>
<td class="cell2">text of username2</td>
</tr>
<tr class="row1">
<td class="cell1">Username3</td>
<td class="cell2">text of username3</td>
</tr>
</table>
And the CSS:
.myChat {
/* styling the entire chat box */
}
.myChat tr td {
/* styling font size, padding, etc */
font-weight: bold;
font-family: 'Arial Black';
font-size: 15px;
text-transform: uppercase;
}
.myChat tr.row1 td.cell1 {
width: 150px;/* can be anything you like */
background-color: #FFB100;
color: black;
/* styling the 1st cell of row1, font color, background color, etc. */
}
.myChat tr.row1 td.cell2 {
/* styling the 2nd cell of row1, font color, background color, etc. */
background-color: black;
color: FFB100;
}
.myChat tr.row2 td.cell1 {
width: 150px;/* can be anything you like */
background-color: black;
color: FFB100;
/* styling the 1st cell of row2, font color, background color, etc. */
}
.myChat tr.row2 td.cell2 {
background-color: #FFB100;
color: black;
/* styling the 2nd cell of row2, font color, background color, etc. */
}
Best way to generate such setup is through , add all the conversation in UL LI and add css list-style-type:none, list-style-position:outside