פורסם 2011 ביולי 1414 שנים שלום רבאני רוצה להשתמש בתבנית קיימת הבנוייה על HTML CSSולהפוך אותה לידידותית לשפות מימין לשמאל לצורך העניין עבריתמישהו רק יכול לרמוז לי, איפה בCSS או בHTML או בשניהם אני מוסיף את הפקודהdirection:rtlיש פקודה אחת שתעשה את העבודה לכל התבנית או כל עצם צריך פקודה משלו?להלן קוד HTML<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "[url]http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">[/url]<html xmlns="[url]http://www.w3.org/1999/xhtml">[/url]<head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>Free Facebook iFrame Template #4 - Computer Store</title><link href="css/styles.css" rel="stylesheet" type="text/css" /></head><body><!-- begin #container --><div id="container"> <!-- begin #header --> <div id="header"> <div class="logo"> <a href=""><img src="images/logo.png" alt="logo" /></a> </div> <div class="likeButtonContainer"> <div class="likeButton"><a href=""><img src="images/likeButton.png" alt="" /></a></div> <div class="fan">BECOME OUR FAN!</div> </div> <div class="clearer"></div> </div> <!-- end #header --> <!-- begin #mainContent --> <div id="mainContent"> <div class="welcomePic"> <div class="price">$1499.00</div> <div class="shopNowButton"><a href=""><img src="images/shopNowButton.png" alt="" /></a></div> <div class="icons"> <ul> <li><a href=""><img src="images/feed.png" alt="" /></a></li> <li><a href=""><img src="images/facebook.png" alt="" /></a></li> <li><a href=""><img src="images/digg.png" alt="" /></a></li> <li><a href=""><img src="images/delicious.png" alt="" /></a></li> <li><a href=""><img src="images/youtube.png" alt="" /></a></li> <li><a href=""><img src="images/twitter.png" alt="" /></a></li> <li><a href=""><img src="images/flickr.png" alt="" /></a></li> </ul> </div> </div> <div class="sidebar"> <div class="sidebarTitleContainer"> <div class="sidebarTitle">CATEGORIES</div> </div> <div class="sidebarBody"> <ul> <li><a href="">Accessories</a></li> <li><a href="">Cases</a></li> <li><a href="">CD / DVD Drives</a></li> <li><a href="">Clearance</a></li> <li><a href="">Controller Cards</a></li> <li><a href="">CPUs (Processors)</a></li> <li><a href="">Drive Enclosures</a></li> <li><a href="">Fans (Cooling)</a></li> <li><a href="">Floppy Drives</a></li> </ul> </div> <div class="sidebarFooter"></div> </div> <div> <div class="pcBox"> <div class="pcBoxTitleContainer"><div class="pcBoxTitle">VAIO C SERIES</div></div> <div class="pcBoxBody"><img src="images/pc1.jpg" alt="" /></div> <div class="pcBoxFooter"><a href="">See more...</a></div> </div> <div class="pcBox"> <div class="pcBoxTitleContainer"><div class="pcBoxTitle">VAIO E SERIES</div></div> <div class="pcBoxBody"><img src="images/pc2.jpg" alt="" /></div> <div class="pcBoxFooter"><a href="">See more...</a></div> </div> <div class="pcBox"> <div class="pcBoxTitleContainer"><div class="pcBoxTitle">VAIO F SERIES</div></div> <div class="pcBoxBody"><img src="images/pc3.jpg" alt="" /></div> <div class="pcBoxFooter"><a href="">See more...</a></div> </div> <div class="pcBox"> <div class="pcBoxTitleContainer"><div class="pcBoxTitle">VAIO S SERIES</div></div> <div class="pcBoxBody"><img src="images/pc4.jpg" alt="" /></div> <div class="pcBoxFooter"><a href="">See more...</a></div> </div> </div> <div class="clearer"></div> <div class="welcome"> <h1>Welcome</h1> <p> Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna<br /><br /> Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna </p> </div> </div> <!-- end #mainContent --> <!-- begin #footer --> <div id="footer"> <p> Copyright © 2011 Computer Store. Designed by <a href="[url]http://www.facebook-iframe-templates.com"[/url] title="Facebook Iframe Templates">Facebook Iframe Templates</a> | <a title="This page validates as XHTML 1.0 Strict" href="[url]http://validator.w3.org/check/referer"[/url] class="footerLink"><abbr title="eXtensible HyperText Markup Language">XHTML</abbr></a> | <a title="This page validates as CSS" href="[url]http://jigsaw.w3.org/css-validator/check/referer"[/url] class="footerLink"><abbr title="Cascading Style Sheets">CSS</abbr></a> </p> </div> <!-- end #footer --></div><!-- end #container --></body></html>קוד CSS* { margin:0; padding:0;}body { font-family:Arial, Helvetica, sans-serif; color: #2d2d2d; font-size:12px;}h1 { color:#97c732; padding:10px 0;}img { border:0;}#container { width: 520px; background: #ffffff; margin: 0 auto; }#header { padding:30px 40px 30px 40px; background:#2d2d2d;}.logo { float:left;}.price { color:#ff871a; font-size:30px; padding:240px 0 20px 0;}.shopNowButton { float:left;}.icons { float:right; padding:20px 0;}.icons ul { margin:0; padding:0;}.icons li { list-style:none; display:inline;}.likeButtonContainer { float:right; padding:15px 0 0 0;}.likeButton { float:left; padding:0 5px 0 0;}.fan { width:130px; font-size:11px; color:#FFFFFF;}#mainContent { padding:0 40px; background:url(../images/mainContainerBackground.jpg) repeat-y left top;}.welcomePic { background:url(../images/pcBackground.jpg) no-repeat left 10px; height:339px; padding:20px 0;}.welcome { padding:20px 0 20px 0;}.sidebar { float:left; width:168px;}.sidebarTitleContainer { background:url(../images/sidebarTitle.jpg) no-repeat left top; width:168px; height:45px;}.sidebarTitle { color:#ffffff; font-weight:bold; padding:10px 0 0 10px; font-size:18px;}.sidebarBody { background:url(../images/sidebarBody.jpg) repeat-y left top;}.sidebarBody ul { margin:0; padding:0;}.sidebarBody li { color:#FFFFFF; border-bottom:1px dotted #4c6d06; list-style:none; background:url(../images/p.png) no-repeat 10px 10px; padding:5px 0 6px 20px;}.sidebarBody li a { color:#FFFFFF; text-decoration:none;}.sidebarBody li a:hover { color:#4c6d06; text-decoration:none;}.sidebarFooter { background:url(../images/sidebarFooter.jpg) no-repeat left top; height:24px;}.pcBox { float:left; width:129px; text-align:center; padding:3px;}.pcBoxTitleContainer { background:url(../images/headerBox.jpg) no-repeat left top; height:28px;}.pcBoxTitle { padding:5px 0 0 0; font-weight:bold;}.pcBoxBody { background:url(../images/bodyBox.jpg) repeat-y left top;}.pcBoxFooter { background:url(../images/footerBox.jpg) no-repeat left top; height:28px; padding:5px 0 0 0;}.pcBoxFooter a { color:#FFFFFF;}#footer { height:77px; background:url(../images/footerBackground.jpg) repeat-x left top; color:#2d2d2d; font-size:12px; text-align:center;}#footer p { padding:30px 0 0 0; font-size:11px;}#footer a { color:#2378b9; text-decoration:underline; font-size:11px;}#footer a:hover { color:#2378b9; text-decoration:none; font-size:11px;}.clearer { clear:both;}תודה לעוזרים
פורסם 2011 ביולי 1414 שנים direction: rtl אתה יכול להוסיף רק על ה-body וזה יתפוס לכל הדף אבל בשביל באמת להפוך תבנית כמו שצריך זה לא מספיק. אתה צריך לעבור על כל ה-css ולהחליף את הכיוון של כל שאר הדברים. float:right צריך להפוך ל-left ולהפך, margin, padding הכל צריך להתחלף.
פורסם 2011 ביולי 1514 שנים מחבר ואל תשכח background-positionחברה תודה על העזרהאיפה להוסיף את זה?בHTML או בCSS???
פורסם 2011 ביולי 1514 שנים השאלה שלך קצת לא נכונה. זו הגדרת CSS. בין אם אתה שם אותה ב"HTML" ובין אם אתה שם אותה ב"CSS" (כנראה כוונתך לקובץ CSS חיצוני). הדרך הכי קונקרטית וכוללת היא לשים RTL בתגית ה-BODY שלך. זה יהפוך כל אלמנט באתר שלך ל"ימני" כל עוד לא הוגדר לו אחרת. זה מתקשר למה שאמרו לפני - אז את תראה את כל האלמנטים שהוגדרו אחרת ותצטרך לעבור עליהם ולשנות אותו בהתאם. במידה ויהיו דברים שלא מסתדרים - אתה מתחיל לבודד אותם ולראות מה מפריע להם . *יש שיעדיפו לעבוד הפוך - לגרוס לגמרי את הCSS באתר ולהתחיל אותו חדש כפי רצונך. יש מקרים שבניגוד למצופה זה דווקא לוקח פחות זמן מהאופציה הראשונה. את עבודת הנמלים אני ברשותך אשאיר לך זו גם הדרך היחידה שלך ללמוד.
ארכיון
דיון זה הועבר לארכיון ולא ניתן להוסיף בו תגובות חדשות.