When the window gets smaller words jump to another line and white-space between the words become bigger; incidentally the website is in Arabic not in English
I tried to reduce the width of the div that contains them and nothing changed; but I don't know if the problem is the language.
.content {
width: 50%;
margin: 1em auto;
font-size: 20px;
line-height: 30px;
/*text-align: justify;*/
justify-content: center;
align-items: center;
direction: rtl;
}
<div class="content">
<p>
<h1>أهلا بك في SyTech أول موقع خاص في محافظة طرطوس!</h1>
</p>
<p>
<h2> إن موقعنا يساعد في زيادة حركة التجارة الإلكترونية بهدف تطوير مجال التكنولوجيا في وطننا الحبيب سوريا.<br>و هذا يعني أنه بإمكانك استخدام الموقع لعرض البضائع التي تريد بيعها أو تصفح البضائع المنشورة من قبل أشخاص آخرين!</h2>
</p>
<hr>
<p>إن المبرمج الوحيد الذي عمل على هذا الموقع هو تيم زغيبة</p>
</div>
Related
I have this project and I have a list and it contains several points and next to each point there is a right icon, and my problem is that I want to put the icon on the right side, as shown in the picture and not on the left side
index.html:
<p class="fst-italic">
قامت سبتمبر بعد بـ, عدد أمّا تحرير أم. يطول نهاية الرئيسية ثم حيث. أن بداية الصفحة بعد, بل أضف وسفن وسمّيت. يطول إجلاء لمّ ان, بل أحدث ممثّلة اليميني ذات. وأزيز فهرست المتحدة إذ لها.
</p>
<ul style="direction:RTL;" >
<li > <i class="bi bi-check2-all"></i>كلّ السفن أجزاء المعاهدات تم, واستمر لكل أي. كل بلا بفرض الساحة وإيطالي, بحق.</li>
<li> كلّ السفن أجزاء المعاهدات تم, واستمر لكل أي. كل بلا بفرض الساحة وإيطالي, بحق.<i class="bi bi-check2-all"></i></li>
<li> كلّ السفن أجزاء المعاهدات تم, واستمر لكل أي. كل بلا بفرض الساحة وإيطالي, بحق.<i class="bi bi-check2-all"></i></li>
</ul>
<p>
الى من سابق وفنلندا. بحث ودول بتحدّي الهجوم أم, بل حتى النزاع بلديهما والكوري, ليرتفع وقدّموا هذا ان. لغزو العمليات مكن إذ. أي طوكيو واقتصار ايطاليا، أما, تونس ايطاليا، أي شيء, بل بعض الأجل البشريةً. عن بلا ميناء وحلفاؤها, دون صفحة ضمنها التجارية عن. أسيا ماليزيا، أي وقد, لم دار مهمّات ومحاولة, نفس هو ثانية الثالث.
</p>
Assuming you use an icon font:
Simply using CSS ul { list-style-type: "\icon-hex-code" } the positioning should be handled by the default html document direction mechanism. This will require you to remove the <i> from the <li>, otherwise you will get 2 icons.
By lack of icons I tested this with UNICODE U+2713 (Checkmark) pre/post-fixed with U+00A0 (non breaking space, html ) to get some spacing around the icon. It's color will be equal to the font color of the li, which may be undesired in your case.
When your icon is an SVG you may be able to use list-style-image instead of list-style-type, but I have too little info to go with.
Which icons/file/images do you use for this? E.g. Fontawesome has CSS+iconfont vs. JS+SVG versions to choose from...
Check the snippet
ul {
direction: rtl;
/* \nbsp\checkmark\nbsp */
list-style-type: "\00a0\2713\00a0";
/* replace '2713' with your icon hex code */
}
<p class="fst-italic">
قامت سبتمبر بعد بـ, عدد أمّا تحرير أم. يطول نهاية الرئيسية ثم حيث. أن بداية الصفحة بعد, بل أضف وسفن وسمّيت. يطول إجلاء لمّ ان, بل أحدث ممثّلة اليميني ذات. وأزيز فهرست المتحدة إذ لها.
</p>
<ul>
<li>كلّ السفن أجزاء المعاهدات تم, واستمر لكل أي. كل بلا بفرض الساحة وإيطالي, بحق.</li>
<li>كلّ السفن أجزاء المعاهدات تم, واستمر لكل أي. كل بلا بفرض الساحة وإيطالي, بحق.</li>
<li>كلّ السفن أجزاء المعاهدات تم, واستمر لكل أي. كل بلا بفرض الساحة وإيطالي, بحق.</li>
</ul>
<p>
الى من سابق وفنلندا. بحث ودول بتحدّي الهجوم أم, بل حتى النزاع بلديهما والكوري, ليرتفع وقدّموا هذا ان. لغزو العمليات مكن إذ. أي طوكيو واقتصار ايطاليا، أما, تونس ايطاليا، أي شيء, بل بعض الأجل البشريةً. عن بلا ميناء وحلفاؤها, دون صفحة ضمنها التجارية عن. أسيا ماليزيا، أي وقد, لم دار مهمّات ومحاولة, نفس هو ثانية الثالث.
</p>
You could also apply bootstrap's icons to the ::marker pseudo element to define custom bullet points.
[lang=ar] *,
.rtl * {
direction: rtl;
text-align: right;
}
.ul-check {
padding-inline-start: 1.5em;
}
.ul-check li {
padding-left:0.5em;
}
[lang=ar] .ul-check li {
padding-right:0.5em;
}
.ul-check li::marker {
display: inline-block;
font-family: bootstrap-icons !important;
font-style: normal;
font-weight: normal !important;
font-variant: normal;
text-transform: none;
line-height: 1;
vertical-align: -0.125em;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
content: "\f26f";
color: red;
margin-right:-1em;
}
.bi-check2-all::before {
}
.flex{
display:flex;
gap:0.5em;
}
.item{
border:1px solid #ccc;
flex:1;
}
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#4.6.1/dist/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons#1.9.1/font/bootstrap-icons.css">
<div lang="ar" xml:lang="ar">
<p class="fst-italic">
قامت سبتمبر بعد بـ, عدد أمّا تحرير أم. يطول نهاية الرئيسية ثم حيث. أن بداية الصفحة بعد, بل أضف وسفن وسمّيت. يطول إجلاء لمّ ان, بل أحدث ممثّلة اليميني ذات. وأزيز فهرست المتحدة إذ لها.
</p>
<div class="flex">
<div class="item">1. flex item</div>
<div class="item">2. flex item</div>
<div class="item">2. flex item</div>
</div>
<ul class="ul-check ">
<li>كلّ السفن أجزاء المعاهدات تم, واستمر لكل أي. كل بلا بفرض الساحة وإيطالي, بحق.</li>
<li> كلّ السفن أجزاء المعاهدات تم, واستمر لكل أي. كل بلا بفرض الساحة وإيطالي, بحق.</li>
<li> كلّ السفن أجزاء المعاهدات تم, واستمر لكل أي. كل بلا بفرض الساحة وإيطالي, بحق.</li>
</ul>
</div>
<h2>English text</h2>
<p>This is an English paragraph text. This is an English paragraph text. This is an English paragraph text. </p>
<div class="flex">
<div class="item">1. flex item</div>
<div class="item">2. flex item</div>
<div class="item">2. flex item</div>
</div>
<ul class="ul-check ">
<li>This is an English bullet point text</li>
<li>This is an English bullet point text</li>
<li>This is an English bullet point text</li>
</ul>
In the above example we're using language attributes lang=ar to specify the current section's language.
Now we can add suitable css rules to change text directions:
[lang=ar] *,
.rtl * {
direction: rtl;
text-align: right;
}
I am newbie with html css and here is my problem.
I code a very simple html and I want to put the image at the left, the text at the right.
Here is my html code.
<div class="main_product">
<div class="main_product-img" style="background-image: url('https://myphamohui.com/wp-content/uploads/2019/07/sua-mat-ohui-prime-advancer.png');"></div>
<div class="main_product-info text-left">
<h1 class="main_product-name">
Sữa Rửa Mặt Primer Advancer Ohui 250ml giúp da căng bóng, mướt mịn, sáng khỏe
</h1>
<h3 class="main_product-price">790,000₫</h3>
<p class="main_product-desc">
Bộ sản phẩm ngăn ngừa lão hóa Ohui Prime Advancer 5pcsBộ sản phẩm ngăn ngừa lão hóa Ohui Prime Advancer 5pcs có tác dụng chống lão hóa, chống nhăn, giúp da săn chắc căng bóng, mịn màng. Sản phẩm thẩm thấu sâu vào 3 lớp biểu bì, thân bì và hạ bì để nuôi
dưỡng da từ gốc cho bạn một làn da khỏe và đẹp tự nhiên một cách bền vững, mang lại làn da trắng sáng
</p>
</div>
</div>
Here is my css code
.main_product-img {
height: 400px;
width: 400px;
background-size: contain;
position: absolute;
left: 0%;
}
.text-left {
text-align: left;
float: right;
}
And here is the page I got , as you can see in this picture, the text over the picture.
But, when I compact the text, here is what I got
As you can see, all the text come to the right next to the image, but not near the image as I want.
So, could you please help me how to make the to be next to the image ?
Thank you very much for your time.
You can set float: left; to your img instead of float: right; to your text.
Use this code and you can change image width to control size..
your HTML structure isn't correct
.main_product{
display: flex;
align-items: center;
}
.main_product-img{
width: 40rem;
}
<div class="main_product">
<img class="main_product-img" src="https://myphamohui.com/wp-content/uploads/2019/07/sua-mat-ohui-prime-advancer.png" title="" alt="">
<div class="main_product-info">
<h1 class="main_product-name">
Sữa Rửa Mặt Primer Advancer Ohui 250ml giúp da căng bóng, mướt mịn, sáng khỏe
</h1>
<h3 class="main_product-price">790,000₫</h3>
<p class="main_product-desc">
Bộ sản phẩm ngăn ngừa lão hóa Ohui Prime Advancer 5pcsBộ sản phẩm ngăn ngừa lão hóa Ohui Prime Advancer 5pcs có tác dụng chống lão hóa, chống nhăn, giúp da săn chắc căng bóng, mịn màng. Sản phẩm thẩm thấu sâu vào 3 lớp biểu bì, thân bì và hạ bì để nuôi
dưỡng da từ gốc cho bạn một làn da khỏe và đẹp tự nhiên một cách bền vững, mang lại làn da trắng sáng
</p>
</div>
</div>
please use bootstrap grid instead of doing that with float.
bootstrap is a style component which is responsive.
link :https://getbootstrap.com/docs/4.0/layout/grid/.
or please read flex tutorial in css:
https://www.w3schools.com/cssref/css3_pr_flex.asp
for aligning element in html use flex in css.
you can use font-size to size your paragraph or for Put together p tag or you can use margin for space between image or p tag
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.main_product{
width: 100%;
height: 100%;
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
}
.main_product-img {
height: 400px;
width: 400px;
position: relative;
left: 0%;
float: left;
}
.text-left {
text-align: left;
float: right;
}
/* .container {
width: 100%;
height: 100%;
position: relative;
display: flex;
flex-direction: row;
align-items: center;
justify-content: center;
} - Not needed because I made .main_product the container */
</style>
</head>
<body>
<div class="main_product">
<img src="https://myphamohui.com/wp-content/uploads/2019/07/sua-mat-ohui-prime-advancer.png" alt="">
<div class="main_product-info text-left">
<h1 class="main_product-name">
Sữa Rửa Mặt Primer Advancer Ohui 250ml giúp da căng bóng, mướt mịn, sáng khỏe
</h1>
<h3 class="main_product-price">790,000₫</h3>
<p class="main_product-desc">
Bộ sản phẩm ngăn ngừa lão hóa Ohui Prime Advancer 5pcsBộ sản phẩm ngăn ngừa lão hóa Ohui Prime Advancer 5pcs
có tác dụng chống lão hóa, chống nhăn, giúp da săn chắc căng bóng, mịn màng. Sản phẩm thẩm thấu sâu vào 3
lớp biểu bì, thân bì và hạ bì để nuôi
dưỡng da từ gốc cho bạn một làn da khỏe và đẹp tự nhiên một cách bền vững, mang lại làn da trắng sáng
</p>
</div>
</div>
</body>
</html>
Containers will save your butt in these situations, I made main_product a container, set it to flex, row, and look at the magic it did. :), Also I set the image into a tag so it doesnt get cut off
I made 2 spans, one with a text and one with an image, but they aren't in the same line. Anyone has help?
HTML
.übersicht{
font-size: x-large;
text-align: left;
}
.bild{
text-align: right;
}
<span class="überschrift">
<h1>Übersicht</h1>
<ul>
<li>(Sir) Timothy John Berners-Lee</li>
<li>Geboren am 8. Juni 1955 in London</li>
<li>Britischer Physiker & Informatiker</li>
<li>Begründer des World Wide Web</li>
<li>Erfinder von HTML</li>
</ul>
</span>
<span class="bild">
<img src="bernerslee.png" alt="Dieses Bild ist nicht verfügbar." />
</span>
You can wrap your span inside div and add below css:
.übersicht {
font-size: x-large;
text-align: left;
}
.bild {
text-align: right;
}
.display-flex {
display: flex;
}
<div class="display-flex">
<span class="überschrift">
<h1>Übersicht</h1>
<ul>
<li>(Sir) Timothy John Berners-Lee</li>
<li>Geboren am 8. Juni 1955 in London</li>
<li>Britischer Physiker & Informatiker</li>
<li>Begründer des World Wide Web</li>
<li>Erfinder von HTML</li>
</ul>
</span>
<span class="bild">
<img src="bernerslee.png" alt="Dieses Bild ist nicht verfügbar." />
</span>
</div>
Just use float:right and float:left it will show like that
.übersicht{
font-size: x-large;
float: left;
}
.bild{
float: right;
position:relative;
bottom:110px;
}
<span class="überschrift">
<h1>Übersicht</h1>
<ul>
<li>(Sir) Timothy John Berners-Lee</li>
<li>Geboren am 8. Juni 1955 in London</li>
<li>Britischer Physiker & Informatiker</li>
<li>Begründer des World Wide Web</li>
<li>Erfinder von HTML</li>
</ul>
</span>
<span class="bild">
<img src="bernerslee.png" alt="Dieses Bild ist nicht verfügbar." />
</span>
I have this piece of code and I need to make 2 separate results :
https://jsfiddle.net/29Lxsq1m/
1. Make the left and right divs(l0,r0) adjust to image height
2. Align the image to the center
I have tried to achieve the 2nd scenario with various but nothing seems to work excuse if these are dumb q's but I have been trying to make this 5 hours now and my mental can't handle this anymore I am also open to a way of solving my problem not using Flexbox
.container {
width:100%;
height:1000px;
display:flex;
}
.l0 {
width: 249px;
flex: 0 0 249px;
height:100%;
overflow:auto;
}
.c0 {
width:100%;
height:100%;
}
.r0 {
width: 249px;
flex: 0 0 249px;
height:100%;
overflow:auto;
color:white;
}
img {
max-width:100%;
}
#mid {
display: flex;
justify-content: center;
align-items: center;
}
<div class="container">
<div class="l0">
<center>
text....
</center>
</div>
<div class="c0">
<img src="gifS.png" id="mid"> /* 1920x1080 img */
</div>
<div class="r0">
text....
</div>
</div>
The max-width: 100% on the img element causes the image to stop scaling at 100% size. Also, when the container shrinks, the image changes its width to fit the container, thereby reducing its height.
To solve this, set the width and height of the image so that it is always the same size as the container, and adjust the display method of the image by applying the object-fit property as appropriate.
#mid {
width: 100%; /* add */
height: 100%; /* add */
object-fit: cover; /* add */
}
#font-face {
font-family: Open-sans;
src: url(OpenSans-Light.ttf);
}
body {
font-family: Open-sans;
background-color: grey;
background-repeat: repeat-y;
background-size: 100%;
}
.container {
width: 100%;
height: 1000px;
display: flex;
}
.l0 {
width: 249px;
flex: 0 0 249px;
height: 100%;
overflow: auto;
}
.c0 {
width: 100%;
height: 100%;
}
.r0 {
width: 249px;
flex: 0 0 249px;
height: 100%;
overflow: auto;
color: white;
}
img {
max-width: 100%;
}
#mid {
display: flex;
justify-content: center;
align-items: center;
width: 100%; /* add */
height: 100%; /* add */
object-fit: cover; /* add */
}
<div class="container">
<div class="l0">
<center>
Όποιος θεός κι αν είναι <br> έδωσε δώρο μητέρα γη<br>
<br> το τιμάς το δώρο τούτο <br> αν άξιος πάνω της περιπατείς <br>
<br> αν όλους εδώ μας θέλησε,<br> πνοή ζωής μας έδωσε,<br>
<br> αναπνοή, ολόκληρη μισή<br>
<br> ύδωρ και γη μελέτησε,<br> τη φύση παράδειγμα και δώρο, <br>
<br> ένα τραγούδι άφησε,<br> μια μελωδία ολόγυρα, <br>
<br> τα λόγια η φύση τραγουδά, <br> τα τραγουδά εις άπειρο, <br>
<br> είναι γραμμένα εδώ, <br> είναι το δείγμα ολόγυρα, <br>
<br> και σαν μην έφτανε αυτό,<br> έδωσε κι άλλο δώρο<br>
<br> μια σκέψη, πλασμένη <br> από αγάπη, ολόκληρη μισή <br>
<br> αν υπάρχουν, καλύτερα από τούτα<br> πες μου αν μπορείς,<br>
<br><br> θυμήσου μόνο,<br>
<br> πνοή ζωής έπήρες δώρο,<br> αγάπη, ολόκληρη μισή.<br>
<br> και εμείς ;<br>
<br> μην είμαστε <br> Αδέλφια, πατέρες, μητέρες,<br> παιδιά όλοι, των ίδιων <br> εμείς ;<br>
<br> οικογένεια μια, να λέγαμε <br> μια στέγη, μαζί <br>
<br> ένα να είμαστε <br> παιδιού μικρού, ψυχή <br>
<br> ο κόσμος παράδεισος ένας, <br> όμορφος από ότι έχουμε φανταστεί<br>
<br> μη λόγο να βάλουμε <br> όρκο να πάρουμε, <br>
<br> εμείς ;<br>
<br> μοναχά καλό να υπάρχει <br> να ζηλεύουν τα όνειρα κάθε στιγμή<br>
<br> μπουκέτα λουλούδια <br> μες τη καρδιά μας <br> ερωτευμένοι κάθε στιγμή <br>
<br> μη λόγο να πράτταμε <br> σκέψη και αγάπη να βάζαμε, <br>
<br> εμείς ;<br>
<br> όρκο θα πάρουμε μητέρα γη<br>
<br>
</center>
</div>
<div class="c0">
<img src="https://via.placeholder.com/500x1000/ffffff/888888/500x1000.png" id="mid">
</div>
<div class="r0">
<center>
He who has a Why to live can bear almost any how.<br>
</center>
scriver: -Friedrich Wilhelm Nietzsche<br>
<center>
<br> *
<br>
<br> He who can properly define and divide <br> is to be considered a god
<br>
</center>
scriver: Plato
<center>
<br> *
<br>
<br> Before cure someone, <br> (mentally or physically) ask him if <br> he is willing to let go all those things <br> that make him sick <br>
</center>
-Hippocrates <br>
<center>
<br> *
<br>
<br> A work of art is the unique <br> result of a unique temperament. <br> Its beauty comes from the fact that <br> the author is what he is. <br> It has nothing to do with the fact <br> that other people want what they want.<br>
</center>
-Oscar Wilde<br>
<center>
<br> Happy is the man that findeth wisdom, <br> and the man that getteth understanding.<br>
<br>
</center>
scriver: -Proverbs <br>
<center>
<br>
<br> Ask yourself what is really important <br> and then have the courage <br> to build your life around your answer.<br>
<br>
</center>
scriver: unknown <br>
<center>
<br>
<br> Know thyself.<br>
<br>
</center>
scriver: Socrates<br>
<center>
<br>
<br> Integrity is doing the right thing <br> even when no one is watching. <br>
<br>
</center>
scriver: C.S. Lewis<br>
<center>
<br>
<br> If a movement is to have an impact, <br> it must belong to those who join it, <br> not only those who lead it. <br>
</center>
scriver: -Simon Sinek<br>
<center>
<br>
<br> It is the individual who is not interested <br> in his fellow ,men, <br> who has the greatest difficulties in life and <br> provides the greatest injury to others. <br> It is from among such individuals <br> that all humans failures spring.<br>
<br>
</center>
scriver: Alfred Adler<br>
<center>
<br>
<br> The more diverse the plant foods we eat <br> the more diverse our gut microbiome becomes <br> and the more abundant our health is.<br>
<br>
</center>
scriver: Dr. Will Cole<br>
<center>
<br>
<br> He who can properly define <br> and divide is to be considered a god<br>
<br>
</center>
scriver: Plato <br>
<center>
<br>
<br> The moment you change your perception, <br> is the moment you rewrite the chemistry of your body.<br>
<br>
<br> Love is a gift to be used every day,<br> Not be smothered and hidden away. <br> Love is not a thing to be stored <br> in the chest where you gather your keepsakes, <br> And treasure your best. <br> Love is a gift to be used every day.<br>
<br>
</center>
scriver: Norah Perkins<br>
<center>
<br>
<br> Before you cure someone, <br> ask him if he is willing to let go <br> all those things that make him sick.<br>
<br>
</center>
scriver: - Hippocrates <br>
<br>
</div>
</div>
As you can see, I set the alignment to right and put a border to see what is wrong with it. I need to put it in full right
this is the HTML code:
<div class="lol">
<span style="font-size:15px; border: 5px solid red;"> نحن مؤسسة رفيد السعودية, نفيد بأن المذكور أعلاه يعمل لدينا بوظيفة -----------, و ليس لدينا مانع من إيجاره شقة سكنية. ونرجو منكم التعاون معه وتيسير أموره حيث ان اجراءات الاستقدام لعائلته تحت الاجراء . و لقد اصدرنا هذا الخطاب بناء على طلبه و دون ادنى مسؤولية على المؤسسة.
</span><br><br>
</div>
this is the CSS:
div.lol {
text-align: right;
}
Try setting direction to rtl. Alignment is not the same as direction. When you want to output Arabic you have to set the direction to rtl, otherwise the text will be right aligned but the position of commas and other punctuation characters won't be correct.
div.lol {
direction: rtl;
text-align: right;
}