How's the standard way to mix two different text formats using CSS style sheets? I am trying the following
<span
class="cv-first">University of Illinois at Urbana-Champaign </span> <span
class="cv-first-right">Aug. 26<sup>th</sup> 2010</span>
where in the style sheet I put:
.cv-first
{
font-variant:small-caps;
font-family: sans-serif;
color: #000000;
}
.cv-first-right
{
font-variant:small-caps;
font-family: sans-serif;
color: #000000;
text-align:right;
font-style: italic;
}
But this doesn't work.
UPDATE
So I found that if I replace
text-align:right;
by
float: right;
I get exactly what I was looking for. So now the second part is on the right of the page.
SPAN is inline element : it is treated as part of the text aligned in block container
DIV is block element: it can be floated left or right, whereas its text contents is aligned
Inline elements have no width, therefore text-align has no sense. You may override this behavior by declaring it as block element and setting the width:
.cv-first-right {
display: block; /* necesarry for applying width */
width: 150px; /* default width is 100% */
float: right; /* move the 150px to the right side */
text-align: right; /* align text in those 150px right */
}
Try this :
.cv-first, .cv-first-right
{
font-variant:small-caps;
font-family: sans-serif;
color: #000000;
}
.cv-first-right
{
text-align:right;
font-style: italic;
}
Related
I am trying to create a button that has an icon, but when I add the icon the text isnt centered vertically. How can I fix this?
This is the code in HTML & CSS:
<a href="#">
<button class=" account signUp"><span class="icon-profile</span>button</button>
</a>
.signUp {
background-image: var(--orange-background);
border-image: var(--orange-background);
font-family: poppins;
font-weight: 600;
color: white;
}
but when I add the icon the text isnt centered vertically
Put the following two properties on its parent
.parent-of-icon-and-text {
display: grid;
place-content: center;
}
Please don't use a button and a link, choose one that best fits your scenario.
To use a button as a link, you can put it in a form.
.signUp {
background-image: var(--orange-background);
border-image: var(--orange-background);
font-family: poppins;
font-weight: 600;
color: white;
}
<form onsubmit="#">
<button type="submit" class="account signUp"><span class="icon-profile"></span>button</button>
</form>
Corrections
It is invalid HTML to place a <button> inside an <a>nchor. They are both interactive content and should never have inertactive content as a descendant node. <a>nchor has been removed. For more details refer to Can I nest a <button> element inside an <a> using HTML5?.
Typo in HTML, "> missing:
<span class="icon-profile"></span>
In CSS the font-family value of Poppins was misspelt as poppins (font-family values are case-sensitive).
Solution
The OP was incomplete so what is suggested in the example is as generic as possible. In the OP, span.icon-profile needs these two styles:
display: inline-block;
vertical-align: middle
vertical-align will set the tag's contents to a vertical position by either a pre-set value or a legnth value.
display: inline-block or table-cell is required by vertical-align
Further details are commented in the example below
/*
The actual CSS to resolve alignment issues explianed by OP is marked with a ✼ which are `display: inline-block` and `vertical-align: middle`
*/
#import url('https://fonts.googleapis.com/css2?family=Poppins:wght#300&display=swap');
/*
Global default for font
*/
:root {
font: 2ch/1 Poppins;
}
/*
Any rem unit measurements will reference 1rem to 2ch
*/
body {
font-size: 2ch;
}
button,
b {
display: inline-block; /*✼*/
font-weight: 300;
}
.sign-up {
font: inherit;
border-radius: 4px;
color: white;
background: #333;
}
.btn-link:hover {
outline: 1px solid cyan;
color: cyan;
cursor: pointer;
}
.btn-link:active {
outline: 2px solid cyan;
color: black;
background: white;
}
.icon-profile {
font-size: 1rem;
vertical-align: middle; /*✼*/
}
/*
content: '⚙️'
in HTML it's ⚙️
*/
.icon-profile::before {
content: '\002699\00fe0f';
}
<button class="account sign-up btn-link"><b class="icon-profile"></b> Profile</button>
I would love to style my input field very similar to the divs I am building. However, I am unable to solve sizing issues.
Here is an example
http://codepen.io/anon/pen/kLwlm
And here is one more (with overflow:visible and fixed height)
http://codepen.io/anon/pen/Fxjzf
As you can see, it looks very different than the divs, and no matter what I tried, I could not make them look similar. First of all, I would love to make the input in a way that the text will pop put (overflow: visible? not working).
Secondly, the height should be similar to the divs. Setting the height and line-height properties does seem to effect the temporary text, but when it's clicked (and started to type) it breaks. (check second example)
Shortly, open to suggestions.
Try this solution here:
#import url(http://fonts.googleapis.com/css?family=Playfair+Display:400,700,900,400italic,700italic,900italic);
body {
margin: 100px;
background-color: #f7f7f7;
}
input{
border:0;
}
div, input{
font-family: 'Playfair Display', serif;
font-size: 40px;
background-color: #ff44ff;
width: 100%;
margin-top: 20px;
line-height: 40px;
}
div {
padding: 1px 0px 13px 2px;
color: #999;
}
I tried placing the input in div and then making the input background to transparent. YOu can play with the spacing to you liking, but it works http://codepen.io/anon/pen/Brcpl
I came up with this JSFiddle. I removed the line-height and positioned text using padding instead (that fixed the aligning of the input text).I also styled the placeholder. Here is a part of your CSS which I changed (do read the notes in it).
div, input{
font-family: 'Playfair Display', serif;
font-size: 40px;
background-color: #ff44ff;
width: 100%;
margin-top: 20px;
padding: 5px 0px 5px 0px;/*use padding to adapt the size*/
}
/*Change placeholder properties*/
#s::-webkit-input-placeholder {
color: black;
}
#s:-moz-placeholder { /* Firefox 18- */
color: black;
}
#s::-moz-placeholder { /* Firefox 19+ */
color: black;
}
#s:-ms-input-placeholder {
color: black;
}
PS: I do suggest styling the input-box differently so the visitors of your website notice it is actually a input-box.
What about this one: http://codepen.io/anon/pen/lcgAD
css
div input {
border: none;
font-size: 40px;
width: 100%;
background: transparent;
color: #000;
font-family: 'Playfair Display', serif;
}
div input:hover {
}
div {
color: #000;
background-color: #892;
height: 41px;
}
html
<div>
<input placeholder="Enter E-Mail ayxml#gmail.com" value="Enter E-Mail ayxml#gmail.com"/>
</div>
I want the "values" to be right-aligned. This is my HTML:
<p class="blueBold">Existing Building</p>
<p class="values">19,322 sf</p>
</br>
<p class="blueBold">Acreage</p>
<p class="values">3</p>
...and my CSS:
.blueBold {
color: navy;
font-weight: bold;
font-family:'Century Gothic', Tahoma, Verdana, sans-serif;
display: inline-block;
}
.values {
color: white;
text-align:right;
display: inline-block;
}
What do I need to do to get the values to hug the right edge?
jsfiddle is here: http://jsfiddle.net/clayshannon/wvuQz/1/
Not sure if I understood your question correctly. But if you add a width then you can have the text right aligned to the box like below:
.blueBold {
color: navy;
font-weight: bold;
font-family:'Century Gothic', Tahoma, Verdana, sans-serif;
display: inline-block;
width: 200px;
}
.values {
color: white;
text-align:right;
width: 100px;
display: inline-block;
}
Working Demo
Note: This is not for aligning the text to the right edge of the screen. This is for making the text within the .values element right align within the box.
You are using display: inline-block; which will make the element inline, it is no more a block level element, hence there is no space for the text to align to the left or to the right.
Just wrap the elements inside a div and than float the element to the right.
Demo
Also am using
.wrap {
overflow: hidden; /* This will clear floats */
}
For a better clearfix, you can also use the below snippet and call the class on parent element.
.clear:after {
clear: both;
display: table;
content: "";
}
You can also assign width to the .wrap here, so that elements stay inside boundaries.
A block parent container should have the text align to work. In your case it's the body, itself.. DEMO
body {
background-color: orange;
text-align:right;
}
Try this:)
.blueBold {
color: navy;
position:absolute;
font-weight: bold;
font-family:'Century Gothic', Tahoma, Verdana, sans-serif;
}
.values {
color: white;
text-align:right;
}
fiddle: http://jsfiddle.net/wvuQz/5/
The semantic approach:
<div>
<p class="blueBold">Existing Building</p>
<p class="values pull-right">19,322 sf</p>
</div>
<div>
<p class="blueBold">Acreage</p>
<p class="values pull-right">3</p>
</div>
CSS:
.pull-right {
float: right;
}
Demo: http://jsfiddle.net/wvuQz/7/
More Info:
http://coding.smashingmagazine.com/2013/08/20/semantic-css-with-intelligent-selectors/
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 a button class working like this :
<p class="button">Rejoindre</p>
The CSS is :
p.button
{
background-color: #e74c3c;
line-height: 30px;
width: 200px;
text-align: center;
}
.button a
{
font-family: Montserrat, sans-serif;
color: white;
font-size: 0.9em;
text-transform: uppercase;
}
.button a:hover
{
text-decoration: none;
}
How can I make the entire button (represented by the paragraph tag) a link instead of just the text ?
You can put the link tag on the outside to make anything inside it be contained in the link:
<p class="button">Rejoindre</p>
However, you probably want to use something other than a p tag for your button, maybe a button element instead?
More info on HTML buttons.
Add display: block to the .button a ruleset.
http://jsfiddle.net/ExplosionPIlls/UvrKx/
You can add display:block; to you anchor tag.
display: block means that the element is displayed as a block, as
paragraphs and headers have always been. A block has some whitespace
above and below it and tolerates no HTML elements next to it, except
when ordered otherwise (by adding a float declaration to another
element, for instance).
Fiddle: http://jsfiddle.net/akx3p/
CSS:
p.button
{
background-color: #e74c3c;
line-height: 30px;
width: 200px;
text-align: center;
}
.button a
{
font-family: Montserrat, sans-serif;
color: white;
font-size: 0.9em;
text-transform: uppercase;
display: block;
}
.button a:hover
{
text-decoration: none;}
<p> are block elements, meaning that they naturally are at 100% width. If you just added display: block; to the anchor tag, you can make it behave the same way. Here's a fiddle
. That way allows you to get rid of the p tag all together.