...

View Full Version : Right to left modifications



gimano
02-12-2012, 08:20 PM
hello.

does anyone have a clue how can i make those to lists (ul li tags) on the sides be right to left?

http://www.nirasnaturalway.com

Tried to inspect it with firebug, and add direction:rtl to the code in many different places, but nothing works.

Any ideas?

Thanks!

Excavator
02-12-2012, 08:32 PM
Hello gimano,
To start with, you've copy/pasted the same error all over your CSS. "
direction:rtl !importnant;" should be

direction:rtl !important;

gimano
02-12-2012, 08:43 PM
thanks!
i fixed that, but still, the lists are still not rtl.....

Excavator
02-12-2012, 10:03 PM
In this demo, switch the direction back and forth from rtl to ltr to see the difference it makes -
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
html, body {
margin: 0;
background: #fc6;
direction: rtl;
}
#container {
width: 800px;
margin: 30px auto;
background: #999;
overflow: auto;
}
html, body {
margin: 0;
background: #fc6;
}
#container {
width: 800px;
margin: 30px auto;
background: #999;
overflow: auto;
}
ul {
width: 400px;
margin: 20px auto;
background: #ccc;
}

</style>
</head>
<body>
<div id="container">
<ul>
<li><a href="#">some words in english</a></li>
<li><a href="#">חיים מתוקים ללא סוכר</a></li>
<li><a href="#">כדורי חלבה</a></li>
<li><a href="#">רו פוד סגולות ונפלאות</a></li>
<li><a href="#">התזונה הטבעית</a></li>
</ul>
<p>
with a lost ship, the USS Cygnus, just outside its event horizon. Deciding to solve the mystery of the Cygnus are:
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna
aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no
sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam
nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo
duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
</p>
<!--end container--></div>
</body>
</html>

In the code you're working with online, make this one change in your green.css (highlighted in red) and see what happens when you switch rtl to ltr -
ul.mostread li{
/*list-style:none;*/
background:url(../images/green/menu_arrow.gif) top left no-repeat;
}

No DocType I tried reverses the text like you might think the direction property would...it seems to do nothing different than text-align right/left.

Found this - http://reference.sitepoint.com/css/direction that talks about unicode-bidi

Add this bit of CSS to my code snippet above and see what happens -
p{
direction: rtl;
unicode-bidi: bidi-override;
}

gimano
02-13-2012, 07:31 PM
got it, thanks!



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum