הוספת קוד שיהפוך תבנית ל-RTL - תכנות - HWzone פורומים
עבור לתוכן
  • צור חשבון

הוספת קוד שיהפוך תבנית ל-RTL

shaithebest

נוצר על ידי shaithebest
ב תכנות

Recommended Posts

shaithebest Zone Freak

shaithebest

פורסם
פורסם

שלום רב

אני רוצה להשתמש בתבנית קיימת הבנוייה על 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 /  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;
}

תודה לעוזרים

קישור לתוכן
שתף באתרים אחרים
etal Zone Master

etal

פורסם
פורסם

direction: rtl אתה יכול להוסיף רק על ה-body וזה יתפוס לכל הדף אבל בשביל באמת להפוך תבנית כמו שצריך זה לא מספיק. אתה צריך לעבור על כל ה-css ולהחליף את הכיוון של כל שאר הדברים. float:right צריך להפוך ל-left ולהפך, margin, padding הכל צריך להתחלף.

קישור לתוכן
שתף באתרים אחרים
shimmi1982 Zone Freak

shimmi1982

פורסם
פורסם

השאלה שלך קצת לא נכונה.

זו הגדרת CSS. בין אם אתה שם אותה ב"HTML" ובין אם אתה שם אותה ב"CSS" (כנראה כוונתך לקובץ CSS חיצוני).

הדרך הכי קונקרטית וכוללת היא לשים RTL בתגית ה-BODY שלך. זה יהפוך כל אלמנט באתר שלך ל"ימני" כל עוד לא הוגדר לו אחרת.

זה מתקשר למה שאמרו לפני - אז את תראה את כל האלמנטים שהוגדרו אחרת ותצטרך לעבור עליהם ולשנות אותו בהתאם.

במידה ויהיו דברים שלא מסתדרים - אתה מתחיל לבודד אותם ולראות מה מפריע להם .

*יש שיעדיפו לעבוד הפוך - לגרוס לגמרי את הCSS באתר ולהתחיל אותו חדש כפי רצונך. יש מקרים שבניגוד למצופה זה דווקא לוקח פחות זמן מהאופציה הראשונה.

את עבודת הנמלים אני ברשותך אשאיר לך :) זו גם הדרך היחידה שלך ללמוד.

קישור לתוכן
שתף באתרים אחרים

ארכיון

דיון זה הועבר לארכיון ולא ניתן להוסיף בו תגובות חדשות.

עבור לרשימת הדיונים
×
  • צור חדש...