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)
Related
I was working on a project and started working on texts when I realized that if a set the margin-top: 20vh property on CSS does not work, why? Please help me.
#text1 {
margin-top: 26vh;
}
#text2 {
float: right;
margin-right: 15mm;
margin-top: 22vh;
}
#text3 {
float: left;
margin-top: 37vh;
}
<section class="imagesUnderHeader" id="image2" style="background-image: url(Images/Loop.gif)">
<div class="progressionBar" id="progressionBar"></div>
<div class="dots" id="firstParagraph"></div>
<div class="dots" id="secondParagraph"></div>
<div class="dots" id="thirdParagraph"></div>
<div class="paragraphBar" id="bar1"></div>
<div class="paragraphBar" id="bar2"></div>
<div class="paragraphBar" id="bar3"></div>
<h1 class="title adjustPadding goUpText" id="title">Some Text</h1><br>
<p class="subtitle adjustPadding popUpText" id="text1">Subtitle 1</p><br>
<p class="subtitle adjustPadding popUpText" id="text2">Subtitle 2</p><br>
<p class="subtitle adjustPadding popUpText" id="text3">Subtitle 3, <a> with a link, </a> <a>Another one</a><br> <a>and another one</a></p>
</section>
If you need any informations please ask and I will provide additional informations, thank you so much for the help.
Here I made a demo stripping away some details from your code that were just adding noise for the sake of better showing what's going on.
As the mdn docs says:
https://developer.mozilla.org/en-US/docs/Learn/CSS/Building_blocks/Values_and_units
1vh = 1% of the viewport's height
I included that quote just to avoid any ambiguity but it was pretty clear already.
In this demo I just used one single custom css property to decide the margin-top value and used that value to set the margin-top of all the 3 #text elements and to size the ::before element used as a placeholder to highlight the margin like it was a ruler.
The value of that variable is going to be 10vh so 10% of viewport's height.
As you can see running the demo at full screen, if you resize the window, those distances will indeed change as expected.
:root {
--margin-top: 10vh;
}
* {
margin: 0;
padding; 0;
}
#text1, #text2, #text3 {
margin-top: var(--margin-top);
}
.title {
border: solid 1px;
}
.subtitle {
position: relative;
border: solid 1px blue;
}
.subtitle::before {
content: '';
position: absolute;
height: var(--margin-top);
border: solid 1px red;
width: 0px;
top: calc(-1 * var(--margin-top) - 1px); /*here it's doing -1px to account for border*/
left: 5px;
}
<section class="imagesUnderHeader" id="image2">
<h1 class="title adjustPadding goUpText" id="title">Some Text</h1>
<p class="subtitle adjustPadding popUpText" id="text1">Subtitle 1</p>
<p class="subtitle adjustPadding popUpText" id="text2">Subtitle 2</p>
<p class="subtitle adjustPadding popUpText" id="text3">
Subtitle 3,
<a> with a link, </a>
<a>Another one</a>
<br>
<a>and another one</a>
</p>
</section>
Anyway the whole truth is also that I removed the <br>s that were going to add vertical spaces hard to discern from margins and more importantly I also removed the float left and right because they affect the positioning in relation to the document flow.
So for the sake of completeness this is the same exact demo with those styles added to show the difference:
:root {
--margin-top: 10vh;
}
* {
margin: 0;
padding; 0;
}
#text1, #text2, #text3 {
margin-top: var(--margin-top);
}
#text2{
float: left;
}
#text3{
float: right;
}
.title {
border: solid 1px;
}
.subtitle {
position: relative;
border: solid 1px blue;
}
.subtitle::before {
content: '';
position: absolute;
height: var(--margin-top);
border: solid 1px red;
width: 0px;
top: calc(-1 * var(--margin-top) - 1px); /*here it's doing -1px to account for border*/
left: 5px;
}
<section class="imagesUnderHeader" id="image2">
<h1 class="title adjustPadding goUpText" id="title">Some Text</h1>
<p class="subtitle adjustPadding popUpText" id="text1">Subtitle 1</p>
<p class="subtitle adjustPadding popUpText" id="text2">Subtitle 2</p>
<p class="subtitle adjustPadding popUpText" id="text3">
Subtitle 3,
<a> with a link, </a>
<a>Another one</a>
<br>
<a>and another one</a>
</p>
</section>
So to make it short, to me the margin is correctly applied. So I'm not sure I'm answering to the exact issue you are encountering. As an added consideration maybe you are fighting against the margin collapsing and in case that's an option, here is the related info from mdn:
https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Box_Model/Mastering_margin_collapsing
I have an issue where my text isn't moving onto a new line when it reaches the edge of its parent div, but stretches the parent div downwards to make space width-wise. Two pictures are shown below illustrating the issue.
The HTML and appropriate CSS will be shown below.
#import url('https://fonts.googleapis.com/css2?family=Raleway:wght#300&display=swap');
* {
font-family: Raleway;
}
.menu {
display: block;
overflow: hidden;
}
.section-one {
display: inline-block;
}
.section-two {
padding-left: 2em;
}
.block {
padding: 0.5em;
}
.button {
cursor: pointer;
}
.float-left {
float:left;
}
.float-right {
padding-left: 2em;
float:right;
}
.img-menu {
border-radius: 50%;
margin: auto;
display: inline-block;
}
.img-info {
display: inline-block;
}
.h {
padding-left:0.5em;
color: #777;
}
.h-primary {
margin-top: 0;
margin-bottom: 0.25em;
color: black;
}
.h-secondary {
margin-top: 0.25em;
}
.h-tertiary {
margin-top: 0.25em;
margin-bottom: 0;
overflow: auto;
}
<div className='menu'>
<div className='float-left'>
{details.reduce(
function(accumulator, currentValue, currentIndex, array) {
if (currentIndex % 2 === 0) {
var temp = array.slice(currentIndex, currentIndex + 2)
temp[0]['pair'] = true
temp[1]['pair'] = false
accumulator.push(temp)
}
return accumulator;
}, []).map((pair) =>
<div className='block'>
{pair.map((detail) =>
<div onclick="location.href='#';" className={['button', detail.pair ? 'float-left' : 'float-right'].join(' ')}>
<img src={detail.imgsrc} className='img-menu' />
<div className='img-info'>
<div>
<strong>
<h5 className='h h-primary'>
{detail.buttontitle}
</h5>
</strong>
</div>
<div>
<h5 className='h h-secondary'>
{detail.buttonsubtitle}
</h5>
</div>
</div>
</div>
)}
</div>
)}
</div>
<!-- Section with the issue! -->
<div className='section-two float-left'>
<div className='block'>
<div>
<strong>
<h5 className='h h-primary'>
Placeholder
</h5>
</strong>
</div>
<div>
<h5 className='h h-tertiary '>
Placeholder Placeholder Placeholder Placeholder Placeholder Placeholder
</h5>
</div>
</div>
<div className='block'>
<h5 className='h h-primary'>
PlaceholderButton
</h5>
</div>
</div>
</div>
Any help will be greatly appreciated!
This question already has answers here:
Two divs side by side - Fluid display [duplicate]
(9 answers)
Fluid width with equally spaced DIVs
(7 answers)
Closed 2 years ago.
Im still learning html/css therefore I apologize if the code is wrong. I've been doing a replica of a site. There are 4 articles on the down side of the site.
I've created two but the second one always appears under the first one, even though I've gave the div which wraps it "display: inline-block;". I haven't got to learn flexbox yet, any idea how can I fix this?
.subarticle {
background: white;
width: 220px;
height: 350px;
position: absolute;
top: 135%;
left: 20%;
border: 1px solid black;
}
.goodidea {
width: 100%;
height: 40%;
}
.SOČ {
font-family: "Open Sans",sans-serif;
}
.informacie {
margin-top: -15px;
margin-left: 20px;
font-family: "Open Sans",sans-serif;
}
.far {
margin-right: 7px;
}
h3 {
font-size: 15px;
color: red;
text-align: center;
margin-right: 10px;
}
.read {
color: orange;
margin-top: -8px;
margin-left: -10px;
font-weight: 700;
font-size: 12px;
width: 70px;
}
.read:hover {
background: rgb(241, 221, 184);
transition: 0.3s ease;
cursor: pointer;
}
.wrapper {
display: inline-block;
vertical-align: middle;
}
<article>
<div class="subarticle">
<div class="wrapper">
<img src="img/logo2.jpg" alt="logo s textom good idea" class="goodidea">
<div class="informacie">
<h2 class="SOČ">SOČ</h2>
<p class="datum"><i class="far fa-calendar-times"></i>6.1.2021</p>
<h3>
Stredoškolská odborná činnosť <br> <br>
Prekonaj sám seba a ukáž, že máš talent...
</h3>
<p class="read">ČÍTAŤ VIAC</p>
</div>
</div>
<div class="wrapper">
<img src="img/logo2.jpg" alt="logo s textom good idea" class="goodidea">
<div class="informacie">
<h2 class="SOČ">SOČ</h2>
<p class="datum"><i class="far fa-calendar-times"></i>6.1.2021</p>
<h3>
Stredoškolská odborná činnosť <br> <br>
Prekonaj sám seba a ukáž, že máš talent...
</h3>
<p class="read">ČÍTAŤ VIAC</p>
</div>
</div>
</div>
</article>
Thanks in advance
Use display:flex; on the parent element and they will be aligned in one row. You will need no more CSS.
CSS:
.subarticle{
display:flex;
}
Codepen Link: https://codepen.io/emmeiWhite/pen/YzGjOgP
FULL CODE SNIPPET:
.subarticle{
display:flex;
}
<article>
<div class="subarticle">
<div class="wrapper">
<img src="img/logo2.jpg" alt="logo s textom good idea" class="goodidea">
<div class="informacie">
<h2 class="SOČ">SOČ</h2>
<p class="datum"><i class="far fa-calendar-times"></i>6.1.2021</p>
<h3>
Stredoškolská odborná činnosť <br> <br>
Prekonaj sám seba a ukáž, že máš talent...
</h3>
<p class="read">ČÍTAŤ VIAC</p>
</div>
</div>
<div class="wrapper">
<img src="img/logo2.jpg" alt="logo s textom good idea" class="goodidea">
<div class="informacie">
<h2 class="SOČ">SOČ</h2>
<p class="datum"><i class="far fa-calendar-times"></i>6.1.2021</p>
<h3>
Stredoškolská odborná činnosť <br> <br>
Prekonaj sám seba a ukáž, že máš talent...
</h3>
<p class="read">ČÍTAŤ VIAC</p>
</div>
</div>
</div>
</article>
I'm trying to have all images in my flex container have the same height using a 4:3 ratio, all of this being responsive.
When out of the flex container everything works well, but when put in it, it seems like it's the length of the title that dictates the width. I can't figure out why.
https://jsfiddle.net/ts8Lwp6g/
/* Just copying the guy in vid for now, trying to figure it all out hopefully it won't be too much of a bother responsive eh ffs , somethings I haven't copied, tryna do best */
body {
font-family: Arial, Helvetica, sans-serif;
font-size: 15px;
background-color: gray;
width: 80%;
margin: auto;
}
#cccccc {
background-color: orange;
display: flex;
flex-wrap: wrap;
justify-content: center;
}
.w {
background-color: red;
/* doesnt show hay */
display: block;
}
.views {
float: left
}
.rating {
float: right
}
.parentt {
max-width: 258px;
}
.containertt {
width: 100%;
position: relative;
padding-bottom: 75%;
/* 34.37% = 100 / (w / h) = 100 / (640 / 220) */
}
.containertt img {
width: 100%;
height: 100%;
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
}
.figcaptionnnn {
/* background-color:red; */
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
max-width: 100%
}
.figcaptionnnn a {
color: white;
text-decoration: none;
}
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="tete.css">
</head>
<body>
<div id="cccccc">
<div class="parentt">
<div class="containertt">
<img height="145" width="258" src="https://s3-us-west-2.amazonaws.com/i.cdpn.io/221971.RajoRb.7fb2f73a-0b7d-4aa3-ac25-f0f31261cdae.png" />
</div>
<div class="figcaptionnnn">
<span class="titlee"><a href=https://pornhub.com/view_video.php?viewkey=1306454068 title="Tall french maid and batman" >Tall french maid and batman</a></span></br>
<div class="w"><span class="views"> 692818 views</span><span class="rating">75 %</span></div>
</div>
</div>
<div class="parentt">
<div class="containertt">
<img height="145" width="258" src="https://s3-us-west-2.amazonaws.com/i.cdpn.io/221971.RajoRb.7fb2f73a-0b7d-4aa3-ac25-f0f31261cdae.png" />
</div>
<div class="figcaptionnnn">
<span class="titlee"><a href=https://pornhub.com/view_video.php?viewkey=1306454068 title="Tall french maid and batman" >Tall french maid and batman vdfvdsv dvdfv ddffv dvddv dvdcffc dvdfcd</a></span><br/>
<div class="w"><span class="views"> 692818 views</span><span class="rating">75 %</span></div>
</div>
</div>
</div>
<div class="parentt">
<div class="containertt">
<img height="145" width="258" src="https://s3-us-west-2.amazonaws.com/i.cdpn.io/221971.RajoRb.7fb2f73a-0b7d-4aa3-ac25-f0f31261cdae.png" />
</div>
<div class="figcaptionnnn">
<span class="titlee"><a href=https://pornhub.com/view_video.php?viewkey=1306454068 title="Tall french maid and batan" >Tall french maid and batman</a></span></br>
<div class="w"><span class="views"> 692818 views</span><span class="rating">75 %</span></div>
</div>
</div>
<div class="parentt">
<div class="containertt">
<img height="145" width="258" src="https://s3-us-west-2.amazonaws.com/i.cdpn.io/221971.RajoRb.7fb2f73a-0b7d-4aa3-ac25-f0f31261cdae.png" />
</div>
<div class="figcaptionnnn">
<span class="titlee"><a href=https://pornhub.com/view_video.php?viewkey=1306454068 title="Tall french maid and batman" >Tall french maid and batman vdfvdsv dvdfv ddffv dvddv dvdcffc dvdfcd</a></span></br>
<div class="w"><span class="views"> 692818 views</span><span class="rating">75 %</span></div>
</div>
</div>
</body>
</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>