Problematic transition from "left to right" to "right to left" in HTML -
i have following html code, in language written , readable left right, english language :
<!doctype html> <html> <head> <title>title</title> <link rel="stylesheet" type="text/css" href="site.css"> <meta charset="utf-8"> <link rel="shortcut icon" href="favicon.ico" /> </head> <body> <div id="page"> <div id="banner"></div> <div id="tagline">blah blah blah</div> <div id="menu"> <div id="innermenu"> <div class="menuitem activeitem"><a href="somepage1.html">blah</a></div> <div class="menuitem"><a href="somepage2.html">blah</a></div> <div class="menuitem"><a href="somepage3.html">blah</a></div> <div class="menuitem"><a href="somepage4.html">blah</a></div> <div class="menuitem"><a href="somepage5.html">blah</a></div> <div class="menuitem"><a href="somepage6.html">blah</a></div> </div> </div> <div id="main"> <div id="languagebar" class="mainelement"> <a href="somepage1.html"><img src="french.png" alt="french" height="4" width="6" id="french" class="flag" /></a> <a href="somepage1.html"><img src="english.png" alt="english" height="4" width="6" id="english" class="flag" /></a> </div> <div id="content" class="mainelement"> <h1>blah</h1> <p>blah blah blah</p> <h1>blah</h1> <p>blah blah blah</p> <h1>blah</h1> <p>blah blah blah</p> </div> </div> <div id="footer">blah blah blah</div> </div> </body> </html> that have translate "right left" language. putting aside blah's translations, first did following thing : added after first line following line :
<html dir="rtl" lang="xx"> where xx 2 letter html denomination of right left language. added intended behaviour : language bar indeed on right, , mainelement "table" @ left, blah's translations long, eated langage bar. tried else : removed the
<html dir="rtl" lang="xx"> line , did following : replaced all
<h1>...</h1> and
<p>...</p> from mainelement respectively
<h1><blockquote dir="rtl" lang="xx">...</blockquote></h1> and
<p><blockquote dir="rtl" lang="xx">...</blockquote></p> which put text right left nicely, , wanted manage setting language bar @ right , mainelement @ left, without success. doing wrong ?
edit
the css code following
body { background-color: #aaaaaa; margin: 0px; } #page { margin: auto; width: 940px; background-color: #95bfca; background-image: linear-gradient(left top, rgb(208,226,231) 0%, rgb(0,102,128) 80%); background-image: -o-linear-gradient(left top, rgb(208,226,231) 0%, rgb(0,102,128) 80%); background-image: -moz-linear-gradient(left top, rgb(208,226,231) 0%, rgb(0,102,128) 80%); background-image: -webkit-linear-gradient(left top, rgb(208,226,231) 0%, rgb(0,102,128) 80%); background-image: -ms-linear-gradient(left top, rgb(208,226,231) 0%, rgb(0,102,128) 80%); filter: progid:dximagetransform.microsoft.gradient( startcolorstr='#d0e2e7', endcolorstr='#006680', gradienttype=0 ); } #banner { margin: auto; width: 936px; height: 122px; background-image: url("banner.jpg"); } #tagline { margin: 10px; padding: 10px; border: 2px solid #783201; font: italic 22px calibri, sans-serif; text-align: center; background-color: #fff5db; } #main { padding: 20px 15px; overflow: hidden; position: relative; } .mainelement { background-color: #fff5db; border: 2px solid #783201; padding: 10px; } #main h1 { margin: 20px 0px; font-weight: bold; font-style: italic; font-family: calibri, sans-serif; font-size: 15px; } #main div p, #main div li { font: 15px calibri, sans-serif; } #main { font: 15px calibri, sans-serif; color: #783201; } #main .expandable { text-align: center; padding-left: 5px; background-image: url("expand.png"); background-repeat: no-repeat; background-position: left center; } .underline { text-decoration: underline; } .italic { font-style: italic; } .inlineh1 { font: italic bold 15px calibri, sans-serif; } #languagebar { margin: 20px 15px; width: 100px; float: left; position: absolute; top: 0; bottom: 0; left: 0; right: 0; } .flag { margin: 5px; border: none; } #french { background-image: url("french.png"); float: left; } #english { background-image: url("english.png"); float: right; } #content { width: 700px; float: right; } #footer { margin: auto; font: 12px calibri, sans-serif; color: #ffffff; text-align: center; } #footer { font: 12px calibri, sans-serif; color: #ffffff; } /*** menu ***/ #menu { background-color: #783201; border-top: 3px solid #783201; border-bottom: 3px solid #783201; } #innermenu { border-top: 1px solid #ffffff; border-bottom: 1px solid #ffffff; overflow: hidden; } .menuitem { float: left; margin: 5px 33px; padding-bottom: 10px; background-image: url("menutwiddle.png"); background-repeat: no-repeat; background-position: center bottom; } .menuitem { font: 18px calibri, sans-serif; color: #ffffff; text-decoration: none; } .activeitem { background: url('menu-line.png') repeat-x bottom left; position: relative; } .activeitem:before { position: absolute; top: 0; left: -6px; bottom: 0; width: 6px; content: ' '; background: url('menu-ball.png') no-repeat bottom left; } .activeitem:after { position: absolute; top: 0; right: -6px; bottom: 0; width: 6px; content: ' '; background: url('menu-ball.png') no-repeat bottom left; } /*** form ***/ input[type=text], textarea { border: 1px solid #783201; } input[type=submit] { padding: 5px 15px; background: #783201; border-radius: 5px 5px; color: #fff; border: 0; box-shadow: 1px 1px 2px #888; } input[type=submit]:active { box-shadow: 0 0 0 #fff; }
you should wrap text, contains rtl lang inside 1 div, , assign dir='rtl' it.
afterwards can use following selector add custom styles:
html[dir="rtl"] { /* css */ } if using margin or padding these kind of attributes automatically flipped:
margin: 15px 10px 5px 20px; /* turns */ margin: 20px 5px 10px 15px; you find lot of information inside w3.org tutorials right left sites.
Comments
Post a Comment