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
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 am unsure how to get the correct HTML and CSS for the Contact Me part of a mock resume contact form that I am trying to make. None of the information that I put in the input boxes will go anywhere, but I am just trying to create a mock Contact Me form.
When I tried my HTML and CSS, the button would not go below the last box. Also, I am unsure how to have the green background in the back, while there is text on top of it. I am still learning HTML and CSS would like an explanation if possible.
Here is what I have so far:
.contact-me {
width: 700px;
height: 81px;
font-family: Bitter;
font-size: 60px;
font-weight: bold;
font-stretch: normal;
font-style: normal;
line-height: normal;
letter-spacing: normal;
color: #575159;
}
.contact-item {
width: 684.4px;
height: 29px;
font-family: Lato;
font-size: 24px;
font-weight: normal;
font-stretch: normal;
font-style: normal;
line-height: normal;
letter-spacing: normal;
color: #575159;
padding-top: 20px;
}
.contact-box {
width: 697.5px;
height: 55px;
border-radius: 5px;
border: solid 2px #b6b5b7;
background-color: #fffefe;
}
.contact-reason {
width: 391px;
height: 29px;
font-family: Lato;
font-size: 24px;
font-weight: normal;
font-stretch: normal;
font-style: normal;
line-height: normal;
letter-spacing: normal;
color: #575159;
padding-top: 20px;
}
.contact-reason-box {
width: 698px;
height: 248px;
border-radius: 5px;
border: solid 2px #b6b5b7;
background-color: #fffefe;
}
::placeholder {
width: 672.7px;
height: 24px;
font-family: Lato;
font-size: 20px;
font-weight: normal;
font-stretch: normal;
font-style: normal;
line-height: normal;
letter-spacing: normal;
color: #b8b8b8;
}
.button {
width: 698px;
height: 74px;
font-family: Lato;
font-size: 26px;
font-weight: 900;
font-stretch: normal;
font-style: normal;
line-height: normal;
letter-spacing: normal;
text-align: center;
color: #e8e8e8;
}
<div class="contact-me">Contact Me</div>
<div class="contact-item">Your First Name:</div>
<input class="contact-box" type="text" name="firstName" placeholder="John">
<div class="contact-item">Your Last Name:</div>
<input class="contact-box" type="text" name="lastName" placeholder="Smith">
<div class="contact-item">Your Email Address:</div>
<input class="contact-box" type="text" name="email" placeholder="john#email.com">
<div class="contact-item">Your Phone Number:</div>
<input class="contact-box" type="text" name="number" placeholder="(732)555-0123">
<div class="contact-reason">Reason For Contact:</div>
<input class="contact-reason-box" type="text" name="contactReason">
<button class="button" type="submit">SEND</button>
I think you've got a pretty good start. I don't mean to completely take away the work that you've done so far, so I didn't want to re-write your code. However, with that being said, here are some answers to the questions you have and some tips on my own.
To get the background green, you'll want to set the background: or background-color: of your element to your color of choice. In the case of the image you sent, the background color is #A0D199, so you would add that to the CSS of your container. For the sake of simplicity, let's just set that to the body of the page since this is only the form that you're looking for. If you have a div or other content, you could set this same CSS to the respective container, even the form if you would like:
body {
background: #A0D199
}
Speaking of form, it's a good idea to wrap your inputs into a form. As you progress in your coding and learn how to work with forms, this will become handy. Do this by added <form> </form> around your inputs.
Now onto the inputs, one change I made was instead of using a button property, I set an input with the type of "submit" (<input class="button" type="submit" value="SUBMIT">) this accomplishes the same thing you had before but will likely work better with forms in the future. The text you would like will be in the "value".
Moving forward a little bit more, I took out some of your CSS:
font-weight: normal;
font-stretch: normal;
font-style: normal;
line-height: normal;
letter-spacing: normal;
These are all normal anyways, so you're just taking up lines of CSS by adding them. It's a good idea to use these if you're changing something, but if keeping them normal then you can omit.
Lastly, the issue you were having about the button not being at the bottom can likely be fixed by having this wrapped in a form, but also by adding the display: block; to the button CSS. Some of the most common 2 properties are "block" and "inline". Without getting much into detail, block lines things up vertically, and inline keeps everything in reading order (left to right in english). Here's some more info about this
So with all that being said, I've edited a fair amount of your CSS and a little bit of the HTML to get you on the right track.
HERE YOU GO
I may have done things in a way that others would do different, but tried hard to keep things as much as possible as you had done already with the code you provided. I think this is a good start for you on this form design. My recommendation would be to look this over well, see what I changed, and then try to re-create it on your own without looking at my version (just refer back to it if you forget something). Remember that you learn the most by doing, so good luck and let me know if you have any questions or would like clarification!
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.
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
I have code like so
<li class="iconic camera">Pentax K-5 16 Megapixel DSLR</li>
I use CSS like
.iconic.camera:before {
font-size: 35px;
font-family: "KameraDings";
content: "A";
padding-right: 8px;
vertical-align: -10%;
}
to insert a Camera symbol with the special symbol font. However I have style for li's set to italic. Is there a way possible to remove italic from this one content letter ? I have tried font-style: none; to no avail
That's font-style: normal; not font-style: none;.
jsBin demo
.iconic{
font-style:italic;
}
.iconic.camera:before {
font-size: 35px;
font-family: "KameraDings";
content: "A";
padding-right: 8px;
vertical-align: -10%;
font-style:normal; /* ta-da!*/
}