I have some legacy html markup and I need to enable Arabic language support.
So, I have a list of news headlines and render them in <li> elements.
Here is sode:
..
<li>
<a>some Arabic text</a>
<em>news datetime</em>
</li>
..
So, I need to apply rigth text-alignment and direction rtl for anchor, but not for datetime.
I applied text aligment for <li> element and everything is fine.
But I need to apply "direction: rtl" style to anchor and here goes my problem.
I've tried to create <div> element with rtl direction attribute and put anchor into it. This works fine in chrome, but I need to support IE6+
Also I've tried to apply direction attribute to <li> and override this attr in <em>, but this doesn't work.
Any suggestions?
Thanks in advance,
Vitali.
li {direction:rtl}
em {direction:ltr; float:left}
if em is out of li
<ul dir="rtl">
<li>العربية</li>
<em>11/24/2011</em>
<li>العربية</li>
<em>11/24/2011</em>
<li>العربية</li>
<em>11/24/2011</em>
<li>العربية</li>
<em>11/24/2011</em>
</ul>
if u need em inside div
<style>
ul { direction:rtl; } ul li em{direction:ltr;} /* em{direction:ltr; float:left;} */
</style>
<ul>
<li>العربية
<em>11/24/2011</em>
</li>
<li>العربية
<em>11/24/2011</em>
</li>
<li>العربية
<em>11/24/2011</em>
</li>
</ul>
if your arabic script contain english words
<style>
ul { direction:rtl; } ul li{ direction:rtl; } ul li em{direction:ltr;} /* em{direction:ltr; float:left;} */
</style>
Related
Please see below:
<span class="caption">
{block:Caption}<p>{Caption}</p><hr>{/block:Caption}
</span>
The Caption block will contain text, part of which is a link. How do I create CSS that will underline the link within the "caption" span only?
First of all - you can't have inline element around block element.
Than just do a{text-decoration: none;} .caption a{text-decoration: underline}
there is also the :not() selector to filter tags to select:
example with links and valid HTML:
li:not(.nop) a {
text-decoration:none;
}
<nav>
<ul>
<li>Lorem</li>
<li class="nop">Do not touch my underline defaut </li>
<li>Morbi</li>
<li>Praesent</li>
<li>Pellentesque</li>
</ul>
</nav>
Try jQuery:
$(document).find('span.caption').each(function(){
$(this).css('text-decoration','underline');
})
Fiddle here: https://jsfiddle.net/qq4j5uz2/
If i understand correctly it would be something like this:
.caption a{
text-decoration: underline;
}
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<ul>
<li>Interests
<ol>
<li style="color: orange">Basketball</li>
<li>Coding</li>
<li>Weight Lifting</li>
</ol>
</li>
<li>Jobs
<ul>
<li>Tutor</li>
<li>Salon Associate</li>
</ul>
</li>
</body>
</html>
How can I modify "Interests" (e.g. change its font color) without also modifying the ordered list it is a title of?
No classes or wrapping required here:
Demo: http://jsfiddle.net/abhitalks/jgbX7/
li { /* reset all list items */
color: black;
}
:not(li) > ul > li { /* all "li" under "ul" which are not under "li" */
color: red;
}
But, of course if you have multiple such lists, then providing a class to the top ul would help.
You can wrap Interests in a <span> tag and stylize it.
The part which changes :
<li><span style="color: red">Interests</span>
The full code :
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<ul>
<li><span style="color: red">Interests</span>
<ol>
<li style="color: orange">Basketball</li>
<li>Coding</li>
<li>Weight Lifting</li>
</ol>
</li>
<li>Jobs
<ul>
<li>Tutor</li>
<li>Salon Associate</li>
</ul>
</li>
</body>
</html>
fast and easy way is to put a <span> around it then you can apply any style
If you select the li containing the text and the other list with CSS and apply styles like color, this will apply to child elements too if not excluded explicitly.
Just wrap the text in another element:
<li><span>Interests</span>
<ol>
It’s valid and light-weight, and you can apply styles directly.
Also, your ul should be closed, and the title element must not be empty.
you can use inline css
suppose
<li><span style="color:blue;">Interests</span>
</li>
You should be able to give it a class, i.e.
<li class="bob">
Then:
li.bob
{
color: #C1C1C1;
}
li
{
color: black;
}
and then refer to that in your style section
Actual color style, just for reference - but you get the idea.
Pretty simple, but I can't figure it out.
I have a word followed by an <ul>. I made the unordered list have inline styling, but I want it to be on the same line as the word before it.
JSfiddle: http://jsfiddle.net/fm74R/4/
Use this template to make it look like: "Tags: funny unique Add a tag to the post"
Thanks!
Working Fiddle
ul{
display:inline-block;
padding:0;
}
Best way to do this is give everything an inline form of display.
HTML:
Tags:
<ul style="list-style: none;">
<li>funny</li>
<li>unique</li>
<li>
Add a tag to the post
</li>
</ul>
CSS:
li {margin:0; padding:0;display:inline;}
ul {margin:0; padding:0; display:inline;}
http://jsfiddle.net/fm74R/10/
For my <ul> list, I would like to add a <hr> after each element of a list. The Result should render like:
<ul class="mylist">
<li>
moooo!
<hr width="40%">
</li>
<li>
maaaaa!
<hr width="40%">
</li>
...
</ul>
It is bad style adding <hr> to each <li> so I would like to refractor this using css only. I cannot use:
.mylist > li: after{
content: "<hr>"
}
as content would escape the characters.
I also do not want to use jQuery:
$('.mylist').find('li').append('<hr width="40%">');
So the question is, how could I append <hr width="40%"> to each <li> of a certain list using css3 ?
jQuery Solution
Just realized that you wanted to nest the hr element inside the li before you close it, yes it's perfectly valid, so simply use append(), and note, you cannot do this using CSS only, as you cannot modify DOM using CSS, you need to use jQuery or JS
jQuery("ul li").append("<hr />");
Demo
CSS Solution
If you don't need an extra element, or you don't want a jQuery solution(As you want)
Using hr element as a direct child to ul element is not a valid markup, instead, you can use a border-bottom for each li which will behave same as hr does, still if you want an explicit way to do so, say for controlling the width of the separator without changing the width of li than you can do it like this
Demo
ul li:after {
content: "";
display: block;
height: 1px;
width: 40%;
margin: 10px;
background: #f00;
}
Here, am just creating a virtual block level element, which doesn't actually exists in the DOM, but it will just do the thing which you need. You can just design the element, the same way you style a normal div. You can also use border on this but to keep the thin line horizontally centered, I've assigned height: 1px; and than am using margin to space up.
I think it's better to use CSS for this. for example you can stop using <hr> tag, instead do something like:
<ul class="mylist">
<li>
moooo!
</li>
<li>
maaaaa!
</li>
...
</ul>
and then with CSS:
.mylist li { border-bottom: 1px solid black; }
There are other options too, for example if you want to show the horizontal line only for some list items, you can give them a class and add a CSS rule only for that class. like this:
<ul class="mylist">
<li class="hr">
moooo!
</li>
<li>
maaaaa!
</li>
...
</ul>
and CSS:
.mylist li.hr { border-bottom: 1px solid black; }
You can use like this:
<ul>
<li></li>
</ul>
<hr/>
Thats simple. If you have nested ul and li then you use li instead of <hr/> or simply <hr/> inside a <li></li> tag. See below. Its purely your choice.
<ul>
<li>
<ul><li></li></ul>
</li>
<li style="height:1px;border:solid 1px #666"> </li> // or you can also use
<li><hr/></li>
<li>
<ul>
<li></li>
</ul>
</li>
</ul>
Tags in content are not allowed and even if it would be very misleading (css { content: "text"}, How do i add tags?)
If you think is wrong to add <hr> in HTML than it is wrong adding with css (if it would be possible) or js. IMHO a first You should try to use border of <li> if result won't be as expected add that <hr>
Insert A Class That Creates A bottom-border: For Each <li>
<!--########## STYLE EACH li USING CLASS ##########-->
<style>
.hr {
width:40%;
border-bottom:1px solid rgba(0,0,0,.7);
}
</style>
<!--########### PAGE CONTENT ############-->
<ul class="mylist">
<li class="hr">
-CONTENT-
</li>
<li class="hr">
-CONTENT-
</li>
...
Try this CSS:
li:after {
content: " ";
display: block;
height: 2px;
width: 100%;
}
How can I style one line of text in u nav bar with two different font sizes??
In my html I have:
<nav>
<ul>
<li><a heref="#">Home</a></li>
<li><a heref="#">About</a></li>
<li><a heref="#">Products</a></li>
<li><a heref="#">Stockists</a></li>
<li><a heref="#">Blog <em>(a pinch of psalt)</em></a></li>
<li><a heref="#">Contact</a></li>
</ul>
</nav>
Where I have
<li><a heref="#">Blog <em>(a pinch of psalt)</em></a></li>
I want Blog to be 35px and (a pinch of psalt) to be say 15px. I have used child selectors to target each of the nav elements to style for colour, font size etc but am unsure of how to target two separate elements on this one line in my css.
Just .nav ul li a and .nav ul li a em . If this is what you are looking for
Add a <span> to your HTML and give it a class which will allow you to target it with CSS. For example:
<li><a heref="#"><span class="big">Blog</span> <em>(a pinch of psalt)</em></a></li>
And CSS:
nav li .big {
font-size: 35px;
}
You already have an <em> tag around the remaining text (or you can target nav li a with a "default" text size), so that's the only HTML you will need to add. Just keep in mind that you should be consistent.
On another note.
Answer to my google search for other non situations.
The below CSS class definition
font.yellow {
color:yellow
}
works seamlessly when used like:
<p class"blue">
blue text here
<font class="yellow">yellow text</font>
still blue text here
</p>