Vertical text align for multiple lines - html

1) I was wondering how I can have this text all in one block aligned centerally in the page (both vertically and horizontally).
2) I also want each line of text flush with the other lines of text. Any ideas?
Demo
HTML
<div class="row">
<div class="panel">
<div class="large-12 columns" id="date"><span>5TH MAY 2014</span>
</div>
<div class="row">
<div class="large-12 columns" id="title"><span>HIGHGATE MARKET & FAIR</span>
</div>
<div class="row">
<div class="large-12 columns" id="desc"><span>ARTS, CRAFTS, COLLECTABLES AND FINE FOODS</span>
</div>
<div class="row">
<div class="large-12 columns" id="address"><span>Lauderdale House Waterlow Park Highgate Hill Highgate N6 5HG</span>
</div>
</div>
</div>
CSS
#date {
font-size: 114.42px;
}
#title {
font-size: 61.88px;
}
#desc {
font-size: 33.27px;
}
#address {
font-size: 21.68px;
}
.panel {
background-color: #202020;
border-style: none;
}
#font-face {
font-family:'adamregular';
src: url('adam-webfont.eot');
src: url('adam-webfont.eot?#iefix') format('embedded-opentype'), url('adam-webfont.woff') format('woff'), url('adam-webfont.ttf') format('truetype'), url('adam-webfont.svg#adamregular') format('svg');
font-weight: normal;
font-style: normal;
}
body {
font-family:'adam';
color: #B9B8B9;
background-color: #202020;
text-align: center;
position: absolute;
top: 0 bottom: 0;
left: 0;
right: 0;
}

Example fiddle: http://jsfiddle.net/T2T69/1/
with the markup you provided you can remove the absolute position from body and add this style
html, body {
height: 100%;
margin: 0;
padding: 0;
}
body {
display: table;
width: 100%;
}
body > .row {
display: table-cell;
vertical-align: middle;
text-align: center;
}
Example screenshot (on firefox 27)
As a side note, I would suggest to use a cleaner markup instead of nested div, something like
<section>
<time datetime="2014-05-05">5TH MAY 2014</time>
<h1>HIGHGATE MARKET & FAIR <span>ARTS, CRAFTS, ..., FOODS</span></h1>
<p>Lauderdale House Waterlow Park Highgate Hill Highgate N6 5HG</p>
</section>

Related

stack text on top of each other make text bolder (arabic) [duplicate]

This question already has answers here:
How to display accents over words with different colors in HTML/CSS?
(3 answers)
Closed 5 months ago.
I have this problem that there is a border around the text when stacking that same word over itself.
you see I'm trying to color diacritical marks in Arabic like "كتب" vs "كُتُب"
there is no direct way to do that.
so I write the text twice one with the diacritical marks and the other without, then stack them together just like in container1:
body,
* {
padding: 0;
margin: 0;
margin-top: 20px;
}
div {
position: relative;
height: 200px
}
div p {
position: absolute;
top: 0;
left: 0;
font-size: 100px;
font-weight: 600;
}
.container1 p.colored {
color: red;
z-index: 1;
}
.container1 p.base {
color: #000;
z-index: 2;
}
/* container2 */
.container2 p.base {
color: #000;
z-index: 2;
}
/* container3 */
.container3 p.colored {
color: blue;
z-index: 1;
}
.container3 p.base {
color: #000;
z-index: 2;
}
/* container4 */
.container4 p.colored {
color: green;
z-index: 1;
}
.container4 p.base {
color: #000;
z-index: 2;
}
<!DOCTYPE html>
<html lang="ar" dir="rtl">
<head>
</head>
<body>
<div class="container1">
<p class="colored">
كُتُب
</p>
<p class="base">
كتب
</p>
</div>
<div class="container2">
<p class="base">
كُتُب
</p>
</div>
<div class="container3">
<p class="colored">
كُتُب
</p>
<p class="base">
كُتُب
</p>
</div>
<div class="container4">
<p class="colored">
كُتُب
</p>
<p class="base">
كُتُب
</p>
</div>
</body>
</html>
but if you can see there is a border to the text in container1 with the color red.
if you can't see it try changing the color from the devtool with the color Picker.
how can I prevent this effect? thanks
note that i can't change the font weight of the colored paragraph.
an alternative way is to use ::before pseudoelement
inside the content: ""
putting the vowels one by one (without their letter)
the vowel need to be in UNICODE
now 100% it will work because there isn't the letter but only the vowel
TLDR, here is the table:
arab
name
Unicode
َ
fatha
\064E
ُ
damma
\064F
ِ
kasra
\0650
ّ
shadda
\0651
ْ
sukun
\0652
code example:
* {
font-size: 20vmin;
}
.text {
position: relative;
}
.text::before {
content: "";
position: absolute;
color: red;
right: 1ch;
}
.fatha::before {
content: "\064E";
}
.damma::before {
content: "\064F";
}
.kasra::before {
content: "\0650";
}
.shadda::before {
content: "\0651";
}
.sukun::before {
content: "\0652";
}
<div style="display: flex; justify-content: space-around">
<p class="text fatha">كَ</p>
<p class="text damma">كُ</p>
<p class="text kasra">كِ</p>
<p class="text shadda">كّ</p>
<p class="text sukun">كْ</p>
</div>
<div style="display: flex; justify-content: space-around">
<p class="word"><span class="text fatha">كَ</span>تب</p>
<p class="word"><span class="text damma">كُ</span>تب</p>
<p class="word"><span class="text kasra">كِ</span>تب</p>
</div>
<div style="display: flex; justify-content: space-around">
<p class="word"><span class="text shadda">كّ</span>تب</p>
<p class="word"><span class="text sukun">كْ</span>تب</p>
</div>
attention: the position isn't precise when compared to real letter with vowels
but if you don't compare to real one, it should work fine. (like the first image on the top)

Padding/Margin appearing where there shouldn't be any in a 3 column layout

I am trying to create a 3 column layout for a website design that contains an image at the top of each column followed by a h3 then some text. I have done this in the html but when I get to the CSS there are padding/margin coming from somewhere even when I set them both to 0.
Also for some reason the columns aren't aligned vertically correctly?
HTML:
<h3>Why You Should Choose Us For Financing Options.</h3>
<div class="card">
<img src="Heart.png" alt="Heart">
<h5>Lowest Industry Rates</h5>
<p>We take pride in our rates being the lowest in the industry!</p>
</div>
<div class="card">
<img src="Coin.png" alt="Coin">
<h5>Our Funding Is Fast</h5>
<p>After completing our form, you can expect to receive your funding within 48 hours!</p>
</div>
<div class="card">
<img src="File.png" alt="File">
<h5>We're Quick And Easy</h5>
<p>The form is easy to understand and can be completed in minutes!</p>
</div>
CSS:
header h3 {
font-family: 'Montserrat Light', sans-serif;
font-size: 25px;
color: #FFF;
margin-top: 60px;
}
.card {
display: inline-block;
width: 260px;
margin: 0;
padding: 0;
vertical-align: middle;
margin-top: 60px;
}
Image of desired outcome: https://i.gyazo.com/f4a2ef3a9680a1ee79eaafd889d368b7.png
Current outcome:
https://i.gyazo.com/fd2eafc6a980527a07811e409a9262bd.png
How about try this:
HTML:
<h3>Why You Should Choose Us For Financing Options.</h3>
<div id="fc">
<div class="card">
<img src="Heart.png" alt="Heart">
<h5>Lowest Industry Rates</h5>
<p>We take pride in our rates being the lowest in the industry!</p>
</div>
<div class="card">
<img src="Coin.png" alt="Coin">
<h5>Our Funding Is Fast</h5>
<p>After completing our form, you can expect to receive your funding within 48 hours!</p>
</div>
<div class="card">
<img src="File.png" alt="File">
<h5>We're Quick And Easy</h5>
<p>The form is easy to understand and can be completed in minutes!</p>
</div>
</div>
CSS:
header h3 {
font-family: 'Montserrat Light', sans-serif;
font-size: 25px;
color: #FFF;
margin-top: 60px;
}
#fc {
display: flex;
flex-flow: row nowrap;
justify-content: space-between;
}
.card {
display: inline-block;
min-width: 260px;
margin: 0;
padding: 0;
vertical-align: middle;
margin-top: 60px;
}

Anki CSS/HTML align vertically to bottom / center / top

I am editing the template of an Anki deck, which uses HTML and CSS. What I would like to do here is on the front side, vertically aligning the Japanese character to the middle and the hint to the bottom. I tried manually spacing everything with <br>, but then it doesn't work in different resolution windows (and is just a dirty solution) Front example.
On the back side I would like to make the stroke diagram always snap to the top, the Japanese character with keyword and mnemonic in the middle, and the rest on the bottom. If I tried spacing this with <br> I would get the same problem as on the front page, plus the mnemonic is sometimes 1 line, but can also be 5+ lines so it would have to be aligned dynamically to work even if the window size was always the same Back example with arrows.
I already found this question which seems to somewhat answer my question, but as I know practically nothing about CSS/HTML I don't know how to apply it in my case. If you could help me I would greatly appreciate it as I spend a lot of time with this deck and it keeps annoying me, I would also share the improved version for other people to use.
Here is the code for the front
<div class="front" lang="ja">
<span class="large japanese">{{kanji}}</span>
<br>
<hr>
{{hint:Memory palace}}
back
<div class="back" lang="ja">
{{strokeDiagram}}<br> <br>
<hr>
<span class="medium">{{keyword}}</span>
<br/><br/>
<span class="large japanese">{{kanji}}</span>
<br>
<span class="medium">{{myStory}}</span> <br><hr>
<span class="tiny"> Memory palace: {{Memory palace}}</span>
<span class="tiny"> Frame: {{frameNoV6}} Strokes: {{strokeCount}} — Jouyou Grade: {{jouYou}} JLPT: {{jlpt}}</span><br/>
<!-- Uncomment for Heisig Story
<hr>
<span class="medium">{{heisigStory}}</span>
{{#heisigComment}}<br/><br/><span class="small">{{heisigComment}}</span>{{/heisigComment}}
-->
<!-- Uncomment for koohi Story
<hr/>
<span class="medium">{{koohiiStory1}}</span>
-->
<hr/>
<br> <br>
<!-- Uncomment for On-Yomi and Kun-Yomi
<span class="small">On-Yomi: <span class="medium japanese">{{onYomi}}</span> Kun-Yomi: <span class="medium japanese">{{kunYomi}}</span></span><br/>
-->
<span class="tiny">Constituents: {{constituent}}</span><br/><br/>
{{#readingExamples}}<span class="tiny">Examples: <span class="japanese">{{readingExamples}}</span></span>{{/readingExamples}}
</div>
and the styling,
div.front, div.back {
text-align: center;
font-family: sans-serif;
font-size: 16px; /* line height is based on this size in Anki for some reason, so start with the smallest size used */
}
span.tiny {font-size: 16px;}
span.small {font-size: 24px;}
span.medium {font-size: 32px;}
span.large {font-size: 96px;}
span.italic {font-style: italic;}
.win .japanese {font-family: "Meiryo", "MS Mincho";}
.mac .japanese {font-family: "Hiragino Mincho Pro";}
.linux .japanese {font-family: "Kochi Mincho";}
.mobile .japanese {font-family: "Motoya L Cedar", "Motoya L Maru", "DroidSansJapanese", "Hiragino Mincho ProN";}
Front
div.front,
div.back {
width: 100%;
text-align: center;
font-family: sans-serif;
font-size: 16px;
/* line height is based on this size in Anki for some reason, so start with the smallest size used */
}
span.tiny {
font-size: 16px;
}
span.small {
font-size: 24px;
}
span.medium {
font-size: 32px;
}
span.large {
font-size: 96px;
}
span.italic {
font-style: italic;
}
.win .japanese {
font-family: "Meiryo", "MS Mincho";
}
.mac .japanese {
font-family: "Hiragino Mincho Pro";
}
.linux .japanese {
font-family: "Kochi Mincho";
}
.mobile .japanese {
font-family: "Motoya L Cedar", "Motoya L Maru", "DroidSansJapanese", "Hiragino Mincho ProN";
}
/* Positional */
.bottom {
display: block;
position: absolute;
bottom: 0;
left: 0;
width: 100%;
}
.center {
display: block;
position: absolute;
left: 0;
right: 0;
/* I want a better way to do the below! */
top: 50%;
transform: translateY(-50%);
}
.top {
display: block;
position: absolute;
top: 0;
left: 0;
width: 100%;
}
<div class="front" lang="ja">
<span class="large japanese center">{{kanji}}</span>
<hr>
<span class="bottom">{{hint:Memory palace}}</span>
Note that the <hr> is unstyled.
Back
div.front,
div.back {
width: 100%;
text-align: center;
font-family: sans-serif;
font-size: 16px;
/* line height is based on this size in Anki for some reason, so start with the smallest size used */
}
span.tiny {
font-size: 16px;
}
span.small {
font-size: 24px;
}
span.medium {
font-size: 32px;
}
span.large {
font-size: 96px;
}
span.italic {
font-style: italic;
}
.win .japanese {
font-family: "Meiryo", "MS Mincho";
}
.mac .japanese {
font-family: "Hiragino Mincho Pro";
}
.linux .japanese {
font-family: "Kochi Mincho";
}
.mobile .japanese {
font-family: "Motoya L Cedar", "Motoya L Maru", "DroidSansJapanese", "Hiragino Mincho ProN";
}
/* Positional */
.bottom {
display: block;
position: absolute;
bottom: 0;
left: 0;
width: 100%;
}
.center {
display: block;
position: absolute;
left: 0;
right: 0;
/* I want a better way to do the below! */
top: 50%;
transform: translateY(-50%);
}
.top {
display: block;
position: absolute;
top: 0;
left: 0;
width: 100%;
}
<div class="back" lang="ja">
<div class="top">{{strokeDiagram}}</div>
<hr>
<div class="center"><span class="medium">{{keyword}}</span>
<span class="large japanese">{{kanji}}</span>
</div>
<div class="bottom">
<span class="medium">{{myStory}}</span> <br>
<hr>
<span class="tiny"> Memory palace: {{Memory palace}}</span>
<span class="tiny"> Frame: {{frameNoV6}} Strokes: {{strokeCount}} — Jouyou Grade: {{jouYou}} JLPT: {{jlpt}}</span><br/>
<!-- Uncomment for Heisig Story
<hr>
<span class="medium">{{heisigStory}}</span>
{{#heisigComment}}<br/><br/><span class="small">{{heisigComment}}</span>{{/heisigComment}}
-->
<!-- Uncomment for koohi Story
<hr/>
<span class="medium">{{koohiiStory1}}</span>
-->
<hr/>
<br> <br>
<!-- Uncomment for On-Yomi and Kun-Yomi
<span class="small">On-Yomi: <span class="medium japanese">{{onYomi}}</span> Kun-Yomi: <span class="medium japanese">{{kunYomi}}</span></span><br/>
-->
<span class="tiny">Constituents: {{constituent}}</span><br/><br/> {{#readingExamples}}
<span class="tiny">Examples: <span class="japanese">{{readingExamples}}</span></span>{{/readingExamples}}
</div>
</div>
One problem with this technique is that, if there is insufficient space, they will draw over each other.

Element in col shifts slightly when element in adjacent column is toggled

Currently working on a weather app using bootstrap, and within one row I have two columns: one side shows the temperature, which can be toggled between C and F, and the other shows other basic weather information (right now I just have a basic weather description). But when I toggle the temperature between C and F, the differences in width of those two letters appears to push the weather info slightly to the left or right.
I've tried applying position:absolute/relative and floats to both elements, but can't seem to fix the problem. Any help would be appreciated!
All my code is in Codepen: https://codepen.io/alissaw/pen/pppzwd but here is the element-specific code isolated (#weatherdata is the element that's shifting):
<body>
<div>
<h1 id = "location">
</h1>
</div>
<div class="loader"></div>
<div class="container">
<div class="row">
<div class="col-md-6">
<label class="switch">
<input type="checkbox">
<div class="slider">
</div>
<div class="text"></div>
</label>
<p id="temp"></p>
</div>
<div class="col-md-6">
<h2 id="weatherData">
</h2>
</div>
</div>
</div>
--- CSS ---
body{
background-color: #4FCCFF;
text-align: center;
background-repeat: no-repeat;
background-size: cover;
}
.container{
background-color: rgba(0,0,0,0.1);
width: 70%;
margin: auto;
overflow:hidden;
}
#location{
text-align: center;
font-size: 60px;
color: white;
font-family: Raleway;
font-weight: 200;
}
#temp{
font-size: 100px;
font-family: Raleway;
font-weight: 250;
float: left;
color: white;
}
#weatherData{
font-size: 40px;
color: white;
font-family: Raleway;
font-weight: 200;
margin-top: 5%;
display: inline-block;
position: absolute;
}
So in your codepen I noticed that you used bootstrap classes but did not add in the bootstrap CSS file. I added the CSS file in and it seemed to work just fine without the shifting.
From the settings try adding in the bootstrap file:
https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-beta.3/css/bootstrap.css

Add href to the entire div with HTML

I wanted to have the entire div link to microsoft.com. How do I add a link to the entire div wrapper-promo? I wanted it to where ever the user clicks, they would go to the link.
Here's my jsfiddle:
http://jsfiddle.net/huskydawgs/eL7rwLx3/45/
Here's my HTML:
<div class="wrapper-promo">
<div class="title-top">
<h2 class="block-title">
Three states or less</h2>
</div>
<div class="promo-content">
<p>Bid and RFP Notification Only</p>
<p>Online and email support</p>
<p><img height="31" src="http://www.onvia.com/sites/default/files/button_get_started_orange.png" width="112" /></p>
</div>
Here's my CSS:
.wrapper-promo {
background-color: #e2e3e4;
margin: 10px 0;
width: 100%;
}
.title-top {
background-color: #2251a4;
height: 40px;
line-height: 40px;
}
.title-top-cell {
display: table-cell;
vertical-align: middle;
}
.promo-content {
margin: 20px;
padding: 0 0 10px 0;
}
h2 {
font-family:Arial,sans-serif;
font-size:19px;
font-weight: bold;
color:#fff;
margin: 10px 0 -10px 0;
text-transform:none;
}
h2.block-title {
font-size:22px;
margin: 0;
text-align: center;
text-transform:none;
}
.promo-content p {
font-family: Arial,sans-serif;
font-size: 14px;
color: #232323;
line-height: 20px;
text-align: center;
}
I would suggest adding an empty anchor element as a direct child of the .wrapper-promo element. Then you can absolutely position it relative to the parent element so that it will take whatever dimensions the parent element is.
In doing so, the entire element is clickable, and you don't have to worry about wrapping the a element around any div or block-level elements:
Updated Example
.wrapper-promo {
position: relative;
}
.wrapper-promo > a {
position: absolute;
top: 0; right: 0;
bottom: 0; left: 0;
}
<div class="wrapper-promo">
<div class="title-top"><!-- ... --></div>
<div class="promo-content"><!-- ... --></div>
</div>
With HTML5 it is allowed to wrap block elements within a tags even though the a tag is an inline element. Here is a fiddle where your original link is used as a container for all the other elements.
http://jsfiddle.net/Nillervision/761tubkc/
<a class="blockLink" href="http://www.microsoft.com">
<div class="wrapper-promo">
<div class="title-top">
<h2 class="block-title">
Three states or less
</h2>
</div>
<div class="promo-content">
<p>Bid and RFP Notification Only</p>
<p>Online and email support</p>
<p>
<img height="31" src="http://www.onvia.com/sites/default/files/button_get_started_orange.png" width="112" />
</p>
</div>
</div>
</a>
Instead of a div, just use an a with display:block;.
It will behave as a block element in your flow, and you can set an href etc.
You may need to override its color, text-decoration, and :visited CSS.
The alternative here is to use a click event with Javascript - blech.
Code request edit:
All you need to do is change the style of .wrapper-promo:
.wrapper-promo {
background-color: #e2e3e4;
display:block;
margin: 10px 0;
text-decoration: none;
width: 100%;
}
then change it to an a:
<a class="wrapper-promo" href='http://www.google.com/'>
...
</a>