I'm building a "We the People" website section inspired by the U.S. Constitution, and I'm listing names of "signers" supporting my project. The names have different sizes, and I'm trying to get them to show up nicely on the page. Strangely, the font is consistently offset from the spans containing the names. Here's what I have:
As you can see, the names overlap, which I'd like to avoid. What I find odd is that the text is outside of the span outlines:
The same is true of all the names. Here's my HTML:
<div id="names">
<span class="order ten CalifornyaA-Bold" id="o3">Eric So</span>
<span class="order twenty-five CalifornyaB-Bold" id="o5">Sierra Hansen</span>
<span class="order ten CalifornyaB-Bold" id="o6">Eleanor Collier</span>
...
<span class="order twenty-five CalifornyaC-Bold" id="o69">Maeve McCarty</span>
</div>
... and CSS:
#names {
text-align: center;
padding-bottom: 10%;
}
.hancock, .five-hundred, .two-hundred, .one-hundred, .fifty, .twenty-five, .ten {
line-height: 1.5em;
white-space: nowrap;
}
.hancock {
font-size: 5.5em;
}
.five-hundred {
font-size: 4em;
}
.two-hundred {
font-size: 3.4em;
}
.one-hundred {
font-size: 2.8em;
}
.fifty {
font-size: 2.2em;
}
.twenty-five {
font-size: 1.6em;
}
.ten {
font-size: 1em;
}
Any help would be very much appreciated!
its your line-height since they are inline elements an no block elements, try modifying the value:
.hancock, .five-hundred, .two-hundred, .one-hundred, .fifty, .twenty-five, .ten {
line-height: 110%;//percent would be good
white-space: nowrap;
}
or add individual CSS rules for each one, instead of all being set to1.5em
Edit:
Remember to set a font-size to the parent element since you are using em, check how i wrapped a text and added a font-size in em in the page of the font and its not overlapping:
you can use
span {line-height: 1.2;}
It seems that display: inline-block and then setting margin-top works fairly well. I think that's a bit of a hack solution, but it more or less works.
Related
With the following code below I thought that the text would wrap within its container, but the text wraps to the beginning of the line.
How do I get the text to wrap within its own container?
Thank you
.recsubsection {
font-weight: bold;
font-size: 16px;
text-align: left;
margin-top: 0px;
margin-bottom: 0px;
/*text-shadow: 1px 1px #0000FF;*/
}
.recquantity {
float: left;
width: 20%;
}
.recdescript {
/*float: left;*/
width: 75%;
}
<li class="recsubsection">
<span class="recquantity">1 Kg</span>
<span class="recdescript">
Apples, 2/3 Spies, 1/3 Empires, peeled, cut into 1 cm pieces,
lightly Salted, add 1 Lime Juice, mix well, cover, set aside for 1 hour
</span>
</li>
You can perhaps use flex-box and add the next line to recsubsection selector in your CSS code:
display: flex;
This way you wrap each span within its own container.
(You should also change your HTML code and use more semantically meaningful tags)
Instead float try flex:
.recsubsection { display: flex; font-weight: bold;
font-size: 16px; }
.recquantity { width: 25%;}
<li class="recsubsection">
<span class="recquantity">1 Kg</span>
<span class="recdescript">
Apples, 2/3 Spies, 1/3 Empires, peeled, cut into 1 cm pieces,
lightly Salted, add 1 Lime Juice, mix well, cover, set aside for 1 hour
</span>
</li>
<span> are not containers, they are tags to apply styles to text inline, they do not create a new DOM element. You need to use elements that do function as containers or style your elements to behave in that way.
Here, I changed your <span> tags to <div> tags, and applied flexbox to the <li> to get the flow you wanted.
.recsubsection {
font-weight: bold;
font-size: 16px;
text-align: left;
margin-top: 0px;
margin-bottom: 0px;
display: flex;
}
.recquantity {
width: 20%;
}
.recdescript {
width: 75%;
}
<li class="recsubsection">
<div class="recquantity">1 Kg</div>
<div class="recdescript">
Apples, 2/3 Spies, 1/3 Empires, peeled, cut into 1 cm pieces,
lightly Salted, add 1 Lime Juice, mix well, cover, set aside for 1 hour
</div>
</li>
.element-label {
display: block;
float: left;
width: 260px;
padding-left: .5em;
background: #f0f0f0;
color: #A00000;
font-size: 9pt;
}
.element-value {
display: block;
float: left;
margin-left: 1em;
font-weight: bolder;
white-space: nowrap;
font-size: 9pt;
}
<div id="field1">
<span class="element-label">Label 1 </span>
<span class="element-value">テスト </span>
</div>
<br />
<div id="field2">
<span class="element-label">Label 2 </span>
<span class="element-value">testing value</span>
</div>
In MS IE:
However, in Chrome or MS Edge:
the html looks like:
The layout in IE is what I expect/want.
However, when I change to the Japanese chars to other language chars (English, Chinese, Korean, etc.).
They all look right.
How can I format the Japanese chars correctly in this case
Why Japanese chars are so special in this case in different browsers provided that they are all UTF-8 encoded?
Why Japanese chars are so special in this case in different browsers
provided that they are all UTF-8 encoded?
They are special because they use different font and therefore are taller than Latin characters. You can see the same result if you use Latin text, but increase the font-size for that specific value span.
However the main problem is that your wrapper div elements are basically non-existent and not forcing child elements to be in rows and therefore each element is trying to be next to its sibling. If you removed the br element you would see that there is only one row.
A better solution is to use css to order your elements into rows and remove the br completely. Simple way to do that is to use flex on your wrapper elements. Also you should fix the height of rows to get a more consistent appearance (I added line-height to counter that).
.element-label {
display: block;
float: left;
width: 260px;
padding-left: .5em;
background: #f0f0f0;
color: #A00000;
font-size: 9pt;
}
.element-value {
display: block;
float: left;
margin-left: 1em;
font-weight: bolder;
white-space: nowrap;
font-size: 9pt;
}
.row {
display: flex;
line-height: 9pt;
margin-bottom: .3em;
}
<div class="row" id="field1">
<span class="element-label">Label 1 </span>
<span class="element-value">テスト </span>
</div>
<div class="row" id="field2">
<span class="element-label">Label 2 </span>
<span class="element-value">testing value</span>
</div>
In Zurb Foundation 4 I want to underline all below text except "Shipping International" for which I've tried various css to set as text decoration "none" but I can't seem to figure out what the correct CSS to resolve this is:
<div class="row">
<p class="buy-button">Add to cart</p><br>
<p class="small-font">usually leaves our warehouse in 1 business day.<br>
Available for Pick Up NYC <br>
<span class="overview">Shipping: International</span> (See Terms & Conditions) </p>
</div>
I did a span with a class but it's not working.
The HTML and CSS can be seen in this fiddle http://jsfiddle.net/setbon/f8p62/
Any help to resolve is much appreciated.
Remove text-decoration:underline; from your .small-font styling.
Here's the full CSS:
.medium.button.buy {
background-color: green;
/* margin-right: 0.5em;
margin-left: 0.5em;*/
padding-left: 4em;
padding-right: 4em;
}
.small-font {
font-size: 0.75em;
}
.panel p.buy-button {
margin-bottom: 0.1em;
}
And the jsFiddle.
At the top of a page I've got two divs, one floated to the left and one to the right. I can place text with a border between them, however, I now need to stack two such areas of text between them.
Here's a Fiddle illustrating my problem: http://jsfiddle.net/TcRxp/
I need the orange box under the green box, with each center aligned with the other. The "legend" (floated to the right) used to be at the same level but is shifted down now.
I tried adding another table to the mix but that didn't help.
Excuse the markup - it's not real slick, I know. A few people have touched this over time and none of us are gurus at this.
And yes, I have lobbied for a designer to be added to the team but it hasn't happened yet.
Thanks,
Paul
UPDATE: Incorporating #Jeremy B's suggestion
Does it have to be via CSS changes? When dealing with scenarios like this, you need to be careful of the order in which the HTML elements are defined.
Look at the modification here: http://jsfiddle.net/TcRxp/8/
I was able to acheive what you needed by changing the order of the three DIVs and using the CSS suggesion from #Jeremy B
Essentially, the logic for the layout is
Draw the float-right content
Draw the float-left content
Draw the content in the middle (as it will now render to the right of the float-left content.
First make your top span a block element to stack them:
<span class="color status active bold" style="display:block">Status:</span>
then float the middle div left as well:
add float:left to #headmiddle in your css
It's always going to be difficult to get the desired results when you're combining CSS and tables-for-layout.
I would suggest simplifying your HTML:
<div id="headleft">a little search form here</div>
<div id="headmiddle">
<div class="active"><strong>Status:</strong> Active</div>
<div class="search">Search results displayed</div>
</div>
<div id="headright">
<dl>
<dt>Legend:</dt>
<dd>Status numero uno</dd>
<dd>Status two</dd>
</dl>
</div>
and your CSS:
div { padding: 2px; }
strong { font-weight: bold; }
#headleft { float: left; font-size: 0.8em; }
#headmiddle { float: left; font-size: 0.8em; }
#headmiddle div { border: 1px solid #000; margin-bottom: 3px; }
.search { background: orange; }
.active { background: #8ed200; }
#headright { float: right; font-size: 0.8em; }
dt { float: left; font-weight: bold; }
dd { margin-left: 4.5em; }
The result is semantically correct HTML, easier to read and therefore easier to modify in the future. Supporting fiddle.
If you need to do it with CSS, see my changes: Fiddle
I added the following:
#headmiddle span.status { display: block }
This will cause your spans to "stack".
I got it by putting together many different sources. Alex Coles' solution was closest right off the bat but the middle wasn't centered. It was much cleaner than my mess too. I started with the code from this post:
<style type="text/css">
.leftit {
float: left;
}
.rightit {
float: right;
}
.centerit {
width: 30%;
margin-right: auto;
margin-left: auto;
text-align: center;
}
.centerpage {
width: 80%;
margin-right: auto;
margin-left: auto;
}
</style>
</head>
<body>
<div class="centerpage">
<div class="leftit">Hello Left</div>
<div class="rightit">Hello Right</div>
<div class="centerit">Hello Middle</div>
</div>
(fiddle for above)
I took the elements Alex cleaned up which got me even closer to my goal, but the center color blocks were way too wide. From this question I learned about "max-width", which ended up being the final piece I needed...or so I thought.
Edit: max-width doesn't work in IE7 quirks mode (which I have to support) so from this page I learned how to tweak my css to work in IE7 quirks mode, IE8, and FF.
The final code (fiddle):
.leftit {
float: left;
font-size: 0.8em;
}
.rightit {
float: right;
font-size: 0.8em;
}
.centerit {
width:220px;
margin-right: auto;
margin-left: auto;
font-size: 0.8em;
}
#headmiddle div {
border: 1px solid #000;
margin-bottom: 3px;
}
.centerpage {
margin-right: auto;
margin-left: auto;
text-align: center;
}
strong { font-weight: bold; }
.search { background: orange; }
.active { background: #8ed200; }
dt { float: left; font-weight: bold; }
dd { margin-left: 4.5em; }
<div class="centerpage">
<div class="leftit">a little search form here</div>
<div class="rightit">
<dl>
<dt>Legend:</dt>
<dd>Status numero uno</dd>
<dd>Status two</dd>
</dl>
</div>
<div class="centerit" id="headmiddle">
<div class="active"><strong>Status:</strong>
Active</div>
<div class="search">Search results displayed</div>
</div>
</div>
Thanks to all the great answers - I learned a lot from this question.
Paul
Is there any way to add both subscript and and superscript to the same element? If I do
Sample Text<sub>Sub</sub><sup>Sup</sup>
the superscript appears after the subscript. One I idea I had is to do something like:
<table>
<tr>
<td rowspan='2' valign='center'>Sample Text</td>
<td>Sup</td>
</tr>
<tr>
<td>Sub</td>
</tr>
</table>
It seems to do the job but is quite ugly. Any better ideas?
Thanks!
This one is similar to CyberDudes approach, additionally it indents the following text depending on the width of sub and sup:
http://jsfiddle.net/jwFec/1/
Some text <span class="supsub"><sup>sup</sup><sub>sub</sub></span> followed by other text.<br />
<style>
.supsub {
display: inline-block;
}
.supsub sup,
.supsub sub {
position: relative;
display: block;
font-size: .5em;
line-height: 1.2;
}
.supsub sub {
top: .3em;
}
</style>
I'm no CSS guru but you could try something along the lines of http://jsfiddle.net/TKxv8/1/
There are a lot of hardcoded values and the effects on other elements around may only be found afterwards but it's a good place to start.
Sample Text
<span class='supsub'>
<sup class='superscript'>Sup</sup>
<sub class='subscript'>Sub</sub>
</span>
.supsub {position: absolute}
.subscript {color: green; display:block; position:relative; left:2px; top: -5px}
.superscript {color: red; display:block; position:relative; left:2px; top: -5px}
I use the following:
.supsub {
display: inline-flex;
flex-direction: column;
justify-content: space-between;
vertical-align: middle;
}
<span class="supsub">
<span>sup</span>
<span>sub</span>
</span>
Well, you can specify position of sup relative to Sample Text's right border.
http://jsfiddle.net/a754h/
Here's a clean solution. Create two CSS classes:
.nobr {
white-space: nowrap;
}
.supsub {
display: inline-block;
margin: -9em 0;
vertical-align: -0.55em;
line-height: 1.35em;
font-size: 70%;
text-align: left;
}
You might already have the "nobr" class as a <nobr> replacement. Now to express the molecular formula for sulfate, use the "supsub" class as follows:
<span class="nobr">SO<span class="supsub">2-<br />4</span></span>
That is, enclose your superscript/subscript within the "supsub" class, and put a <br /> between them. If you like your superscripts/subscripts a bit larger or smaller, then adjust the font size and then tinker with the vertical-align and line-height. The -9em in the margin setting is to keep the superscripts/subscripts from adding to the height of the line containing them; any big value will do.
On addition to the solution of CyberDude here there is a example that you can do using sup and sub tags and css with flexbox.
<div class="expression">
Sample Text
<span class='supsub'>
<sup class='superscript'>Sup</sup>
<sub class='subscript'>Sub</sub>
</span>
</div>
.expression {
display:flex;
align-items: center;
}
.supsub {
display: flex;
flex-direction: column;
margin-left: 2px;
}
.subscript {
color: green;
display:flex;
}
.superscript {
color: red;
display:flex;
}
You can see and test this here JsFiddle
It can be done very simply by using inline style as well. Specifically: style='position: relative; left: -0.4em;'
So an example would be: u<sub>i</sub><sup style='position: relative; left: -0.4em;'>T</sup>
One can vary the position by changing the value after left. It doesn't reproduce here, but it works fine otherwise.